From be48f09b2fe99c1678cd1afc5616e2d9abcda69b Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 15 Aug 2024 09:07:15 +0200 Subject: [PATCH 1/4] feat: add style-dictionary tokens for download --- src/App.tsx | 4 +- src/utils/outputs/download.ts | 38 +++- src/utils/outputs/index.ts | 225 ++----------------- src/utils/outputs/style-dictionary/colors.ts | 149 ++++++++++++ src/utils/outputs/style-dictionary/index.ts | 49 ++++ src/utils/outputs/web/index.ts | 188 ++++++++++++++++ 6 files changed, 447 insertions(+), 206 deletions(-) create mode 100644 src/utils/outputs/style-dictionary/colors.ts create mode 100644 src/utils/outputs/style-dictionary/index.ts create mode 100644 src/utils/outputs/web/index.ts diff --git a/src/App.tsx b/src/App.tsx index d1a560b7..658719cb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,12 +2,12 @@ import { Outlet } from "react-router-dom"; import Notifications from "./components/Notifications"; import { useThemeBuilderStore } from "./store"; import { useEffect } from "react"; +import { DefaultColorType } from "./utils/data.ts"; import { getNonColorCssProperties, getPaletteOutput, getSpeakingNames, -} from "./utils/outputs"; -import { DefaultColorType } from "./utils/data.ts"; +} from "./utils/outputs/web"; const App = () => { const { speakingNames, luminanceSteps, theme } = useThemeBuilderStore( diff --git a/src/utils/outputs/download.ts b/src/utils/outputs/download.ts index c85584fd..63a97e98 100644 --- a/src/utils/outputs/download.ts +++ b/src/utils/outputs/download.ts @@ -19,15 +19,20 @@ import { generateDensityEnumFile } from "./compose/density.ts"; import { getSketchColorsAsString } from "./sketch.ts"; import { getFontFaces } from "./web/fonts.ts"; import { kebabCase } from "../index.ts"; +import { generateCustomColorClass } from "./web/custom-color-class.ts"; +import { generateAndroidReadmeFile } from "./compose/readme.ts"; import { getCssPropertyAsString, getCssThemeProperties, getFullColorCss, getPaletteOutput, getSpeakingNames, -} from "./index.ts"; -import { generateCustomColorClass } from "./web/custom-color-class.ts"; -import { generateAndroidReadmeFile } from "./compose/readme.ts"; +} from "./web"; +import { + getSDColorPalette, + getSDSpeakingColors, +} from "./style-dictionary/colors.ts"; +import { getDBNonColorToken } from "./style-dictionary"; const download = (fileName: string, file: Blob) => { const element = document.createElement("a"); @@ -67,6 +72,33 @@ export const downloadTheme = async ( const zip = new JSZip(); zip.file(`${fileName}.json`, themeJsonString); + // Style dictionary + + const sdFolder: string = "StyleDictionary"; + zip.file( + `${sdFolder}/palette-colors.json`, + JSON.stringify(getSDColorPalette(allColors, luminanceSteps)), + ); + zip.file( + `${sdFolder}/speaking-colors.json`, + JSON.stringify(getSDSpeakingColors(speakingNames, allColors)), + ); + const token = getDBNonColorToken(theme); + const tokenProps = [ + "spacing", + "sizing", + "border", + "elevation", + "transition", + "font", + ]; + for (const prop of tokenProps) { + zip.file( + `${sdFolder}/${prop}s.json`, + JSON.stringify({ [prop]: token[prop] }), + ); + } + //Android const androidFolder: string = "Android"; const androidThemeFolder: string = `${androidFolder}/theme`; diff --git a/src/utils/outputs/index.ts b/src/utils/outputs/index.ts index a3d99234..8aa850c6 100644 --- a/src/utils/outputs/index.ts +++ b/src/utils/outputs/index.ts @@ -1,124 +1,34 @@ -import { - DefaultColorType, - HeisslufType, - SpeakingName, - ThemeType, -} from "../data.ts"; -import traverse from "traverse"; +import { DefaultColorType, HeisslufType } from "../data.ts"; import { getHeissluftColors } from "../generate-colors.ts"; export const prefix = "db"; -export const getCssPropertyAsString = ( - properties: any, - inRoot?: boolean, -): string => { - let resultString = ""; +export const nonRemProperties = ["opacity", "elevation", "transition", "font"]; - for (const [key, value] of Object.entries(properties)) { - resultString += `${key}: ${value};\n`; - } - - if (inRoot) { - return `:root{${resultString}}`; - } - - return resultString; -}; - -const nonRemProperties = ["opacity", "elevation", "transition", "font"]; - -const isFontFamily = (path: string[]): boolean => +export const isFontFamily = (path: string[]): boolean => (path[0] === "font" && path[1] === "family") || path[0] !== "font"; -export const getNonColorCssProperties = ( - theme: ThemeType, - asString?: boolean, -) => { - const resolvedProperties: any = {}; - traverse(theme).forEach(function (value) { - if ( - this.isLeaf && - this.path.length > 0 && - this.path[0] !== "colors" && - this.path[0] !== "additionalColors" && - this.path[0] !== "customColors" && - this.path[0] !== "branding" && - isFontFamily(this.path) && - !this.path.includes("_scale") - ) { - const key = `--${prefix}-${this.path - .map((path) => path.toLowerCase()) - .map((path) => { - if (path === "lineheight") { - return "line-height"; - } else if (path === "fontsize") { - return "font-size"; - } - return path; - }) - .join("-")}`; - - resolvedProperties[key] = - !nonRemProperties.includes(this.path[0]) && - (typeof value === "string" || value instanceof String) - ? `${value}rem` - : value; - - if (this.path.at(-1) === "fontSize") { - const lineHeightPath = [...this.path]; - lineHeightPath[lineHeightPath.length - 1] = "lineHeight"; - const fontSizeAsNumber = Number(value); - const lineHeightAsNumber = Number(traverse(theme).get(lineHeightPath)); - - const remainingIconPath = this.path - .filter((path) => path !== "typography" && path !== "fontSize") - .join("-"); - const fontSizing = fontSizeAsNumber * lineHeightAsNumber; - resolvedProperties[ - `--${prefix}-base-icon-weight-${remainingIconPath}` - ] = fontSizing * 16; - resolvedProperties[ - `--${prefix}-base-icon-font-size-${remainingIconPath}` - ] = `${fontSizing}rem`; - } - } - }); - - if (asString) { - return getCssPropertyAsString(resolvedProperties); - } - - return resolvedProperties; -}; - -export const getCssThemeProperties = (theme: ThemeType): string => { - const customTheme = getNonColorCssProperties(theme, true); - - return `:root{ - ${customTheme} - } - `; -}; - -export const getFullColorCss = ( - colorsPalette: string, - colorsSpeakingNames: string, -): string => { - return `:root{ - ${colorsPalette} - ${colorsSpeakingNames} - } - -[data-color-scheme="light"] { - color-scheme: light; -} - -[data-color-scheme="dark"] { - color-scheme: dark; -} - `; -}; +export const isDimensionProperty = (context: any) => + context.isLeaf && + context.path.length > 0 && + context.path[0] !== "colors" && + context.path[0] !== "additionalColors" && + context.path[0] !== "customColors" && + context.path[0] !== "branding" && + isFontFamily(context.path) && + !context.path.includes("_scale"); + +export const getTraverseKey = (path: string[], separator: string = "-") => + `${path + .map((p) => p.toLowerCase()) + .map((p) => { + return p === "lineheight" + ? "line-height" + : p === "fontsize" + ? "font-size" + : p; + }) + .join(separator)}`; export const getPalette = ( allColors: Record, @@ -142,90 +52,3 @@ export const getPalette = ( (previousValue, currentValue) => ({ ...previousValue, ...currentValue }), {}, ); - -export const getPaletteOutput = ( - allColors: Record, - luminanceSteps: number[], -): any => { - const palette: Record = getPalette( - allColors, - luminanceSteps, - ); - const result: any = {}; - - Object.entries(allColors).forEach(([unformattedName, color]) => { - const name = unformattedName.toLowerCase(); - - const hslType: HeisslufType[] = palette[unformattedName]; - hslType.forEach((hsl) => { - result[`--${prefix}-${name}-${hsl.index ?? hsl.name}`] = hsl.hex; - }); - - result[`--${prefix}-${name}-origin`] = color.origin; - result[`--${prefix}-${name}-origin-light-default`] = color.originLight; - result[`--${prefix}-${name}-origin-light-hovered`] = - color.originLightHovered; - result[`--${prefix}-${name}-origin-light-pressed`] = - color.originLightPressed; - result[`--${prefix}-${name}-on-origin-light-default`] = color.onOriginLight; - result[`--${prefix}-${name}-on-origin-light-hovered`] = - color.onOriginLightHovered; - result[`--${prefix}-${name}-on-origin-light-pressed`] = - color.onOriginLightPressed; - - result[`--${prefix}-${name}-origin-dark-default`] = color.originDark; - result[`--${prefix}-${name}-origin-dark-hovered`] = color.originDarkHovered; - result[`--${prefix}-${name}-origin-dark-pressed`] = color.originDarkPressed; - result[`--${prefix}-${name}-on-origin-dark-default`] = color.onOriginDark; - result[`--${prefix}-${name}-on-origin-dark-hovered`] = - color.onOriginDarkHovered; - result[`--${prefix}-${name}-on-origin-dark-pressed`] = - color.onOriginDarkPressed; - }); - - return result; -}; - -export const getSpeakingNames = ( - speakingNames: SpeakingName[], - allColors: Record, -): any => { - const result: any = {}; - Object.entries(allColors).forEach(([unformattedName]) => { - const name = unformattedName.toLowerCase(); - result[`--${prefix}-${name}-origin-default`] = - `light-dark(var(--${prefix}-${name}-origin-light-default),var(--${prefix}-${name}-origin-dark-default))`; - result[`--${prefix}-${name}-origin-hovered`] = - `light-dark(var(--${prefix}-${name}-origin-light-hovered),var(--${prefix}-${name}-origin-dark-hovered))`; - result[`--${prefix}-${name}-origin-pressed`] = - `light-dark(var(--${prefix}-${name}-origin-light-pressed),var(--${prefix}-${name}-origin-dark-pressed))`; - result[`--${prefix}-${name}-on-origin-default`] = - `light-dark(var(--${prefix}-${name}-on-origin-light-default),var(--${prefix}-${name}-on-origin-dark-default))`; - result[`--${prefix}-${name}-on-origin-hovered`] = - `light-dark(var(--${prefix}-${name}-on-origin-light-hovered),var(--${prefix}-${name}-on-origin-dark-hovered))`; - result[`--${prefix}-${name}-on-origin-pressed`] = - `light-dark(var(--${prefix}-${name}-on-origin-light-pressed),var(--${prefix}-${name}-on-origin-dark-pressed))`; - - speakingNames.forEach((speakingName) => { - if ( - speakingName.transparencyDark !== undefined || - speakingName.transparencyLight !== undefined - ) { - result[`--${prefix}-${name}-${speakingName.name}`] = - `light-dark(color-mix(in srgb, transparent ${ - speakingName.transparencyLight - }%, var(--${prefix}-${name}-${ - speakingName.light - })),color-mix(in srgb, transparent ${ - speakingName.transparencyDark - }%, var(--${prefix}-${name}-${speakingName.dark})))`; - } else { - result[`--${prefix}-${name}-${speakingName.name}`] = - `light-dark(var(--${prefix}-${name}-${ - speakingName.light - }),var(--${prefix}-${name}-${speakingName.dark}))`; - } - }); - }); - return result; -}; diff --git a/src/utils/outputs/style-dictionary/colors.ts b/src/utils/outputs/style-dictionary/colors.ts new file mode 100644 index 00000000..0a0f266a --- /dev/null +++ b/src/utils/outputs/style-dictionary/colors.ts @@ -0,0 +1,149 @@ +import { DefaultColorType, HeisslufType, SpeakingName } from "../../data.ts"; +import { getPalette } from "../index.ts"; +import { setObjectByPath } from "./index.ts"; + +export const getSDColorPalette = ( + allColors: Record, + luminanceSteps: number[], +): any => { + const palette: Record = getPalette( + allColors, + luminanceSteps, + ); + const colors: any = {}; + + Object.entries(allColors).forEach(([unformattedName, color]) => { + const name = unformattedName.toLowerCase(); + + const colorValues: any = {}; + + const hslType: HeisslufType[] = palette[unformattedName]; + hslType.forEach((hsl) => { + colorValues[`${hsl.index ?? hsl.name}`] = { value: hsl.hex }; + }); + + colorValues.origin = { + base: { + value: color.origin, + }, + light: { + default: { + value: color.originLight, + }, + hovered: { + value: color.originLightHovered, + }, + pressed: { + value: color.originLightPressed, + }, + }, + dark: { + default: { + value: color.originDark, + }, + hovered: { + value: color.originDarkHovered, + }, + pressed: { + value: color.originDarkPressed, + }, + }, + }; + + colorValues.onOrigin = { + light: { + default: { + value: color.onOriginLight, + }, + hovered: { + value: color.onOriginLightHovered, + }, + pressed: { + value: color.onOriginLightPressed, + }, + }, + dark: { + default: { + value: color.onOriginDark, + }, + hovered: { + value: color.onOriginDarkHovered, + }, + pressed: { + value: color.onOriginDarkPressed, + }, + }, + }; + + colors[name] = colorValues; + }); + + return { colors }; +}; + +export const getSDSpeakingColors = ( + speakingNames: SpeakingName[], + allColors: Record, +): any => { + const colors: any = {}; + const colorTheme = ["light", "dark"]; + for (const [unformattedName] of Object.entries(allColors)) { + const name = unformattedName.toLowerCase(); + + colors[name] = {}; + + for (const theme of colorTheme) { + const isDark = theme === "dark"; + const themeObj: any = { + origin: { + default: { + value: `colors.origin.${theme}.default.value`, + }, + hovered: { + value: `colors.origin.${theme}.hovered.value`, + }, + pressed: { + value: `colors.origin.${theme}.pressed.value`, + }, + }, + onOrigin: { + default: { + value: `colors.onOrigin.${theme}.default.value`, + }, + hovered: { + value: `colors.onOrigin.${theme}.hovered.value`, + }, + pressed: { + value: `colors.onOrigin.${theme}.pressed.value`, + }, + }, + }; + + for (const speakingName of speakingNames) { + const dotName = speakingName.name.replaceAll("-", "."); + + setObjectByPath( + themeObj, + `${dotName}.value`, + `colors.${name}.${isDark ? speakingName.dark : speakingName.light}.value`, + ); + + if ( + speakingName.transparencyDark !== undefined || + speakingName.transparencyLight !== undefined + ) { + setObjectByPath( + themeObj, + `${dotName}.transparent`, + isDark + ? speakingName.transparencyDark + : speakingName.transparencyLight, + ); + } + } + + colors[name][theme] = themeObj; + } + } + return { colors }; +}; diff --git a/src/utils/outputs/style-dictionary/index.ts b/src/utils/outputs/style-dictionary/index.ts new file mode 100644 index 00000000..6656e2e7 --- /dev/null +++ b/src/utils/outputs/style-dictionary/index.ts @@ -0,0 +1,49 @@ +import { ThemeType } from "../../data.ts"; +import traverse from "traverse"; +import { + getTraverseKey, + isDimensionProperty, + nonRemProperties, +} from "../index.ts"; + +export const setObjectByPath = ( + initObj: any, + path: string, + value: any, +): any => { + if (path == "") return value; + + const [k, next] = path.split({ + [Symbol.split](s) { + const i = s.indexOf("."); + return i == -1 ? [s, ""] : [s.slice(0, i), s.slice(i + 1)]; + }, + }); + + if (initObj !== undefined && typeof initObj !== "object") { + console.error(`cannot set property ${k} of ${typeof initObj}`); + } + + return Object.assign(initObj ?? {}, { + [k]: setObjectByPath(initObj?.[k], next, value), + }); +}; + +export const getDBNonColorToken = (theme: ThemeType) => { + const resolvedProperties: any = {}; + traverse(theme).forEach(function (value) { + if (isDimensionProperty(this)) { + const key = getTraverseKey(this.path, "."); + + const finalValue = + !nonRemProperties.includes(this.path[0]) && + (typeof value === "string" || value instanceof String) + ? `${value}rem` + : value; + + setObjectByPath(resolvedProperties, key, finalValue); + } + }); + + return resolvedProperties; +}; diff --git a/src/utils/outputs/web/index.ts b/src/utils/outputs/web/index.ts new file mode 100644 index 00000000..68053fe8 --- /dev/null +++ b/src/utils/outputs/web/index.ts @@ -0,0 +1,188 @@ +import { + DefaultColorType, + HeisslufType, + SpeakingName, + ThemeType, +} from "../../data.ts"; +import traverse from "traverse"; +import { + getPalette, + getTraverseKey, + isDimensionProperty, + nonRemProperties, + prefix, +} from "../index.ts"; + +export const getCssPropertyAsString = ( + properties: any, + inRoot?: boolean, +): string => { + let resultString = ""; + + for (const [key, value] of Object.entries(properties)) { + resultString += `${key}: ${value};\n`; + } + + if (inRoot) { + return `:root{${resultString}}`; + } + + return resultString; +}; + +export const getNonColorCssProperties = ( + theme: ThemeType, + asString?: boolean, +) => { + const resolvedProperties: any = {}; + traverse(theme).forEach(function (value) { + if (isDimensionProperty(this)) { + const key = `--${prefix}-${getTraverseKey(this.path)}`; + + resolvedProperties[key] = + !nonRemProperties.includes(this.path[0]) && + (typeof value === "string" || value instanceof String) + ? `${value}rem` + : value; + + if (this.path.at(-1) === "fontSize") { + const lineHeightPath = [...this.path]; + lineHeightPath[lineHeightPath.length - 1] = "lineHeight"; + const fontSizeAsNumber = Number(value); + const lineHeightAsNumber = Number(traverse(theme).get(lineHeightPath)); + + const remainingIconPath = this.path + .filter((path) => path !== "typography" && path !== "fontSize") + .join("-"); + const fontSizing = fontSizeAsNumber * lineHeightAsNumber; + resolvedProperties[ + `--${prefix}-base-icon-weight-${remainingIconPath}` + ] = fontSizing * 16; + resolvedProperties[ + `--${prefix}-base-icon-font-size-${remainingIconPath}` + ] = `${fontSizing}rem`; + } + } + }); + + if (asString) { + return getCssPropertyAsString(resolvedProperties); + } + + return resolvedProperties; +}; + +export const getCssThemeProperties = (theme: ThemeType): string => { + const customTheme = getNonColorCssProperties(theme, true); + + return `:root{ + ${customTheme} + } + `; +}; + +export const getFullColorCss = ( + colorsPalette: string, + colorsSpeakingNames: string, +): string => { + return `:root{ + ${colorsPalette} + ${colorsSpeakingNames} + } + +[data-color-scheme="light"] { + color-scheme: light; +} + +[data-color-scheme="dark"] { + color-scheme: dark; +} + `; +}; + +export const getPaletteOutput = ( + allColors: Record, + luminanceSteps: number[], +): any => { + const palette: Record = getPalette( + allColors, + luminanceSteps, + ); + const result: any = {}; + + Object.entries(allColors).forEach(([unformattedName, color]) => { + const name = unformattedName.toLowerCase(); + + const hslType: HeisslufType[] = palette[unformattedName]; + hslType.forEach((hsl) => { + result[`--${prefix}-${name}-${hsl.index ?? hsl.name}`] = hsl.hex; + }); + + result[`--${prefix}-${name}-origin`] = color.origin; + result[`--${prefix}-${name}-origin-light-default`] = color.originLight; + result[`--${prefix}-${name}-origin-light-hovered`] = + color.originLightHovered; + result[`--${prefix}-${name}-origin-light-pressed`] = + color.originLightPressed; + result[`--${prefix}-${name}-on-origin-light-default`] = color.onOriginLight; + result[`--${prefix}-${name}-on-origin-light-hovered`] = + color.onOriginLightHovered; + result[`--${prefix}-${name}-on-origin-light-pressed`] = + color.onOriginLightPressed; + + result[`--${prefix}-${name}-origin-dark-default`] = color.originDark; + result[`--${prefix}-${name}-origin-dark-hovered`] = color.originDarkHovered; + result[`--${prefix}-${name}-origin-dark-pressed`] = color.originDarkPressed; + result[`--${prefix}-${name}-on-origin-dark-default`] = color.onOriginDark; + result[`--${prefix}-${name}-on-origin-dark-hovered`] = + color.onOriginDarkHovered; + result[`--${prefix}-${name}-on-origin-dark-pressed`] = + color.onOriginDarkPressed; + }); + + return result; +}; + +export const getSpeakingNames = ( + speakingNames: SpeakingName[], + allColors: Record, +): any => { + const result: any = {}; + Object.entries(allColors).forEach(([unformattedName]) => { + const name = unformattedName.toLowerCase(); + result[`--${prefix}-${name}-origin-default`] = + `light-dark(var(--${prefix}-${name}-origin-light-default),var(--${prefix}-${name}-origin-dark-default))`; + result[`--${prefix}-${name}-origin-hovered`] = + `light-dark(var(--${prefix}-${name}-origin-light-hovered),var(--${prefix}-${name}-origin-dark-hovered))`; + result[`--${prefix}-${name}-origin-pressed`] = + `light-dark(var(--${prefix}-${name}-origin-light-pressed),var(--${prefix}-${name}-origin-dark-pressed))`; + result[`--${prefix}-${name}-on-origin-default`] = + `light-dark(var(--${prefix}-${name}-on-origin-light-default),var(--${prefix}-${name}-on-origin-dark-default))`; + result[`--${prefix}-${name}-on-origin-hovered`] = + `light-dark(var(--${prefix}-${name}-on-origin-light-hovered),var(--${prefix}-${name}-on-origin-dark-hovered))`; + result[`--${prefix}-${name}-on-origin-pressed`] = + `light-dark(var(--${prefix}-${name}-on-origin-light-pressed),var(--${prefix}-${name}-on-origin-dark-pressed))`; + + speakingNames.forEach((speakingName) => { + if ( + speakingName.transparencyDark !== undefined || + speakingName.transparencyLight !== undefined + ) { + result[`--${prefix}-${name}-${speakingName.name}`] = + `light-dark(color-mix(in srgb, transparent ${ + speakingName.transparencyLight + }%, var(--${prefix}-${name}-${ + speakingName.light + })),color-mix(in srgb, transparent ${ + speakingName.transparencyDark + }%, var(--${prefix}-${name}-${speakingName.dark})))`; + } else { + result[`--${prefix}-${name}-${speakingName.name}`] = + `light-dark(var(--${prefix}-${name}-${ + speakingName.light + }),var(--${prefix}-${name}-${speakingName.dark}))`; + } + }); + }); + return result; +}; From d069fa88432bd0569bc1b6b99df283a7713ea518 Mon Sep 17 00:00:00 2001 From: Nicolas Merget <104347736+nmerget@users.noreply.github.com> Date: Thu, 15 Aug 2024 10:13:01 +0200 Subject: [PATCH 2/4] Update src/utils/outputs/style-dictionary/colors.ts Co-authored-by: Tim Kolberger --- src/utils/outputs/style-dictionary/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/outputs/style-dictionary/colors.ts b/src/utils/outputs/style-dictionary/colors.ts index 0a0f266a..1577f599 100644 --- a/src/utils/outputs/style-dictionary/colors.ts +++ b/src/utils/outputs/style-dictionary/colors.ts @@ -97,7 +97,7 @@ export const getSDSpeakingColors = ( const themeObj: any = { origin: { default: { - value: `colors.origin.${theme}.default.value`, + value: `{colors.origin.${theme}.default.value}`, }, hovered: { value: `colors.origin.${theme}.hovered.value`, From 07f6a48ea5416bece1b05cd1374328eab2ae2b77 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 15 Aug 2024 10:31:43 +0200 Subject: [PATCH 3/4] chore: update style-dictionary color output --- src/utils/outputs/style-dictionary/colors.ts | 90 +++++++++++--------- 1 file changed, 49 insertions(+), 41 deletions(-) diff --git a/src/utils/outputs/style-dictionary/colors.ts b/src/utils/outputs/style-dictionary/colors.ts index 1577f599..8a6093ad 100644 --- a/src/utils/outputs/style-dictionary/colors.ts +++ b/src/utils/outputs/style-dictionary/colors.ts @@ -24,9 +24,13 @@ export const getSDColorPalette = ( colorValues.origin = { base: { + comment: "This is just to resolve the original origin color", value: color.origin, }, - light: { + }; + + colorValues.light = { + origin: { default: { value: color.originLight, }, @@ -37,40 +41,44 @@ export const getSDColorPalette = ( value: color.originLightPressed, }, }, - dark: { - default: { - value: color.originDark, - }, - hovered: { - value: color.originDarkHovered, - }, - pressed: { - value: color.originDarkPressed, + on: { + origin: { + default: { + value: color.onOriginLight, + }, + hovered: { + value: color.onOriginLightHovered, + }, + pressed: { + value: color.onOriginLightPressed, + }, }, }, }; - colorValues.onOrigin = { - light: { + colorValues.dark = { + origin: { default: { - value: color.onOriginLight, + value: color.originDark, }, hovered: { - value: color.onOriginLightHovered, + value: color.originDarkHovered, }, pressed: { - value: color.onOriginLightPressed, + value: color.originDarkPressed, }, }, - dark: { - default: { - value: color.onOriginDark, - }, - hovered: { - value: color.onOriginDarkHovered, - }, - pressed: { - value: color.onOriginDarkPressed, + on: { + origin: { + default: { + value: color.onOriginDark, + }, + hovered: { + value: color.onOriginDarkHovered, + }, + pressed: { + value: color.onOriginDarkPressed, + }, }, }, }; @@ -85,36 +93,36 @@ export const getSDSpeakingColors = ( speakingNames: SpeakingName[], allColors: Record, ): any => { - const colors: any = {}; + const colors: any = { light: {}, dark: {} }; const colorTheme = ["light", "dark"]; for (const [unformattedName] of Object.entries(allColors)) { const name = unformattedName.toLowerCase(); - colors[name] = {}; - for (const theme of colorTheme) { const isDark = theme === "dark"; const themeObj: any = { origin: { default: { - value: `{colors.origin.${theme}.default.value}`, + value: `{colors.${theme}.origin.default.value}`, }, hovered: { - value: `colors.origin.${theme}.hovered.value`, + value: `{colors.${theme}.origin.hovered.value}`, }, pressed: { - value: `colors.origin.${theme}.pressed.value`, + value: `{colors.${theme}.origin.pressed.value}`, }, }, - onOrigin: { - default: { - value: `colors.onOrigin.${theme}.default.value`, - }, - hovered: { - value: `colors.onOrigin.${theme}.hovered.value`, - }, - pressed: { - value: `colors.onOrigin.${theme}.pressed.value`, + on: { + origin: { + default: { + value: `{colors.${theme}.on.origin.default.value}`, + }, + hovered: { + value: `{colors.${theme}.on.origin.hovered.value}`, + }, + pressed: { + value: `{colors.${theme}.on.origin.pressed.value}`, + }, }, }, }; @@ -125,7 +133,7 @@ export const getSDSpeakingColors = ( setObjectByPath( themeObj, `${dotName}.value`, - `colors.${name}.${isDark ? speakingName.dark : speakingName.light}.value`, + `{colors.${name}.${isDark ? speakingName.dark : speakingName.light}.value}`, ); if ( @@ -142,7 +150,7 @@ export const getSDSpeakingColors = ( } } - colors[name][theme] = themeObj; + colors[theme][name] = themeObj; } } return { colors }; From bb465f12d2718871eb9426a422e8e173e6a229a5 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 15 Aug 2024 10:33:34 +0200 Subject: [PATCH 4/4] fix: issue with missing name for origin colors --- src/utils/outputs/style-dictionary/colors.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/utils/outputs/style-dictionary/colors.ts b/src/utils/outputs/style-dictionary/colors.ts index 8a6093ad..1f68fcd0 100644 --- a/src/utils/outputs/style-dictionary/colors.ts +++ b/src/utils/outputs/style-dictionary/colors.ts @@ -103,25 +103,25 @@ export const getSDSpeakingColors = ( const themeObj: any = { origin: { default: { - value: `{colors.${theme}.origin.default.value}`, + value: `{colors.${name}.${theme}.origin.default.value}`, }, hovered: { - value: `{colors.${theme}.origin.hovered.value}`, + value: `{colors.${name}.${theme}.origin.hovered.value}`, }, pressed: { - value: `{colors.${theme}.origin.pressed.value}`, + value: `{colors.${name}.${theme}.origin.pressed.value}`, }, }, on: { origin: { default: { - value: `{colors.${theme}.on.origin.default.value}`, + value: `{colors.${name}.${theme}.on.origin.default.value}`, }, hovered: { - value: `{colors.${theme}.on.origin.hovered.value}`, + value: `{colors.${name}.${theme}.on.origin.hovered.value}`, }, pressed: { - value: `{colors.${theme}.on.origin.pressed.value}`, + value: `{colors.${name}.${theme}.on.origin.pressed.value}`, }, }, },