Comments (5)
PavelLaptev
commented on May 30, 2024
2
Thank you @JeroenRoodIHS
I merged the PR 🙂
I'll work on other text props soon
from figma-plugin.
JeroenRoodIHS
commented on May 30, 2024
I've created a PR for at least textDecoration and textCase, as I am not sure about the desirability of the other mentioned properties. I thought: let's stay on the safe side of things.
from figma-plugin.
JeroenRoodIHS
commented on May 30, 2024
Mind you, I discovered that fontWeights could be more versatile. Some names, as derived from Google Fonts, are not supported. Examples:
semiBold, in addition tosemi-bold,extraLight, in addition toextra-light.
I changed this in /src/utils/text/getFontWeight.ts, which an additional change to the change for supporting textDecoration and textCase.
More details can be found in the update for getFontWeight.ts: 40bbd24
from figma-plugin.
JeroenRoodIHS
commented on May 30, 2024
Thanks! I just realized that I wasn't careful enough with the font weights. I made two oversights. My sincere apologies.
Invalid inputFontWeight heuristics
const inputFontWeight = fontWeight.toLowerCase() -- inputFontWeight returns a weight keyword that is currently not supported in the font weight mapping (it relies on specific casings, and there is no lowercase mapping)
Missing heuristics for mapping all kinds of font weight variations
The font-weights with extra-, semi- or ultra- are occuring with various casings and either with or without dashes.
Example:
semiBold
SemiBold
semibold (?)
Semibold (?)
semi-bold
Semi-Bold (?)
Semi-bold (?)
I know it is probably an impossible effort to map all possible fontWeight keywords used for any font out there. But maybe we can use the mapping as defined on MDN, and apply the casing/dash heuristics on top of that:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
Something along the lines of:
const inputFontWeight = fontWeight.toLowerCase().replaceAll(/[-_.]/gi,"");.
This suggestion seems to work, after some tweaking of getFontWeight(). Is it okay if I make the change?
The function would look like this:
function getFontWeight(fontWeight){
const inputFontWeight = fontWeight.toLowerCase().replaceAll(/[-_.]/gi,"");
const weights = {
100 : ["thin", "hairline", "100"],
200 : ["extralight","ultralight", "200"],
300 : ["light", "300"],
400 : ["normal", "regular", "book", "400"],
500 : ["medium", "500"],
600 : ["semibold", "demibold", "600"],
700 : ["bold", "700"],
800 : ["ultrabold", "extrabold", "800"],
900 : ["black", "heavy", "900"],
950 : ["extrablack", "ultrablack", "950"]
}
return Object.keys(weights).find(weight => weights[weight].includes(inputFontWeight)) || 400;
}
This is how I tested it:
[
"thin",
"Thin",
"hairline",
"Hairline",
"hairLine",
"HairLine",
"hair-line",
"Hair-line",
"hair-Line",
"Hair-Line",
"extralight",
"ExtraLight",
"extraLight",
"Extralight",
"extra-light",
"Extra-Light",
"extra-Light",
"Extra-light",
"ultralight",
"UltraLight",
"ultraLight",
"Ultralight",
"ultra-light",
"Ultra-Light",
"ultra-Light",
"Ultra-light",
"light",
"Light",
"normal",
"Normal",
"regular",
"Regular",
"book",
"Book",
"medium",
"Medium",
"semibold",
"SemiBold",
"semiBold",
"Semibold",
"semi-bold",
"Semi-Bold",
"semi-Bold",
"Semi-bold",
"demibold",
"DemiBold",
"demiBold",
"Demibold",
"demi-bold",
"Demi-Bold",
"demi-Bold",
"Demi-bold",
"bold",
"Bold",
"ultrabold",
"UltraBold",
"ultraBold",
"Ultrabold",
"ultra-bold",
"Ultra-Bold",
"ultra-Bold",
"Ultra-bold",
"extrabold",
"ExtraBold",
"extraBold",
"Extrabold",
"extra-bold",
"Extra-Bold",
"extra-Bold",
"Extra-bold",
"Black",
"black",
"Heavy",
"heavy",
"extrablack",
"ExtraBlack",
"Extrablack",
"extraBlack",
"extra-black",
"Extra-Black",
"Extra-black",
"extra-Black",
"ultrablack",
"UltraBlack",
"ultraBlack",
"Ultrablack",
"ultra-black",
"Ultra-Black",
"ultra-Black",
"Ultra-black",
].forEach(fontWeight => {
console.log(fontWeight+" = ",getFontWeight(fontWeight));
});
from figma-plugin.
JeroenRoodIHS
commented on May 30, 2024
Here's the PR for correcting the oversights: #20
from figma-plugin.
Related Issues (14)
- Reference tokens auto-referencing themselves in the exported JSON HOT 4
- Drop shadow effects: how to support multiple shadows in one effect? HOT 8
- $meta is not valid DTCG HOT 6
- Use of plugin within different teams and projects HOT 1
- Toggle token extensions on/off
- Select collections to push / export
- Effects key label is uppercase HOT 2
- Feature suggestion: Option to omit collection names as top-level groups HOT 3
- No value key in token schema HOT 11
- Alias resolution with Style Dictionary HOT 11
- Multi-tenant HOT 2
- Multiple collection and modes HOT 28
- Sorting variables HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from figma-plugin.