From 06a0875108443c4de6622e5ca958c335022591d0 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 15 Aug 2024 09:43:53 +0200 Subject: [PATCH 1/7] moved files to match new structure --- .../design-tokens/primitives/globals.json | 100 +-- .../modes/typography/primary/theme.json | 30 + .../primitives/size/default.json | 175 ++++++ .../primitives/typography/default.json | 86 --- .../design-tokens/semantic/color.json | 550 ++++++++-------- .../design-tokens/semantic/style.json | 593 +++++++++--------- .../{ => modes}/colors/contrast/global.json | 0 .../colors/contrast/theme-template.json | 0 .../{ => modes}/colors/dark/global.json | 0 .../colors/dark/theme-template.json | 0 .../{ => modes}/colors/light/global.json | 0 .../colors/light/theme-template.json | 0 .../design-tokens/themes/theme-template.json | 320 +++++----- 13 files changed, 994 insertions(+), 860 deletions(-) create mode 100644 packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json create mode 100644 packages/cli/src/init/template/default-files/design-tokens/primitives/size/default.json delete mode 100644 packages/cli/src/init/template/default-files/design-tokens/primitives/typography/default.json rename packages/cli/src/init/template/template-files/design-tokens/primitives/{ => modes}/colors/contrast/global.json (100%) rename packages/cli/src/init/template/template-files/design-tokens/primitives/{ => modes}/colors/contrast/theme-template.json (100%) rename packages/cli/src/init/template/template-files/design-tokens/primitives/{ => modes}/colors/dark/global.json (100%) rename packages/cli/src/init/template/template-files/design-tokens/primitives/{ => modes}/colors/dark/theme-template.json (100%) rename packages/cli/src/init/template/template-files/design-tokens/primitives/{ => modes}/colors/light/global.json (100%) rename packages/cli/src/init/template/template-files/design-tokens/primitives/{ => modes}/colors/light/theme-template.json (100%) diff --git a/packages/cli/src/init/template/default-files/design-tokens/primitives/globals.json b/packages/cli/src/init/template/default-files/design-tokens/primitives/globals.json index c6a71c9a88..c1cb7126b8 100644 --- a/packages/cli/src/init/template/default-files/design-tokens/primitives/globals.json +++ b/packages/cli/src/init/template/default-files/design-tokens/primitives/globals.json @@ -1,21 +1,20 @@ { "border-width": { "1": { - "type": "borderWidth", - "value": "1px" + "$type": "borderWidth", + "$value": "1px" }, "2": { - "type": "borderWidth", - "value": "2px" + "$type": "borderWidth", + "$value": "2px" } }, "shadow": { "100": { - "type": "boxShadow", - "value": [ + "$type": "boxShadow", + "$value": [ { "color": "rgba(0,0,0,0.16)", - "type": "dropShadow", "x": "0", "y": "0", "blur": "1", @@ -26,17 +25,15 @@ "y": "1", "blur": "2", "spread": "0", - "color": "rgba(0,0,0,0.12)", - "type": "dropShadow" + "color": "rgba(0,0,0,0.12)" } ] }, "200": { - "type": "boxShadow", - "value": [ + "$type": "boxShadow", + "$value": [ { "color": "rgba(0,0,0,0.15)", - "type": "dropShadow", "x": "0", "y": "0", "blur": "1", @@ -44,7 +41,6 @@ }, { "color": "rgba(0,0,0,0.12)", - "type": "dropShadow", "x": "0", "y": "1", "blur": "2", @@ -55,17 +51,15 @@ "y": "2", "blur": "4", "spread": "0", - "color": "rgba(0,0,0,0.1)", - "type": "dropShadow" + "color": "rgba(0,0,0,0.1)" } ] }, "300": { - "type": "boxShadow", - "value": [ + "$type": "boxShadow", + "$value": [ { "color": "rgba(0,0,0,0.14)", - "type": "dropShadow", "x": "0", "y": "0", "blur": "1", @@ -73,7 +67,6 @@ }, { "color": "rgba(0,0,0,0.12)", - "type": "dropShadow", "x": "0", "y": "2", "blur": "4", @@ -84,17 +77,15 @@ "y": "4", "blur": "8", "spread": "0", - "color": "rgba(0,0,0,0.12)", - "type": "dropShadow" + "color": "rgba(0,0,0,0.12)" } ] }, "400": { - "type": "boxShadow", - "value": [ + "$type": "boxShadow", + "$value": [ { "color": "rgba(0,0,0,0.13)", - "type": "dropShadow", "x": "0", "y": "0", "blur": "1", @@ -102,7 +93,6 @@ }, { "color": "rgba(0,0,0,0.13)", - "type": "dropShadow", "x": "0", "y": "3", "blur": "5", @@ -113,17 +103,15 @@ "y": "6", "blur": "12", "spread": "0", - "color": "rgba(0,0,0,0.14)", - "type": "dropShadow" + "color": "rgba(0,0,0,0.14)" } ] }, "500": { - "type": "boxShadow", - "value": [ + "$type": "boxShadow", + "$value": [ { "color": "rgba(0,0,0,0.12)", - "type": "dropShadow", "x": "0", "y": "0", "blur": "1", @@ -131,7 +119,6 @@ }, { "color": "rgba(0,0,0,0.16)", - "type": "dropShadow", "x": "0", "y": "4", "blur": "8", @@ -142,56 +129,33 @@ "y": "12", "blur": "24", "spread": "0", - "color": "rgba(0,0,0,0.16)", - "type": "dropShadow" + "color": "rgba(0,0,0,0.16)" } ] } }, "border-radius": { - "2": { - "type": "borderRadius", - "value": "2" - }, - "4": { - "type": "borderRadius", - "value": "4" - }, - "8": { - "type": "borderRadius", - "value": "8" - }, - "12": { - "type": "borderRadius", - "value": "12" - }, - "16": { - "type": "borderRadius", - "value": "16" - }, - "24": { - "type": "borderRadius", - "value": "24" - }, - "32": { - "type": "borderRadius", - "value": "32" - }, - "9999": { - "type": "borderRadius", - "value": "9999" + "base": { + "$type": "borderRadius", + "$value": "4" } }, "opacity": { "30": { - "type": "opacity", - "value": "30%" + "$type": "opacity", + "$value": "30%" } }, "sizing": { "base": { - "type": "sizing", - "value": "4" + "$type": "sizing", + "$value": "4" + } + }, + "spacing": { + "base": { + "$type": "spacing", + "$value": "4" } } } diff --git a/packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json b/packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json new file mode 100644 index 0000000000..31a0991c4d --- /dev/null +++ b/packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json @@ -0,0 +1,30 @@ +{ + "theme": { + "main": { + "$type": "fontFamilies", + "$value": "Inter" + }, + "bold": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontWeights", + "$value": "Medium" + }, + "extra-bold": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontWeights", + "$value": "Semi bold" + }, + "regular": { + "$type": "fontWeights", + "$value": "Regular" + } + } +} diff --git a/packages/cli/src/init/template/default-files/design-tokens/primitives/size/default.json b/packages/cli/src/init/template/default-files/design-tokens/primitives/size/default.json new file mode 100644 index 0000000000..4af117ff8b --- /dev/null +++ b/packages/cli/src/init/template/default-files/design-tokens/primitives/size/default.json @@ -0,0 +1,175 @@ +{ + "line-height": { + "sm": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "lineHeights", + "$value": "130%" + }, + "md": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "lineHeights", + "$value": "150%" + }, + "lg": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "lineHeights", + "$value": "170%" + } + }, + "font-size": { + "1": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "12" + }, + "2": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "13" + }, + "3": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "14" + }, + "4": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "16" + }, + "5": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "18" + }, + "6": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "21" + }, + "7": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "24" + }, + "8": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "30" + }, + "9": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "36" + }, + "10": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "48" + }, + "11": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontSizes", + "$value": "60" + } + }, + "letter-spacing": { + "1": { + "$type": "letterSpacing", + "$value": "-1%" + }, + "2": { + "$type": "letterSpacing", + "$value": "-0.5%" + }, + "3": { + "$type": "letterSpacing", + "$value": "-0.25%" + }, + "4": { + "$type": "letterSpacing", + "$value": "-0.15%" + }, + "5": { + "$type": "letterSpacing", + "$value": "0%" + }, + "6": { + "$type": "letterSpacing", + "$value": "0.15%" + }, + "7": { + "$type": "letterSpacing", + "$value": "0.25%" + }, + "8": { + "$type": "letterSpacing", + "$value": "0.5%" + }, + "9": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "letterSpacing", + "$value": "1.5%" + } + } +} \ No newline at end of file diff --git a/packages/cli/src/init/template/default-files/design-tokens/primitives/typography/default.json b/packages/cli/src/init/template/default-files/design-tokens/primitives/typography/default.json deleted file mode 100644 index 8ec654585f..0000000000 --- a/packages/cli/src/init/template/default-files/design-tokens/primitives/typography/default.json +++ /dev/null @@ -1,86 +0,0 @@ -{ - "font-family": { - "main": { - "type": "fontFamilies", - "value": "Inter" - } - }, - "line-height": { - "300": { - "type": "lineHeights", - "value": "130%" - }, - "500": { - "type": "lineHeights", - "value": "150%" - }, - "600": { - "type": "lineHeights", - "value": "160%" - }, - "700": { - "type": "lineHeights", - "value": "170%" - } - }, - "font-weight": { - "medium": { - "type": "fontWeights", - "value": "500" - }, - "semibold": { - "type": "fontWeights", - "value": "600" - }, - "regular": { - "type": "fontWeights", - "value": "400" - } - }, - "font-size": { - "f-3": { - "type": "fontSizes", - "value": "12" - }, - "f-2": { - "type": "fontSizes", - "value": "13" - }, - "f-1": { - "type": "fontSizes", - "value": "14" - }, - "f0": { - "type": "fontSizes", - "value": "16" - }, - "f1": { - "type": "fontSizes", - "value": "18" - }, - "f2": { - "type": "fontSizes", - "value": "21" - }, - "f3": { - "type": "fontSizes", - "value": "24" - }, - "f4": { - "type": "fontSizes", - "value": "30" - }, - "f5": { - "type": "fontSizes", - "value": "36" - }, - "f6": { - "type": "fontSizes", - "value": "48" - }, - "f7": { - "type": "fontSizes", - "value": "60" - } - } -} diff --git a/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json b/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json index 037e6c7877..ae9f4f5f20 100644 --- a/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json +++ b/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json @@ -2,560 +2,570 @@ "color": { "accent": { "background-default": { - "type": "color", - "value": "{color.accent.1}" + "$type": "color", + "$value": "{color.accent.1}" }, "background-subtle": { - "type": "color", - "value": "{color.accent.2}" + "$type": "color", + "$value": "{color.accent.2}" }, "surface-default": { - "type": "color", - "value": "{color.accent.3}" + "$type": "color", + "$value": "{color.accent.3}" }, "surface-hover": { - "type": "color", - "value": "{color.accent.4}" + "$type": "color", + "$value": "{color.accent.4}" }, "surface-active": { - "type": "color", - "value": "{color.accent.5}" + "$type": "color", + "$value": "{color.accent.5}" }, "border-subtle": { - "type": "color", - "value": "{color.accent.6}" + "$type": "color", + "$value": "{color.accent.6}" }, "border-default": { - "type": "color", - "value": "{color.accent.7}" + "$type": "color", + "$value": "{color.accent.7}" }, "border-strong": { - "type": "color", - "value": "{color.accent.8}" + "$type": "color", + "$value": "{color.accent.8}" }, "base-default": { - "type": "color", - "value": "{color.accent.9}" + "$type": "color", + "$value": "{color.accent.9}" }, "base-hover": { - "type": "color", - "value": "{color.accent.10}" + "$type": "color", + "$value": "{color.accent.10}" }, "base-active": { - "type": "color", - "value": "{color.accent.11}" + "$type": "color", + "$value": "{color.accent.11}" }, "text-subtle": { - "type": "color", - "value": "{color.accent.12}" + "$type": "color", + "$value": "{color.accent.12}" }, "text-default": { - "type": "color", - "value": "{color.accent.13}" + "$type": "color", + "$value": "{color.accent.13}" }, "contrast-default": { - "type": "color", - "value": "{color.accent.contrast-1}" + "$type": "color", + "$value": "{color.accent.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{color.accent.contrast-2}" + "$type": "color", + "$value": "{color.accent.contrast-2}" } }, "neutral": { "background-default": { - "type": "color", - "value": "{color.neutral.1}" + "$type": "color", + "$value": "{color.neutral.1}" }, "background-subtle": { - "type": "color", - "value": "{color.neutral.2}" + "$type": "color", + "$value": "{color.neutral.2}" }, "surface-default": { - "type": "color", - "value": "{color.neutral.3}" + "$type": "color", + "$value": "{color.neutral.3}" }, "surface-hover": { - "type": "color", - "value": "{color.neutral.4}" + "$type": "color", + "$value": "{color.neutral.4}" }, "surface-active": { - "type": "color", - "value": "{color.neutral.5}" + "$type": "color", + "$value": "{color.neutral.5}" }, "border-subtle": { - "type": "color", - "value": "{color.neutral.6}" + "$type": "color", + "$value": "{color.neutral.6}" }, "border-default": { - "type": "color", - "value": "{color.neutral.7}" + "$type": "color", + "$value": "{color.neutral.7}" }, "border-strong": { - "type": "color", - "value": "{color.neutral.8}" + "$type": "color", + "$value": "{color.neutral.8}" }, "base-default": { - "type": "color", - "value": "{color.neutral.9}" + "$type": "color", + "$value": "{color.neutral.9}" }, "base-hover": { - "type": "color", - "value": "{color.neutral.10}" + "$type": "color", + "$value": "{color.neutral.10}" }, "base-active": { - "type": "color", - "value": "{color.neutral.11}" + "$type": "color", + "$value": "{color.neutral.11}" }, "text-subtle": { - "type": "color", - "value": "{color.neutral.12}" + "$type": "color", + "$value": "{color.neutral.12}" }, "text-default": { - "type": "color", - "value": "{color.neutral.13}" + "$type": "color", + "$value": "{color.neutral.13}" }, "contrast-default": { - "type": "color", - "value": "{color.neutral.contrast-1}" + "$type": "color", + "$value": "{color.neutral.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{color.neutral.contrast-2}" + "$type": "color", + "$value": "{color.neutral.contrast-2}" } }, "brand1": { "background-default": { - "type": "color", - "value": "{color.brand1.1}" + "$type": "color", + "$value": "{color.brand1.1}" }, "background-subtle": { - "type": "color", - "value": "{color.brand1.2}" + "$type": "color", + "$value": "{color.brand1.2}" }, "surface-default": { - "type": "color", - "value": "{color.brand1.3}" + "$type": "color", + "$value": "{color.brand1.3}" }, "surface-hover": { - "type": "color", - "value": "{color.brand1.4}" + "$type": "color", + "$value": "{color.brand1.4}" }, "surface-active": { - "type": "color", - "value": "{color.brand1.5}" + "$type": "color", + "$value": "{color.brand1.5}" }, "border-subtle": { - "type": "color", - "value": "{color.brand1.6}" + "$type": "color", + "$value": "{color.brand1.6}" }, "border-default": { - "type": "color", - "value": "{color.brand1.7}" + "$type": "color", + "$value": "{color.brand1.7}" }, "border-strong": { - "type": "color", - "value": "{color.brand1.8}" + "$type": "color", + "$value": "{color.brand1.8}" }, "base-default": { - "type": "color", - "value": "{color.brand1.9}" + "$type": "color", + "$value": "{color.brand1.9}" }, "base-hover": { - "type": "color", - "value": "{color.brand1.10}" + "$type": "color", + "$value": "{color.brand1.10}" }, "base-active": { - "type": "color", - "value": "{color.brand1.11}" + "$type": "color", + "$value": "{color.brand1.11}" }, "text-subtle": { - "type": "color", - "value": "{color.brand1.12}" + "$type": "color", + "$value": "{color.brand1.12}" }, "text-default": { - "type": "color", - "value": "{color.brand1.13}" + "$type": "color", + "$value": "{color.brand1.13}" }, "contrast-default": { - "type": "color", - "value": "{color.brand1.contrast-1}" + "$type": "color", + "$value": "{color.brand1.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{color.brand1.contrast-2}" + "$type": "color", + "$value": "{color.brand1.contrast-2}" } }, "brand2": { "background-default": { - "type": "color", - "value": "{color.brand2.1}" + "$type": "color", + "$value": "{color.brand2.1}" }, "background-subtle": { - "type": "color", - "value": "{color.brand2.2}" + "$type": "color", + "$value": "{color.brand2.2}" }, "surface-default": { - "type": "color", - "value": "{color.brand2.3}" + "$type": "color", + "$value": "{color.brand2.3}" }, "surface-hover": { - "type": "color", - "value": "{color.brand2.4}" + "$type": "color", + "$value": "{color.brand2.4}" }, "surface-active": { - "type": "color", - "value": "{color.brand2.5}" + "$type": "color", + "$value": "{color.brand2.5}" }, "border-subtle": { - "type": "color", - "value": "{color.brand2.6}" + "$type": "color", + "$value": "{color.brand2.6}" }, "border-default": { - "type": "color", - "value": "{color.brand2.7}" + "$type": "color", + "$value": "{color.brand2.7}" }, "border-strong": { - "type": "color", - "value": "{color.brand2.8}" + "$type": "color", + "$value": "{color.brand2.8}" }, "base-default": { - "type": "color", - "value": "{color.brand2.9}" + "$type": "color", + "$value": "{color.brand2.9}" }, "base-hover": { - "type": "color", - "value": "{color.brand2.10}" + "$type": "color", + "$value": "{color.brand2.10}" }, "base-active": { - "type": "color", - "value": "{color.brand2.11}" + "$type": "color", + "$value": "{color.brand2.11}" }, "text-subtle": { - "type": "color", - "value": "{color.brand2.12}" + "$type": "color", + "$value": "{color.brand2.12}" }, "text-default": { - "type": "color", - "value": "{color.brand2.13}" + "$type": "color", + "$value": "{color.brand2.13}" }, "contrast-default": { - "type": "color", - "value": "{color.brand2.contrast-1}" + "$type": "color", + "$value": "{color.brand2.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{color.brand2.contrast-2}" + "$type": "color", + "$value": "{color.brand2.contrast-2}" } }, "brand3": { "background-default": { - "type": "color", - "value": "{color.brand3.1}" + "$type": "color", + "$value": "{color.brand3.1}" }, "background-subtle": { - "type": "color", - "value": "{color.brand3.2}" + "$type": "color", + "$value": "{color.brand3.2}" }, "surface-default": { - "type": "color", - "value": "{color.brand3.3}" + "$type": "color", + "$value": "{color.brand3.3}" }, "surface-hover": { - "type": "color", - "value": "{color.brand3.4}" + "$type": "color", + "$value": "{color.brand3.4}" }, "surface-active": { - "type": "color", - "value": "{color.brand3.5}" + "$type": "color", + "$value": "{color.brand3.5}" }, "border-subtle": { - "type": "color", - "value": "{color.brand3.6}" + "$type": "color", + "$value": "{color.brand3.6}" }, "border-default": { - "type": "color", - "value": "{color.brand3.7}" + "$type": "color", + "$value": "{color.brand3.7}" }, "border-strong": { - "type": "color", - "value": "{color.brand3.8}" + "$type": "color", + "$value": "{color.brand3.8}" }, "base-default": { - "type": "color", - "value": "{color.brand3.9}" + "$type": "color", + "$value": "{color.brand3.9}" }, "base-hover": { - "type": "color", - "value": "{color.brand3.10}" + "$type": "color", + "$value": "{color.brand3.10}" }, "base-active": { - "type": "color", - "value": "{color.brand3.11}" + "$type": "color", + "$value": "{color.brand3.11}" }, "text-subtle": { - "type": "color", - "value": "{color.brand3.12}" + "$type": "color", + "$value": "{color.brand3.12}" }, "text-default": { - "type": "color", - "value": "{color.brand3.13}" + "$type": "color", + "$value": "{color.brand3.13}" }, "contrast-default": { - "type": "color", - "value": "{color.brand3.contrast-1}" + "$type": "color", + "$value": "{color.brand3.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{color.brand3.contrast-2}" + "$type": "color", + "$value": "{color.brand3.contrast-2}" } }, "success": { "background-default": { - "type": "color", - "value": "{global.green.1}" + "$type": "color", + "$value": "{global.green.1}" }, "background-subtle": { - "type": "color", - "value": "{global.green.2}" + "$type": "color", + "$value": "{global.green.2}" }, "surface-default": { - "type": "color", - "value": "{global.green.3}" + "$type": "color", + "$value": "{global.green.3}" }, "surface-hover": { - "type": "color", - "value": "{global.green.4}" + "$type": "color", + "$value": "{global.green.4}" }, "surface-active": { - "type": "color", - "value": "{global.green.5}" + "$type": "color", + "$value": "{global.green.5}" }, "border-subtle": { - "type": "color", - "value": "{global.green.6}" + "$type": "color", + "$value": "{global.green.6}" }, "border-default": { - "type": "color", - "value": "{global.green.7}" + "$type": "color", + "$value": "{global.green.7}" }, "border-strong": { - "type": "color", - "value": "{global.green.8}" + "$type": "color", + "$value": "{global.green.8}" }, "base-default": { - "type": "color", - "value": "{global.green.9}" + "$type": "color", + "$value": "{global.green.9}" }, "base-hover": { - "type": "color", - "value": "{global.green.10}" + "$type": "color", + "$value": "{global.green.10}" }, "base-active": { - "type": "color", - "value": "{global.green.11}" + "$type": "color", + "$value": "{global.green.11}" }, "text-subtle": { - "type": "color", - "value": "{global.green.12}" + "$type": "color", + "$value": "{global.green.12}" }, "text-default": { - "type": "color", - "value": "{global.green.13}" + "$type": "color", + "$value": "{global.green.13}" }, "contrast-default": { - "type": "color", - "value": "{global.green.contrast-1}" + "$type": "color", + "$value": "{global.green.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{global.green.contrast-2}" + "$type": "color", + "$value": "{global.green.contrast-2}" } }, "danger": { "background-default": { - "type": "color", - "value": "{global.red.1}" + "$type": "color", + "$value": "{global.red.1}" }, "background-subtle": { - "type": "color", - "value": "{global.red.2}" + "$type": "color", + "$value": "{global.red.2}" }, "surface-default": { - "type": "color", - "value": "{global.red.3}" + "$type": "color", + "$value": "{global.red.3}" }, "surface-hover": { - "type": "color", - "value": "{global.red.4}" + "$type": "color", + "$value": "{global.red.4}" }, "surface-active": { - "type": "color", - "value": "{global.red.5}" + "$type": "color", + "$value": "{global.red.5}" }, "border-subtle": { - "type": "color", - "value": "{global.red.6}" + "$type": "color", + "$value": "{global.red.6}" }, "border-default": { - "type": "color", - "value": "{global.red.7}" + "$type": "color", + "$value": "{global.red.7}" }, "border-strong": { - "type": "color", - "value": "{global.red.8}" + "$type": "color", + "$value": "{global.red.8}" }, "base-default": { - "type": "color", - "value": "{global.red.9}" + "$type": "color", + "$value": "{global.red.9}" }, "base-hover": { - "type": "color", - "value": "{global.red.10}" + "$type": "color", + "$value": "{global.red.10}" }, "base-active": { - "type": "color", - "value": "{global.red.11}" + "$type": "color", + "$value": "{global.red.11}" }, "text-subtle": { - "type": "color", - "value": "{global.red.12}" + "$type": "color", + "$value": "{global.red.12}" }, "text-default": { - "type": "color", - "value": "{global.red.13}" + "$type": "color", + "$value": "{global.red.13}" }, "contrast-default": { - "type": "color", - "value": "{global.red.contrast-1}" + "$type": "color", + "$value": "{global.red.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{global.red.contrast-2}" + "$type": "color", + "$value": "{global.red.contrast-2}" } }, "info": { "background-default": { - "type": "color", - "value": "{global.blue.1}" + "$type": "color", + "$value": "{global.blue.1}" }, "background-subtle": { - "type": "color", - "value": "{global.blue.2}" + "$type": "color", + "$value": "{global.blue.2}" }, "surface-default": { - "type": "color", - "value": "{global.blue.3}" + "$type": "color", + "$value": "{global.blue.3}" }, "surface-hover": { - "type": "color", - "value": "{global.blue.4}" + "$type": "color", + "$value": "{global.blue.4}" }, "surface-active": { - "type": "color", - "value": "{global.blue.5}" + "$type": "color", + "$value": "{global.blue.5}" }, "border-subtle": { - "type": "color", - "value": "{global.blue.6}" + "$type": "color", + "$value": "{global.blue.6}" }, "border-default": { - "type": "color", - "value": "{global.blue.7}" + "$type": "color", + "$value": "{global.blue.7}" }, "border-strong": { - "type": "color", - "value": "{global.blue.8}" + "$type": "color", + "$value": "{global.blue.8}" }, "base-default": { - "type": "color", - "value": "{global.blue.9}" + "$type": "color", + "$value": "{global.blue.9}" }, "base-hover": { - "type": "color", - "value": "{global.blue.10}" + "$type": "color", + "$value": "{global.blue.10}" }, "base-active": { - "type": "color", - "value": "{global.blue.11}" + "$type": "color", + "$value": "{global.blue.11}" }, "text-subtle": { - "type": "color", - "value": "{global.blue.12}" + "$type": "color", + "$value": "{global.blue.12}" }, "text-default": { - "type": "color", - "value": "{global.blue.13}" + "$type": "color", + "$value": "{global.blue.13}" }, "contrast-default": { - "type": "color", - "value": "{global.blue.contrast-1}" + "$type": "color", + "$value": "{global.blue.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{global.blue.contrast-2}" + "$type": "color", + "$value": "{global.blue.contrast-2}" } }, "warning": { "background-default": { - "type": "color", - "value": "{global.yellow.1}" + "$type": "color", + "$value": "{global.yellow.1}" }, "background-subtle": { - "type": "color", - "value": "{global.yellow.2}" + "$type": "color", + "$value": "{global.yellow.2}" }, "surface-default": { - "type": "color", - "value": "{global.yellow.3}" + "$type": "color", + "$value": "{global.yellow.3}" }, "surface-hover": { - "type": "color", - "value": "{global.yellow.4}" + "$type": "color", + "$value": "{global.yellow.4}" }, "surface-active": { - "type": "color", - "value": "{global.yellow.5}" + "$type": "color", + "$value": "{global.yellow.5}" }, "border-subtle": { - "type": "color", - "value": "{global.yellow.6}" + "$type": "color", + "$value": "{global.yellow.6}" }, "border-default": { - "type": "color", - "value": "{global.yellow.7}" + "$type": "color", + "$value": "{global.yellow.7}" }, "border-strong": { - "type": "color", - "value": "{global.yellow.8}" + "$type": "color", + "$value": "{global.yellow.8}" }, "base-default": { - "type": "color", - "value": "{global.orange.9}" + "$type": "color", + "$value": "{global.orange.9}" }, "base-hover": { - "type": "color", - "value": "{global.orange.10}" + "$type": "color", + "$value": "{global.orange.10}" }, "base-active": { - "type": "color", - "value": "{global.orange.11}" + "$type": "color", + "$value": "{global.orange.11}" }, "text-subtle": { - "type": "color", - "value": "{global.orange.12}" + "$type": "color", + "$value": "{global.orange.12}" }, "text-default": { - "type": "color", - "value": "{global.orange.13}" + "$type": "color", + "$value": "{global.orange.13}" }, "contrast-default": { - "type": "color", - "value": "{global.yellow.contrast-1}" + "$type": "color", + "$value": "{global.yellow.contrast-1}" }, "contrast-subtle": { - "type": "color", - "value": "{global.yellow.contrast-2}" + "$type": "color", + "$value": "{global.yellow.contrast-2}" + } + }, + "focus": { + "inner": { + "$type": "color", + "$value": "{color.neutral.background-default}" + }, + "outer": { + "$type": "color", + "$value": "{color.accent.text-default}" } } } diff --git a/packages/cli/src/init/template/default-files/design-tokens/semantic/style.json b/packages/cli/src/init/template/default-files/design-tokens/semantic/style.json index dabf65db81..56a30a39ac 100644 --- a/packages/cli/src/init/template/default-files/design-tokens/semantic/style.json +++ b/packages/cli/src/init/template/default-files/design-tokens/semantic/style.json @@ -2,542 +2,563 @@ "typography": { "heading": { "2xl": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f7}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.11}", + "letterSpacing": "{letter-spacing.1}" } }, "xl": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f6}" - }, - "description": "H1" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.10}", + "letterSpacing": "{letter-spacing.1}" + } }, "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f5}" - }, - "description": "H2" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.9}", + "letterSpacing": "{letter-spacing.2}" + } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f4}" - }, - "description": "H3" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.8}", + "letterSpacing": "{letter-spacing.3}" + } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f3}" - }, - "description": "H4" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.7}", + "letterSpacing": "{letter-spacing.5}" + } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f2}" - }, - "description": "H5" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.6}" + } }, "2xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f1}" - }, - "description": "H6" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.6}" + } } }, "ingress": { "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f4}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.8}", + "letterSpacing": "{letter-spacing.8}" } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f3}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.7}", + "letterSpacing": "{letter-spacing.8}" } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f2}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.7}" } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f1}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.6}" } } }, "paragraph": { "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.500}", - "fontSize": "{font-size.f2}" + "lineHeight": "{line-height.md}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.8}" } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.500}", - "fontSize": "{font-size.f1}" + "lineHeight": "{line-height.md}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.8}" } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.500}", - "fontSize": "{font-size.f0}" + "lineHeight": "{line-height.md}", + "fontSize": "{font-size.4}", + "letterSpacing": "{letter-spacing.7}" } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.500}", - "fontSize": "{font-size.f-1}" + "lineHeight": "{line-height.md}", + "fontSize": "{font-size.3}", + "letterSpacing": "{letter-spacing.6}" } }, "short": { "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f2}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.8}" } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f1}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.8}" } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f0}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.4}", + "letterSpacing": "{letter-spacing.7}" } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f-1}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.3}", + "letterSpacing": "{letter-spacing.6}" } } }, "long": { "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f1}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.8}" } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f0}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.8}" } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f-1}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.4}", + "letterSpacing": "{letter-spacing.7}" } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.700}", - "fontSize": "{font-size.f-2}" + "lineHeight": "{line-height.lg}", + "fontSize": "{font-size.3}", + "letterSpacing": "{letter-spacing.6}" } } } }, "label": { "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f2}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.8}" } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f1}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.8}" } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f0}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.4}", + "letterSpacing": "{letter-spacing.7}" } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.medium}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f-1}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.3}", + "letterSpacing": "{letter-spacing.6}" } } }, "error_message": { "lg": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f2}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.6}", + "letterSpacing": "{letter-spacing.8}" } }, "md": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f1}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.5}", + "letterSpacing": "{letter-spacing.8}" } }, "sm": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f0}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.4}", + "letterSpacing": "{letter-spacing.7}" } }, "xs": { - "type": "typography", - "value": { - "fontFamily": "{font-family.main}", + "$type": "typography", + "$value": { + "fontFamily": "{font.family}", "fontWeight": "{font-weight.regular}", - "lineHeight": "{line-height.300}", - "fontSize": "{font-size.f-1}" + "lineHeight": "{line-height.sm}", + "fontSize": "{font-size.3}", + "letterSpacing": "{letter-spacing.6}" } } } }, - "opacity": { - "disabled": { - "type": "opacity", - "value": "{opacity.30}" + "disabled": { + "opacity": { + "$type": "opacity", + "$value": "{opacity.30}" } }, "border-radius": { "sm": { - "type": "borderRadius", - "value": "{border-radius.2}" + "$type": "borderRadius", + "$value": "{border-radius.base}*0.5" }, "md": { - "type": "borderRadius", - "value": "{border-radius.4}" + "$type": "borderRadius", + "$value": "{border-radius.base}*1" }, "lg": { - "type": "borderRadius", - "value": "{border-radius.8}" + "$type": "borderRadius", + "$value": "{border-radius.base}*2" }, "xl": { - "type": "borderRadius", - "value": "{border-radius.12}" + "$type": "borderRadius", + "$value": "{border-radius.base}*3" }, "2xl": { - "type": "borderRadius", - "value": "{border-radius.16}" + "$type": "borderRadius", + "$value": "{border-radius.base}*4" }, "3xl": { - "type": "borderRadius", - "value": "{border-radius.24}" + "$type": "borderRadius", + "$value": "{border-radius.base}*6" }, "4xl": { - "type": "borderRadius", - "value": "{border-radius.32}" + "$type": "borderRadius", + "$value": "{border-radius.base}*8" }, "full": { - "type": "borderRadius", - "value": "{border-radius.9999}" + "$type": "borderRadius", + "$value": "9999" } }, "spacing": { "0": { - "type": "spacing", - "value": "{sizing.base}*0" + "$type": "spacing", + "$value": "{spacing.base}*0" }, "1": { - "type": "spacing", - "value": "{sizing.base}*1" + "$type": "spacing", + "$value": "{spacing.base}*1" }, "2": { - "type": "spacing", - "value": "{sizing.base}*2" + "$type": "spacing", + "$value": "{spacing.base}*2" }, "3": { - "type": "spacing", - "value": "{sizing.base}*3" + "$type": "spacing", + "$value": "{spacing.base}*3" }, "4": { - "type": "spacing", - "value": "{sizing.base}*4" + "$type": "spacing", + "$value": "{spacing.base}*4" }, "5": { - "type": "spacing", - "value": "{sizing.base}*5" + "$type": "spacing", + "$value": "{spacing.base}*5" }, "6": { - "type": "spacing", - "value": "{sizing.base}*6" + "$type": "spacing", + "$value": "{spacing.base}*6" }, "7": { - "type": "spacing", - "value": "{sizing.base}*7" + "$type": "spacing", + "$value": "{spacing.base}*7" }, "8": { - "type": "spacing", - "value": "{sizing.base}*8" + "$type": "spacing", + "$value": "{spacing.base}*8" }, "9": { - "type": "spacing", - "value": "{sizing.base}*9" + "$type": "spacing", + "$value": "{spacing.base}*9" }, "10": { - "type": "spacing", - "value": "{sizing.base}*10" + "$type": "spacing", + "$value": "{spacing.base}*10" }, "11": { - "type": "spacing", - "value": "{sizing.base}*11" + "$type": "spacing", + "$value": "{spacing.base}*11" }, "12": { - "type": "spacing", - "value": "{sizing.base}*12" + "$type": "spacing", + "$value": "{spacing.base}*12" }, "13": { - "type": "spacing", - "value": "{sizing.base}*13" + "$type": "spacing", + "$value": "{spacing.base}*13" }, "14": { - "type": "spacing", - "value": "{sizing.base}*14" + "$type": "spacing", + "$value": "{spacing.base}*14" }, "15": { - "type": "spacing", - "value": "{sizing.base}*15" + "$type": "spacing", + "$value": "{spacing.base}*15" }, "18": { - "type": "spacing", - "value": "{sizing.base}*18" + "$type": "spacing", + "$value": "{spacing.base}*18" }, "22": { - "type": "spacing", - "value": "{sizing.base}*22" + "$type": "spacing", + "$value": "{spacing.base}*22" }, "26": { - "type": "spacing", - "value": "{sizing.base}*26" + "$type": "spacing", + "$value": "{spacing.base}*26" }, "30": { - "type": "spacing", - "value": "{sizing.base}*30" + "$type": "spacing", + "$value": "{spacing.base}*30" } }, "sizing": { "0": { - "type": "sizing", - "value": "{sizing.base}*0" + "$type": "sizing", + "$value": "{sizing.base}*0" }, "1": { - "type": "sizing", - "value": "{sizing.base}*1" + "$type": "sizing", + "$value": "{sizing.base}*1" }, "2": { - "type": "sizing", - "value": "{sizing.base}*2" + "$type": "sizing", + "$value": "{sizing.base}*2" }, "3": { - "type": "sizing", - "value": "{sizing.base}*3" + "$type": "sizing", + "$value": "{sizing.base}*3" }, "4": { - "type": "sizing", - "value": "{sizing.base}*4" + "$type": "sizing", + "$value": "{sizing.base}*4" }, "5": { - "type": "sizing", - "value": "{sizing.base}*5" + "$type": "sizing", + "$value": "{sizing.base}*5" }, "6": { - "type": "sizing", - "value": "{sizing.base}*6" + "$type": "sizing", + "$value": "{sizing.base}*6" }, "7": { - "type": "sizing", - "value": "{sizing.base}*7" + "$type": "sizing", + "$value": "{sizing.base}*7" }, "8": { - "type": "sizing", - "value": "{sizing.base}*8" + "$type": "sizing", + "$value": "{sizing.base}*8" }, "9": { - "type": "sizing", - "value": "{sizing.base}*9" + "$type": "sizing", + "$value": "{sizing.base}*9" }, "10": { - "type": "sizing", - "value": "{sizing.base}*10" + "$type": "sizing", + "$value": "{sizing.base}*10" }, "11": { - "type": "sizing", - "value": "{sizing.base}*11" + "$type": "sizing", + "$value": "{sizing.base}*11" }, "12": { - "type": "sizing", - "value": "{sizing.base}*12" + "$type": "sizing", + "$value": "{sizing.base}*12" }, "13": { - "type": "sizing", - "value": "{sizing.base}*13" + "$type": "sizing", + "$value": "{sizing.base}*13" }, "14": { - "type": "sizing", - "value": "{sizing.base}*14" + "$type": "sizing", + "$value": "{sizing.base}*14" }, "15": { - "type": "sizing", - "value": "{sizing.base}*15" + "$type": "sizing", + "$value": "{sizing.base}*15" }, "18": { - "type": "sizing", - "value": "{sizing.base}*18" + "$type": "sizing", + "$value": "{sizing.base}*18" }, "22": { - "type": "sizing", - "value": "{sizing.base}*22" + "$type": "sizing", + "$value": "{sizing.base}*22" }, "26": { - "type": "sizing", - "value": "{sizing.base}*26" + "$type": "sizing", + "$value": "{sizing.base}*26" }, "30": { - "type": "sizing", - "value": "{sizing.base}*30" + "$type": "sizing", + "$value": "{sizing.base}*30" } }, "border-width": { "default": { - "type": "borderWidth", - "value": "{border-width.1}" - }, - "active": { - "type": "borderWidth", - "value": "{border-width.2}" + "$type": "borderWidth", + "$value": "{border-width.1}" }, - "tab_focus": { - "type": "borderWidth", - "value": "{border-width.2}" + "highlight": { + "$type": "borderWidth", + "$value": "{border-width.2}" } }, "shadow": { "xs": { - "type": "boxShadow", - "value": "{shadow.100}" + "$type": "boxShadow", + "$value": "{shadow.100}" }, "sm": { - "type": "boxShadow", - "value": "{shadow.200}" + "$type": "boxShadow", + "$value": "{shadow.200}" }, "md": { - "type": "boxShadow", - "value": "{shadow.300}" + "$type": "boxShadow", + "$value": "{shadow.300}" }, "lg": { - "type": "boxShadow", - "value": "{shadow.400}" + "$type": "boxShadow", + "$value": "{shadow.400}" }, "xl": { - "type": "boxShadow", - "value": "{shadow.500}" + "$type": "boxShadow", + "$value": "{shadow.500}" } } } diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/global.json similarity index 100% rename from packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/global.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/global.json diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json similarity index 100% rename from packages/cli/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json similarity index 100% rename from packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json similarity index 100% rename from packages/cli/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json similarity index 100% rename from packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/global.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json similarity index 100% rename from packages/cli/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json diff --git a/packages/cli/src/init/template/template-files/design-tokens/themes/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/themes/theme-template.json index ba9a158aa2..008f0e682d 100644 --- a/packages/cli/src/init/template/template-files/design-tokens/themes/theme-template.json +++ b/packages/cli/src/init/template/template-files/design-tokens/themes/theme-template.json @@ -2,313 +2,333 @@ "color": { "accent": { "1": { - "type": "color", - "value": "{.accent.1}" + "$type": "color", + "$value": "{.accent.1}" }, "2": { - "type": "color", - "value": "{.accent.2}" + "$type": "color", + "$value": "{.accent.2}" }, "3": { - "type": "color", - "value": "{.accent.3}" + "$type": "color", + "$value": "{.accent.3}" }, "4": { - "type": "color", - "value": "{.accent.4}" + "$type": "color", + "$value": "{.accent.4}" }, "5": { - "type": "color", - "value": "{.accent.5}" + "$type": "color", + "$value": "{.accent.5}" }, "6": { - "type": "color", - "value": "{.accent.6}" + "$type": "color", + "$value": "{.accent.6}" }, "7": { - "type": "color", - "value": "{.accent.7}" + "$type": "color", + "$value": "{.accent.7}" }, "8": { - "type": "color", - "value": "{.accent.8}" + "$type": "color", + "$value": "{.accent.8}" }, "9": { - "type": "color", - "value": "{.accent.9}" + "$type": "color", + "$value": "{.accent.9}" }, "10": { - "type": "color", - "value": "{.accent.10}" + "$type": "color", + "$value": "{.accent.10}" }, "11": { - "type": "color", - "value": "{.accent.11}" + "$type": "color", + "$value": "{.accent.11}" }, "12": { - "type": "color", - "value": "{.accent.12}" + "$type": "color", + "$value": "{.accent.12}" }, "13": { - "type": "color", - "value": "{.accent.13}" + "$type": "color", + "$value": "{.accent.13}" }, "contrast-1": { - "type": "color", - "value": "{.accent.contrast-1}" + "$type": "color", + "$value": "{.accent.contrast-1}" }, "contrast-2": { - "type": "color", - "value": "{.accent.contrast-2}" + "$type": "color", + "$value": "{.accent.contrast-2}" } }, "neutral": { "1": { - "type": "color", - "value": "{.neutral.1}" + "$type": "color", + "$value": "{.neutral.1}" }, "2": { - "type": "color", - "value": "{.neutral.2}" + "$type": "color", + "$value": "{.neutral.2}" }, "3": { - "type": "color", - "value": "{.neutral.3}" + "$type": "color", + "$value": "{.neutral.3}" }, "4": { - "type": "color", - "value": "{.neutral.4}" + "$type": "color", + "$value": "{.neutral.4}" }, "5": { - "type": "color", - "value": "{.neutral.5}" + "$type": "color", + "$value": "{.neutral.5}" }, "6": { - "type": "color", - "value": "{.neutral.6}" + "$type": "color", + "$value": "{.neutral.6}" }, "7": { - "type": "color", - "value": "{.neutral.7}" + "$type": "color", + "$value": "{.neutral.7}" }, "8": { - "type": "color", - "value": "{.neutral.8}" + "$type": "color", + "$value": "{.neutral.8}" }, "9": { - "type": "color", - "value": "{.neutral.9}" + "$type": "color", + "$value": "{.neutral.9}" }, "10": { - "type": "color", - "value": "{.neutral.10}" + "$type": "color", + "$value": "{.neutral.10}" }, "11": { - "type": "color", - "value": "{.neutral.11}" + "$type": "color", + "$value": "{.neutral.11}" }, "12": { - "type": "color", - "value": "{.neutral.12}" + "$type": "color", + "$value": "{.neutral.12}" }, "13": { - "type": "color", - "value": "{.neutral.13}" + "$type": "color", + "$value": "{.neutral.13}" }, "contrast-1": { - "type": "color", - "value": "{.neutral.contrast-1}" + "$type": "color", + "$value": "{.neutral.contrast-1}" }, "contrast-2": { - "type": "color", - "value": "{.neutral.contrast-2}" + "$type": "color", + "$value": "{.neutral.contrast-2}" } }, "brand1": { "1": { - "type": "color", - "value": "{.brand1.1}" + "$type": "color", + "$value": "{.brand1.1}" }, "2": { - "type": "color", - "value": "{.brand1.2}" + "$type": "color", + "$value": "{.brand1.2}" }, "3": { - "type": "color", - "value": "{.brand1.3}" + "$type": "color", + "$value": "{.brand1.3}" }, "4": { - "type": "color", - "value": "{.brand1.4}" + "$type": "color", + "$value": "{.brand1.4}" }, "5": { - "type": "color", - "value": "{.brand1.5}" + "$type": "color", + "$value": "{.brand1.5}" }, "6": { - "type": "color", - "value": "{.brand1.6}" + "$type": "color", + "$value": "{.brand1.6}" }, "7": { - "type": "color", - "value": "{.brand1.7}" + "$type": "color", + "$value": "{.brand1.7}" }, "8": { - "type": "color", - "value": "{.brand1.8}" + "$type": "color", + "$value": "{.brand1.8}" }, "9": { - "type": "color", - "value": "{.brand1.9}" + "$type": "color", + "$value": "{.brand1.9}" }, "10": { - "type": "color", - "value": "{.brand1.10}" + "$type": "color", + "$value": "{.brand1.10}" }, "11": { - "type": "color", - "value": "{.brand1.11}" + "$type": "color", + "$value": "{.brand1.11}" }, "12": { - "type": "color", - "value": "{.brand1.12}" + "$type": "color", + "$value": "{.brand1.12}" }, "13": { - "type": "color", - "value": "{.brand1.13}" + "$type": "color", + "$value": "{.brand1.13}" }, "contrast-1": { - "type": "color", - "value": "{.brand1.contrast-1}" + "$type": "color", + "$value": "{.brand1.contrast-1}" }, "contrast-2": { - "type": "color", - "value": "{.brand1.contrast-2}" + "$type": "color", + "$value": "{.brand1.contrast-2}" } }, "brand2": { "1": { - "type": "color", - "value": "{.brand2.1}" + "$type": "color", + "$value": "{.brand2.1}" }, "2": { - "type": "color", - "value": "{.brand2.2}" + "$type": "color", + "$value": "{.brand2.2}" }, "3": { - "type": "color", - "value": "{.brand2.3}" + "$type": "color", + "$value": "{.brand2.3}" }, "4": { - "type": "color", - "value": "{.brand2.4}" + "$type": "color", + "$value": "{.brand2.4}" }, "5": { - "type": "color", - "value": "{.brand2.5}" + "$type": "color", + "$value": "{.brand2.5}" }, "6": { - "type": "color", - "value": "{.brand2.6}" + "$type": "color", + "$value": "{.brand2.6}" }, "7": { - "type": "color", - "value": "{.brand2.7}" + "$type": "color", + "$value": "{.brand2.7}" }, "8": { - "type": "color", - "value": "{.brand2.8}" + "$type": "color", + "$value": "{.brand2.8}" }, "9": { - "type": "color", - "value": "{.brand2.9}" + "$type": "color", + "$value": "{.brand2.9}" }, "10": { - "type": "color", - "value": "{.brand2.10}" + "$type": "color", + "$value": "{.brand2.10}" }, "11": { - "type": "color", - "value": "{.brand2.11}" + "$type": "color", + "$value": "{.brand2.11}" }, "12": { - "type": "color", - "value": "{.brand2.12}" + "$type": "color", + "$value": "{.brand2.12}" }, "13": { - "type": "color", - "value": "{.brand2.13}" + "$type": "color", + "$value": "{.brand2.13}" }, "contrast-1": { - "type": "color", - "value": "{.brand2.contrast-1}" + "$type": "color", + "$value": "{.brand2.contrast-1}" }, "contrast-2": { - "type": "color", - "value": "{.brand2.contrast-2}" + "$type": "color", + "$value": "{.brand2.contrast-2}" } }, "brand3": { "1": { - "type": "color", - "value": "{.brand3.1}" + "$type": "color", + "$value": "{.brand3.1}" }, "2": { - "type": "color", - "value": "{.brand3.2}" + "$type": "color", + "$value": "{.brand3.2}" }, "3": { - "type": "color", - "value": "{.brand3.3}" + "$type": "color", + "$value": "{.brand3.3}" }, "4": { - "type": "color", - "value": "{.brand3.4}" + "$type": "color", + "$value": "{.brand3.4}" }, "5": { - "type": "color", - "value": "{.brand3.5}" + "$type": "color", + "$value": "{.brand3.5}" }, "6": { - "type": "color", - "value": "{.brand3.6}" + "$type": "color", + "$value": "{.brand3.6}" }, "7": { - "type": "color", - "value": "{.brand3.7}" + "$type": "color", + "$value": "{.brand3.7}" }, "8": { - "type": "color", - "value": "{.brand3.8}" + "$type": "color", + "$value": "{.brand3.8}" }, "9": { - "type": "color", - "value": "{.brand3.9}" + "$type": "color", + "$value": "{.brand3.9}" }, "10": { - "type": "color", - "value": "{.brand3.10}" + "$type": "color", + "$value": "{.brand3.10}" }, "11": { - "type": "color", - "value": "{.brand3.11}" + "$type": "color", + "$value": "{.brand3.11}" }, "12": { - "type": "color", - "value": "{.brand3.12}" + "$type": "color", + "$value": "{.brand3.12}" }, "13": { - "type": "color", - "value": "{.brand3.13}" + "$type": "color", + "$value": "{.brand3.13}" }, "contrast-1": { - "type": "color", - "value": "{.brand3.contrast-1}" + "$type": "color", + "$value": "{.brand3.contrast-1}" }, "contrast-2": { - "type": "color", - "value": "{.brand3.contrast-2}" + "$type": "color", + "$value": "{.brand3.contrast-2}" } } + }, + "font": { + "family": { + "$type": "fontFamilies", + "$value": "{.main}" + } + }, + "font-weight": { + "medium": { + "$type": "fontWeights", + "$value": "{.bold}" + }, + "semibold": { + "$type": "fontWeights", + "$value": "{.extra-bold}" + }, + "regular": { + "$type": "fontWeights", + "$value": "{.regular}" + } } } From 71b0fd9310860ff7ae24c809914f3ee7728afbaf Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 15 Aug 2024 09:52:14 +0200 Subject: [PATCH 2/7] wut --- .github/workflows/conventional-pr.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/conventional-pr.yml b/.github/workflows/conventional-pr.yml index 016edb8d50..d3d8ef9385 100644 --- a/.github/workflows/conventional-pr.yml +++ b/.github/workflows/conventional-pr.yml @@ -19,4 +19,4 @@ jobs: env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: - commitlintRulesPath: './commitlint.rules.cjs' + commitlintRulesPath: './commitlint.rules.js' From 8d543a5768c7a3ce84c92d20f75ab2edd9a6bd9a Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 15 Aug 2024 15:23:15 +0200 Subject: [PATCH 3/7] wip --- package.json | 1 + packages/cli/src/init/createTokensPackage.ts | 26 +++++++++++-- packages/cli/src/init/generateMetadataJson.ts | 10 +++-- packages/cli/src/init/generateThemesJson.ts | 39 +++++++++++++++++-- packages/cli/src/init/nextStepsMarkdown.ts | 4 +- .../typography/primary/theme-template.json} | 2 +- .../typography/secondary/theme-template.json | 30 ++++++++++++++ .../init/template/template-files/package.json | 2 +- 8 files changed, 99 insertions(+), 15 deletions(-) rename packages/cli/src/init/template/{default-files/design-tokens/primitives/modes/typography/primary/theme.json => template-files/design-tokens/primitives/modes/typography/primary/theme-template.json} (97%) create mode 100644 packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json diff --git a/package.json b/package.json index 3b6df7b334..ae2865ffd7 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "build:react": "yarn workspace @digdir/designsystemet-react build", "build:tokens": "yarn workspace @digdir/designsystemet build:tokens", "build:css": "yarn workspace @digdir/designsystemet-css build", + "build:cli": "yarn workspace @digdir/designsystemet build", "build:storybook": "yarn workspace @designsystemet/storybook build", "build:storefront": "yarn workspace storefront build", "build:devsite": "yarn workspace dev build", diff --git a/packages/cli/src/init/createTokensPackage.ts b/packages/cli/src/init/createTokensPackage.ts index a0a97c6bdd..ae9686ab5f 100644 --- a/packages/cli/src/init/createTokensPackage.ts +++ b/packages/cli/src/init/createTokensPackage.ts @@ -221,19 +221,37 @@ Will now create the following: for (const mode of modes.map(normalizeTokenSetName)) { // Copy the global file for the color mode await fs.cp( - path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`), - path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`), + path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`), + path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`), { recursive: true }, ); // Create theme primitives for the color mode const template = await fs.readFile( - path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`), + path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`), ); await fs.writeFile( - path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`), + path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`), template.toString('utf-8').replaceAll('', theme), ); + + // Create theme primitives for primary typography + const templatePrimaryTypo = await fs.readFile( + path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/primary/theme-template.json`), + ); + await fs.writeFile( + path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/primary/${theme}.json`), + templatePrimaryTypo.toString('utf-8').replaceAll('', theme), + ); + + // Create theme primitives for secondary typography + const templateSecondaryTypo = await fs.readFile( + path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/secondary/theme-template.json`), + ); + await fs.writeFile( + path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/secondary/${theme}.json`), + templateSecondaryTypo.toString('utf-8').replaceAll('', theme), + ); } // Create main theme token set diff --git a/packages/cli/src/init/generateMetadataJson.ts b/packages/cli/src/init/generateMetadataJson.ts index 07e7549ece..7d35cf6910 100644 --- a/packages/cli/src/init/generateMetadataJson.ts +++ b/packages/cli/src/init/generateMetadataJson.ts @@ -7,11 +7,13 @@ interface Metadata { export default function generateMetadataJson(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes: string[]): Metadata { return { tokenSetOrder: [ - 'primitives/globals', - 'primitives/typography/default', + 'primitives/modes/globals', + 'primitives/modes/typography/default', ...modes.flatMap((mode) => [ - `primitives/colors/${normalizeTokenSetName(mode)}/global`, - ...themes.map((theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`), + `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, + ...themes.map( + (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`, + ), ]), ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`), 'semantic/color', diff --git a/packages/cli/src/init/generateThemesJson.ts b/packages/cli/src/init/generateThemesJson.ts index 77e5e72901..b0a5eb5e44 100644 --- a/packages/cli/src/init/generateThemesJson.ts +++ b/packages/cli/src/init/generateThemesJson.ts @@ -2,13 +2,19 @@ import { randomUUID } from 'node:crypto'; import { type ThemeObject, TokenSetStatus } from '@tokens-studio/types'; +import { Theme } from '@adobe/leonardo-contrast-colors'; import { normalizeTokenSetName } from './utils.js'; export default function generateThemesJson( modes: Array<'Light' | 'Dark' | 'Contrast'>, themes: string[], ): ThemeObject[] { - return [...generateModesGroup(modes, themes), ...generateThemesGroup(themes), generateSemanticGroup()]; + return [ + ...generateModesGroup(modes, themes), + ...generateThemesGroup(themes), + generateSemanticGroup(), + ...generateTypographyGroup(themes), + ]; } function generateModesGroup(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes: string[]): ThemeObject[] { @@ -17,11 +23,11 @@ function generateModesGroup(modes: Array<'Light' | 'Dark' | 'Contrast'>, themes: id: randomUUID(), name: mode, selectedTokenSets: Object.fromEntries([ - [`primitives/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED], + [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED], ...themes.map( (theme) => [ - `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`, + `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`, TokenSetStatus.ENABLED, ] as const, ), @@ -57,3 +63,30 @@ function generateSemanticGroup(): ThemeObject { group: 'Semantic', }; } + +function generateTypographyGroup(themes: string[]): ThemeObject[] { + return [ + { + id: randomUUID(), + name: 'primary', + selectedTokenSets: Object.fromEntries( + themes.map((theme) => [ + `primitives/modes/typography/primary/${normalizeTokenSetName(theme)}`, + TokenSetStatus.ENABLED, + ]), + ), + group: 'Typography', + }, + { + id: randomUUID(), + name: 'secondary', + selectedTokenSets: Object.fromEntries( + themes.map((theme) => [ + `primitives/modes/secondary/primary/${normalizeTokenSetName(theme)}`, + TokenSetStatus.ENABLED, + ]), + ), + group: 'Typography', + }, + ]; +} diff --git a/packages/cli/src/init/nextStepsMarkdown.ts b/packages/cli/src/init/nextStepsMarkdown.ts index 136dbf89f5..127453c0ba 100644 --- a/packages/cli/src/init/nextStepsMarkdown.ts +++ b/packages/cli/src/init/nextStepsMarkdown.ts @@ -26,8 +26,8 @@ export function nextStepsMarkdown(themes: string[], modes: Mode[], tokensTargetD 1. Go to https://theme.designsystemet.no and set up a color theme 2. Press "Kopier tema" 3. Under "Json til Figma", copy the contents under ${modes.join(' / ')} to - the corresponding file under \`${tokensTargetDir}\`: -${themeModeCombinations.map(([theme, mode]) => ` **${theme}, ${mode}**: \`primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\` `).join('\n')} + the corresponding file under \`${tokensTargetDir}\`: +${themeModeCombinations.map(([theme, mode]) => ` **${theme}, ${mode}**: \`primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\` `).join('\n')} This can also be done in Tokens Studio for Figma. 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2 with the correct theme identifier, depending on the theme you're customizing. diff --git a/packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/primary/theme-template.json similarity index 97% rename from packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json rename to packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/primary/theme-template.json index 31a0991c4d..4440d3f408 100644 --- a/packages/cli/src/init/template/default-files/design-tokens/primitives/modes/typography/primary/theme.json +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/primary/theme-template.json @@ -1,5 +1,5 @@ { - "theme": { + "": { "main": { "$type": "fontFamilies", "$value": "Inter" diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json new file mode 100644 index 0000000000..8d9e1ceb5d --- /dev/null +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json @@ -0,0 +1,30 @@ +{ + "": { + "main": { + "$type": "fontFamilies", + "$value": "IBM Plex Mono" + }, + "bold": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontWeights", + "$value": "Medium" + }, + "extra-bold": { + "$extensions": { + "studio.tokens": { + "modify": {} + } + }, + "$type": "fontWeights", + "$value": "SemiBold" + }, + "regular": { + "$type": "fontWeights", + "$value": "Regular" + } + } +} diff --git a/packages/cli/src/init/template/template-files/package.json b/packages/cli/src/init/template/template-files/package.json index bc3e217b46..646d0bd54a 100644 --- a/packages/cli/src/init/template/template-files/package.json +++ b/packages/cli/src/init/template/template-files/package.json @@ -18,7 +18,7 @@ "author": "", "license": "ISC", "devDependencies": { - "@digdir/designsystemet": "^0.1.0-alpha.7", + "@digdir/designsystemet": "^0.1.0-next.22", "rimraf": "^5.0.7" } } From 771c766ba62eed997925ffb16e384b6dc2a6ac0a Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 16 Aug 2024 09:12:06 +0200 Subject: [PATCH 4/7] First working version --- packages/cli/src/init/generateThemesJson.ts | 29 +- .../primitives/modes/colors/dark/global.json | 360 +++++++++--------- .../modes/colors/dark/theme-template.json | 300 +++++++-------- .../primitives/modes/colors/light/global.json | 360 +++++++++--------- .../modes/colors/light/theme-template.json | 300 +++++++-------- 5 files changed, 685 insertions(+), 664 deletions(-) diff --git a/packages/cli/src/init/generateThemesJson.ts b/packages/cli/src/init/generateThemesJson.ts index b0a5eb5e44..90e8c71888 100644 --- a/packages/cli/src/init/generateThemesJson.ts +++ b/packages/cli/src/init/generateThemesJson.ts @@ -10,10 +10,32 @@ export default function generateThemesJson( themes: string[], ): ThemeObject[] { return [ - ...generateModesGroup(modes, themes), + ...generateSizeGroup(), ...generateThemesGroup(themes), - generateSemanticGroup(), ...generateTypographyGroup(themes), + ...generateModesGroup(modes, themes), + generateSemanticGroup(), + ]; +} + +function generateSizeGroup(): ThemeObject[] { + return [ + { + id: randomUUID(), + name: 'default', + selectedTokenSets: { + 'primitives/size/default': TokenSetStatus.ENABLED, + }, + group: 'Size', + }, + { + id: randomUUID(), + name: 'compact', + selectedTokenSets: { + 'primitives/size/compact': TokenSetStatus.ENABLED, + }, + group: 'Size', + }, ]; } @@ -58,7 +80,6 @@ function generateSemanticGroup(): ThemeObject { 'semantic/style': TokenSetStatus.ENABLED, 'semantic/color': TokenSetStatus.ENABLED, 'primitives/globals': TokenSetStatus.SOURCE, - 'primitives/typography/default': TokenSetStatus.SOURCE, }, group: 'Semantic', }; @@ -82,7 +103,7 @@ function generateTypographyGroup(themes: string[]): ThemeObject[] { name: 'secondary', selectedTokenSets: Object.fromEntries( themes.map((theme) => [ - `primitives/modes/secondary/primary/${normalizeTokenSetName(theme)}`, + `primitives/modes/typography/secondary/${normalizeTokenSetName(theme)}`, TokenSetStatus.ENABLED, ]), ), diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json index 9c9a1c7a18..59ff9d007b 100644 --- a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json @@ -2,374 +2,374 @@ "global": { "blue": { "1": { - "value": "#031d30", - "type": "color" + "$type": "color", + "$value": "#031d30" }, "2": { - "value": "#032540", - "type": "color" + "$type": "color", + "$value": "#032540" }, "3": { - "value": "#043256", - "type": "color" + "$type": "color", + "$value": "#043256" }, "4": { - "value": "#063f6c", - "type": "color" + "$type": "color", + "$value": "#063f6c" }, "5": { - "value": "#074d84", - "type": "color" + "$type": "color", + "$value": "#074d84" }, "6": { - "value": "#075490", - "type": "color" + "$type": "color", + "$value": "#075490" }, "7": { - "value": "#0c72c1", - "type": "color" + "$type": "color", + "$value": "#0c72c1" }, "8": { - "value": "#98c3e5", - "type": "color" + "$type": "color", + "$value": "#98c3e5" }, "9": { - "value": "#0c72c1", - "type": "color" + "$type": "color", + "$value": "#2a84c8" }, "10": { - "value": "#085ea0", - "type": "color" + "$type": "color", + "$value": "#0a6dba" }, "11": { - "value": "#074b80", - "type": "color" + "$type": "color", + "$value": "#085998" }, "12": { - "value": "#62a4d7", - "type": "color" + "$type": "color", + "$value": "#6ba9d9" }, "13": { - "value": "#cde2f2", - "type": "color" + "$type": "color", + "$value": "#d3e5f4" }, "contrast-1": { - "value": "#fefeff", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#f3f8fc", - "type": "color" + "$type": "color", + "$value": "#040c13" } }, "green": { "1": { - "value": "#022106", - "type": "color" + "$type": "color", + "$value": "#022106" }, "2": { - "value": "#022b08", - "type": "color" + "$type": "color", + "$value": "#022b08" }, "3": { - "value": "#03380a", - "type": "color" + "$type": "color", + "$value": "#03380a" }, "4": { - "value": "#04480d", - "type": "color" + "$type": "color", + "$value": "#04480d" }, "5": { - "value": "#045810", - "type": "color" + "$type": "color", + "$value": "#045810" }, "6": { - "value": "#056011", - "type": "color" + "$type": "color", + "$value": "#056011" }, "7": { - "value": "#068117", - "type": "color" + "$type": "color", + "$value": "#068117" }, "8": { - "value": "#90cc98", - "type": "color" + "$type": "color", + "$value": "#90cc98" }, "9": { - "value": "#078d19", - "type": "color" + "$type": "color", + "$value": "#078818" }, "10": { - "value": "#067615", - "type": "color" + "$type": "color", + "$value": "#067114" }, "11": { - "value": "#056011", - "type": "color" + "$type": "color", + "$value": "#045a10" }, "12": { - "value": "#54b061", - "type": "color" + "$type": "color", + "$value": "#5fb56b" }, "13": { - "value": "#cbe7cf", - "type": "color" + "$type": "color", + "$value": "#cfe9d3" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#000401", - "type": "color" + "$type": "color", + "$value": "#f9fcf9" } }, "orange": { "1": { - "value": "#2e1508", - "type": "color" + "$type": "color", + "$value": "#2e1508" }, "2": { - "value": "#3a1b0a", - "type": "color" + "$type": "color", + "$value": "#3a1b0a" }, "3": { - "value": "#50240d", - "type": "color" + "$type": "color", + "$value": "#50240d" }, "4": { - "value": "#652e10", - "type": "color" + "$type": "color", + "$value": "#652e10" }, "5": { - "value": "#7a3814", - "type": "color" + "$type": "color", + "$value": "#7a3814" }, "6": { - "value": "#863d16", - "type": "color" + "$type": "color", + "$value": "#863d16" }, "7": { - "value": "#b5531e", - "type": "color" + "$type": "color", + "$value": "#b5531e" }, "8": { - "value": "#e6b398", - "type": "color" + "$type": "color", + "$value": "#e6b398" }, "9": { - "value": "#c95c21", - "type": "color" + "$type": "color", + "$value": "#ba541e" }, "10": { - "value": "#a94d1c", - "type": "color" + "$type": "color", + "$value": "#994619" }, "11": { - "value": "#8a3f17", - "type": "color" + "$type": "color", + "$value": "#7a3814" }, "12": { - "value": "#d98a5f", - "type": "color" + "$type": "color", + "$value": "#db9169" }, "13": { - "value": "#f3dbcd", - "type": "color" + "$type": "color", + "$value": "#f4ddd0" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#0d0602", - "type": "color" + "$type": "color", + "$value": "#fcf8f6" } }, "purple": { "1": { - "value": "#251238", - "type": "color" + "$type": "color", + "$value": "#251238" }, "2": { - "value": "#301748", - "type": "color" + "$type": "color", + "$value": "#301748" }, "3": { - "value": "#402060", - "type": "color" + "$type": "color", + "$value": "#402060" }, "4": { - "value": "#52287a", - "type": "color" + "$type": "color", + "$value": "#52287a" }, "5": { - "value": "#643196", - "type": "color" + "$type": "color", + "$value": "#643196" }, "6": { - "value": "#6b399d", - "type": "color" + "$type": "color", + "$value": "#6b399d" }, "7": { - "value": "#865daf", - "type": "color" + "$type": "color", + "$value": "#865daf" }, "8": { - "value": "#c9b7db", - "type": "color" + "$type": "color", + "$value": "#c9b7db" }, "9": { - "value": "#663399", - "type": "color" + "$type": "color", + "$value": "#b298cc" }, "10": { - "value": "#4f2777", - "type": "color" + "$type": "color", + "$value": "#a181c0" }, "11": { - "value": "#381b54", - "type": "color" + "$type": "color", + "$value": "#8f69b5" }, "12": { - "value": "#ae93c9", - "type": "color" + "$type": "color", + "$value": "#b298cc" }, "13": { - "value": "#e4dbed", - "type": "color" + "$type": "color", + "$value": "#e7dfef" }, "contrast-1": { - "value": "#fefefe", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#eee8f3", - "type": "color" + "$type": "color", + "$value": "#18141b" } }, "red": { "1": { - "value": "#3b0808", - "type": "color" + "$type": "color", + "$value": "#3b0808" }, "2": { - "value": "#4b0a0a", - "type": "color" + "$type": "color", + "$value": "#4b0a0a" }, "3": { - "value": "#620e0e", - "type": "color" + "$type": "color", + "$value": "#620e0e" }, "4": { - "value": "#7c1212", - "type": "color" + "$type": "color", + "$value": "#7c1212" }, "5": { - "value": "#961515", - "type": "color" + "$type": "color", + "$value": "#961515" }, "6": { - "value": "#a31717", - "type": "color" + "$type": "color", + "$value": "#a31717" }, "7": { - "value": "#c93c3c", - "type": "color" + "$type": "color", + "$value": "#c93c3c" }, "8": { - "value": "#e9b0b0", - "type": "color" + "$type": "color", + "$value": "#e9b0b0" }, "9": { - "value": "#bf1b1b", - "type": "color" + "$type": "color", + "$value": "#d76e6e" }, "10": { - "value": "#9a1616", - "type": "color" + "$type": "color", + "$value": "#ce4e4e" }, "11": { - "value": "#771111", - "type": "color" + "$type": "color", + "$value": "#c32727" }, "12": { - "value": "#dd8585", - "type": "color" + "$type": "color", + "$value": "#df8d8d" }, "13": { - "value": "#f5d9d9", - "type": "color" + "$type": "color", + "$value": "#f5dcdc" }, "contrast-1": { - "value": "#fffefe", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#f6dfdf", - "type": "color" + "$type": "color", + "$value": "#271414" } }, "yellow": { "1": { - "value": "#221b06", - "type": "color" + "$type": "color", + "$value": "#221b06" }, "2": { - "value": "#2b2307", - "type": "color" + "$type": "color", + "$value": "#2b2307" }, "3": { - "value": "#3a300a", - "type": "color" + "$type": "color", + "$value": "#3a300a" }, "4": { - "value": "#4a3d0d", - "type": "color" + "$type": "color", + "$value": "#4a3d0d" }, "5": { - "value": "#5a4a0f", - "type": "color" + "$type": "color", + "$value": "#5a4a0f" }, "6": { - "value": "#635011", - "type": "color" + "$type": "color", + "$value": "#635011" }, "7": { - "value": "#856d17", - "type": "color" + "$type": "color", + "$value": "#856d17" }, "8": { - "value": "#e4ba27", - "type": "color" + "$type": "color", + "$value": "#e4ba27" }, "9": { - "value": "#eabf28", - "type": "color" + "$type": "color", + "$value": "#3d310a" }, "10": { - "value": "#d0aa24", - "type": "color" + "$type": "color", + "$value": "#52430e" }, "11": { - "value": "#b7951f", - "type": "color" + "$type": "color", + "$value": "#695512" }, "12": { - "value": "#bd9a20", - "type": "color" + "$type": "color", + "$value": "#c39f21" }, "13": { - "value": "#f4de8f", - "type": "color" + "$type": "color", + "$value": "#f5e19b" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#382d0a", - "type": "color" + "$type": "color", + "$value": "#ccc9bf" } } } diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json index e09aa09fec..c005e9d660 100644 --- a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json @@ -2,312 +2,312 @@ "": { "accent": { "1": { - "value": "#001c36", - "type": "color" + "$type": "color", + "$value": "#001c36" }, "2": { - "value": "#002445", - "type": "color" + "$type": "color", + "$value": "#002545" }, "3": { - "value": "#00315c", - "type": "color" + "$type": "color", + "$value": "#00315b" }, "4": { - "value": "#003d75", - "type": "color" + "$type": "color", + "$value": "#013f75" }, "5": { - "value": "#004b8f", - "type": "color" + "$type": "color", + "$value": "#014b8e" }, "6": { - "value": "#00529d", - "type": "color" + "$type": "color", + "$value": "#01539b" }, "7": { - "value": "#1972c1", - "type": "color" + "$type": "color", + "$value": "#1971c0" }, "8": { - "value": "#9cc2e4", - "type": "color" + "$type": "color", + "$value": "#9bc2e4" }, "9": { - "value": "#0062BA", - "type": "color" + "$type": "color", + "$value": "#4b90ce" }, "10": { - "value": "#005099", - "type": "color" + "$type": "color", + "$value": "#277ac4" }, "11": { - "value": "#003d75", - "type": "color" + "$type": "color", + "$value": "#0163ba" }, "12": { - "value": "#69a2d6", - "type": "color" + "$type": "color", + "$value": "#72a8d9" }, "13": { - "value": "#cee1f2", - "type": "color" + "$type": "color", + "$value": "#d1e3f3" }, "contrast-1": { - "value": "#fefeff", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#ddeaf6", - "type": "color" + "$type": "color", + "$value": "#0d1823" } }, "neutral": { "1": { - "value": "#131c27", - "type": "color" + "$type": "color", + "$value": "#131c27" }, "2": { - "value": "#192433", - "type": "color" + "$type": "color", + "$value": "#192433" }, "3": { - "value": "#243142", - "type": "color" + "$type": "color", + "$value": "#243142" }, "4": { - "value": "#333e4e", - "type": "color" + "$type": "color", + "$value": "#333e4e" }, "5": { - "value": "#424d5b", - "type": "color" + "$type": "color", + "$value": "#424d5b" }, "6": { - "value": "#495361", - "type": "color" + "$type": "color", + "$value": "#495361" }, "7": { - "value": "#67707c", - "type": "color" + "$type": "color", + "$value": "#67707c" }, "8": { - "value": "#bbbfc4", - "type": "color" + "$type": "color", + "$value": "#bbbfc4" }, "9": { - "value": "#1E2B3C", - "type": "color" + "$type": "color", + "$value": "#a6abb2" }, "10": { - "value": "#303c4b", - "type": "color" + "$type": "color", + "$value": "#90969e" }, "11": { - "value": "#444e5d", - "type": "color" + "$type": "color", + "$value": "#7a818c" }, "12": { - "value": "#989ea5", - "type": "color" + "$type": "color", + "$value": "#9ea3ab" }, "13": { - "value": "#dddfe1", - "type": "color" + "$type": "color", + "$value": "#e1e3e5" }, "contrast-1": { - "value": "#fefefe", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#bbbfc4", - "type": "color" + "$type": "color", + "$value": "#1b1b1d" } }, "brand1": { "1": { - "value": "#2f1213", - "type": "color" + "$type": "color", + "$value": "#2f1213" }, "2": { - "value": "#3c1819", - "type": "color" + "$type": "color", + "$value": "#3e1819" }, "3": { - "value": "#522021", - "type": "color" + "$type": "color", + "$value": "#522022" }, "4": { - "value": "#68292a", - "type": "color" + "$type": "color", + "$value": "#68292b" }, "5": { - "value": "#7f3234", - "type": "color" + "$type": "color", + "$value": "#7f3234" }, "6": { - "value": "#8b3639", - "type": "color" + "$type": "color", + "$value": "#8b3639" }, "7": { - "value": "#bc494c", - "type": "color" + "$type": "color", + "$value": "#bc494c" }, "8": { - "value": "#f9a9ab", - "type": "color" + "$type": "color", + "$value": "#f9a9ab" }, "9": { - "value": "#F45F63", - "type": "color" + "$type": "color", + "$value": "#9f3e41" }, "10": { - "value": "#d15155", - "type": "color" + "$type": "color", + "$value": "#7f3234" }, "11": { - "value": "#b04447", - "type": "color" + "$type": "color", + "$value": "#612628" }, "12": { - "value": "#f67679", - "type": "color" + "$type": "color", + "$value": "#f58083" }, "13": { - "value": "#fcd5d6", - "type": "color" + "$type": "color", + "$value": "#fcdbdc" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#fefefe" } }, "brand2": { "1": { - "value": "#231a05", - "type": "color" + "$type": "color", + "$value": "#231a05" }, "2": { - "value": "#2d2206", - "type": "color" + "$type": "color", + "$value": "#2d2206" }, "3": { - "value": "#3d2e09", - "type": "color" + "$type": "color", + "$value": "#3d2e09" }, "4": { - "value": "#4f3b0b", - "type": "color" + "$type": "color", + "$value": "#4f3a0b" }, "5": { - "value": "#60470d", - "type": "color" + "$type": "color", + "$value": "#60470e" }, "6": { - "value": "#684e0f", - "type": "color" + "$type": "color", + "$value": "#694d0f" }, "7": { - "value": "#8e6914", - "type": "color" + "$type": "color", + "$value": "#8e6914" }, "8": { - "value": "#e9b742", - "type": "color" + "$type": "color", + "$value": "#e8b744" }, "9": { - "value": "#E5AA20", - "type": "color" + "$type": "color", + "$value": "#523c0b" }, "10": { - "value": "#c9951c", - "type": "color" + "$type": "color", + "$value": "#694d0f" }, "11": { - "value": "#ae8118", - "type": "color" + "$type": "color", + "$value": "#826112" }, "12": { - "value": "#c9951c", - "type": "color" + "$type": "color", + "$value": "#d09a1d" }, "13": { - "value": "#f5dda7", - "type": "color" + "$type": "color", + "$value": "#f5dfad" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#2b2006", - "type": "color" + "$type": "color", + "$value": "#ddd9cf" } }, "brand3": { "1": { - "value": "#061d30", - "type": "color" + "$type": "color", + "$value": "#061d30" }, "2": { - "value": "#07253c", - "type": "color" + "$type": "color", + "$value": "#07253c" }, "3": { - "value": "#0a3251", - "type": "color" + "$type": "color", + "$value": "#0a3251" }, "4": { - "value": "#0d4068", - "type": "color" + "$type": "color", + "$value": "#0d4068" }, "5": { - "value": "#0f4e7f", - "type": "color" + "$type": "color", + "$value": "#0f4e7f" }, "6": { - "value": "#11558a", - "type": "color" + "$type": "color", + "$value": "#11558a" }, "7": { - "value": "#1773b9", - "type": "color" + "$type": "color", + "$value": "#1773b9" }, "8": { - "value": "#81c5f9", - "type": "color" + "$type": "color", + "$value": "#81c5f9" }, "9": { - "value": "#1E98F5", - "type": "color" + "$type": "color", + "$value": "#13609a" }, "10": { - "value": "#1a83d3", - "type": "color" + "$type": "color", + "$value": "#0f4c7a" }, "11": { - "value": "#166eb2", - "type": "color" + "$type": "color", + "$value": "#0b3a5d" }, "12": { - "value": "#38a4f6", - "type": "color" + "$type": "color", + "$value": "#44aaf7" }, "13": { - "value": "#c4e4fc", - "type": "color" + "$type": "color", + "$value": "#c8e6fd" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#010407", - "type": "color" + "$type": "color", + "$value": "#fafcfd" } } } diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json index 4e3c7330d5..7b6e180665 100644 --- a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json @@ -2,374 +2,374 @@ "global": { "blue": { "1": { - "value": "#fefeff", - "type": "color" + "$type": "color", + "$value": "#fefeff" }, "2": { - "value": "#edf5fa", - "type": "color" + "$type": "color", + "$value": "#edf5fa" }, "3": { - "value": "#d3e5f4", - "type": "color" + "$type": "color", + "$value": "#d3e5f4" }, "4": { - "value": "#b7d5ed", - "type": "color" + "$type": "color", + "$value": "#b7d5ed" }, "5": { - "value": "#9bc5e5", - "type": "color" + "$type": "color", + "$value": "#9bc5e5" }, "6": { - "value": "#94c1e3", - "type": "color" + "$type": "color", + "$value": "#94c1e3" }, "7": { - "value": "#2f86c9", - "type": "color" + "$type": "color", + "$value": "#2f86c9" }, "8": { - "value": "#075089", - "type": "color" + "$type": "color", + "$value": "#075089" }, "9": { - "value": "#0c72c1", - "type": "color" + "$type": "color", + "$value": "#0A71C0" }, "10": { - "value": "#085ea0", - "type": "color" + "$type": "color", + "$value": "#085ea0" }, "11": { - "value": "#074b80", - "type": "color" + "$type": "color", + "$value": "#074b80" }, "12": { - "value": "#0966ac", - "type": "color" + "$type": "color", + "$value": "#0966ac" }, "13": { - "value": "#043256", - "type": "color" + "$type": "color", + "$value": "#042d4d" }, "contrast-1": { - "value": "#fefeff", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#f3f8fc", - "type": "color" + "$type": "color", + "$value": "#f3f8fc" } }, "green": { "1": { - "value": "#fcfefc", - "type": "color" + "$type": "color", + "$value": "#fcfefc" }, "2": { - "value": "#ecf6ed", - "type": "color" + "$type": "color", + "$value": "#ecf6ed" }, "3": { - "value": "#cfe9d3", - "type": "color" + "$type": "color", + "$value": "#cfe9d3" }, "4": { - "value": "#b3dcb8", - "type": "color" + "$type": "color", + "$value": "#b3dcb8" }, "5": { - "value": "#95ce9d", - "type": "color" + "$type": "color", + "$value": "#95ce9d" }, "6": { - "value": "#8bca94", - "type": "color" + "$type": "color", + "$value": "#8bca94" }, "7": { - "value": "#189528", - "type": "color" + "$type": "color", + "$value": "#189528" }, "8": { - "value": "#045a10", - "type": "color" + "$type": "color", + "$value": "#045a10" }, "9": { - "value": "#078d19", - "type": "color" + "$type": "color", + "$value": "#078D19" }, "10": { - "value": "#067615", - "type": "color" + "$type": "color", + "$value": "#067615" }, "11": { - "value": "#056011", - "type": "color" + "$type": "color", + "$value": "#056011" }, "12": { - "value": "#067314", - "type": "color" + "$type": "color", + "$value": "#067314" }, "13": { - "value": "#03380a", - "type": "color" + "$type": "color", + "$value": "#033409" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#000401", - "type": "color" + "$type": "color", + "$value": "#000401" } }, "orange": { "1": { - "value": "#fffefd", - "type": "color" + "$type": "color", + "$value": "#fffefd" }, "2": { - "value": "#fbf1ec", - "type": "color" + "$type": "color", + "$value": "#fbf1ec" }, "3": { - "value": "#f4ddd0", - "type": "color" + "$type": "color", + "$value": "#f4ddd0" }, "4": { - "value": "#eecab7", - "type": "color" + "$type": "color", + "$value": "#eecab7" }, "5": { - "value": "#e7b69c", - "type": "color" + "$type": "color", + "$value": "#e7b69c" }, "6": { - "value": "#e5b094", - "type": "color" + "$type": "color", + "$value": "#e5b094" }, "7": { - "value": "#cc632b", - "type": "color" + "$type": "color", + "$value": "#cc632b" }, "8": { - "value": "#7e3a15", - "type": "color" + "$type": "color", + "$value": "#7e3a15" }, "9": { - "value": "#c95c21", - "type": "color" + "$type": "color", + "$value": "#CA5C21" }, "10": { - "value": "#a94d1c", - "type": "color" + "$type": "color", + "$value": "#a94d1c" }, "11": { - "value": "#8a3f17", - "type": "color" + "$type": "color", + "$value": "#8a3f17" }, "12": { - "value": "#a1491a", - "type": "color" + "$type": "color", + "$value": "#a1491a" }, "13": { - "value": "#50240d", - "type": "color" + "$type": "color", + "$value": "#47210c" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#0d0602", - "type": "color" + "$type": "color", + "$value": "#0d0602" } }, "purple": { "1": { - "value": "#fefefe", - "type": "color" + "$type": "color", + "$value": "#fefefe" }, "2": { - "value": "#f5f2f9", - "type": "color" + "$type": "color", + "$value": "#f5f2f9" }, "3": { - "value": "#e7dfef", - "type": "color" + "$type": "color", + "$value": "#e7dfef" }, "4": { - "value": "#d9cce6", - "type": "color" + "$type": "color", + "$value": "#d9cce6" }, "5": { - "value": "#ccbadd", - "type": "color" + "$type": "color", + "$value": "#ccbadd" }, "6": { - "value": "#c7b4da", - "type": "color" + "$type": "color", + "$value": "#c7b4da" }, "7": { - "value": "#9572b9", - "type": "color" + "$type": "color", + "$value": "#9572b9" }, "8": { - "value": "#663399", - "type": "color" + "$type": "color", + "$value": "#663399" }, "9": { - "value": "#663399", - "type": "color" + "$type": "color", + "$value": "#663299" }, "10": { - "value": "#4f2777", - "type": "color" + "$type": "color", + "$value": "#4f2777" }, "11": { - "value": "#381b54", - "type": "color" + "$type": "color", + "$value": "#381b54" }, "12": { - "value": "#7b4ea7", - "type": "color" + "$type": "color", + "$value": "#7b4ea7" }, "13": { - "value": "#402060", - "type": "color" + "$type": "color", + "$value": "#3b1d59" }, "contrast-1": { - "value": "#fefefe", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#eee8f3", - "type": "color" + "$type": "color", + "$value": "#eee8f3" } }, "red": { "1": { - "value": "#fffefe", - "type": "color" + "$type": "color", + "$value": "#fffefe" }, "2": { - "value": "#fbf1f1", - "type": "color" + "$type": "color", + "$value": "#fbf1f1" }, "3": { - "value": "#f5dcdc", - "type": "color" + "$type": "color", + "$value": "#f5dcdc" }, "4": { - "value": "#f0c7c7", - "type": "color" + "$type": "color", + "$value": "#f0c7c7" }, "5": { - "value": "#eab3b3", - "type": "color" + "$type": "color", + "$value": "#eab3b3" }, "6": { - "value": "#e8acac", - "type": "color" + "$type": "color", + "$value": "#e8acac" }, "7": { - "value": "#d25b5b", - "type": "color" + "$type": "color", + "$value": "#d25b5b" }, "8": { - "value": "#9a1616", - "type": "color" + "$type": "color", + "$value": "#9a1616" }, "9": { - "value": "#bf1b1b", - "type": "color" + "$type": "color", + "$value": "#C01B1B" }, "10": { - "value": "#9a1616", - "type": "color" + "$type": "color", + "$value": "#9a1616" }, "11": { - "value": "#771111", - "type": "color" + "$type": "color", + "$value": "#771111" }, "12": { - "value": "#c22020", - "type": "color" + "$type": "color", + "$value": "#c22020" }, "13": { - "value": "#620e0e", - "type": "color" + "$type": "color", + "$value": "#5a0d0d" }, "contrast-1": { - "value": "#fffefe", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#f6dfdf", - "type": "color" + "$type": "color", + "$value": "#f6dfdf" } }, "yellow": { "1": { - "value": "#fffefc", - "type": "color" + "$type": "color", + "$value": "#fffefc" }, "2": { - "value": "#fbf2d3", - "type": "color" + "$type": "color", + "$value": "#fbf2d3" }, "3": { - "value": "#f5e19b", - "type": "color" + "$type": "color", + "$value": "#f5e19b" }, "4": { - "value": "#efcf5d", - "type": "color" + "$type": "color", + "$value": "#efcf5d" }, "5": { - "value": "#e6bc27", - "type": "color" + "$type": "color", + "$value": "#e6bc27" }, "6": { - "value": "#e0b726", - "type": "color" + "$type": "color", + "$value": "#e0b726" }, "7": { - "value": "#9a7e1a", - "type": "color" + "$type": "color", + "$value": "#9a7e1a" }, "8": { - "value": "#5d4c10", - "type": "color" + "$type": "color", + "$value": "#5d4c10" }, "9": { - "value": "#eabf28", - "type": "color" + "$type": "color", + "$value": "#EABF28" }, "10": { - "value": "#d0aa24", - "type": "color" + "$type": "color", + "$value": "#d0aa24" }, "11": { - "value": "#b7951f", - "type": "color" + "$type": "color", + "$value": "#b7951f" }, "12": { - "value": "#776114", - "type": "color" + "$type": "color", + "$value": "#776114" }, "13": { - "value": "#3a300a", - "type": "color" + "$type": "color", + "$value": "#352b09" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#382d0a", - "type": "color" + "$type": "color", + "$value": "#382d0a" } } } diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json index ba2b9b9190..d15bfc1430 100644 --- a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json @@ -2,312 +2,312 @@ "": { "accent": { "1": { - "value": "#fefeff", - "type": "color" + "$type": "color", + "$value": "#fefeff" }, "2": { - "value": "#eef4fa", - "type": "color" + "$type": "color", + "$value": "#eef4fa" }, "3": { - "value": "#d4e5f3", - "type": "color" + "$type": "color", + "$value": "#d1e3f3" }, "4": { - "value": "#bad5ec", - "type": "color" + "$type": "color", + "$value": "#bad5ec" }, "5": { - "value": "#a1c5e5", - "type": "color" + "$type": "color", + "$value": "#a1c5e5" }, "6": { - "value": "#97bfe3", - "type": "color" + "$type": "color", + "$value": "#97bfe3" }, "7": { - "value": "#3a85ca", - "type": "color" + "$type": "color", + "$value": "#3885c9" }, "8": { - "value": "#004d93", - "type": "color" + "$type": "color", + "$value": "#014e93" }, "9": { - "value": "#0062BA", - "type": "color" + "$type": "color", + "$value": "#0163ba" }, "10": { - "value": "#005099", - "type": "color" + "$type": "color", + "$value": "#015097" }, "11": { - "value": "#003d75", - "type": "color" + "$type": "color", + "$value": "#013f75" }, "12": { - "value": "#0163ba", - "type": "color" + "$type": "color", + "$value": "#0163ba" }, "13": { - "value": "#00315c", - "type": "color" + "$type": "color", + "$value": "#002d54" }, "contrast-1": { - "value": "#fefeff", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#ddeaf6", - "type": "color" + "$type": "color", + "$value": "#dbe9f5" } }, "neutral": { "1": { - "value": "#fefefe", - "type": "color" + "$type": "color", + "$value": "#fefefe" }, "2": { - "value": "#f3f4f5", - "type": "color" + "$type": "color", + "$value": "#f3f4f5" }, "3": { - "value": "#e1e3e5", - "type": "color" + "$type": "color", + "$value": "#e1e3e5" }, "4": { - "value": "#ced1d4", - "type": "color" + "$type": "color", + "$value": "#ced1d4" }, "5": { - "value": "#bdc1c6", - "type": "color" + "$type": "color", + "$value": "#bdc1c6" }, "6": { - "value": "#b8bcc1", - "type": "color" + "$type": "color", + "$value": "#b8bcc1" }, "7": { - "value": "#7a818c", - "type": "color" + "$type": "color", + "$value": "#7a818c" }, "8": { - "value": "#444e5d", - "type": "color" + "$type": "color", + "$value": "#444e5d" }, "9": { - "value": "#1E2B3C", - "type": "color" + "$type": "color", + "$value": "#1e2b3c" }, "10": { - "value": "#303c4b", - "type": "color" + "$type": "color", + "$value": "#303c4b" }, "11": { - "value": "#444e5d", - "type": "color" + "$type": "color", + "$value": "#444e5d" }, "12": { - "value": "#5b6471", - "type": "color" + "$type": "color", + "$value": "#5b6471" }, "13": { - "value": "#243142", - "type": "color" + "$type": "color", + "$value": "#202c3d" }, "contrast-1": { - "value": "#fefefe", - "type": "color" + "$type": "color", + "$value": "#ffffff" }, "contrast-2": { - "value": "#bbbfc4", - "type": "color" + "$type": "color", + "$value": "#bbbfc4" } }, "brand1": { "1": { - "value": "#fffefe", - "type": "color" + "$type": "color", + "$value": "#fffefe" }, "2": { - "value": "#fef0f1", - "type": "color" + "$type": "color", + "$value": "#fef0f1" }, "3": { - "value": "#fcdadb", - "type": "color" + "$type": "color", + "$value": "#fcdbdc" }, "4": { - "value": "#fbc4c5", - "type": "color" + "$type": "color", + "$value": "#fbc4c5" }, "5": { - "value": "#f9adaf", - "type": "color" + "$type": "color", + "$value": "#f9acae" }, "6": { - "value": "#f9a5a7", - "type": "color" + "$type": "color", + "$value": "#f8a5a7" }, "7": { - "value": "#d95558", - "type": "color" + "$type": "color", + "$value": "#d95558" }, "8": { - "value": "#843336", - "type": "color" + "$type": "color", + "$value": "#833336" }, "9": { - "value": "#F45F63", - "type": "color" + "$type": "color", + "$value": "#f35f63" }, "10": { - "value": "#d15155", - "type": "color" + "$type": "color", + "$value": "#d05255" }, "11": { - "value": "#b04447", - "type": "color" + "$type": "color", + "$value": "#af4547" }, "12": { - "value": "#a84144", - "type": "color" + "$type": "color", + "$value": "#a74144" }, "13": { - "value": "#522021", - "type": "color" + "$type": "color", + "$value": "#4b1e1f" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" } }, "brand2": { "1": { - "value": "#fffefc", - "type": "color" + "$type": "color", + "$value": "#fffefc" }, "2": { - "value": "#fbf3e0", - "type": "color" + "$type": "color", + "$value": "#fbf3e0" }, "3": { - "value": "#f5dfac", - "type": "color" + "$type": "color", + "$value": "#f5dfad" }, "4": { - "value": "#f0ce7e", - "type": "color" + "$type": "color", + "$value": "#f0ce7f" }, "5": { - "value": "#eaba4a", - "type": "color" + "$type": "color", + "$value": "#e9ba4c" }, "6": { - "value": "#e8b338", - "type": "color" + "$type": "color", + "$value": "#e7b43d" }, "7": { - "value": "#a57a17", - "type": "color" + "$type": "color", + "$value": "#a57a17" }, "8": { - "value": "#634a0e", - "type": "color" + "$type": "color", + "$value": "#63490e" }, "9": { - "value": "#E5AA20", - "type": "color" + "$type": "color", + "$value": "#e4a920" }, "10": { - "value": "#c9951c", - "type": "color" + "$type": "color", + "$value": "#c9951c" }, "11": { - "value": "#ae8118", - "type": "color" + "$type": "color", + "$value": "#af8119" }, "12": { - "value": "#7e5d12", - "type": "color" + "$type": "color", + "$value": "#7e5d12" }, "13": { - "value": "#3d2e09", - "type": "color" + "$type": "color", + "$value": "#382a08" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#2b2006", - "type": "color" + "$type": "color", + "$value": "#2b2006" } }, "brand3": { "1": { - "value": "#fdfeff", - "type": "color" + "$type": "color", + "$value": "#fdfeff" }, "2": { - "value": "#eaf6fe", - "type": "color" + "$type": "color", + "$value": "#eaf6fe" }, "3": { - "value": "#c8e6fd", - "type": "color" + "$type": "color", + "$value": "#c8e6fd" }, "4": { - "value": "#a9d7fb", - "type": "color" + "$type": "color", + "$value": "#a9d7fb" }, "5": { - "value": "#84c7fa", - "type": "color" + "$type": "color", + "$value": "#84c7fa" }, "6": { - "value": "#7ac2f9", - "type": "color" + "$type": "color", + "$value": "#7ac2f9" }, "7": { - "value": "#1a85d6", - "type": "color" + "$type": "color", + "$value": "#1a85d6" }, "8": { - "value": "#105082", - "type": "color" + "$type": "color", + "$value": "#105082" }, "9": { - "value": "#1E98F5", - "type": "color" + "$type": "color", + "$value": "#1e98f5" }, "10": { - "value": "#1a83d3", - "type": "color" + "$type": "color", + "$value": "#1a83d3" }, "11": { - "value": "#166eb2", - "type": "color" + "$type": "color", + "$value": "#166eb2" }, "12": { - "value": "#1466a5", - "type": "color" + "$type": "color", + "$value": "#1466a5" }, "13": { - "value": "#0a3251", - "type": "color" + "$type": "color", + "$value": "#092e4b" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$type": "color", + "$value": "#000000" }, "contrast-2": { - "value": "#010407", - "type": "color" + "$type": "color", + "$value": "#010407" } } } From d96a4e64ed077d74f09aa2576d6aa2fc96d9454a Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 16 Aug 2024 09:43:59 +0200 Subject: [PATCH 5/7] convert contrast theme to dtcg --- .../modes/colors/contrast/theme-template.json | 300 +++++++++--------- 1 file changed, 150 insertions(+), 150 deletions(-) diff --git a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json index e424f5b596..96bdb2024d 100644 --- a/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json +++ b/packages/cli/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json @@ -2,312 +2,312 @@ "": { "accent": { "1": { - "value": "#000409", - "type": "color" + "$value": "#000409", + "$type": "color" }, "2": { - "value": "#001427", - "type": "color" + "$$value": "#001427", + "$type": "color" }, "3": { - "value": "#002445", - "type": "color" + "$value": "#002445", + "$type": "color" }, "4": { - "value": "#00315c", - "type": "color" + "$value": "#00315c", + "$type": "color" }, "5": { - "value": "#003d75", - "type": "color" + "$value": "#003d75", + "$type": "color" }, "6": { - "value": "#4b90ce", - "type": "color" + "$value": "#4b90ce", + "$type": "color" }, "7": { - "value": "#7eb0dc", - "type": "color" + "$value": "#7eb0dc", + "$type": "color" }, "8": { - "value": "#b0cfea", - "type": "color" + "$value": "#b0cfea", + "$type": "color" }, "9": { - "value": "#0062BA", - "type": "color" + "$value": "#0062BA", + "$type": "color" }, "10": { - "value": "#005099", - "type": "color" + "$value": "#005099", + "$type": "color" }, "11": { - "value": "#003d75", - "type": "color" + "$value": "#003d75", + "$type": "color" }, "12": { - "value": "#a9cae8", - "type": "color" + "$value": "#a9cae8", + "$type": "color" }, "13": { - "value": "#e8f1f9", - "type": "color" + "$value": "#e8f1f9", + "$type": "color" }, "contrast-1": { - "value": "#fefeff", - "type": "color" + "$value": "#fefeff", + "$type": "color" }, "contrast-2": { - "value": "#ddeaf6", - "type": "color" + "$value": "#ddeaf6", + "$type": "color" } }, "neutral": { "1": { - "value": "#020405", - "type": "color" + "$value": "#020405", + "$type": "color" }, "2": { - "value": "#0e141b", - "type": "color" + "$value": "#0e141b", + "$type": "color" }, "3": { - "value": "#192433", - "type": "color" + "$value": "#192433", + "$type": "color" }, "4": { - "value": "#243142", - "type": "color" + "$value": "#243142", + "$type": "color" }, "5": { - "value": "#333e4e", - "type": "color" + "$value": "#333e4e", + "$type": "color" }, "6": { - "value": "#858c96", - "type": "color" + "$value": "#858c96", + "$type": "color" }, "7": { - "value": "#a6abb2", - "type": "color" + "$value": "#a6abb2", + "$type": "color" }, "8": { - "value": "#c9ccd0", - "type": "color" + "$value": "#c9ccd0", + "$type": "color" }, "9": { - "value": "#1E2B3C", - "type": "color" + "$value": "#1E2B3C", + "$type": "color" }, "10": { - "value": "#303c4b", - "type": "color" + "$value": "#303c4b", + "$type": "color" }, "11": { - "value": "#444e5d", - "type": "color" + "$value": "#444e5d", + "$type": "color" }, "12": { - "value": "#c3c6cb", - "type": "color" + "$value": "#c3c6cb", + "$type": "color" }, "13": { - "value": "#eff0f1", - "type": "color" + "$value": "#eff0f1", + "$type": "color" }, "contrast-1": { - "value": "#fefefe", - "type": "color" + "$value": "#fefefe", + "$type": "color" }, "contrast-2": { - "value": "#bbbfc4", - "type": "color" + "$value": "#bbbfc4", + "$type": "color" } }, "brand1": { "1": { - "value": "#060303", - "type": "color" + "$value": "#060303", + "$type": "color" }, "2": { - "value": "#230d0e", - "type": "color" + "$value": "#230d0e", + "$type": "color" }, "3": { - "value": "#3c1819", - "type": "color" + "$value": "#3c1819", + "$type": "color" }, "4": { - "value": "#522021", - "type": "color" + "$value": "#522021", + "$type": "color" }, "5": { - "value": "#68292a", - "type": "color" + "$value": "#68292a", + "$type": "color" }, "6": { - "value": "#eb5b5f", - "type": "color" + "$value": "#eb5b5f", + "$type": "color" }, "7": { - "value": "#f78d8f", - "type": "color" + "$value": "#f78d8f", + "$type": "color" }, "8": { - "value": "#fabcbd", - "type": "color" + "$value": "#fabcbd", + "$type": "color" }, "9": { - "value": "#F45F63", - "type": "color" + "$value": "#F45F63", + "$type": "color" }, "10": { - "value": "#d15155", - "type": "color" + "$value": "#d15155", + "$type": "color" }, "11": { - "value": "#b04447", - "type": "color" + "$value": "#b04447", + "$type": "color" }, "12": { - "value": "#fab4b5", - "type": "color" + "$value": "#fab4b5", + "$type": "color" }, "13": { - "value": "#feeced", - "type": "color" + "$value": "#feeced", + "$type": "color" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$value": "#000000", + "$type": "color" }, "contrast-2": { - "value": "#000000", - "type": "color" + "$value": "#000000", + "$type": "color" } }, "brand2": { "1": { - "value": "#050301", - "type": "color" + "$value": "#050301", + "$type": "color" }, "2": { - "value": "#191303", - "type": "color" + "$value": "#191303", + "$type": "color" }, "3": { - "value": "#2d2206", - "type": "color" + "$value": "#2d2206", + "$type": "color" }, "4": { - "value": "#3d2e09", - "type": "color" + "$value": "#3d2e09", + "$type": "color" }, "5": { - "value": "#4f3b0b", - "type": "color" + "$value": "#4f3b0b", + "$type": "color" }, "6": { - "value": "#b28419", - "type": "color" + "$value": "#b28419", + "$type": "color" }, "7": { - "value": "#daa21f", - "type": "color" + "$value": "#daa21f", + "$type": "color" }, "8": { - "value": "#eec76c", - "type": "color" + "$value": "#eec76c", + "$type": "color" }, "9": { - "value": "#E5AA20", - "type": "color" + "$value": "#E5AA20", + "$type": "color" }, "10": { - "value": "#c9951c", - "type": "color" + "$value": "#c9951c", + "$type": "color" }, "11": { - "value": "#ae8118", - "type": "color" + "$value": "#ae8118", + "$type": "color" }, "12": { - "value": "#ecc059", - "type": "color" + "$value": "#ecc059", + "$type": "color" }, "13": { - "value": "#faefd6", - "type": "color" + "$value": "#faefd6", + "$type": "color" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$value": "#000000", + "$type": "color" }, "contrast-2": { - "value": "#2b2006", - "type": "color" + "$value": "#2b2006", + "$type": "color" } }, "brand3": { "1": { - "value": "#010407", - "type": "color" + "$value": "#010407", + "$type": "color" }, "2": { - "value": "#041421", - "type": "color" + "$value": "#041421", + "$type": "color" }, "3": { - "value": "#07253c", - "type": "color" + "$value": "#07253c", + "$type": "color" }, "4": { - "value": "#0a3251", - "type": "color" + "$value": "#0a3251", + "$type": "color" }, "5": { - "value": "#0d4068", - "type": "color" + "$value": "#0d4068", + "$type": "color" }, "6": { - "value": "#1c90e8", - "type": "color" + "$value": "#1c90e8", + "$type": "color" }, "7": { - "value": "#57b2f8", - "type": "color" + "$value": "#57b2f8", + "$type": "color" }, "8": { - "value": "#9cd2fb", - "type": "color" + "$value": "#9cd2fb", + "$type": "color" }, "9": { - "value": "#1E98F5", - "type": "color" + "$value": "#1E98F5", + "$type": "color" }, "10": { - "value": "#1a83d3", - "type": "color" + "$value": "#1a83d3", + "$type": "color" }, "11": { - "value": "#166eb2", - "type": "color" + "$value": "#166eb2", + "$type": "color" }, "12": { - "value": "#90ccfa", - "type": "color" + "$value": "#90ccfa", + "$type": "color" }, "13": { - "value": "#e3f2fe", - "type": "color" + "$value": "#e3f2fe", + "$type": "color" }, "contrast-1": { - "value": "#000000", - "type": "color" + "$value": "#000000", + "$type": "color" }, "contrast-2": { - "value": "#010407", - "type": "color" + "$value": "#010407", + "$type": "color" } } } From 3afbf462673337b9bf02dfece32677e2b9c7a5d8 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 16 Aug 2024 09:46:09 +0200 Subject: [PATCH 6/7] added changeset --- .changeset/gorgeous-readers-burn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gorgeous-readers-burn.md diff --git a/.changeset/gorgeous-readers-burn.md b/.changeset/gorgeous-readers-burn.md new file mode 100644 index 0000000000..12bb283dd1 --- /dev/null +++ b/.changeset/gorgeous-readers-burn.md @@ -0,0 +1,5 @@ +--- +'@digdir/designsystemet': minor +--- + +feat: Update init script to new design-tokens format From 7e1871ef9631cfe96275e2da0d384b75e723456f Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 16 Aug 2024 14:40:35 +0200 Subject: [PATCH 7/7] fix missing folders when clean --- packages/cli/src/init/createTokensPackage.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/cli/src/init/createTokensPackage.ts b/packages/cli/src/init/createTokensPackage.ts index ae9686ab5f..f53704b3f3 100644 --- a/packages/cli/src/init/createTokensPackage.ts +++ b/packages/cli/src/init/createTokensPackage.ts @@ -217,6 +217,19 @@ Will now create the following: // Directory creation failed, probably because the directory already exists } + try { + await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'themes')); + } catch { + // Directory creation failed, probably because the directory already exists + } + + try { + await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'primitives/modes/typography/primary'), { recursive: true }); + await fs.mkdir(path.join(TOKENS_TARGET_DIR, 'primitives/modes/typography/secondary'), { recursive: true }); + } catch { + // Directory creation failed, probably because the directory already exists + } + for (const theme of themes.map(normalizeTokenSetName)) { for (const mode of modes.map(normalizeTokenSetName)) { // Copy the global file for the color mode @@ -248,6 +261,7 @@ Will now create the following: const templateSecondaryTypo = await fs.readFile( path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/secondary/theme-template.json`), ); + await fs.writeFile( path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/secondary/${theme}.json`), templateSecondaryTypo.toString('utf-8').replaceAll('', theme),