diff --git a/.lostpixel/baseline/components-text--text.png b/.lostpixel/baseline/components-text--text.png index f991db1202..73e89e1367 100644 Binary files a/.lostpixel/baseline/components-text--text.png and b/.lostpixel/baseline/components-text--text.png differ diff --git a/.lostpixel/baseline/components-text-field--focus-events.png b/.lostpixel/baseline/components-text-field--focus-events.png index c5acc71162..9397ab2521 100644 Binary files a/.lostpixel/baseline/components-text-field--focus-events.png and b/.lostpixel/baseline/components-text-field--focus-events.png differ diff --git a/.lostpixel/baseline/library-button--button.png b/.lostpixel/baseline/library-button--button.png index b8d55443f4..7833819a18 100644 Binary files a/.lostpixel/baseline/library-button--button.png and b/.lostpixel/baseline/library-button--button.png differ diff --git a/.lostpixel/baseline/library-menu-menu-item--menu-menu-item.png b/.lostpixel/baseline/library-menu-menu-item--menu-menu-item.png index 9400851c19..f4af64ab34 100644 Binary files a/.lostpixel/baseline/library-menu-menu-item--menu-menu-item.png and b/.lostpixel/baseline/library-menu-menu-item--menu-menu-item.png differ diff --git a/packages/design-system/bin/transform-figma-tokens.ts b/packages/design-system/bin/transform-figma-tokens.ts index 8f5b1e4450..b96fb1d2c2 100644 --- a/packages/design-system/bin/transform-figma-tokens.ts +++ b/packages/design-system/bin/transform-figma-tokens.ts @@ -64,12 +64,26 @@ const FontSizeSchema = z.number(); const LetterSpacingSchema = z.union([z.string(), z.number()]); +const TextCaseSchema = z.enum(["uppercase", "lowercase", "capitalize", "none"]); + +const TextDecorationSchema = z.enum([ + "none", + "underline", + "overline", + "line-through", +]); + +const DimentionSchema = z.union([z.string(), z.number()]); + const TypographySchema = z.object({ fontFamily: z.unknown(), fontWeight: z.unknown(), lineHeight: z.unknown(), fontSize: z.unknown(), letterSpacing: z.unknown(), + textCase: z.unknown(), + textDecoration: z.unknown(), + paragraphIndent: z.unknown(), }); const SingleShadowSchema = z.object({ @@ -167,6 +181,22 @@ const printFontSize = (path: string[], unparsedValue: unknown) => { return `${value}px`; }; +const printTextCase = (path: string[], unparsedValue: unknown) => { + return parse(path, unparsedValue, TextCaseSchema); +}; + +const printTextDecoration = (path: string[], unparsedValue: unknown) => { + return parse(path, unparsedValue, TextDecorationSchema); +}; + +const printDimension = (path: string[], unparsedValue: unknown) => { + const value = parse(path, unparsedValue, DimentionSchema); + if (typeof value === "number") { + return `${value}px`; + } + return value; +}; + const printTypography = (path: string[], unparsedValue: unknown) => { const value = parse(path, unparsedValue, TypographySchema); return { @@ -175,6 +205,9 @@ const printTypography = (path: string[], unparsedValue: unknown) => { fontSize: printFontSize(path, value.fontSize), lineHeight: printLineHeight(path, value.lineHeight), letterSpacing: printLetterSpacing(path, value.letterSpacing), + textTransform: printTextCase(path, value.textCase), + textDecoration: printTextDecoration(path, value.textDecoration), + textIndent: printDimension(path, value.paragraphIndent), }; }; @@ -186,6 +219,9 @@ const printerByType = { fontWeights: printFontWeight, fontSizes: printFontSize, fontFamilies: printFontFamily, + textCase: printTextCase, + textDecoration: printTextDecoration, + dimension: printDimension, } as const; const traverse = ( @@ -209,15 +245,19 @@ const traverse = ( }; const pathToName = (path: string[], type: string) => { - const cleanedUp = path.join(" ").replace(/[^a-z0-9]+/gi, " "); + const cleanedUp = camelCase(path.join(" ").replace(/[^a-z0-9]+/gi, " "), { + locale: false, + }); - const withoutPrefix = cleanedUp + const withoutType = cleanedUp .toLocaleLowerCase() .startsWith(type.toLocaleLowerCase()) ? cleanedUp.slice(type.length) : cleanedUp; - return camelCase(withoutPrefix, { locale: false }); + // apply camelCase again to make sure + // the first letter is lowercase after removing the type + return camelCase(withoutType, { locale: false }); }; const main = () => { diff --git a/packages/design-system/src/__generated__/figma-design-tokens.json b/packages/design-system/src/__generated__/figma-design-tokens.json index 5bf8e70206..f9276f299a 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.json +++ b/packages/design-system/src/__generated__/figma-design-tokens.json @@ -1045,8 +1045,6 @@ }, "$themes": [], "$metadata": { - "tokenSetOrder": [ - "global" - ] + "tokenSetOrder": ["global"] } -} \ No newline at end of file +} diff --git a/packages/design-system/src/__generated__/figma-design-tokens.ts b/packages/design-system/src/__generated__/figma-design-tokens.ts index 01c3da2f6b..6ee61aaeaa 100644 --- a/packages/design-system/src/__generated__/figma-design-tokens.ts +++ b/packages/design-system/src/__generated__/figma-design-tokens.ts @@ -67,6 +67,9 @@ export const typography = { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.005em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, labelTitleCase: { fontFamily: @@ -75,6 +78,9 @@ export const typography = { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.005em", + textTransform: "capitalize", + textDecoration: "none", + textIndent: "0px", }, labelSentenceCase: { fontFamily: @@ -83,6 +89,9 @@ export const typography = { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.005em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, title: { fontFamily: @@ -91,6 +100,9 @@ export const typography = { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.01em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, small: { fontFamily: @@ -99,6 +111,9 @@ export const typography = { fontSize: "10px", lineHeight: "11px", letterSpacing: "0.01em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, tiny: { fontFamily: @@ -107,6 +122,9 @@ export const typography = { fontSize: "8px", lineHeight: "8px", letterSpacing: "0.01em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, unit: { fontFamily: @@ -115,6 +133,9 @@ export const typography = { fontSize: "10px", lineHeight: "12px", letterSpacing: "0em", + textTransform: "uppercase", + textDecoration: "none", + textIndent: "0px", }, mono: { fontFamily: "Roboto Mono, RobotoMono, menlo, monospace", @@ -122,6 +143,9 @@ export const typography = { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.01em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, bigTitle: { fontFamily: @@ -130,6 +154,9 @@ export const typography = { fontSize: "32px", lineHeight: "39px", letterSpacing: "0.005em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, spaceSectionUnitText: { fontFamily: @@ -138,6 +165,9 @@ export const typography = { fontSize: "8px", lineHeight: "8px", letterSpacing: "0.01em", + textTransform: "uppercase", + textDecoration: "none", + textIndent: "0px", }, spaceSectionValueText: { fontFamily: @@ -146,6 +176,9 @@ export const typography = { fontSize: "10px", lineHeight: "10px", letterSpacing: "0.01em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandSectionTitle: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -153,6 +186,9 @@ export const typography = { fontSize: "20px", lineHeight: "27px", letterSpacing: "0em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandLargeTitle: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -160,6 +196,9 @@ export const typography = { fontSize: "48px", lineHeight: "58px", letterSpacing: "-0.02em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandRegular: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -167,6 +206,9 @@ export const typography = { fontSize: "16px", lineHeight: "22px", letterSpacing: "0em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandThumbnailLargeDefault: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -174,6 +216,9 @@ export const typography = { fontSize: "360px", lineHeight: "360px", letterSpacing: "-0.05em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandThumbnailLargeHover: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -181,6 +226,9 @@ export const typography = { fontSize: "360px", lineHeight: "360px", letterSpacing: "-0.05em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandThumbnailSmallDefault: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -188,6 +236,9 @@ export const typography = { fontSize: "48px", lineHeight: "58px", letterSpacing: "-0.02em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, brandThumbnailSmallHover: { fontFamily: "Manrope Variable, ManropeVariable, Manrope, sans-serif", @@ -195,6 +246,9 @@ export const typography = { fontSize: "48px", lineHeight: "58px", letterSpacing: "-0.02em", + textTransform: "none", + textDecoration: "none", + textIndent: "0px", }, } as const; @@ -320,7 +374,7 @@ export const color = { maintenanceSpacerViz: "#f9c6c6", } as const; -export const borderWidth = { borderWidth0: 1, borderWidth1: 2 } as const; +export const borderWidth = { "0": 1, "1": 2 } as const; export const dimension = { paragraphIndent0: "0px" } as const;