admin/webstudio
1
0 Fork 0
mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-09 22:14:29 +09:00
Code Issues Packages Projects Releases Wiki Activity

Figma tokens (#818)

Browse Source 
Renamed some styles to make it more clear which styles are brand styles
as opposed to builder styles. E.g. before the brand color styles were
distributed with the other color styles, now they are all under brand.
grouping. Also renamed the atomic typography tokens such as font-size so
they are in order (smallest value to highest value corresponds to first
to last in the array)
This commit is contained in:
markxtang authored and GitHub committed 2023-01-20 09:15:23 +03:00
1 parent 011257f0ab
commit 417ae2298b
2 files changed
+264 -176
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/design-system/src/__generated__/figma-design-tokens.json
Generated
+183 -125
View File
@@ -37,7 +37,7 @@
},
"lineHeights": {
"0": {
"value": "16",
"value": "AUTO",
"type": "lineHeights"
},
"1": {
@@ -49,11 +49,19 @@
"type": "lineHeights"
},
"3": {
"value": "AUTO",
"value": "11",
"type": "lineHeights"
},
"4": {
"value": "11",
"value": "12",
"type": "lineHeights"
},
"5": {
"value": "16",
"type": "lineHeights"
},
"6": {
"value": "120%",
"type": "lineHeights"
}
},
@@ -75,12 +83,16 @@
"type": "fontWeights"
},
"manrope-5": {
"value": "SemiBold",
"value": "Bold",
"type": "fontWeights"
},
"roboto-mono-3": {
"value": "Regular",
"type": "fontWeights"
},
"manrope-6": {
"value": "Regular",
"type": "fontWeights"
}
},
"fontSize": {
@@ -97,29 +109,37 @@
"type": "fontSizes"
},
"3": {
"value": "20",
"value": "16",
"type": "fontSizes"
},
"4": {
"value": "20",
"type": "fontSizes"
},
"5": {
"value": "32",
"type": "fontSizes"
},
"6": {
"value": "48",
"type": "fontSizes"
}
},
"letterSpacing": {
"0": {
"value": "0.5%",
"value": "-2%",
"type": "letterSpacing"
},
"1": {
"value": "1%",
"type": "letterSpacing"
},
"2": {
"value": "0%",
"type": "letterSpacing"
},
"2": {
"value": "0.5%",
"type": "letterSpacing"
},
"3": {
"value": "0",
"value": "1%",
"type": "letterSpacing"
}
},
@@ -133,9 +153,9 @@
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-0}",
"lineHeight": "{lineHeights.0}",
"lineHeight": "{lineHeights.5}",
"fontSize": "{fontSize.2}",
"letterSpacing": "{letterSpacing.0}",
"letterSpacing": "{letterSpacing.2}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
@@ -147,9 +167,9 @@
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.0}",
"lineHeight": "{lineHeights.5}",
"fontSize": "{fontSize.2}",
"letterSpacing": "{letterSpacing.0}",
"letterSpacing": "{letterSpacing.2}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.capitalize}",
@@ -161,9 +181,9 @@
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.0}",
"lineHeight": "{lineHeights.5}",
"fontSize": "{fontSize.2}",
"letterSpacing": "{letterSpacing.0}",
"letterSpacing": "{letterSpacing.2}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
@@ -175,37 +195,9 @@
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-2}",
"lineHeight": "{lineHeights.0}",
"lineHeight": "{lineHeights.5}",
"fontSize": "{fontSize.2}",
"letterSpacing": "{letterSpacing.1}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
"textDecoration": "{textDecoration.none}"
},
"type": "typography"
},
"Mono": {
"value": {
"fontFamily": "{fontFamilies.roboto-mono}",
"fontWeight": "{fontWeights.roboto-mono-3}",
"lineHeight": "{lineHeights.0}",
"fontSize": "{fontSize.2}",
"letterSpacing": "{letterSpacing.2}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
"textDecoration": "{textDecoration.none}"
},
"type": "typography"
},
"Big Title": {
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.3}",
"fontSize": "{fontSize.4}",
"letterSpacing": "{letterSpacing.0}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
@@ -217,9 +209,9 @@
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-0}",
"lineHeight": "{lineHeights.4}",
"lineHeight": "{lineHeights.3}",
"fontSize": "{fontSize.1}",
"letterSpacing": "{letterSpacing.2}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
@@ -234,7 +226,7 @@
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.1}",
"fontSize": "{fontSize.0}",
"letterSpacing": "{letterSpacing.1}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
@@ -246,9 +238,9 @@
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.2}",
"lineHeight": "{lineHeights.4}",
"fontSize": "{fontSize.1}",
"letterSpacing": "{letterSpacing.3}",
"letterSpacing": "{letterSpacing.1}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.uppercase}",
@@ -256,13 +248,41 @@
},
"type": "typography"
},
"Mono": {
"value": {
"fontFamily": "{fontFamilies.roboto-mono}",
"fontWeight": "{fontWeights.roboto-mono-3}",
"lineHeight": "{lineHeights.5}",
"fontSize": "{fontSize.2}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
"textDecoration": "{textDecoration.none}"
},
"type": "typography"
},
"Big Title": {
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.0}",
"fontSize": "{fontSize.5}",
"letterSpacing": "{letterSpacing.2}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
"textDecoration": "{textDecoration.none}"
},
"type": "typography"
},
"Space Section Unit Text": {
"value": {
"fontFamily": "{fontFamilies.inter}",
"fontWeight": "{fontWeights.inter-4}",
"lineHeight": "{lineHeights.1}",
"fontSize": "{fontSize.0}",
"letterSpacing": "{letterSpacing.1}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.uppercase}",
@@ -276,7 +296,7 @@
"fontWeight": "{fontWeights.inter-1}",
"lineHeight": "{lineHeights.2}",
"fontSize": "{fontSize.1}",
"letterSpacing": "{letterSpacing.2}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
@@ -374,10 +394,6 @@
"type": "color",
"description": "used only for the hover state for the asset card component"
},
"brand-gradient": {
"value": "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)",
"type": "color"
},
"neutral": {
"main": {
"value": "#D7DBDF",
@@ -518,7 +534,7 @@
"description": "color for the hidden current item in the navigator item component"
},
"menu-item-hover": {
"value": "#c9c9c9",
"value": "#cdcdcd",
"type": "color",
"description": "The hover state on menu item components."
}
@@ -547,31 +563,6 @@
"type": "color"
}
},
"project-card": {
"front": {
"value": "linear-gradient(0deg, #fbf8ff 25%, #e2e2e2 66%)",
"type": "color",
"description": "big text color in the project card component"
},
"back": {
"value": "linear-gradient(0deg, #fbf8ff 0%, #c7c7c7 100%)",
"type": "color"
},
"text-area": {
"value": "#ffffffe6",
"type": "color"
}
},
"published": {
"main": {
"value": "#39fbbb",
"type": "color"
},
"contrast": {
"value": "#ebfffc",
"type": "color"
}
},
"style-source": {
"token": {
"value": "#0081f1",
@@ -614,6 +605,53 @@
}
}
},
"brand": {
"background": {
"project-card": {
"front": {
"value": "linear-gradient(0deg, #fbf8ff 25%, #e2e2e2 66%)",
"type": "color",
"description": "big text color in the project card component"
},
"back": {
"value": "linear-gradient(0deg, #fbf8ff 0%, #c7c7c7 100%)",
"type": "color"
},
"text-area": {
"value": "#ffffffe6",
"type": "color"
}
},
"published-main": {
"value": "#39fbbb",
"type": "color"
},
"gradient": {
"value": "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)",
"type": "color"
},
"published-contrast": {
"value": "#ebfffc",
"type": "color"
},
"dashboard": {
"value": "#ededed",
"type": "color"
}
},
"foreground": {
"published": {
"value": "#005406",
"type": "color"
}
},
"border": {
"published": {
"value": "#ebfffc",
"type": "color"
}
}
},
"border": {
"main": {
"value": "#c1c8cd",
@@ -660,10 +698,6 @@
"type": "color",
"description": "border color to create contrast on dark/colored elements. Used in button, new position indicator for navigator"
},
"published": {
"value": "#ebfffc",
"type": "color"
},
"item": {
"child-line": {
"value": "#889096",
@@ -759,10 +793,6 @@
"type": "color",
"description": "color for hidden item element within navigator item component"
},
"published": {
"value": "#005406",
"type": "color"
},
"flex-ui": {
"main": {
"value": "#c7c7c7",
@@ -837,12 +867,26 @@
"type": "boxShadow",
"description": "elevation for big things within the dashboard"
},
"Title": {
"Section Title": {
"value": {
"fontFamily": "{fontFamilies.manrope}",
"fontWeight": "{fontWeights.manrope-5}",
"lineHeight": "{lineHeights.3}",
"fontSize": "{fontSize.3}",
"lineHeight": "{lineHeights.0}",
"fontSize": "{fontSize.4}",
"letterSpacing": "{letterSpacing.1}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
"textDecoration": "{textDecoration.none}"
},
"type": "typography"
},
"Large Title": {
"value": {
"fontFamily": "{fontFamilies.manrope}",
"fontWeight": "{fontWeights.manrope-5}",
"lineHeight": "{lineHeights.6}",
"fontSize": "{fontSize.6}",
"letterSpacing": "{letterSpacing.0}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
@@ -850,41 +894,55 @@
"textDecoration": "{textDecoration.none}"
},
"type": "typography"
}
},
"inner-glow": {
"01": {
"value": {
"color": "#fbf8ff",
"type": "innerShadow",
"x": "0",
"y": "2",
"blur": "1",
"spread": "0"
},
"type": "boxShadow"
},
"03": {
"regular": {
"value": {
"color": "#fbf8ff",
"type": "innerShadow",
"x": "0",
"y": "5",
"blur": "3",
"spread": "0"
"fontFamily": "{fontFamilies.manrope}",
"fontWeight": "{fontWeights.manrope-6}",
"lineHeight": "{lineHeights.0}",
"fontSize": "{fontSize.3}",
"letterSpacing": "{letterSpacing.3}",
"paragraphSpacing": "{paragraphSpacing.0}",
"paragraphIndent": "{paragraphIndent.0}",
"textCase": "{textCase.none}",
"textDecoration": "{textDecoration.none}"
},
"type": "boxShadow"
"type": "typography"
},
"05": {
"value": {
"color": "#fbf8ff",
"type": "innerShadow",
"x": "0",
"y": "8",
"blur": "5",
"spread": "0"
"inner-glow": {
"1": {
"value": {
"color": "#fbf8ff",
"type": "innerShadow",
"x": "0",
"y": "2",
"blur": "1",
"spread": "0"
},
"type": "boxShadow"
},
"type": "boxShadow"
"2": {
"value": {
"color": "#fbf8ff",
"type": "innerShadow",
"x": "0",
"y": "5",
"blur": "3",
"spread": "0"
},
"type": "boxShadow"
},
"3": {
"value": {
"color": "#fbf8ff",
"type": "innerShadow",
"x": "0",
"y": "8",
"blur": "5",
"spread": "0"
},
"type": "boxShadow"
}
}
},
"maintenance": {
packages/design-system/src/__generated__/figma-design-tokens.ts
Generated
+81 -51
View File
@@ -21,7 +21,7 @@ export const boxShadow = {
blur: 16,
spread: 0,
},
innerGlow01: {
brandInnerGlow1: {
color: "#fbf8ff",
type: "innerShadow",
x: 0,
@@ -29,7 +29,7 @@ export const boxShadow = {
blur: 1,
spread: 0,
},
innerGlow03: {
brandInnerGlow2: {
color: "#fbf8ff",
type: "innerShadow",
x: 0,
@@ -37,7 +37,7 @@ export const boxShadow = {
blur: 3,
spread: 0,
},
innerGlow05: {
brandInnerGlow3: {
color: "#fbf8ff",
type: "innerShadow",
x: 0,
@@ -54,11 +54,13 @@ export const fontFamilies = {
} as const;
export const lineHeights = {
"0": 16,
"0": "AUTO",
"1": 8,
"2": 10,
"3": "AUTO",
"4": 11,
"3": 11,
"4": 12,
"5": 16,
"6": "120%",
} as const;
export const fontWeights = {
@@ -66,23 +68,26 @@ export const fontWeights = {
inter1: "Medium",
inter2: "Bold",
inter4: "Semi Bold",
manrope5: "SemiBold",
manrope5: "Bold",
robotoMono3: "Regular",
manrope6: "Regular",
} as const;
export const fontSizes = {
fontSize0: 8,
fontSize1: 10,
fontSize2: 12,
fontSize3: 20,
fontSize4: 32,
fontSize3: 16,
fontSize4: 20,
fontSize5: 32,
fontSize6: 48,
} as const;
export const letterSpacing = {
"0": "0.5%",
"1": "1%",
"2": "0%",
"3": 0,
"0": "-2%",
"1": "0%",
"2": "0.5%",
"3": "1%",
} as const;
export const paragraphSpacing = { "0": 0 } as const;
@@ -132,34 +137,12 @@ export const typography = {
textCase: "none",
textDecoration: "none",
},
mono: {
fontFamily: "Roboto Mono",
fontWeight: "Regular",
lineHeight: 16,
fontSize: 12,
letterSpacing: "0%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
bigTitle: {
fontFamily: "Inter",
fontWeight: "Medium",
lineHeight: "AUTO",
fontSize: 32,
letterSpacing: "0.5%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
small: {
fontFamily: "Inter",
fontWeight: "Regular",
lineHeight: 11,
fontSize: 10,
letterSpacing: "0%",
letterSpacing: "1%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
@@ -179,14 +162,36 @@ export const typography = {
unit: {
fontFamily: "Inter",
fontWeight: "Medium",
lineHeight: 10,
lineHeight: 12,
fontSize: 10,
letterSpacing: 0,
letterSpacing: "0%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "uppercase",
textDecoration: "none",
},
mono: {
fontFamily: "Roboto Mono",
fontWeight: "Regular",
lineHeight: 16,
fontSize: 12,
letterSpacing: "1%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
bigTitle: {
fontFamily: "Inter",
fontWeight: "Medium",
lineHeight: "AUTO",
fontSize: 32,
letterSpacing: "0.5%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
spaceSectionUnitText: {
fontFamily: "Inter",
fontWeight: "Semi Bold",
@@ -203,18 +208,40 @@ export const typography = {
fontWeight: "Medium",
lineHeight: 10,
fontSize: 10,
letterSpacing: "1%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
brandSectionTitle: {
fontFamily: "Manrope",
fontWeight: "Bold",
lineHeight: "AUTO",
fontSize: 20,
letterSpacing: "0%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
brandTitle: {
brandLargeTitle: {
fontFamily: "Manrope",
fontWeight: "SemiBold",
fontWeight: "Bold",
lineHeight: "120%",
fontSize: 48,
letterSpacing: "-2%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
textDecoration: "none",
},
brandRegular: {
fontFamily: "Manrope",
fontWeight: "Regular",
lineHeight: "AUTO",
fontSize: 20,
letterSpacing: "0.5%",
fontSize: 16,
letterSpacing: "1%",
paragraphSpacing: 0,
paragraphIndent: "0px",
textCase: "none",
@@ -249,7 +276,6 @@ export const color = {
backgroundMenu: "#ededed",
backgroundControls: "#ffffff",
backgroundAssetcardHover: "#e6e8eb",
backgroundBrandGradient: "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)",
backgroundNeutralMain: "#D7DBDF",
backgroundNeutralAccent: "#11181c",
backgroundNeutralNotification: "#ffffff",
@@ -275,17 +301,12 @@ export const color = {
backgroundItemCurrent: "#0081f1",
backgroundItemCurrentChild: "#e1f0ff",
backgroundItemCurrentHidden: "#7e868c",
backgroundItemMenuItemHover: "#c9c9c9",
backgroundItemMenuItemHover: "#cdcdcd",
backgroundTooltipMain: "#11181c",
backgroundTooltipDesigner: "#ffffff",
backgroundSpacingTopBottom: "#f1f3f5",
backgroundSpacingLeftRight: "#eceef0",
backgroundSpacingHover: "#d7dbdf",
backgroundProjectCardFront: "linear-gradient(0deg, #fbf8ff 25%, #e2e2e2 66%)",
backgroundProjectCardBack: "linear-gradient(0deg, #fbf8ff 0%, #c7c7c7 100%)",
backgroundProjectCardTextArea: "#ffffffe6",
backgroundPublishedMain: "#39fbbb",
backgroundPublishedContrast: "#ebfffc",
backgroundStyleSourceToken: "#0081f1",
backgroundStyleSourceTag: "#d23197",
backgroundStyleSourceState: "#299764",
@@ -297,6 +318,17 @@ export const color = {
"linear-gradient(90deg, #d2319700 0%, #d23197 31.87%)",
backgroundStyleSourceGradientState:
"linear-gradient(90deg, #29976400 0%, #299764 31.87%)",
brandBackgroundProjectCardFront:
"linear-gradient(0deg, #fbf8ff 25%, #e2e2e2 66%)",
brandBackgroundProjectCardBack:
"linear-gradient(0deg, #fbf8ff 0%, #c7c7c7 100%)",
brandBackgroundProjectCardTextArea: "#ffffffe6",
brandBackgroundPublishedMain: "#39fbbb",
brandBackgroundGradient: "linear-gradient(180deg, #e63cfe 0%, #ffae3c 100%)",
brandBackgroundPublishedContrast: "#ebfffc",
brandBackgroundDashboard: "#ededed",
brandForegroundPublished: "#005406",
brandBorderPublished: "#ebfffc",
borderMain: "#c1c8cd",
borderFocus: "#0081f1",
borderMenuInner: "#fcfcfc",
@@ -306,7 +338,6 @@ export const color = {
borderAlert: "#f5d90a",
borderInfo: "#0091ff",
borderContrast: "#ffffff",
borderPublished: "#ebfffc",
borderItemChildLine: "#889096",
borderItemChildLineCurrent: "#96c7f2",
borderSetMain: "#b7d9f8",
@@ -324,7 +355,6 @@ export const color = {
foregroundInfo: "#006adc",
foregroundDisabled: "#c1c8cd",
foregroundHiddenItem: "#7e868c",
foregroundPublished: "#005406",
foregroundFlexUiMain: "#c7c7c7",
foregroundFlexUiHover: "#96c7f2",
foregroundContrastMain: "#ffffff",