From 417ae2298b2cc60dd3235cd429627d322ab2fa94 Mon Sep 17 00:00:00 2001 From: markxtang <122043657+markxtang@users.noreply.github.com> Date: Thu, 19 Jan 2023 23:15:23 -0700 Subject: [PATCH] Figma tokens (#818) 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) --- .../__generated__/figma-design-tokens.json | 308 +++++++++++------- .../src/__generated__/figma-design-tokens.ts | 132 +++++--- 2 files changed, 264 insertions(+), 176 deletions(-) diff --git a/packages/design-system/src/__generated__/figma-design-tokens.json b/packages/design-system/src/__generated__/figma-design-tokens.json index 9bb0d187cb..29354d51e1 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.json +++ b/packages/design-system/src/__generated__/figma-design-tokens.json @@ -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": { diff --git a/packages/design-system/src/__generated__/figma-design-tokens.ts b/packages/design-system/src/__generated__/figma-design-tokens.ts index 0cd7a83e2a..a6f39d0442 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.ts +++ b/packages/design-system/src/__generated__/figma-design-tokens.ts @@ -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",