From 2d37cb1f0b31d689b4de1b0a92bc08cb321f45a8 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:06:29 +0100 Subject: [PATCH 01/50] [Theme next] Adds unified color palette --- .changeset/early-radios-sell.md | 5 + .../theme/css/characteristics/accent-next.css | 5 + .../css/characteristics/actionable-next.css | 29 ++++ .../css/characteristics/container-next.css | 11 ++ .../css/characteristics/content-next.css | 11 ++ .../theme/css/characteristics/status-next.css | 23 +++ .../theme/css/characteristics/target-next.css | 4 + .../theme/css/characteristics/track-next.css | 3 + packages/theme/css/foundations/color-next.css | 160 ++++++++++++++++++ packages/theme/css/foundations/fade-next.css | 33 ++++ packages/theme/css/palette/accent-next.css | 29 ++++ .../theme/css/palette/background-next.css | 16 ++ .../theme/css/palette/foreground-next.css | 22 +++ packages/theme/css/palette/info-next.css | 8 + packages/theme/css/palette/negative-next.css | 8 + packages/theme/css/palette/neutral-next.css | 36 ++++ packages/theme/css/palette/positive-next.css | 8 + packages/theme/css/palette/warning-next.css | 8 + packages/theme/css/theme-next.css | 19 +++ 19 files changed, 438 insertions(+) create mode 100644 .changeset/early-radios-sell.md create mode 100644 packages/theme/css/characteristics/accent-next.css create mode 100644 packages/theme/css/characteristics/actionable-next.css create mode 100644 packages/theme/css/characteristics/container-next.css create mode 100644 packages/theme/css/characteristics/content-next.css create mode 100644 packages/theme/css/characteristics/status-next.css create mode 100644 packages/theme/css/characteristics/target-next.css create mode 100644 packages/theme/css/characteristics/track-next.css create mode 100644 packages/theme/css/foundations/color-next.css create mode 100644 packages/theme/css/foundations/fade-next.css create mode 100644 packages/theme/css/palette/accent-next.css create mode 100644 packages/theme/css/palette/background-next.css create mode 100644 packages/theme/css/palette/foreground-next.css create mode 100644 packages/theme/css/palette/info-next.css create mode 100644 packages/theme/css/palette/negative-next.css create mode 100644 packages/theme/css/palette/neutral-next.css create mode 100644 packages/theme/css/palette/positive-next.css create mode 100644 packages/theme/css/palette/warning-next.css diff --git a/.changeset/early-radios-sell.md b/.changeset/early-radios-sell.md new file mode 100644 index 00000000000..8baf64fbe03 --- /dev/null +++ b/.changeset/early-radios-sell.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/theme": patch +--- + +[Theme next] Adds unified color palette diff --git a/packages/theme/css/characteristics/accent-next.css b/packages/theme/css/characteristics/accent-next.css new file mode 100644 index 00000000000..a0fb6b3d4c4 --- /dev/null +++ b/packages/theme/css/characteristics/accent-next.css @@ -0,0 +1,5 @@ +.salt-theme.salt-theme-next { + --salt-accent-background: var(--salt-palette-accent); + --salt-accent-borderColor: var(--salt-palette-accent); + --salt-accent-foreground: var(--salt-palette-foreground-primary-alt); +} diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css new file mode 100644 index 00000000000..ec1efed2e7f --- /dev/null +++ b/packages/theme/css/characteristics/actionable-next.css @@ -0,0 +1,29 @@ +.salt-theme.salt-theme-next { + /* CTA variant */ + --salt-actionable-cta-foreground: var(--salt-palette-foreground-primary-alt); + --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-primary-alt); + --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); + --salt-actionable-cta-background: var(--salt-palette-accent-action); + --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); /* TBD */ + --salt-actionable-cta-background-active: var(--salt-palette-accent-action-active); + --salt-actionable-cta-background-disabled: var(--salt-palette-accent-action-disabled); + /* Primary variant */ + --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt); + --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt); + --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); + --salt-actionable-primary-background: var(--salt-palette-neutral-action); + --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ + --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-action-disabled); + /* Secondary variant */ + --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); + --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt); + --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); + --salt-actionable-secondary-background: var(--salt-palette-background-transparent); /* TBD */ + --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ + --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-secondary-background-disabled: var(--salt-palette-neutral-action-disabled); +} diff --git a/packages/theme/css/characteristics/container-next.css b/packages/theme/css/characteristics/container-next.css new file mode 100644 index 00000000000..707ad37b8d2 --- /dev/null +++ b/packages/theme/css/characteristics/container-next.css @@ -0,0 +1,11 @@ +.salt-theme.salt-theme-next { + --salt-container-primary-background: var(--salt-palette-background-primary); + --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled); + --salt-container-primary-borderColor: var(--salt-palette-neutral-weaker); + --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled); + + --salt-container-secondary-background: var(--salt-palette-background-secondary); + --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled); + --salt-container-secondary-borderColor: var(--salt-palette-neutral-weaker); + --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled); +} diff --git a/packages/theme/css/characteristics/content-next.css b/packages/theme/css/characteristics/content-next.css new file mode 100644 index 00000000000..277ffd1a8d4 --- /dev/null +++ b/packages/theme/css/characteristics/content-next.css @@ -0,0 +1,11 @@ +.salt-theme.salt-theme-next { + --salt-content-primary-foreground: var(--salt-palette-foreground-primary); + --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); + --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary); + --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled); + + --salt-content-foreground-hover: var(--salt-palette-foreground-hover); + --salt-content-foreground-active: var(--salt-palette-foreground-active); + --salt-content-foreground-visited: var(--salt-palette-foreground-visited); + --salt-content-foreground-highlight: var(--salt-palette-accent-weaker); +} diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css new file mode 100644 index 00000000000..6d7119dd80b --- /dev/null +++ b/packages/theme/css/characteristics/status-next.css @@ -0,0 +1,23 @@ +.salt-theme.salt-theme-next { + --salt-status-info-foreground: var(--salt-palette-accent-strong); /* TBD */ + --salt-status-success-foreground: var(--salt-palette-positive); + --salt-status-warning-foreground: var(--salt-palette-warning); + --salt-status-error-foreground: var(--salt-palette-negative); + --salt-status-static-foreground: var(--salt-palette-foreground-secondary); /* TBD */ + --salt-status-negative-foreground: var(--salt-palette-negative); + --salt-status-positive-foreground: var(--salt-palette-positive); + + --salt-status-info-borderColor: var(--salt-palette-accent-strong); + --salt-status-success-borderColor: var(--salt-palette-positive); + --salt-status-warning-borderColor: var(--salt-palette-warning); + --salt-status-error-borderColor: var(--salt-palette-negative); + + --salt-status-info-background: var(--salt-palette-accent-weakest); + --salt-status-success-background: var(--salt-palette-positive-weak); + --salt-status-warning-background: var(--salt-palette-warning-weak); + --salt-status-error-background: var(--salt-palette-negative-weak); + + --salt-status-success-background-selected: var(--salt-palette-positive-weak); + --salt-status-warning-background-selected: var(--salt-palette-warning-weak); + --salt-status-error-background-selected: var(--salt-palette-negative-weak); +} diff --git a/packages/theme/css/characteristics/target-next.css b/packages/theme/css/characteristics/target-next.css new file mode 100644 index 00000000000..496ca8f0c22 --- /dev/null +++ b/packages/theme/css/characteristics/target-next.css @@ -0,0 +1,4 @@ +.salt-theme.salt-theme-next { + --salt-target-background-hover: var(--salt-palette-accent-default); + --salt-target-borderColor-hover: var(--salt-palette-accent-weakest); +} diff --git a/packages/theme/css/characteristics/track-next.css b/packages/theme/css/characteristics/track-next.css new file mode 100644 index 00000000000..f50d9c19453 --- /dev/null +++ b/packages/theme/css/characteristics/track-next.css @@ -0,0 +1,3 @@ +.salt-theme.salt-theme-next { + --salt-track-borderColor: var(--salt-palette-neutral); +} diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css new file mode 100644 index 00000000000..95766727222 --- /dev/null +++ b/packages/theme/css/foundations/color-next.css @@ -0,0 +1,160 @@ +.salt-theme.salt-theme-next { + --salt-color-white-rgb: 255, 255, 255; + --salt-color-gray-100-rgb: 245, 247, 248; + --salt-color-gray-200-rgb: 211, 213, 216; + --salt-color-gray-300-rgb: 177, 181, 185; + --salt-color-gray-400-rgb: 145, 149, 154; + --salt-color-gray-500-rgb: 114, 119, 125; + --salt-color-gray-600-rgb: 97, 102, 108; + --salt-color-gray-700-rgb: 80, 86, 92; + --salt-color-gray-800-rgb: 64, 70, 76; + --salt-color-gray-900-rgb: 49, 55, 61; + --salt-color-black-rgb: 0, 0, 0; + --salt-color-blue-100-rgb: 234, 246, 255; + --salt-color-blue-200-rgb: 190, 214, 238; + --salt-color-blue-300-rgb: 146, 182, 221; + --salt-color-blue-400-rgb: 97, 152, 203; + --salt-color-blue-500-rgb: 22, 123, 186; + --salt-color-blue-600-rgb: 15, 101, 158; + --salt-color-blue-700-rgb: 9, 80, 131; + --salt-color-blue-800-rgb: 3, 60, 104; + --salt-color-blue-900-rgb: 0, 41, 79; + --salt-color-green-100-rgb: 234, 245, 242; + --salt-color-green-200-rgb: 186, 217, 202; + --salt-color-green-300-rgb: 137, 190, 163; + --salt-color-green-400-rgb: 87, 162, 125; + --salt-color-green-500-rgb: 0, 135, 86; + --salt-color-green-600-rgb: 0, 119, 73; + --salt-color-green-700-rgb: 0, 104, 61; + --salt-color-green-800-rgb: 0, 89, 49; + --salt-color-green-900-rgb: 0, 75, 38; + --salt-color-teal-100-rgb: 219, 245, 247; + --salt-color-teal-200-rgb: 177, 214, 221; + --salt-color-teal-300-rgb: 135, 184, 195; + --salt-color-teal-400-rgb: 92, 155, 170; + --salt-color-teal-500-rgb: 39, 127, 145; + --salt-color-teal-600-rgb: 30, 111, 129; + --salt-color-teal-700-rgb: 20, 95, 114; + --salt-color-teal-800-rgb: 9, 80, 99; + --salt-color-teal-900-rgb: 0, 65, 84; + --salt-color-orange-100-rgb: 255, 236, 217; + --salt-color-orange-200-rgb: 246, 198, 164; + --salt-color-orange-300-rgb: 232, 161, 113; + --salt-color-orange-400-rgb: 215, 124, 63; + --salt-color-orange-500-rgb: 194, 87, 0; + --salt-color-orange-600-rgb: 160, 72, 4; + --salt-color-orange-700-rgb: 127, 58, 5; + --salt-color-orange-800-rgb: 95, 44, 5; + --salt-color-orange-900-rgb: 66, 31, 0; + --salt-color-red-100-rgb: 255, 236, 234; + --salt-color-red-200-rgb: 253, 195, 183; + --salt-color-red-300-rgb: 246, 153, 134; + --salt-color-red-400-rgb: 234, 110, 88; + --salt-color-red-500-rgb: 217, 61, 43; + --salt-color-red-600-rgb: 186, 48, 33; + --salt-color-red-700-rgb: 156, 35, 23; + --salt-color-red-800-rgb: 127, 23, 13; + --salt-color-red-900-rgb: 99, 10, 0; + --salt-color-purple-100-rgb: 246, 240, 250; + --salt-color-purple-200-rgb: 225, 202, 233; + --salt-color-purple-300-rgb: 203, 165, 216; + --salt-color-purple-400-rgb: 181, 128, 198; + --salt-color-purple-500-rgb: 158, 91, 181; + --salt-color-purple-600-rgb: 137, 73, 156; + --salt-color-purple-700-rgb: 117, 55, 133; + --salt-color-purple-800-rgb: 97, 37, 109; + --salt-color-purple-900-rgb: 78, 19, 87; + --salt-color-brown-100-rgb: 250, 248, 242; + --salt-color-brown-200-rgb: 227, 212, 198; + --salt-color-brown-300-rgb: 203, 176, 155; + --salt-color-brown-400-rgb: 179, 142, 114; + --salt-color-brown-500-rgb: 153, 109, 75; + --salt-color-brown-600-rgb: 134, 91, 58; + --salt-color-brown-700-rgb: 115, 74, 41; + --salt-color-brown-800-rgb: 96, 58, 25; + --salt-color-brown-900-rgb: 78, 42, 8; + --salt-color-background-snow-rgb: 255, 255, 255; + --salt-color-background-fog-rgb: 245, 247, 248; + --salt-color-background-charcoal-rgb: 34, 36, 38; + --salt-color-background-jet-rgb: 16, 24, 32; + --salt-color-logo-brown-rgb: 58, 34, 6; + --salt-color-white: rgb(var(--salt-color-white-rgb)); + --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb)); + --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb)); + --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb)); + --salt-color-gray-400: rgb(var(--salt-color-gray-400-rgb)); + --salt-color-gray-500: rgb(var(--salt-color-gray-500-rgb)); + --salt-color-gray-600: rgb(var(--salt-color-gray-600-rgb)); + --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb)); + --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb)); + --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb)); + --salt-color-black: rgb(var(--salt-color-black-rgb)); + --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb)); + --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb)); + --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb)); + --salt-color-blue-400: rgb(var(--salt-color-blue-400-rgb)); + --salt-color-blue-500: rgb(var(--salt-color-blue-500-rgb)); + --salt-color-blue-600: rgb(var(--salt-color-blue-600-rgb)); + --salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb)); + --salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb)); + --salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb)); + --salt-color-green-100: rgb(var(--salt-color-green-100-rgb)); + --salt-color-green-200: rgb(var(--salt-color-green-200-rgb)); + --salt-color-green-300: rgb(var(--salt-color-green-300-rgb)); + --salt-color-green-400: rgb(var(--salt-color-green-400-rgb)); + --salt-color-green-500: rgb(var(--salt-color-green-500-rgb)); + --salt-color-green-600: rgb(var(--salt-color-green-600-rgb)); + --salt-color-green-700: rgb(var(--salt-color-green-700-rgb)); + --salt-color-green-800: rgb(var(--salt-color-green-800-rgb)); + --salt-color-green-900: rgb(var(--salt-color-green-900-rgb)); + --salt-color-teal-100: rgb(var(--salt-color-teal-100-rgb)); + --salt-color-teal-200: rgb(var(--salt-color-teal-200-rgb)); + --salt-color-teal-300: rgb(var(--salt-color-teal-300-rgb)); + --salt-color-teal-400: rgb(var(--salt-color-teal-400-rgb)); + --salt-color-teal-500: rgb(var(--salt-color-teal-500-rgb)); + --salt-color-teal-600: rgb(var(--salt-color-teal-600-rgb)); + --salt-color-teal-700: rgb(var(--salt-color-teal-700-rgb)); + --salt-color-teal-800: rgb(var(--salt-color-teal-800-rgb)); + --salt-color-teal-900: rgb(var(--salt-color-teal-900-rgb)); + --salt-color-orange-100: rgb(var(--salt-color-orange-100-rgb)); + --salt-color-orange-200: rgb(var(--salt-color-orange-200-rgb)); + --salt-color-orange-300: rgb(var(--salt-color-orange-300-rgb)); + --salt-color-orange-400: rgb(var(--salt-color-orange-400-rgb)); + --salt-color-orange-500: rgb(var(--salt-color-orange-500-rgb)); + --salt-color-orange-600: rgb(var(--salt-color-orange-600-rgb)); + --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb)); + --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb)); + --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb)); + --salt-color-red-100: rgb(var(--salt-color-red-100-rgb)); + --salt-color-red-200: rgb(var(--salt-color-red-200-rgb)); + --salt-color-red-300: rgb(var(--salt-color-red-300-rgb)); + --salt-color-red-400: rgb(var(--salt-color-red-400-rgb)); + --salt-color-red-500: rgb(var(--salt-color-red-500-rgb)); + --salt-color-red-600: rgb(var(--salt-color-red-600-rgb)); + --salt-color-red-700: rgb(var(--salt-color-red-700-rgb)); + --salt-color-red-800: rgb(var(--salt-color-red-800-rgb)); + --salt-color-red-900: rgb(var(--salt-color-red-900-rgb)); + --salt-color-purple-100: rgb(var(--salt-color-purple-100-rgb)); + --salt-color-purple-200: rgb(var(--salt-color-purple-200-rgb)); + --salt-color-purple-300: rgb(var(--salt-color-purple-300-rgb)); + --salt-color-purple-400: rgb(var(--salt-color-purple-400-rgb)); + --salt-color-purple-500: rgb(var(--salt-color-purple-500-rgb)); + --salt-color-purple-600: rgb(var(--salt-color-purple-600-rgb)); + --salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb)); + --salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb)); + --salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb)); + --salt-color-brown-100: rgb(var(--salt-color-brown-100-rgb)); + --salt-color-brown-200: rgb(var(--salt-color-brown-200-rgb)); + --salt-color-brown-300: rgb(var(--salt-color-brown-300-rgb)); + --salt-color-brown-400: rgb(var(--salt-color-brown-400-rgb)); + --salt-color-brown-500: rgb(var(--salt-color-brown-500-rgb)); + --salt-color-brown-600: rgb(var(--salt-color-brown-600-rgb)); + --salt-color-brown-700: rgb(var(--salt-color-brown-700-rgb)); + --salt-color-brown-800: rgb(var(--salt-color-brown-800-rgb)); + --salt-color-brown-900: rgb(var(--salt-color-brown-900-rgb)); + --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb)); + --salt-color-background-fog: rgb(var(--salt-color-background-fog-rgb)); + --salt-color-background-charcoal: rgb(var(--salt-color-background-charcoal-rgb)); + --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb)); + --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb)); +} diff --git a/packages/theme/css/foundations/fade-next.css b/packages/theme/css/foundations/fade-next.css new file mode 100644 index 00000000000..467c73716d9 --- /dev/null +++ b/packages/theme/css/foundations/fade-next.css @@ -0,0 +1,33 @@ +/* +TODO: discuss whether this should be an actual file, or should inline these values. +con: If we offer these values, then it could misleading that we're offering all these values + */ +.salt-theme.salt-theme-next { + --salt-color-white-20a: rgba(--salt-color-white-rgb, 0.2); + --salt-color-white-30a: rgba(--salt-color-white-rgb, 0.3); + --salt-color-white-40a: rgba(--salt-color-white-rgb, 0.4); + --salt-color-white-70a: rgba(--salt-color-white-rgb, 0.7); + --salt-color-black-20a: rgba(--salt-color-black-rgb, 0.2); + --salt-color-black-30a: rgba(--salt-color-black-rgb, 0.3); + --salt-color-black-40a: rgba(--salt-color-black-rgb, 0.4); + --salt-color-black-70a: rgba(--salt-color-black-rgb, 0.7); + --salt-color-gray-300-10a: rgba(--salt-color-gray-300-rgb, 0.1); + --salt-color-gray-300-40a: rgba(--salt-color-gray-300-rgb, 0.4); + --salt-color-gray-400-40a: rgba(--salt-color-gray-400-rgb, 0.4); + --salt-color-gray-500-10a: rgba(--salt-color-gray-500-rgb, 0.1); + --salt-color-gray-500-40a: rgba(--salt-color-gray-500-rgb, 0.4); + --salt-color-gray-600-40a: rgba(--salt-color-gray-600-rgb, 0.4); + --salt-color-gray-700-10a: rgba(--salt-color-gray-700-rgb, 0.1); + --salt-color-gray-700-40a: rgba(--salt-color-gray-700-rgb, 0.4); + --salt-color-blue-200-40a: rgba(--salt-color-blue-200-rgb, 0.4); + --salt-color-blue-300-40a: rgba(--salt-color-blue-300-rgb, 0.4); + --salt-color-blue-400-40a: rgba(--salt-color-blue-400-rgb, 0.4); + --salt-color-blue-500-40a: rgba(--salt-color-blue-500-rgb, 0.4); + --salt-color-blue-600-40a: rgba(--salt-color-blue-600-rgb, 0.4); + --salt-color-blue-700-40a: rgba(--salt-color-blue-700-rgb, 0.4); + --salt-color-blue-800-40a: rgba(--salt-color-blue-800-rgb, 0.4); + --salt-color-background-snow-40a: rgba(--salt-color-background-snow-rgb, 0.4); + --salt-color-background-fog-40a: rgba(--salt-color-background-fog-rgb, 0.4); + --salt-color-background-charcoal-40a: rgba(--salt-color-background-charcoal-rgb, 0.4); + --salt-color-background-jet-40a: rgba(--salt-color-background-jet-rgb, 0.4); +} diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css new file mode 100644 index 00000000000..2f9b1fff8fc --- /dev/null +++ b/packages/theme/css/palette/accent-next.css @@ -0,0 +1,29 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-accent: var(--salt-color-blue-500); + --salt-palette-accent-disabled: var(--salt-color-blue-500-40a); + --salt-palette-accent-strong: var(--salt-color-blue-600); + --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a); + --salt-palette-accent-stronger: var(--salt-color-blue-700); + --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a); + --salt-palette-accent-weak: var(--salt-color-blue-400); + --salt-palette-accent-weaker: var(--salt-color-blue-200); + --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); + --salt-palette-accent-weakest: var(--salt-color-blue-100); + --salt-palette-accent-action: var(--salt-color-blue-500); + --salt-palette-accent-action-active: var(--salt-color-blue-800); +} + +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-accent: var(--salt-color-blue-500); + --salt-palette-accent-disabled: var(--salt-color-blue-500-40a); + --salt-palette-accent-strong: var(--salt-color-blue-400); + --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a); + --salt-palette-accent-stronger: var(--salt-color-blue-300); + --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a); + --salt-palette-accent-weak: var(--salt-color-blue-600); + --salt-palette-accent-weaker: var(--salt-color-blue-800); + --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); + --salt-palette-accent-weakest: var(--salt-color-blue-900); + --salt-palette-accent-action: var(--salt-color-blue-500); + --salt-palette-accent-action-active: var(--salt-color-blue-800); +} diff --git a/packages/theme/css/palette/background-next.css b/packages/theme/css/palette/background-next.css new file mode 100644 index 00000000000..853ce9e3ee0 --- /dev/null +++ b/packages/theme/css/palette/background-next.css @@ -0,0 +1,16 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-background-backdrop: var(--salt-color-white-70a); + --salt-palette-background-primary: var(--salt-color-background-snow); + --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a); + --salt-palette-background-secondary: var(--salt-color-background-fog); + --salt-palette-background-secondary-disabled: var(--salt-color-background-fog-40a); + --salt-palette-background-transparent: transparent; +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-background-backdrop: var(--salt-color-black-70a); + --salt-palette-background-primary: var(--salt-color-background-jet); + --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a); + --salt-palette-background-secondary: var(--salt-color-background-charcoal); + --salt-palette-background-secondary-disabled: var(--salt-color-background-charcoal-40a); + --salt-palette-background-transparent: transparent; +} diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css new file mode 100644 index 00000000000..7902b57832e --- /dev/null +++ b/packages/theme/css/palette/foreground-next.css @@ -0,0 +1,22 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-foreground-active: var(--salt-color-blue-700); + --salt-palette-foreground-hover: var(--salt-color-blue-600); + --salt-palette-foreground-primary: var(--salt-color-black); + --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a); + --salt-palette-foreground-primary-alt: var(--salt-color-white); + --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a); + --salt-palette-foreground-secondary: var(--salt-color-gray-600); + --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a); + --salt-palette-foreground-visited: var(--salt-color-purple-800); +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-foreground-active: var(--salt-color-blue-300); + --salt-palette-foreground-hover: var(--salt-color-blue-400); + --salt-palette-foreground-primary: var(--salt-color-white); + --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a); + --salt-palette-foreground-primary-alt: var(--salt-color-white); + --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a); + --salt-palette-foreground-secondary: var(--salt-color-gray-400); + --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a); + --salt-palette-foreground-visited: var(--salt-color-purple-200); +} diff --git a/packages/theme/css/palette/info-next.css b/packages/theme/css/palette/info-next.css new file mode 100644 index 00000000000..ed6b37eeaac --- /dev/null +++ b/packages/theme/css/palette/info-next.css @@ -0,0 +1,8 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-info: var(--salt-color-blue-600); + --salt-palette-info-weak: var(--salt-color-blue-100); +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-info: var(--salt-color-blue-400); + --salt-palette-info-weak: var(--salt-color-blue-900); +} diff --git a/packages/theme/css/palette/negative-next.css b/packages/theme/css/palette/negative-next.css new file mode 100644 index 00000000000..68c182189e4 --- /dev/null +++ b/packages/theme/css/palette/negative-next.css @@ -0,0 +1,8 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-negative: var(--salt-color-red-600); + --salt-palette-negative-weak: var(--salt-color-red-100); +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-negative: var(--salt-color-red-400); + --salt-palette-negative-weak: var(--salt-color-red-900); +} diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css new file mode 100644 index 00000000000..c12d1c6d716 --- /dev/null +++ b/packages/theme/css/palette/neutral-next.css @@ -0,0 +1,36 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-neutral: var(--salt-color-gray-500); + --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a); + --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a); + --salt-palette-neutral-strong: var(--salt-color-gray-600); + --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a); + --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a); + --salt-palette-neutral-stronger-secondary: var(--salt-color-black-30a); + --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-20a); + --salt-palette-neutral-weak: var(--salt-color-gray-400); + --salt-palette-neutral-weaker: var(--salt-color-gray-300); + --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); + --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a); + --salt-palette-neutral-weakest: var(--salt-color-gray-200); + --salt-palette-neutral-action: var(--salt-color-gray-500); + --salt-palette-neutral-action-disabled: var(--salt-color-gray-500-40a); + --salt-palette-neutral-action-active: var(--salt-color-gray-800); +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-neutral: var(--salt-color-gray-500); + --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a); + --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a); + --salt-palette-neutral-strong: var(--salt-color-gray-400); + --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a); + --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a); + --salt-palette-neutral-stronger-secondary: var(--salt-color-white-30a); + --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-20a); + --salt-palette-neutral-weak: var(--salt-color-gray-600); + --salt-palette-neutral-weaker: var(--salt-color-gray-700); + --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a); + --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a); + --salt-palette-neutral-weakest: var(--salt-color-gray-800); + --salt-palette-neutral-action: var(--salt-color-gray-500); + --salt-palette-neutral-action-disabled: var(--salt-color-gray-500-40a); + --salt-palette-neutral-action-active: var(--salt-color-gray-800); +} diff --git a/packages/theme/css/palette/positive-next.css b/packages/theme/css/palette/positive-next.css new file mode 100644 index 00000000000..34fea0c96d6 --- /dev/null +++ b/packages/theme/css/palette/positive-next.css @@ -0,0 +1,8 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-positive: var(--salt-color-green-600); + --salt-palette-positive-weak: var(--salt-color-green-100); +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-positive: var(--salt-color-green-400); + --salt-palette-positive-weak: var(--salt-color-green-900); +} diff --git a/packages/theme/css/palette/warning-next.css b/packages/theme/css/palette/warning-next.css new file mode 100644 index 00000000000..6569a8c8973 --- /dev/null +++ b/packages/theme/css/palette/warning-next.css @@ -0,0 +1,8 @@ +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-warning: var(--salt-color-orange-600); + --salt-palette-warning-weak: var(--salt-color-orange-100); +} +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-warning: var(--salt-color-orange-400); + --salt-palette-warning-weak: var(--salt-color-orange-900); +} diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css index d64237b9421..3ee298522e6 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -1,3 +1,22 @@ +@import url(foundations/color-next.css); @import url(foundations/curve-next.css); +@import url(foundations/fade-next.css); + +@import url(palette/accent-next.css); +@import url(palette/background-next.css); @import url(palette/corner-next.css); +@import url(palette/foreground-next.css); +@import url(palette/info-next.css); +@import url(palette/negative-next.css); +@import url(palette/neutral-next.css); +@import url(palette/positive-next.css); @import url(palette/text-next.css); +@import url(palette/warning-next.css); + +@import url(characteristics/accent-next.css); +@import url(characteristics/actionable-next.css); +@import url(characteristics/container-next.css); +@import url(characteristics/content-next.css); +@import url(characteristics/status-next.css); +@import url(characteristics/target-next.css); +@import url(characteristics/track-next.css); From 83810e10f9cd0c54d5f93773250ff5961255aaaa Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:50:06 +0100 Subject: [PATCH 02/50] Add some doc --- .../salt-provider/salt-provider-next.mdx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/core/stories/salt-provider/salt-provider-next.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx index f69cf789114..d5287748bfb 100644 --- a/packages/core/stories/salt-provider/salt-provider-next.mdx +++ b/packages/core/stories/salt-provider/salt-provider-next.mdx @@ -131,3 +131,35 @@ You'll need to install Amplitude font to your application to make sure every use src: url("PATH/TO/FONT.woff2") format("woff2"); } ``` + +## Unified Color Palette + +A completely new color palette is used with balanced color ramps for each color group. + +You will find 9 colors in each color group, which makes sure middle point (500 colors) will achieve +at least 4.5 contrast ratio against both light and dark primary background. Primary and secondary +background colors are no longer picked from the color ramps, but rather from additional foundation +colors (snow & fog in light, charcoal & jet in dark). + +Refer to Figma file ([UNSTABLE Salt Colors (variables)]()) +for color values and mappings. + +Migration note: If you're referring any Salt foundation colors (i.e. `--salt-color-*`) directly in your code, +you'll need to revisit those values. We do not recommend directly consume foundation colors directly, instead +try to find a characteristics color instead which will work better in different modes. + +## New Theme Palette Structure + +A new structure of palette layer is introduced to help making color changes easier for custom themes, namely + +- Accent +- Background +- Foreground +- Neutral +- Info +- Negative +- Positive +- Warning + +All existing characteristics are re-wired through above new palette layers to use the new colors, +which is scoped to `.salt-theme-next`. From b9b9edbd72bd1387a3397c9221e3f6e83eaed489 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 15 Apr 2024 16:58:08 +0100 Subject: [PATCH 03/50] changeset --- .changeset/strong-parents-march.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .changeset/strong-parents-march.md diff --git a/.changeset/strong-parents-march.md b/.changeset/strong-parents-march.md new file mode 100644 index 00000000000..319b93630aa --- /dev/null +++ b/.changeset/strong-parents-march.md @@ -0,0 +1,9 @@ +--- +"@salt-ds/core": minor +"@salt-ds/lab": minor +"@salt-ds/theme": minor +--- + +Switched to use new color palette in theme next when using `UNSTABLE_SaltProviderNext`. + +Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information. From d1d328c7fde5344a492fe28a007dcaf2ae92819d Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Tue, 16 Apr 2024 13:51:04 +0100 Subject: [PATCH 04/50] adds selectable-next, rename background-none --- .../css/characteristics/actionable-next.css | 2 +- .../css/characteristics/selectable-next.css | 20 +++++++++++++++++++ .../theme/css/palette/background-next.css | 4 ++-- packages/theme/css/theme-next.css | 1 + 4 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 packages/theme/css/characteristics/selectable-next.css diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css index ec1efed2e7f..965f3bf759d 100644 --- a/packages/theme/css/characteristics/actionable-next.css +++ b/packages/theme/css/characteristics/actionable-next.css @@ -22,7 +22,7 @@ --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt); --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt); --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); - --salt-actionable-secondary-background: var(--salt-palette-background-transparent); /* TBD */ + --salt-actionable-secondary-background: var(--salt-palette-background-none); /* TBD */ --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active); --salt-actionable-secondary-background-disabled: var(--salt-palette-neutral-action-disabled); diff --git a/packages/theme/css/characteristics/selectable-next.css b/packages/theme/css/characteristics/selectable-next.css new file mode 100644 index 00000000000..101da79f679 --- /dev/null +++ b/packages/theme/css/characteristics/selectable-next.css @@ -0,0 +1,20 @@ +.salt-theme.salt-theme-next { + --salt-selectable-borderColor: var(--salt-palette-neutral); + --salt-selectable-borderColor-hover: var(--salt-palette-accent); + --salt-selectable-borderColor-selected: var(--salt-palette-accent-stronger); + --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-stronger-disabled); + --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled); + --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly); + + --salt-selectable-foreground: var(--salt-palette-neutral-strong); + --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled); + --salt-selectable-foreground-hover: var(--salt-palette-accent); + --salt-selectable-foreground-selected: var(--salt-palette-accent-strong); + --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-strong-disabled); + --salt-selectable-background: var(--salt-palette-background-none); + --salt-selectable-background-hover: var(--salt-palette-accent-weakest); + --salt-selectable-background-selected: var(--salt-palette-accent-weak); + --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest); + --salt-selectable-background-disabled: var(--salt-palette-background-none); + --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled); +} diff --git a/packages/theme/css/palette/background-next.css b/packages/theme/css/palette/background-next.css index 853ce9e3ee0..ed0df1db2d2 100644 --- a/packages/theme/css/palette/background-next.css +++ b/packages/theme/css/palette/background-next.css @@ -4,7 +4,7 @@ --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a); --salt-palette-background-secondary: var(--salt-color-background-fog); --salt-palette-background-secondary-disabled: var(--salt-color-background-fog-40a); - --salt-palette-background-transparent: transparent; + --salt-palette-background-none: transparent; } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-background-backdrop: var(--salt-color-black-70a); @@ -12,5 +12,5 @@ --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a); --salt-palette-background-secondary: var(--salt-color-background-charcoal); --salt-palette-background-secondary-disabled: var(--salt-color-background-charcoal-40a); - --salt-palette-background-transparent: transparent; + --salt-palette-background-none: transparent; } diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css index 3ee298522e6..e70be4c6962 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -17,6 +17,7 @@ @import url(characteristics/actionable-next.css); @import url(characteristics/container-next.css); @import url(characteristics/content-next.css); +@import url(characteristics/selectable-next.css); @import url(characteristics/status-next.css); @import url(characteristics/target-next.css); @import url(characteristics/track-next.css); From 02794c1a3650986475ca70e6c5ac3011d60a9ab2 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Tue, 16 Apr 2024 15:58:19 +0100 Subject: [PATCH 05/50] Fix fade variable reference --- packages/theme/css/foundations/fade-next.css | 54 ++++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/theme/css/foundations/fade-next.css b/packages/theme/css/foundations/fade-next.css index 467c73716d9..9421b4a9490 100644 --- a/packages/theme/css/foundations/fade-next.css +++ b/packages/theme/css/foundations/fade-next.css @@ -3,31 +3,31 @@ TODO: discuss whether this should be an actual file, or should inline these valu con: If we offer these values, then it could misleading that we're offering all these values */ .salt-theme.salt-theme-next { - --salt-color-white-20a: rgba(--salt-color-white-rgb, 0.2); - --salt-color-white-30a: rgba(--salt-color-white-rgb, 0.3); - --salt-color-white-40a: rgba(--salt-color-white-rgb, 0.4); - --salt-color-white-70a: rgba(--salt-color-white-rgb, 0.7); - --salt-color-black-20a: rgba(--salt-color-black-rgb, 0.2); - --salt-color-black-30a: rgba(--salt-color-black-rgb, 0.3); - --salt-color-black-40a: rgba(--salt-color-black-rgb, 0.4); - --salt-color-black-70a: rgba(--salt-color-black-rgb, 0.7); - --salt-color-gray-300-10a: rgba(--salt-color-gray-300-rgb, 0.1); - --salt-color-gray-300-40a: rgba(--salt-color-gray-300-rgb, 0.4); - --salt-color-gray-400-40a: rgba(--salt-color-gray-400-rgb, 0.4); - --salt-color-gray-500-10a: rgba(--salt-color-gray-500-rgb, 0.1); - --salt-color-gray-500-40a: rgba(--salt-color-gray-500-rgb, 0.4); - --salt-color-gray-600-40a: rgba(--salt-color-gray-600-rgb, 0.4); - --salt-color-gray-700-10a: rgba(--salt-color-gray-700-rgb, 0.1); - --salt-color-gray-700-40a: rgba(--salt-color-gray-700-rgb, 0.4); - --salt-color-blue-200-40a: rgba(--salt-color-blue-200-rgb, 0.4); - --salt-color-blue-300-40a: rgba(--salt-color-blue-300-rgb, 0.4); - --salt-color-blue-400-40a: rgba(--salt-color-blue-400-rgb, 0.4); - --salt-color-blue-500-40a: rgba(--salt-color-blue-500-rgb, 0.4); - --salt-color-blue-600-40a: rgba(--salt-color-blue-600-rgb, 0.4); - --salt-color-blue-700-40a: rgba(--salt-color-blue-700-rgb, 0.4); - --salt-color-blue-800-40a: rgba(--salt-color-blue-800-rgb, 0.4); - --salt-color-background-snow-40a: rgba(--salt-color-background-snow-rgb, 0.4); - --salt-color-background-fog-40a: rgba(--salt-color-background-fog-rgb, 0.4); - --salt-color-background-charcoal-40a: rgba(--salt-color-background-charcoal-rgb, 0.4); - --salt-color-background-jet-40a: rgba(--salt-color-background-jet-rgb, 0.4); + --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2); + --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3); + --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4); + --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7); + --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2); + --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3); + --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4); + --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7); + --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1); + --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4); + --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4); + --salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1); + --salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4); + --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4); + --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1); + --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4); + --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4); + --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4); + --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4); + --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4); + --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4); + --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4); + --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4); + --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4); + --salt-color-background-fog-40a: rgba(var(--salt-color-background-fog-rgb), 0.4); + --salt-color-background-charcoal-40a: rgba(var(--salt-color-background-charcoal-rgb), 0.4); + --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4); } From bdc396a118d3c37be5702341b16f2d1a627e8623 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Tue, 16 Apr 2024 15:58:30 +0100 Subject: [PATCH 06/50] Add editable next --- .../kitchen-sink/kitchen-sink.stories.tsx | 12 +++++++++++- .../css/characteristics/editable-next.css | 19 +++++++++++++++++++ packages/theme/css/theme-next.css | 1 + 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 packages/theme/css/characteristics/editable-next.css diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index 9f34d732302..3eda6953e70 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -58,7 +58,11 @@ import { Error as ToastError, Warning as ToastWarning, } from "../../../core/stories/toast/toast.stories"; -import { WithValidation as FormFieldValidation } from "../../../core/stories/form-field/form-field.stories"; +import { + WithValidation as FormFieldValidation, + WithMultilineInputAsQuestion, + HelperText as FormFieldHelperText, +} from "../../../core/stories/form-field/form-field.stories"; import { Default as PillDefault, Disabled as PillDisabled, @@ -319,6 +323,12 @@ export const Example1 = () => { + + + + + + Date: Wed, 17 Apr 2024 11:36:52 +0100 Subject: [PATCH 07/50] Add rest of characteristics --- packages/theme/css/characteristics/focused-next.css | 3 +++ packages/theme/css/characteristics/navigable-next.css | 6 ++++++ packages/theme/css/characteristics/overlayable-next.css | 3 +++ packages/theme/css/characteristics/separable-next.css | 5 +++++ packages/theme/css/theme-next.css | 4 ++++ 5 files changed, 21 insertions(+) create mode 100644 packages/theme/css/characteristics/focused-next.css create mode 100644 packages/theme/css/characteristics/navigable-next.css create mode 100644 packages/theme/css/characteristics/overlayable-next.css create mode 100644 packages/theme/css/characteristics/separable-next.css diff --git a/packages/theme/css/characteristics/focused-next.css b/packages/theme/css/characteristics/focused-next.css new file mode 100644 index 00000000000..488d989f3ef --- /dev/null +++ b/packages/theme/css/characteristics/focused-next.css @@ -0,0 +1,3 @@ +.salt-theme.salt-theme-next { + --salt-focused-outlineColor: var(--salt-palette-accent-stronger); +} diff --git a/packages/theme/css/characteristics/navigable-next.css b/packages/theme/css/characteristics/navigable-next.css new file mode 100644 index 00000000000..6ff6b78da7f --- /dev/null +++ b/packages/theme/css/characteristics/navigable-next.css @@ -0,0 +1,6 @@ +.salt-theme.salt-theme-next { + --salt-navigable-indicator-hover: var(--salt-palette-neutral); + --salt-navigable-indicator-active: var(--salt-palette-accent); + + /* --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover); */ +} diff --git a/packages/theme/css/characteristics/overlayable-next.css b/packages/theme/css/characteristics/overlayable-next.css new file mode 100644 index 00000000000..f2a2651cc1d --- /dev/null +++ b/packages/theme/css/characteristics/overlayable-next.css @@ -0,0 +1,3 @@ +.salt-theme.salt-theme-next { + --salt-overlayable-background: var(--salt-palette-background-backdrop); +} diff --git a/packages/theme/css/characteristics/separable-next.css b/packages/theme/css/characteristics/separable-next.css new file mode 100644 index 00000000000..5038bfb438a --- /dev/null +++ b/packages/theme/css/characteristics/separable-next.css @@ -0,0 +1,5 @@ +.salt-theme.salt-theme-next { + --salt-separable-primary-borderColor: var(--salt-palette-neutral-stronger-primary); + --salt-separable-secondary-borderColor: var(--salt-palette-neutral-stronger-secondary); + --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-stronger-tertiary); +} diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css index de039548460..f8bb7e675eb 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -18,7 +18,11 @@ @import url(characteristics/container-next.css); @import url(characteristics/content-next.css); @import url(characteristics/editable-next.css); +@import url(characteristics/focused-next.css); +@import url(characteristics/navigable-next.css); +@import url(characteristics/overlayable-next.css); @import url(characteristics/selectable-next.css); +@import url(characteristics/separable-next.css); @import url(characteristics/status-next.css); @import url(characteristics/target-next.css); @import url(characteristics/track-next.css); From 83821644416e78d70236ef49c7f9802f2b6469c2 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Wed, 17 Apr 2024 11:58:33 +0100 Subject: [PATCH 08/50] Update changeset --- .changeset/early-radios-sell.md | 5 ----- .changeset/strong-parents-march.md | 2 -- 2 files changed, 7 deletions(-) delete mode 100644 .changeset/early-radios-sell.md diff --git a/.changeset/early-radios-sell.md b/.changeset/early-radios-sell.md deleted file mode 100644 index 8baf64fbe03..00000000000 --- a/.changeset/early-radios-sell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@salt-ds/theme": patch ---- - -[Theme next] Adds unified color palette diff --git a/.changeset/strong-parents-march.md b/.changeset/strong-parents-march.md index 319b93630aa..46da781e9e0 100644 --- a/.changeset/strong-parents-march.md +++ b/.changeset/strong-parents-march.md @@ -1,6 +1,4 @@ --- -"@salt-ds/core": minor -"@salt-ds/lab": minor "@salt-ds/theme": minor --- From 884508a3626bc539fe740959ac74a2bb5c560d16 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Fri, 3 May 2024 12:38:42 +0100 Subject: [PATCH 09/50] Update to include more examples, fix ag grid in kitchen sink --- .../css/_salt-ag-theme-mixin.scss | 6 +++++ .../stories/examples/HDCompact.tsx | 6 ++--- .../stories/form-field/form-field.stories.tsx | 17 ++++++++++---- .../kitchen-sink/kitchen-sink.stories.tsx | 23 +++++++++++++++++++ 4 files changed, 44 insertions(+), 8 deletions(-) diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss index d83608671bf..9e99002d92a 100644 --- a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss +++ b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss @@ -11,6 +11,11 @@ border: none; } + .ag-root-wrapper, + .ag-sticky-top { + background: var(--ag-background-color, var(--agGrid-background)); + } + // Because we are using a different border thickness on focus than default // we have to adjust height on various elements either using the line-height or height // properties. @@ -344,6 +349,7 @@ .ag-row { color: var(--agGrid-foreground); + background-color: var(--ag-background-color, var(--agGrid-background)); } .ag-row-hover { diff --git a/packages/ag-grid-theme/stories/examples/HDCompact.tsx b/packages/ag-grid-theme/stories/examples/HDCompact.tsx index 65114be3586..ef1f1f47636 100644 --- a/packages/ag-grid-theme/stories/examples/HDCompact.tsx +++ b/packages/ag-grid-theme/stories/examples/HDCompact.tsx @@ -1,4 +1,4 @@ -import { SaltProvider } from "@salt-ds/core"; +import { UNSTABLE_SaltProviderNext } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; @@ -26,7 +26,7 @@ const HDCompact = (props: AgGridReactProps) => { }); return ( - +
{ }} />
- + ); }; diff --git a/packages/core/stories/form-field/form-field.stories.tsx b/packages/core/stories/form-field/form-field.stories.tsx index 044e158bf32..4f6e554453f 100644 --- a/packages/core/stories/form-field/form-field.stories.tsx +++ b/packages/core/stories/form-field/form-field.stories.tsx @@ -376,11 +376,18 @@ export const MultipleChildren: StoryFn = (props) => { export const Readonly: StoryFn = (props) => { return ( - - Readonly Form Field - - This Form Field is readonly - + + + Readonly Form Field + + This Form Field is readonly + + + Readonly multiline input + + This Form Field is readonly + + ); }; diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index 3eda6953e70..c7a03043508 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -29,6 +29,7 @@ import { SaltShakerIcon, SaltShakerSolidIcon, } from "@salt-ds/icons"; +import { ListNext, ListItemNext } from "@salt-ds/lab"; import { DefaultGroup as AccordionDefault, Status as AccordionStatus, @@ -62,6 +63,7 @@ import { WithValidation as FormFieldValidation, WithMultilineInputAsQuestion, HelperText as FormFieldHelperText, + Readonly as FormFieldReadonly, } from "../../../core/stories/form-field/form-field.stories"; import { Default as PillDefault, @@ -69,10 +71,16 @@ import { Closable as PillClosable, Icon as PillIcon, } from "../../../core/stories/pill/pill.stories"; +import { Default as ListNextDefault } from "../../../lab/stories/list-next/list.stories"; import { Default as OverlayDefault } from "../../../core/stories/overlay/overlay.stories"; import AgGridThemeDefault from "../../../ag-grid-theme/stories/examples/Default"; +import AgGridThemeZebra from "../../../ag-grid-theme/stories/examples/VariantZebra"; import AgGridThemeHDCompact from "../../../ag-grid-theme/stories/examples/HDCompact"; +import "ag-grid-community/dist/styles/ag-grid.css"; +import "ag-grid-community/dist/styles/ag-theme-material.css"; +import "../../../../dist/salt-ds-ag-grid-theme/salt-ag-theme.css"; + export default { title: "Experimental/Kitchen Sink", }; @@ -329,6 +337,19 @@ export const Example1 = () => { + + + + + + + Green + + Red + + Blue + Purple + { }, ]} /> +

Zebra

+

HD Compact

Date: Mon, 6 May 2024 10:32:38 -0400 Subject: [PATCH 10/50] Revert ag grid theme change --- packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss index 9e99002d92a..d83608671bf 100644 --- a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss +++ b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss @@ -11,11 +11,6 @@ border: none; } - .ag-root-wrapper, - .ag-sticky-top { - background: var(--ag-background-color, var(--agGrid-background)); - } - // Because we are using a different border thickness on focus than default // we have to adjust height on various elements either using the line-height or height // properties. @@ -349,7 +344,6 @@ .ag-row { color: var(--agGrid-foreground); - background-color: var(--ag-background-color, var(--agGrid-background)); } .ag-row-hover { From 23dee89f8e228b77329a7a5c18da82ae50fe9e15 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 6 May 2024 12:32:35 -0400 Subject: [PATCH 11/50] - Update to r6 hex values - rename fog to marble, charcoal to granite - add tertiary container colors --- .../salt-provider/salt-provider-next.mdx | 2 +- .../css/characteristics/container-next.css | 3 + packages/theme/css/foundations/color-next.css | 116 +++++++++--------- packages/theme/css/foundations/fade-next.css | 6 +- .../theme/css/palette/background-next.css | 12 +- 5 files changed, 77 insertions(+), 62 deletions(-) diff --git a/packages/core/stories/salt-provider/salt-provider-next.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx index d5287748bfb..8b5ba9546f1 100644 --- a/packages/core/stories/salt-provider/salt-provider-next.mdx +++ b/packages/core/stories/salt-provider/salt-provider-next.mdx @@ -139,7 +139,7 @@ A completely new color palette is used with balanced color ramps for each color You will find 9 colors in each color group, which makes sure middle point (500 colors) will achieve at least 4.5 contrast ratio against both light and dark primary background. Primary and secondary background colors are no longer picked from the color ramps, but rather from additional foundation -colors (snow & fog in light, charcoal & jet in dark). +colors (snow & marble in light, jet & granite in dark). Refer to Figma file ([UNSTABLE Salt Colors (variables)]()) for color values and mappings. diff --git a/packages/theme/css/characteristics/container-next.css b/packages/theme/css/characteristics/container-next.css index 707ad37b8d2..49d986bf772 100644 --- a/packages/theme/css/characteristics/container-next.css +++ b/packages/theme/css/characteristics/container-next.css @@ -8,4 +8,7 @@ --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled); --salt-container-secondary-borderColor: var(--salt-palette-neutral-weaker); --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled); + + --salt-container-tertiary-background: var(--salt-palette-background-tertiary); + --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled); } diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css index 95766727222..49950f3e6b0 100644 --- a/packages/theme/css/foundations/color-next.css +++ b/packages/theme/css/foundations/color-next.css @@ -5,65 +5,65 @@ --salt-color-gray-300-rgb: 177, 181, 185; --salt-color-gray-400-rgb: 145, 149, 154; --salt-color-gray-500-rgb: 114, 119, 125; - --salt-color-gray-600-rgb: 97, 102, 108; - --salt-color-gray-700-rgb: 80, 86, 92; - --salt-color-gray-800-rgb: 64, 70, 76; - --salt-color-gray-900-rgb: 49, 55, 61; + --salt-color-gray-600-rgb: 95, 100, 106; + --salt-color-gray-700-rgb: 76, 81, 87; + --salt-color-gray-800-rgb: 58, 63, 68; + --salt-color-gray-900-rgb: 41, 46, 51; --salt-color-black-rgb: 0, 0, 0; --salt-color-blue-100-rgb: 234, 246, 255; --salt-color-blue-200-rgb: 190, 214, 238; - --salt-color-blue-300-rgb: 146, 182, 221; - --salt-color-blue-400-rgb: 97, 152, 203; - --salt-color-blue-500-rgb: 22, 123, 186; - --salt-color-blue-600-rgb: 15, 101, 158; - --salt-color-blue-700-rgb: 9, 80, 131; - --salt-color-blue-800-rgb: 3, 60, 104; - --salt-color-blue-900-rgb: 0, 41, 79; + --salt-color-blue-300-rgb: 144, 183, 221; + --salt-color-blue-400-rgb: 94, 153, 203; + --salt-color-blue-500-rgb: 0, 124, 186; + --salt-color-blue-600-rgb: 1, 102, 158; + --salt-color-blue-700-rgb: 1, 81, 131; + --salt-color-blue-800-rgb: 1, 60, 104; + --salt-color-blue-900-rgb: 0, 34, 79; --salt-color-green-100-rgb: 234, 245, 242; - --salt-color-green-200-rgb: 186, 217, 202; - --salt-color-green-300-rgb: 137, 190, 163; - --salt-color-green-400-rgb: 87, 162, 125; - --salt-color-green-500-rgb: 0, 135, 86; - --salt-color-green-600-rgb: 0, 119, 73; - --salt-color-green-700-rgb: 0, 104, 61; - --salt-color-green-800-rgb: 0, 89, 49; - --salt-color-green-900-rgb: 0, 75, 38; + --salt-color-green-200-rgb: 185, 217, 205; + --salt-color-green-300-rgb: 135, 189, 169; + --salt-color-green-400-rgb: 84, 161, 135; + --salt-color-green-500-rgb: 0, 133, 102; + --salt-color-green-600-rgb: 0, 111, 84; + --salt-color-green-700-rgb: 0, 90, 67; + --salt-color-green-800-rgb: 0, 70, 50; + --salt-color-green-900-rgb: 0, 51, 34; --salt-color-teal-100-rgb: 219, 245, 247; - --salt-color-teal-200-rgb: 177, 214, 221; - --salt-color-teal-300-rgb: 135, 184, 195; - --salt-color-teal-400-rgb: 92, 155, 170; - --salt-color-teal-500-rgb: 39, 127, 145; - --salt-color-teal-600-rgb: 30, 111, 129; - --salt-color-teal-700-rgb: 20, 95, 114; - --salt-color-teal-800-rgb: 9, 80, 99; - --salt-color-teal-900-rgb: 0, 65, 84; + --salt-color-teal-200-rgb: 177, 215, 221; + --salt-color-teal-300-rgb: 136, 185, 196; + --salt-color-teal-400-rgb: 92, 156, 172; + --salt-color-teal-500-rgb: 40, 128, 148; + --salt-color-teal-600-rgb: 29, 103, 122; + --salt-color-teal-700-rgb: 18, 79, 97; + --salt-color-teal-800-rgb: 7, 56, 74; + --salt-color-teal-900-rgb: 0, 34, 51; --salt-color-orange-100-rgb: 255, 236, 217; - --salt-color-orange-200-rgb: 246, 198, 164; - --salt-color-orange-300-rgb: 232, 161, 113; - --salt-color-orange-400-rgb: 215, 124, 63; - --salt-color-orange-500-rgb: 194, 87, 0; - --salt-color-orange-600-rgb: 160, 72, 4; - --salt-color-orange-700-rgb: 127, 58, 5; - --salt-color-orange-800-rgb: 95, 44, 5; - --salt-color-orange-900-rgb: 66, 31, 0; + --salt-color-orange-200-rgb: 244, 199, 164; + --salt-color-orange-300-rgb: 229, 162, 113; + --salt-color-orange-400-rgb: 211, 127, 64; + --salt-color-orange-500-rgb: 189, 91, 0; + --salt-color-orange-600-rgb: 156, 75, 4; + --salt-color-orange-700-rgb: 125, 60, 5; + --salt-color-orange-800-rgb: 94, 46, 5; + --salt-color-orange-900-rgb: 66, 32, 0; --salt-color-red-100-rgb: 255, 236, 234; - --salt-color-red-200-rgb: 253, 195, 183; - --salt-color-red-300-rgb: 246, 153, 134; - --salt-color-red-400-rgb: 234, 110, 88; - --salt-color-red-500-rgb: 217, 61, 43; - --salt-color-red-600-rgb: 186, 48, 33; - --salt-color-red-700-rgb: 156, 35, 23; - --salt-color-red-800-rgb: 127, 23, 13; - --salt-color-red-900-rgb: 99, 10, 0; + --salt-color-red-200-rgb: 254, 193, 189; + --salt-color-red-300-rgb: 248, 149, 145; + --salt-color-red-400-rgb: 237, 103, 104; + --salt-color-red-500-rgb: 222, 44, 65; + --salt-color-red-600-rgb: 188, 32, 50; + --salt-color-red-700-rgb: 156, 21, 35; + --salt-color-red-800-rgb: 124, 9, 21; + --salt-color-red-900-rgb: 94, 0, 3; --salt-color-purple-100-rgb: 246, 240, 250; - --salt-color-purple-200-rgb: 225, 202, 233; - --salt-color-purple-300-rgb: 203, 165, 216; - --salt-color-purple-400-rgb: 181, 128, 198; - --salt-color-purple-500-rgb: 158, 91, 181; - --salt-color-purple-600-rgb: 137, 73, 156; - --salt-color-purple-700-rgb: 117, 55, 133; - --salt-color-purple-800-rgb: 97, 37, 109; - --salt-color-purple-900-rgb: 78, 19, 87; + --salt-color-purple-200-rgb: 224, 202, 234; + --salt-color-purple-300-rgb: 201, 166, 218; + --salt-color-purple-400-rgb: 178, 129, 202; + --salt-color-purple-500-rgb: 154, 93, 186; + --salt-color-purple-600-rgb: 134, 74, 159; + --salt-color-purple-700-rgb: 114, 56, 133; + --salt-color-purple-800-rgb: 95, 38, 108; + --salt-color-purple-900-rgb: 76, 19, 84; --salt-color-brown-100-rgb: 250, 248, 242; --salt-color-brown-200-rgb: 227, 212, 198; --salt-color-brown-300-rgb: 203, 176, 155; @@ -74,9 +74,12 @@ --salt-color-brown-800-rgb: 96, 58, 25; --salt-color-brown-900-rgb: 78, 42, 8; --salt-color-background-snow-rgb: 255, 255, 255; - --salt-color-background-fog-rgb: 245, 247, 248; - --salt-color-background-charcoal-rgb: 34, 36, 38; + --salt-color-background-marble-rgb: 245, 247, 248; + --salt-color-background-limestone-rgb: 250, 248, 242; + --salt-color-background-gradientlight-rgb: 226, 228, 229; --salt-color-background-jet-rgb: 16, 24, 32; + --salt-color-background-granite-rgb: 26, 34, 41; + --salt-color-background-leather-rgb: 38, 41, 43; --salt-color-logo-brown-rgb: 58, 34, 6; --salt-color-white: rgb(var(--salt-color-white-rgb)); --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb)); @@ -153,8 +156,11 @@ --salt-color-brown-800: rgb(var(--salt-color-brown-800-rgb)); --salt-color-brown-900: rgb(var(--salt-color-brown-900-rgb)); --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb)); - --salt-color-background-fog: rgb(var(--salt-color-background-fog-rgb)); - --salt-color-background-charcoal: rgb(var(--salt-color-background-charcoal-rgb)); + --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb)); + --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb)); + --salt-color-background-gradientlight: rgb(var(--salt-color-background-gradientlight-rgb)); --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb)); + --salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb)); + --salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb)); --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb)); } diff --git a/packages/theme/css/foundations/fade-next.css b/packages/theme/css/foundations/fade-next.css index 9421b4a9490..0bf6bc3229b 100644 --- a/packages/theme/css/foundations/fade-next.css +++ b/packages/theme/css/foundations/fade-next.css @@ -27,7 +27,9 @@ con: If we offer these values, then it could misleading that we're offering all --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4); --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4); --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4); - --salt-color-background-fog-40a: rgba(var(--salt-color-background-fog-rgb), 0.4); - --salt-color-background-charcoal-40a: rgba(var(--salt-color-background-charcoal-rgb), 0.4); + --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4); + --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4); + --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4); --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4); + --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4); } diff --git a/packages/theme/css/palette/background-next.css b/packages/theme/css/palette/background-next.css index ed0df1db2d2..ca982abde9c 100644 --- a/packages/theme/css/palette/background-next.css +++ b/packages/theme/css/palette/background-next.css @@ -2,15 +2,19 @@ --salt-palette-background-backdrop: var(--salt-color-white-70a); --salt-palette-background-primary: var(--salt-color-background-snow); --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a); - --salt-palette-background-secondary: var(--salt-color-background-fog); - --salt-palette-background-secondary-disabled: var(--salt-color-background-fog-40a); + --salt-palette-background-secondary: var(--salt-color-background-marble); + --salt-palette-background-secondary-disabled: var(--salt-color-background-marble-40a); + --salt-palette-background-tertiary: var(--salt-color-background-limestone); + --salt-palette-background-tertiary-disabled: var(--salt-color-background-limestone-40a); --salt-palette-background-none: transparent; } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-background-backdrop: var(--salt-color-black-70a); --salt-palette-background-primary: var(--salt-color-background-jet); --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a); - --salt-palette-background-secondary: var(--salt-color-background-charcoal); - --salt-palette-background-secondary-disabled: var(--salt-color-background-charcoal-40a); + --salt-palette-background-secondary: var(--salt-color-background-granite); + --salt-palette-background-secondary-disabled: var(--salt-color-background-granite-40a); + --salt-palette-background-tertiary: var(--salt-color-background-leather); + --salt-palette-background-tertiary-disabled: var(--salt-color-background-leather-40a); --salt-palette-background-none: transparent; } From 4555555a9637b29c3b3f6e6f9ca9023d4cbc8bf1 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 6 May 2024 16:38:26 -0400 Subject: [PATCH 12/50] Adds accent action disabled --- packages/theme/css/palette/accent-next.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css index 2f9b1fff8fc..1ee190edf09 100644 --- a/packages/theme/css/palette/accent-next.css +++ b/packages/theme/css/palette/accent-next.css @@ -11,6 +11,7 @@ --salt-palette-accent-weakest: var(--salt-color-blue-100); --salt-palette-accent-action: var(--salt-color-blue-500); --salt-palette-accent-action-active: var(--salt-color-blue-800); + --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a); } .salt-theme.salt-theme-next[data-mode="dark"] { @@ -26,4 +27,5 @@ --salt-palette-accent-weakest: var(--salt-color-blue-900); --salt-palette-accent-action: var(--salt-color-blue-500); --salt-palette-accent-action-active: var(--salt-color-blue-800); + --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a); } From 0927c4634ecbe712d098604cea24e49b64ce2727 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 6 May 2024 19:17:33 -0400 Subject: [PATCH 13/50] Update status mapping to 500 --- packages/theme/css/palette/info-next.css | 4 ++-- packages/theme/css/palette/negative-next.css | 4 ++-- packages/theme/css/palette/positive-next.css | 4 ++-- packages/theme/css/palette/warning-next.css | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/theme/css/palette/info-next.css b/packages/theme/css/palette/info-next.css index ed6b37eeaac..2f80556ace6 100644 --- a/packages/theme/css/palette/info-next.css +++ b/packages/theme/css/palette/info-next.css @@ -1,8 +1,8 @@ .salt-theme.salt-theme-next[data-mode="light"] { - --salt-palette-info: var(--salt-color-blue-600); + --salt-palette-info: var(--salt-color-blue-500); --salt-palette-info-weak: var(--salt-color-blue-100); } .salt-theme.salt-theme-next[data-mode="dark"] { - --salt-palette-info: var(--salt-color-blue-400); + --salt-palette-info: var(--salt-color-blue-500); --salt-palette-info-weak: var(--salt-color-blue-900); } diff --git a/packages/theme/css/palette/negative-next.css b/packages/theme/css/palette/negative-next.css index 68c182189e4..ee5b110cfa5 100644 --- a/packages/theme/css/palette/negative-next.css +++ b/packages/theme/css/palette/negative-next.css @@ -1,8 +1,8 @@ .salt-theme.salt-theme-next[data-mode="light"] { - --salt-palette-negative: var(--salt-color-red-600); + --salt-palette-negative: var(--salt-color-red-500); --salt-palette-negative-weak: var(--salt-color-red-100); } .salt-theme.salt-theme-next[data-mode="dark"] { - --salt-palette-negative: var(--salt-color-red-400); + --salt-palette-negative: var(--salt-color-red-500); --salt-palette-negative-weak: var(--salt-color-red-900); } diff --git a/packages/theme/css/palette/positive-next.css b/packages/theme/css/palette/positive-next.css index 34fea0c96d6..86f627cc222 100644 --- a/packages/theme/css/palette/positive-next.css +++ b/packages/theme/css/palette/positive-next.css @@ -1,8 +1,8 @@ .salt-theme.salt-theme-next[data-mode="light"] { - --salt-palette-positive: var(--salt-color-green-600); + --salt-palette-positive: var(--salt-color-green-500); --salt-palette-positive-weak: var(--salt-color-green-100); } .salt-theme.salt-theme-next[data-mode="dark"] { - --salt-palette-positive: var(--salt-color-green-400); + --salt-palette-positive: var(--salt-color-green-500); --salt-palette-positive-weak: var(--salt-color-green-900); } diff --git a/packages/theme/css/palette/warning-next.css b/packages/theme/css/palette/warning-next.css index 6569a8c8973..f8ed3b3183d 100644 --- a/packages/theme/css/palette/warning-next.css +++ b/packages/theme/css/palette/warning-next.css @@ -1,8 +1,8 @@ .salt-theme.salt-theme-next[data-mode="light"] { - --salt-palette-warning: var(--salt-color-orange-600); + --salt-palette-warning: var(--salt-color-orange-500); --salt-palette-warning-weak: var(--salt-color-orange-100); } .salt-theme.salt-theme-next[data-mode="dark"] { - --salt-palette-warning: var(--salt-color-orange-400); + --salt-palette-warning: var(--salt-color-orange-500); --salt-palette-warning-weak: var(--salt-color-orange-900); } From 06c9a87baa646cbd17db64d7a31090f733957b2d Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 6 May 2024 21:08:23 -0400 Subject: [PATCH 14/50] Update button colors again --- .../stories/kitchen-sink/kitchen-sink.stories.tsx | 9 ++++++++- .../theme/css/characteristics/actionable-next.css | 8 ++++---- .../theme/css/characteristics/selectable-next.css | 14 +++++++------- packages/theme/css/characteristics/status-next.css | 4 ++-- packages/theme/css/palette/accent-next.css | 2 ++ packages/theme/css/palette/foreground-next.css | 2 ++ packages/theme/css/palette/neutral-next.css | 2 ++ 7 files changed, 27 insertions(+), 14 deletions(-) diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index c7a03043508..7023e9f337d 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -65,6 +65,7 @@ import { HelperText as FormFieldHelperText, Readonly as FormFieldReadonly, } from "../../../core/stories/form-field/form-field.stories"; +import { Default as SegmentedButtonGroupDefault } from "../../../core/stories/segmented-button-group/segmented-button-group.stories.tsx"; import { Default as PillDefault, Disabled as PillDisabled, @@ -238,6 +239,9 @@ export const Example1 = () => { + + + @@ -284,7 +288,10 @@ export const Example1 = () => { - + + + + diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css index 965f3bf759d..6dadb1288a8 100644 --- a/packages/theme/css/characteristics/actionable-next.css +++ b/packages/theme/css/characteristics/actionable-next.css @@ -11,19 +11,19 @@ /* Primary variant */ --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt); --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); --salt-actionable-primary-background: var(--salt-palette-neutral-action); --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ - --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-primary-background-active: var(--salt-palette-neutral-strongest); --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-action-disabled); /* Secondary variant */ --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); --salt-actionable-secondary-background: var(--salt-palette-background-none); /* TBD */ --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ - --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-secondary-background-active: var(--salt-palette-neutral-strongest); --salt-actionable-secondary-background-disabled: var(--salt-palette-neutral-action-disabled); } diff --git a/packages/theme/css/characteristics/selectable-next.css b/packages/theme/css/characteristics/selectable-next.css index 101da79f679..35cdba640cf 100644 --- a/packages/theme/css/characteristics/selectable-next.css +++ b/packages/theme/css/characteristics/selectable-next.css @@ -1,19 +1,19 @@ .salt-theme.salt-theme-next { --salt-selectable-borderColor: var(--salt-palette-neutral); - --salt-selectable-borderColor-hover: var(--salt-palette-accent); - --salt-selectable-borderColor-selected: var(--salt-palette-accent-stronger); - --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-stronger-disabled); + --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak); + --salt-selectable-borderColor-selected: var(--salt-palette-accent); + --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled); --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled); --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly); --salt-selectable-foreground: var(--salt-palette-neutral-strong); --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled); - --salt-selectable-foreground-hover: var(--salt-palette-accent); - --salt-selectable-foreground-selected: var(--salt-palette-accent-strong); - --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-strong-disabled); + --salt-selectable-foreground-hover: var(--salt-palette-accent-weak); + --salt-selectable-foreground-selected: var(--salt-palette-accent); + --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled); --salt-selectable-background: var(--salt-palette-background-none); --salt-selectable-background-hover: var(--salt-palette-accent-weakest); - --salt-selectable-background-selected: var(--salt-palette-accent-weak); + --salt-selectable-background-selected: var(--salt-palette-accent-weaker); --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest); --salt-selectable-background-disabled: var(--salt-palette-background-none); --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled); diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css index 6d7119dd80b..db973a7c5ee 100644 --- a/packages/theme/css/characteristics/status-next.css +++ b/packages/theme/css/characteristics/status-next.css @@ -1,5 +1,5 @@ .salt-theme.salt-theme-next { - --salt-status-info-foreground: var(--salt-palette-accent-strong); /* TBD */ + --salt-status-info-foreground: var(--salt-palette-accent); --salt-status-success-foreground: var(--salt-palette-positive); --salt-status-warning-foreground: var(--salt-palette-warning); --salt-status-error-foreground: var(--salt-palette-negative); @@ -7,7 +7,7 @@ --salt-status-negative-foreground: var(--salt-palette-negative); --salt-status-positive-foreground: var(--salt-palette-positive); - --salt-status-info-borderColor: var(--salt-palette-accent-strong); + --salt-status-info-borderColor: var(--salt-palette-accent); --salt-status-success-borderColor: var(--salt-palette-positive); --salt-status-warning-borderColor: var(--salt-palette-warning); --salt-status-error-borderColor: var(--salt-palette-negative); diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css index 1ee190edf09..6c9189cd4dc 100644 --- a/packages/theme/css/palette/accent-next.css +++ b/packages/theme/css/palette/accent-next.css @@ -5,6 +5,7 @@ --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a); --salt-palette-accent-stronger: var(--salt-color-blue-700); --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a); + --salt-palette-accent-strongest: var(--salt-color-blue-800); --salt-palette-accent-weak: var(--salt-color-blue-400); --salt-palette-accent-weaker: var(--salt-color-blue-200); --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); @@ -21,6 +22,7 @@ --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a); --salt-palette-accent-stronger: var(--salt-color-blue-300); --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a); + --salt-palette-accent-strongest: var(--salt-color-blue-200); --salt-palette-accent-weak: var(--salt-color-blue-600); --salt-palette-accent-weaker: var(--salt-color-blue-800); --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css index 7902b57832e..35a1492c502 100644 --- a/packages/theme/css/palette/foreground-next.css +++ b/packages/theme/css/palette/foreground-next.css @@ -8,6 +8,7 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-600); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a); --salt-palette-foreground-visited: var(--salt-color-purple-800); + --salt-palette-foreground-invert: var(--salt-color-white); } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-foreground-active: var(--salt-color-blue-300); @@ -19,4 +20,5 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-400); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a); --salt-palette-foreground-visited: var(--salt-color-purple-200); + --salt-palette-foreground-invert: var(--salt-color-black); } diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css index c12d1c6d716..59b235ba73b 100644 --- a/packages/theme/css/palette/neutral-next.css +++ b/packages/theme/css/palette/neutral-next.css @@ -7,6 +7,7 @@ --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a); --salt-palette-neutral-stronger-secondary: var(--salt-color-black-30a); --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-20a); + --salt-palette-neutral-strongest: var(--salt-color-gray-800); --salt-palette-neutral-weak: var(--salt-color-gray-400); --salt-palette-neutral-weaker: var(--salt-color-gray-300); --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); @@ -25,6 +26,7 @@ --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a); --salt-palette-neutral-stronger-secondary: var(--salt-color-white-30a); --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-20a); + --salt-palette-neutral-strongest: var(--salt-color-gray-200); --salt-palette-neutral-weak: var(--salt-color-gray-600); --salt-palette-neutral-weaker: var(--salt-color-gray-700); --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a); From 968b443ed921bac6a1c60073a8bcfff99a706f22 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 6 May 2024 21:16:13 -0400 Subject: [PATCH 15/50] Fix build --- packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index 7023e9f337d..4d021bbc97b 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -65,14 +65,13 @@ import { HelperText as FormFieldHelperText, Readonly as FormFieldReadonly, } from "../../../core/stories/form-field/form-field.stories"; -import { Default as SegmentedButtonGroupDefault } from "../../../core/stories/segmented-button-group/segmented-button-group.stories.tsx"; +import { Default as SegmentedButtonGroupDefault } from "../../../core/stories/segmented-button-group/segmented-button-group.stories"; import { Default as PillDefault, Disabled as PillDisabled, Closable as PillClosable, Icon as PillIcon, } from "../../../core/stories/pill/pill.stories"; -import { Default as ListNextDefault } from "../../../lab/stories/list-next/list.stories"; import { Default as OverlayDefault } from "../../../core/stories/overlay/overlay.stories"; import AgGridThemeDefault from "../../../ag-grid-theme/stories/examples/Default"; import AgGridThemeZebra from "../../../ag-grid-theme/stories/examples/VariantZebra"; From f24bfc894dff6f2110fade6e212938ea13cb1566 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Fri, 10 May 2024 14:37:02 -0400 Subject: [PATCH 16/50] Update color to r8 --- packages/theme/css/foundations/color-next.css | 92 ++++++++----------- 1 file changed, 37 insertions(+), 55 deletions(-) diff --git a/packages/theme/css/foundations/color-next.css b/packages/theme/css/foundations/color-next.css index 49950f3e6b0..571dc71aa56 100644 --- a/packages/theme/css/foundations/color-next.css +++ b/packages/theme/css/foundations/color-next.css @@ -11,31 +11,31 @@ --salt-color-gray-900-rgb: 41, 46, 51; --salt-color-black-rgb: 0, 0, 0; --salt-color-blue-100-rgb: 234, 246, 255; - --salt-color-blue-200-rgb: 190, 214, 238; - --salt-color-blue-300-rgb: 144, 183, 221; - --salt-color-blue-400-rgb: 94, 153, 203; - --salt-color-blue-500-rgb: 0, 124, 186; - --salt-color-blue-600-rgb: 1, 102, 158; - --salt-color-blue-700-rgb: 1, 81, 131; - --salt-color-blue-800-rgb: 1, 60, 104; + --salt-color-blue-200-rgb: 192, 213, 243; + --salt-color-blue-300-rgb: 148, 180, 232; + --salt-color-blue-400-rgb: 99, 149, 219; + --salt-color-blue-500-rgb: 0, 120, 207; + --salt-color-blue-600-rgb: 1, 97, 173; + --salt-color-blue-700-rgb: 1, 75, 140; + --salt-color-blue-800-rgb: 1, 54, 109; --salt-color-blue-900-rgb: 0, 34, 79; --salt-color-green-100-rgb: 234, 245, 242; - --salt-color-green-200-rgb: 185, 217, 205; - --salt-color-green-300-rgb: 135, 189, 169; - --salt-color-green-400-rgb: 84, 161, 135; - --salt-color-green-500-rgb: 0, 133, 102; - --salt-color-green-600-rgb: 0, 111, 84; - --salt-color-green-700-rgb: 0, 90, 67; - --salt-color-green-800-rgb: 0, 70, 50; - --salt-color-green-900-rgb: 0, 51, 34; + --salt-color-green-200-rgb: 185, 217, 203; + --salt-color-green-300-rgb: 136, 190, 165; + --salt-color-green-400-rgb: 84, 162, 128; + --salt-color-green-500-rgb: 0, 135, 93; + --salt-color-green-600-rgb: 0, 113, 75; + --salt-color-green-700-rgb: 0, 91, 58; + --salt-color-green-800-rgb: 0, 71, 42; + --salt-color-green-900-rgb: 0, 51, 26; --salt-color-teal-100-rgb: 219, 245, 247; - --salt-color-teal-200-rgb: 177, 215, 221; - --salt-color-teal-300-rgb: 136, 185, 196; - --salt-color-teal-400-rgb: 92, 156, 172; - --salt-color-teal-500-rgb: 40, 128, 148; - --salt-color-teal-600-rgb: 29, 103, 122; - --salt-color-teal-700-rgb: 18, 79, 97; - --salt-color-teal-800-rgb: 7, 56, 74; + --salt-color-teal-200-rgb: 177, 214, 224; + --salt-color-teal-300-rgb: 134, 184, 202; + --salt-color-teal-400-rgb: 89, 155, 180; + --salt-color-teal-500-rgb: 27, 127, 158; + --salt-color-teal-600-rgb: 18, 102, 129; + --salt-color-teal-700-rgb: 10, 78, 102; + --salt-color-teal-800-rgb: 3, 55, 76; --salt-color-teal-900-rgb: 0, 34, 51; --salt-color-orange-100-rgb: 255, 236, 217; --salt-color-orange-200-rgb: 244, 199, 164; @@ -47,32 +47,23 @@ --salt-color-orange-800-rgb: 94, 46, 5; --salt-color-orange-900-rgb: 66, 32, 0; --salt-color-red-100-rgb: 255, 236, 234; - --salt-color-red-200-rgb: 254, 193, 189; - --salt-color-red-300-rgb: 248, 149, 145; - --salt-color-red-400-rgb: 237, 103, 104; - --salt-color-red-500-rgb: 222, 44, 65; - --salt-color-red-600-rgb: 188, 32, 50; - --salt-color-red-700-rgb: 156, 21, 35; - --salt-color-red-800-rgb: 124, 9, 21; + --salt-color-red-200-rgb: 255, 193, 186; + --salt-color-red-300-rgb: 253, 148, 139; + --salt-color-red-400-rgb: 243, 100, 94; + --salt-color-red-500-rgb: 229, 33, 53; + --salt-color-red-600-rgb: 193, 23, 41; + --salt-color-red-700-rgb: 159, 14, 29; + --salt-color-red-800-rgb: 125, 5, 18; --salt-color-red-900-rgb: 94, 0, 3; --salt-color-purple-100-rgb: 246, 240, 250; - --salt-color-purple-200-rgb: 224, 202, 234; - --salt-color-purple-300-rgb: 201, 166, 218; - --salt-color-purple-400-rgb: 178, 129, 202; - --salt-color-purple-500-rgb: 154, 93, 186; - --salt-color-purple-600-rgb: 134, 74, 159; - --salt-color-purple-700-rgb: 114, 56, 133; - --salt-color-purple-800-rgb: 95, 38, 108; - --salt-color-purple-900-rgb: 76, 19, 84; - --salt-color-brown-100-rgb: 250, 248, 242; - --salt-color-brown-200-rgb: 227, 212, 198; - --salt-color-brown-300-rgb: 203, 176, 155; - --salt-color-brown-400-rgb: 179, 142, 114; - --salt-color-brown-500-rgb: 153, 109, 75; - --salt-color-brown-600-rgb: 134, 91, 58; - --salt-color-brown-700-rgb: 115, 74, 41; - --salt-color-brown-800-rgb: 96, 58, 25; - --salt-color-brown-900-rgb: 78, 42, 8; + --salt-color-purple-200-rgb: 226, 202, 231; + --salt-color-purple-300-rgb: 205, 165, 211; + --salt-color-purple-400-rgb: 184, 128, 192; + --salt-color-purple-500-rgb: 162, 91, 173; + --salt-color-purple-600-rgb: 137, 75, 146; + --salt-color-purple-700-rgb: 112, 60, 120; + --salt-color-purple-800-rgb: 89, 45, 95; + --salt-color-purple-900-rgb: 66, 31, 71; --salt-color-background-snow-rgb: 255, 255, 255; --salt-color-background-marble-rgb: 245, 247, 248; --salt-color-background-limestone-rgb: 250, 248, 242; @@ -146,15 +137,6 @@ --salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb)); --salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb)); --salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb)); - --salt-color-brown-100: rgb(var(--salt-color-brown-100-rgb)); - --salt-color-brown-200: rgb(var(--salt-color-brown-200-rgb)); - --salt-color-brown-300: rgb(var(--salt-color-brown-300-rgb)); - --salt-color-brown-400: rgb(var(--salt-color-brown-400-rgb)); - --salt-color-brown-500: rgb(var(--salt-color-brown-500-rgb)); - --salt-color-brown-600: rgb(var(--salt-color-brown-600-rgb)); - --salt-color-brown-700: rgb(var(--salt-color-brown-700-rgb)); - --salt-color-brown-800: rgb(var(--salt-color-brown-800-rgb)); - --salt-color-brown-900: rgb(var(--salt-color-brown-900-rgb)); --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb)); --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb)); --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb)); From 6bb3ff4361b28c16553a7f50c0f9ce07f80e814b Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Fri, 10 May 2024 16:30:05 -0400 Subject: [PATCH 17/50] Fix button to match Figma better --- .../kitchen-sink/kitchen-sink.stories.tsx | 10 ++++++- .../css/characteristics/actionable-next.css | 28 +++++++++---------- packages/theme/css/palette/accent-next.css | 6 ++-- .../theme/css/palette/foreground-next.css | 2 -- packages/theme/css/palette/neutral-next.css | 8 +++--- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index 4d021bbc97b..85bb8fe7d79 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -236,7 +236,15 @@ export const Example1 = () => { - + + + diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css index 6dadb1288a8..d54ddf4a726 100644 --- a/packages/theme/css/characteristics/actionable-next.css +++ b/packages/theme/css/characteristics/actionable-next.css @@ -5,25 +5,25 @@ --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt); --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); --salt-actionable-cta-background: var(--salt-palette-accent-action); - --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); /* TBD */ - --salt-actionable-cta-background-active: var(--salt-palette-accent-action-active); - --salt-actionable-cta-background-disabled: var(--salt-palette-accent-action-disabled); + --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); + --salt-actionable-cta-background-active: var(--salt-palette-accent-strong); + --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled); /* Primary variant */ --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt); --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert); + --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt); --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); - --salt-actionable-primary-background: var(--salt-palette-neutral-action); - --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ - --salt-actionable-primary-background-active: var(--salt-palette-neutral-strongest); - --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-action-disabled); + --salt-actionable-primary-background: var(--salt-palette-neutral); + --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); + --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-weak-disabled); /* Secondary variant */ --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert); - --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); - --salt-actionable-secondary-background: var(--salt-palette-background-none); /* TBD */ - --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); /* TBD */ - --salt-actionable-secondary-background-active: var(--salt-palette-neutral-strongest); - --salt-actionable-secondary-background-disabled: var(--salt-palette-neutral-action-disabled); + --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); + --salt-actionable-secondary-background: var(--salt-palette-background-none); + --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); + --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-secondary-background-disabled: var(--salt-palette-background-none); } diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css index 6c9189cd4dc..e1c1aed2d11 100644 --- a/packages/theme/css/palette/accent-next.css +++ b/packages/theme/css/palette/accent-next.css @@ -11,8 +11,7 @@ --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); --salt-palette-accent-weakest: var(--salt-color-blue-100); --salt-palette-accent-action: var(--salt-color-blue-500); - --salt-palette-accent-action-active: var(--salt-color-blue-800); - --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a); + --salt-palette-accent-action-active: var(--salt-color-blue-600); } .salt-theme.salt-theme-next[data-mode="dark"] { @@ -28,6 +27,5 @@ --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); --salt-palette-accent-weakest: var(--salt-color-blue-900); --salt-palette-accent-action: var(--salt-color-blue-500); - --salt-palette-accent-action-active: var(--salt-color-blue-800); - --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a); + --salt-palette-accent-action-active: var(--salt-color-blue-600); } diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css index 35a1492c502..7902b57832e 100644 --- a/packages/theme/css/palette/foreground-next.css +++ b/packages/theme/css/palette/foreground-next.css @@ -8,7 +8,6 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-600); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a); --salt-palette-foreground-visited: var(--salt-color-purple-800); - --salt-palette-foreground-invert: var(--salt-color-white); } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-foreground-active: var(--salt-color-blue-300); @@ -20,5 +19,4 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-400); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a); --salt-palette-foreground-visited: var(--salt-color-purple-200); - --salt-palette-foreground-invert: var(--salt-color-black); } diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css index 59b235ba73b..104311842b3 100644 --- a/packages/theme/css/palette/neutral-next.css +++ b/packages/theme/css/palette/neutral-next.css @@ -9,13 +9,13 @@ --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-20a); --salt-palette-neutral-strongest: var(--salt-color-gray-800); --salt-palette-neutral-weak: var(--salt-color-gray-400); + --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a); --salt-palette-neutral-weaker: var(--salt-color-gray-300); --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a); --salt-palette-neutral-weakest: var(--salt-color-gray-200); --salt-palette-neutral-action: var(--salt-color-gray-500); - --salt-palette-neutral-action-disabled: var(--salt-color-gray-500-40a); - --salt-palette-neutral-action-active: var(--salt-color-gray-800); + --salt-palette-neutral-action-active: var(--salt-color-gray-600); } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-neutral: var(--salt-color-gray-500); @@ -28,11 +28,11 @@ --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-20a); --salt-palette-neutral-strongest: var(--salt-color-gray-200); --salt-palette-neutral-weak: var(--salt-color-gray-600); + --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a); --salt-palette-neutral-weaker: var(--salt-color-gray-700); --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a); --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a); --salt-palette-neutral-weakest: var(--salt-color-gray-800); --salt-palette-neutral-action: var(--salt-color-gray-500); - --salt-palette-neutral-action-disabled: var(--salt-color-gray-500-40a); - --salt-palette-neutral-action-active: var(--salt-color-gray-800); + --salt-palette-neutral-action-active: var(--salt-color-gray-600); } From f929b7597f8be7745da02816f221c3c4e8f6388e Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 13 May 2024 19:45:22 +0100 Subject: [PATCH 18/50] Update button color mapping to meet contrast --- .../css/characteristics/actionable-next.css | 28 +++++++++---------- packages/theme/css/palette/accent-next.css | 4 --- .../theme/css/palette/foreground-next.css | 2 ++ packages/theme/css/palette/neutral-next.css | 6 ++-- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/theme/css/characteristics/actionable-next.css b/packages/theme/css/characteristics/actionable-next.css index d54ddf4a726..a74040d5020 100644 --- a/packages/theme/css/characteristics/actionable-next.css +++ b/packages/theme/css/characteristics/actionable-next.css @@ -1,29 +1,29 @@ .salt-theme.salt-theme-next { /* CTA variant */ --salt-actionable-cta-foreground: var(--salt-palette-foreground-primary-alt); - --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-invert); + --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); - --salt-actionable-cta-background: var(--salt-palette-accent-action); - --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); - --salt-actionable-cta-background-active: var(--salt-palette-accent-strong); + --salt-actionable-cta-background: var(--salt-palette-accent); + --salt-actionable-cta-background-hover: var(--salt-palette-accent-strong); + --salt-actionable-cta-background-active: var(--salt-palette-accent-stronger); --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled); /* Primary variant */ --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt); - --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-invert); + --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); --salt-actionable-primary-background: var(--salt-palette-neutral); - --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); - --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active); - --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-weak-disabled); + --salt-actionable-primary-background-hover: var(--salt-palette-neutral-strong); + --salt-actionable-primary-background-active: var(--salt-palette-neutral-stronger); + --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-strong-disabled); /* Secondary variant */ --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); - --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt); - --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt); + --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-invert); + --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert); --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); --salt-actionable-secondary-background: var(--salt-palette-background-none); - --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); - --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active); + --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-strong); + --salt-actionable-secondary-background-active: var(--salt-palette-neutral-stronger); --salt-actionable-secondary-background-disabled: var(--salt-palette-background-none); } diff --git a/packages/theme/css/palette/accent-next.css b/packages/theme/css/palette/accent-next.css index e1c1aed2d11..81a710646c2 100644 --- a/packages/theme/css/palette/accent-next.css +++ b/packages/theme/css/palette/accent-next.css @@ -10,8 +10,6 @@ --salt-palette-accent-weaker: var(--salt-color-blue-200); --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); --salt-palette-accent-weakest: var(--salt-color-blue-100); - --salt-palette-accent-action: var(--salt-color-blue-500); - --salt-palette-accent-action-active: var(--salt-color-blue-600); } .salt-theme.salt-theme-next[data-mode="dark"] { @@ -26,6 +24,4 @@ --salt-palette-accent-weaker: var(--salt-color-blue-800); --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); --salt-palette-accent-weakest: var(--salt-color-blue-900); - --salt-palette-accent-action: var(--salt-color-blue-500); - --salt-palette-accent-action-active: var(--salt-color-blue-600); } diff --git a/packages/theme/css/palette/foreground-next.css b/packages/theme/css/palette/foreground-next.css index 7902b57832e..35a1492c502 100644 --- a/packages/theme/css/palette/foreground-next.css +++ b/packages/theme/css/palette/foreground-next.css @@ -8,6 +8,7 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-600); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a); --salt-palette-foreground-visited: var(--salt-color-purple-800); + --salt-palette-foreground-invert: var(--salt-color-white); } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-foreground-active: var(--salt-color-blue-300); @@ -19,4 +20,5 @@ --salt-palette-foreground-secondary: var(--salt-color-gray-400); --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a); --salt-palette-foreground-visited: var(--salt-color-purple-200); + --salt-palette-foreground-invert: var(--salt-color-black); } diff --git a/packages/theme/css/palette/neutral-next.css b/packages/theme/css/palette/neutral-next.css index 104311842b3..e46a4cd40b2 100644 --- a/packages/theme/css/palette/neutral-next.css +++ b/packages/theme/css/palette/neutral-next.css @@ -4,6 +4,7 @@ --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a); --salt-palette-neutral-strong: var(--salt-color-gray-600); --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a); + --salt-palette-neutral-stronger: var(--salt-color-gray-700); --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a); --salt-palette-neutral-stronger-secondary: var(--salt-color-black-30a); --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-20a); @@ -14,8 +15,6 @@ --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a); --salt-palette-neutral-weakest: var(--salt-color-gray-200); - --salt-palette-neutral-action: var(--salt-color-gray-500); - --salt-palette-neutral-action-active: var(--salt-color-gray-600); } .salt-theme.salt-theme-next[data-mode="dark"] { --salt-palette-neutral: var(--salt-color-gray-500); @@ -23,6 +22,7 @@ --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a); --salt-palette-neutral-strong: var(--salt-color-gray-400); --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a); + --salt-palette-neutral-stronger: var(--salt-color-gray-300); --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a); --salt-palette-neutral-stronger-secondary: var(--salt-color-white-30a); --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-20a); @@ -33,6 +33,4 @@ --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a); --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a); --salt-palette-neutral-weakest: var(--salt-color-gray-800); - --salt-palette-neutral-action: var(--salt-color-gray-500); - --salt-palette-neutral-action-active: var(--salt-color-gray-600); } From 1066346008c42fbd3ed2617b767da8489769e559 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Mon, 15 Apr 2024 14:06:29 +0100 Subject: [PATCH 19/50] [Theme next] Adds unified color palette --- .changeset/early-radios-sell.md | 5 +++++ packages/theme/css/theme-next.css | 21 --------------------- 2 files changed, 5 insertions(+), 21 deletions(-) create mode 100644 .changeset/early-radios-sell.md diff --git a/.changeset/early-radios-sell.md b/.changeset/early-radios-sell.md new file mode 100644 index 00000000000..8baf64fbe03 --- /dev/null +++ b/.changeset/early-radios-sell.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/theme": patch +--- + +[Theme next] Adds unified color palette diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css index f8bb7e675eb..6defb2615eb 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -5,24 +5,3 @@ @import url(palette/accent-next.css); @import url(palette/background-next.css); @import url(palette/corner-next.css); -@import url(palette/foreground-next.css); -@import url(palette/info-next.css); -@import url(palette/negative-next.css); -@import url(palette/neutral-next.css); -@import url(palette/positive-next.css); -@import url(palette/text-next.css); -@import url(palette/warning-next.css); - -@import url(characteristics/accent-next.css); -@import url(characteristics/actionable-next.css); -@import url(characteristics/container-next.css); -@import url(characteristics/content-next.css); -@import url(characteristics/editable-next.css); -@import url(characteristics/focused-next.css); -@import url(characteristics/navigable-next.css); -@import url(characteristics/overlayable-next.css); -@import url(characteristics/selectable-next.css); -@import url(characteristics/separable-next.css); -@import url(characteristics/status-next.css); -@import url(characteristics/target-next.css); -@import url(characteristics/track-next.css); From 56e1166f4f8fc2920364be1efa03d0a7c2d33e14 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 8 Mar 2024 11:06:56 -0500 Subject: [PATCH 20/50] foundations and palette --- packages/theme/json/example.json | 877 +++++++++++++++++++++++++++++ packages/theme/json/themeToJson.js | 163 ++++++ 2 files changed, 1040 insertions(+) create mode 100644 packages/theme/json/example.json create mode 100644 packages/theme/json/themeToJson.js diff --git a/packages/theme/json/example.json b/packages/theme/json/example.json new file mode 100644 index 00000000000..3506c03c0ee --- /dev/null +++ b/packages/theme/json/example.json @@ -0,0 +1,877 @@ +{ + "palette": { + "accent": { + "palette-accent-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-accent-border": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, + "palette-accent-background": { "$value": "var(--salt-color-blue-500)", "$type": "color" } + }, + "corner": { + "palette-corner-strongest": { "$value": "var(--salt-curve-999)", "$type": "dimension" }, + "palette-corner": { "$value": "var(--salt-curve-0)", "$type": "dimension" }, + "palette-corner-weak": { "$value": "var(--salt-curve-0)", "$type": "dimension" }, + "palette-corner-weaker": { "$value": "var(--salt-curve-0)", "$type": "dimension" } + }, + "error": { + "palette-error-foreground": { "$value": "var(--salt-color-red-500)", "$type": "color" }, + "palette-error-border": { "$value": "var(--salt-color-red-500)", "$type": "color" }, + "palette-error-background-selected": { "$value": "var(--salt-color-red-900)", "$type": "color" }, + "palette-error-background": { "$value": "var(--salt-color-red-900)", "$type": "color" } + }, + "info": { + "palette-info-foreground": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, + "palette-info-border": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, + "palette-info-background": { "$value": "var(--salt-color-blue-900)", "$type": "color" } + }, + "interact": { + "palette-interact-secondary-foreground-hover": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-secondary-foreground-disabled": { + "$value": "var(--salt-color-white-fade-foreground)", + "$type": "color" + }, + "palette-interact-secondary-foreground-active": { "$value": "var(--salt-color-gray-900)", "$type": "color" }, + "palette-interact-secondary-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-secondary-background-hover": { "$value": "var(--salt-color-gray-200)", "$type": "color" }, + "palette-interact-secondary-background-disabled": { "$value": "transparent", "$type": "color" }, + "palette-interact-secondary-background-active": { "$value": "var(--salt-color-gray-70)", "$type": "color" }, + "palette-interact-secondary-background": { "$value": "transparent", "$type": "color" }, + "palette-interact-primary-foreground-hover": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-primary-foreground-disabled": { + "$value": "var(--salt-color-white-fade-foreground)", + "$type": "color" + }, + "palette-interact-primary-foreground-active": { "$value": "var(--salt-color-gray-900)", "$type": "color" }, + "palette-interact-primary-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-primary-background-hover": { "$value": "var(--salt-color-gray-200)", "$type": "color" }, + "palette-interact-primary-background-disabled": { + "$value": "var(--salt-color-gray-300-fade-background)", + "$type": "color" + }, + "palette-interact-primary-background-active": { "$value": "var(--salt-color-gray-70)", "$type": "color" }, + "palette-interact-primary-background": { "$value": "var(--salt-color-gray-300)", "$type": "color" }, + "palette-interact-cta-foreground-hover": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-cta-foreground-disabled": { + "$value": "var(--salt-color-white-fade-foreground)", + "$type": "color" + }, + "palette-interact-cta-foreground-active": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-cta-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-cta-background-hover": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, + "palette-interact-cta-background-disabled": { + "$value": "var(--salt-color-blue-600-fade-background)", + "$type": "color" + }, + "palette-interact-cta-background-active": { "$value": "var(--salt-color-blue-700)", "$type": "color" }, + "palette-interact-cta-background": { "$value": "var(--salt-color-blue-600)", "$type": "color" }, + "palette-interact-outline": { "$value": "var(--salt-color-blue-100)", "$type": "color" }, + "palette-interact-foreground-hover": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, + "palette-interact-foreground-disabled": { + "$value": "var(--salt-color-gray-90-fade-foreground)", + "$type": "color" + }, + "palette-interact-foreground-activeDisabled": { + "$value": "var(--salt-color-blue-100-fade-foreground)", + "$type": "color" + }, + "palette-interact-foreground-active": { "$value": "var(--salt-color-blue-100)", "$type": "color" }, + "palette-interact-foreground": { "$value": "var(--salt-color-gray-90)", "$type": "color" }, + "palette-interact-border-readonly": { + "$value": "var(--salt-color-gray-90-fade-border-readonly)", + "$type": "color" + }, + "palette-interact-border-hover": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, + "palette-interact-border-disabled": { + "$value": "var(--salt-color-gray-90-fade-border)", + "$type": "color" + }, + "palette-interact-border-activeDisabled": { + "$value": "var(--salt-color-blue-100-fade-fill)", + "$type": "color" + }, + "palette-interact-border-active": { "$value": "var(--salt-color-blue-100)", "$type": "color" }, + "palette-interact-border": { "$value": "var(--salt-color-gray-90)", "$type": "color" }, + "palette-interact-background-activeDisabled": { + "$value": "var(--salt-color-blue-700-fade-background)", + "$type": "color" + }, + "palette-interact-background-disabled": { "$value": "transparent", "$type": "color" }, + "palette-interact-background-active": { "$value": "var(--salt-color-blue-700)", "$type": "color" }, + "palette-interact-background-hover": { "$value": "var(--salt-color-blue-800)", "$type": "color" }, + "palette-interact-background-blurSelected": { "$value": "var(--salt-color-gray-600)", "$type": "color" }, + "palette-interact-background": { "$value": "transparent", "$type": "color" } + }, + "navigate": { + "palette-navigate-indicator-active": { "$value": "var(--salt-color-orange-400)", "$type": "color" }, + "palette-navigate-indicator-hover": { "$value": "var(--salt-color-gray-90)", "$type": "color" }, + "palette-navigate-foreground-visited": { "$value": "var(--salt-color-purple-100)", "$type": "color" }, + "palette-navigate-foreground-active": { "$value": "var(--salt-color-blue-300)", "$type": "color" }, + "palette-navigate-foreground-hover": { "$value": "var(--salt-color-blue-200)", "$type": "color" }, + "palette-navigate-background-hover": { + "$value": "var(--salt-color-white-fade-background-hover)", + "$type": "color" + } + }, + "negative": { + "palette-negative-foreground": { "$value": "var(--salt-color-red-300)", "$type": "color" } + }, + "neutral": { + "palette-neutral-tertiary-separator": { + "$value": "var(--salt-color-white-fade-separatorOpacity-tertiary)", + "$type": "color" + }, + "palette-neutral-secondary-separator": { + "$value": "var(--salt-color-white-fade-separatorOpacity-secondary)", + "$type": "color" + }, + "palette-neutral-backdrop": { + "$value": "var(--salt-color-black-fade-backdrop)", + "$type": "color" + }, + "palette-neutral-secondary-foreground-disabled": { + "$value": "var(--salt-color-gray-70-fade-foreground)", + "$type": "color" + }, + "palette-neutral-secondary-foreground": { "$value": "var(--salt-color-gray-70)", "$type": "color" }, + "palette-neutral-secondary-border-disabled": { + "$value": "var(--salt-color-gray-300-fade-border)", + "$type": "color" + }, + "palette-neutral-secondary-border": { "$value": "var(--salt-color-gray-300)", "$type": "color" }, + "palette-neutral-secondary-background-readonly": { + "$value": "var(--salt-color-gray-600-fade-background-readonly)", + "$type": "color" + }, + "palette-neutral-secondary-background-disabled": { + "$value": "var(--salt-color-gray-600-fade-background)", + "$type": "color" + }, + "palette-neutral-secondary-background": { "$value": "var(--salt-color-gray-600)", "$type": "color" }, + "palette-neutral-primary-border-disabled": { + "$value": "var(--salt-color-gray-300-fade-border)", + "$type": "color" + }, + "palette-neutral-primary-border": { "$value": "var(--salt-color-gray-300)", "$type": "color" }, + "palette-neutral-primary-separator": { + "$value": "var(--salt-color-white-fade-separatorOpacity-primary)", + "$type": "color" + }, + "palette-neutral-primary-foreground-disabled": { + "$value": "var(--salt-color-white-fade-foreground)", + "$type": "color" + }, + "palette-neutral-primary-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-neutral-primary-background-readonly": { + "$value": "var(--salt-color-gray-800-fade-background-readonly)", + "$type": "color" + }, + "palette-neutral-primary-background-disabled": { + "$value": "var(--salt-color-gray-800-fade-background)", + "$type": "color" + }, + "palette-neutral-primary-background": { "$value": "var(--salt-color-gray-800)", "$type": "color" } + }, + "opacity": { + "palette-opacity-tertiary-border": { "$value": "var(--salt-opacity-15)", "$type": "number" }, + "palette-opacity-secondary-border": { "$value": "var(--salt-opacity-25)", "$type": "number" }, + "palette-opacity-primary-border": { "$value": "var(--salt-opacity-40)", "$type": "number" }, + "palette-opacity-border-readonly": { "$value": "var(--salt-opacity-15)", "$type": "number" }, + "palette-opacity-background-readonly": { "$value": "var(--salt-opacity-0)", "$type": "number" }, + "palette-opacity-disabled": { "$value": "var(--salt-opacity-40)", "$type": "number" }, + "palette-opacity-backdrop": { "$value": "var(--salt-opacity-70)", "$type": "number" } + }, + "positive": { + "palette-positive-foreground": { "$value": "var(--salt-color-green-300)", "$type": "color" } + }, + "success": { + "palette-success-foreground": { "$value": "var(--salt-color-green-400)", "$type": "color" }, + "palette-success-border": { "$value": "var(--salt-color-green-400)", "$type": "color" }, + "palette-success-background-selected": { "$value": "var(--salt-color-green-900)", "$type": "color" }, + "palette-success-background": { "$value": "var(--salt-color-green-900)", "$type": "color" } + }, + "warning": { + "palette-warning-foreground": { "$value": "var(--salt-color-orange-500)", "$type": "color" }, + "palette-warning-border": { "$value": "var(--salt-color-orange-500)", "$type": "color" }, + "palette-warning-background-selected": { "$value": "var(--salt-color-orange-900)", "$type": "color" }, + "palette-warning-background": { "$value": "var(--salt-color-orange-900)", "$type": "color" } + } + }, + "foundations": { + "color": { + "color-white-fade-background-hover": { + "$value": { "color": "color-white", "opacity": "opacity-8" }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, undefined)" + }, + "color-black-fade-background-hover": { + "$value": { "color": "color-black", "opacity": "opacity-8" }, + "$type": "color", + "$rawValue": "rgba(0, 0, 0, undefined)" + }, + "color-black-fade-separatorOpacity-tertiary": { + "$value": { + "color": "color-black", + "opacity": "palette-opacity-tertiary-border" + }, + "$type": "color", + "$rawValue": "rgba(0, 0, 0, 0.15)" + }, + "color-black-fade-separatorOpacity-secondary": { + "$value": { + "color": "color-black", + "opacity": "palette-opacity-secondary-border" + }, + "$type": "color", + "$rawValue": "rgba(0, 0, 0, 0.25)" + }, + "color-black-fade-separatorOpacity-primary": { + "$value": { + "color": "color-black", + "opacity": "palette-opacity-primary-border" + }, + "$type": "color", + "$rawValue": "rgba(0, 0, 0, 0.4)" + }, + "color-white-fade-separatorOpacity-tertiary": { + "$value": { + "color": "color-white", + "opacity": "palette-opacity-tertiary-border" + }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.15)" + }, + "color-white-fade-separatorOpacity-secondary": { + "$value": { + "color": "color-white", + "opacity": "palette-opacity-secondary-border" + }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.25)" + }, + "color-white-fade-separatorOpacity-primary": { + "$value": { + "color": "color-white", + "opacity": "palette-opacity-primary-border" + }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "color-blue-600-fade-fill": { + "$value": { + "color": "color-blue-600", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(21, 92, 147, 0.4)" + }, + "color-blue-100-fade-fill": { + "$value": { + "color": "color-blue-100", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(100, 177, 228, 0.4)" + }, + "color-black-fade-backdrop": { + "$value": { "color": "color-black", "opacity": "palette-opacity-backdrop" }, + "$type": "color", + "$rawValue": "rgba(0, 0, 0, 0.7)" + }, + "color-white-fade-backdrop": { + "$value": { "color": "color-white", "opacity": "palette-opacity-backdrop" }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.7)" + }, + "color-gray-800-fade-background-readonly": { + "$value": { + "color": "color-gray-800", + "opacity": "palette-opacity-background-readonly" + }, + "$type": "color", + "$rawValue": "rgba(36, 37, 38, 0)" + }, + "color-gray-600-fade-background-readonly": { + "$value": { + "color": "color-gray-600", + "opacity": "palette-opacity-background-readonly" + }, + "$type": "color", + "$rawValue": "rgba(47, 49, 54, 0)" + }, + "color-gray-20-fade-background-readonly": { + "$value": { + "color": "color-gray-20", + "opacity": "palette-opacity-background-readonly" + }, + "$type": "color", + "$rawValue": "rgba(234, 237, 239, 0)" + }, + "color-white-fade-background-readonly": { + "$value": { + "color": "color-white", + "opacity": "palette-opacity-background-readonly" + }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0)" + }, + "color-white-fade-background": { + "$value": { "color": "color-white", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "color-gray-800-fade-background": { + "$value": { + "color": "color-gray-800", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(36, 37, 38, 0.4)" + }, + "color-gray-600-fade-background": { + "$value": { + "color": "color-gray-600", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(47, 49, 54, 0.4)" + }, + "color-gray-300-fade-background": { + "$value": { + "color": "color-gray-300", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(76, 80, 91, 0.4)" + }, + "color-gray-200-fade-background": { + "$value": { + "color": "color-gray-200", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(97, 101, 110, 0.4)" + }, + "color-gray-70-fade-background": { + "$value": { "color": "color-gray-70", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(180, 183, 190, 0.4)" + }, + "color-gray-60-fade-background": { + "$value": { "color": "color-gray-60", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(197, 201, 208, 0.4)" + }, + "color-gray-20-fade-background": { + "$value": { "color": "color-gray-20", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(234, 237, 239, 0.4)" + }, + "color-blue-700-fade-background": { + "$value": { + "color": "color-blue-700", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(0, 71, 123, 0.4)" + }, + "color-blue-600-fade-background": { + "$value": { + "color": "color-blue-600", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(21, 92, 147, 0.4)" + }, + "color-blue-500-fade-background": { + "$value": { + "color": "color-blue-500", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(38, 112, 169, 0.4)" + }, + "color-blue-30-fade-background": { + "$value": { "color": "color-blue-30", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(164, 213, 244, 0.4)" + }, + "color-gray-200-fade-border-readonly": { + "$value": { + "color": "color-gray-200", + "opacity": "palette-opacity-border-readonly" + }, + "$type": "color", + "$rawValue": "rgba(97, 101, 110, 0.15)" + }, + "color-gray-90-fade-border-readonly": { + "$value": { + "color": "color-gray-90", + "opacity": "palette-opacity-border-readonly" + }, + "$type": "color", + "$rawValue": "rgba(132, 135, 142, 0.15)" + }, + "color-red-500-fade-border": { + "$value": { "color": "color-red-500", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(227, 43, 22, 0.4)" + }, + "color-orange-700-fade-border": { + "$value": { + "color": "color-orange-700", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(214, 85, 19, 0.4)" + }, + "color-orange-600-fade-border": { + "$value": { + "color": "color-orange-600", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(224, 101, 25, 0.4)" + }, + "color-orange-500-fade-border": { + "$value": { + "color": "color-orange-500", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(234, 115, 25, 0.4)" + }, + "color-orange-400-fade-border": { + "$value": { + "color": "color-orange-400", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(238, 133, 43, 0.4)" + }, + "color-green-500-fade-border": { + "$value": { + "color": "color-green-500", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(36, 135, 75, 0.4)" + }, + "color-green-400-fade-border": { + "$value": { + "color": "color-green-400", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(48, 156, 90, 0.4)" + }, + "color-gray-300-fade-border": { + "$value": { + "color": "color-gray-300", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(76, 80, 91, 0.4)" + }, + "color-gray-200-fade-border": { + "$value": { + "color": "color-gray-200", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(97, 101, 110, 0.4)" + }, + "color-gray-90-fade-border": { + "$value": { "color": "color-gray-90", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(132, 135, 142, 0.4)" + }, + "color-gray-60-fade-border": { + "$value": { "color": "color-gray-60", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(197, 201, 208, 0.4)" + }, + "color-gray-50-fade-border": { + "$value": { "color": "color-gray-50", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(206, 210, 217, 0.4)" + }, + "color-blue-500-fade-border": { + "$value": { + "color": "color-blue-500", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(38, 112, 169, 0.4)" + }, + "color-white-fade-foreground": { + "$value": { "color": "color-white", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "color-red-700-fade-foreground": { + "$value": { "color": "color-red-700", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(166, 21, 11, 0.4)" + }, + "color-red-500-fade-foreground": { + "$value": { "color": "color-red-500", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(227, 43, 22, 0.4)" + }, + "color-red-300-fade-foreground": { + "$value": { "color": "color-red-300", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(255, 89, 66, 0.4)" + }, + "color-green-700-fade-foreground": { + "$value": { + "color": "color-green-700", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(12, 93, 46, 0.4)" + }, + "color-green-500-fade-foreground": { + "$value": { + "color": "color-green-500", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(36, 135, 75, 0.4)" + }, + "color-green-400-fade-foreground": { + "$value": { + "color": "color-green-400", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(48, 156, 90, 0.4)" + }, + "color-green-300-fade-foreground": { + "$value": { + "color": "color-green-300", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(60, 171, 96, 0.4)" + }, + "color-gray-900-fade-foreground": { + "$value": { + "color": "color-gray-900", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(22, 22, 22, 0.4)" + }, + "color-gray-90-fade-foreground": { + "$value": { "color": "color-gray-90", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(132, 135, 142, 0.4)" + }, + "color-gray-70-fade-foreground": { + "$value": { "color": "color-gray-70", "opacity": "palette-opacity-disabled" }, + "$type": "color", + "$rawValue": "rgba(180, 183, 190, 0.4)" + }, + "color-gray-200-fade-foreground": { + "$value": { + "color": "color-gray-200", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(97, 101, 110, 0.4)" + }, + "color-blue-600-fade-foreground": { + "$value": { + "color": "color-blue-600", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(21, 92, 147, 0.4)" + }, + "color-blue-500-fade-foreground": { + "$value": { + "color": "color-blue-500", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(38, 112, 169, 0.4)" + }, + "color-blue-100-fade-foreground": { + "$value": { + "color": "color-blue-100", + "opacity": "palette-opacity-disabled" + }, + "$type": "color", + "$rawValue": "rgba(100, 177, 228, 0.4)" + }, + "color-gray-900": { "$value": "rgb(22, 22, 22)", "$type": "color" }, + "color-gray-800": { "$value": "rgb(36, 37, 38)", "$type": "color" }, + "color-gray-700": { "$value": "rgb(42, 44, 47)", "$type": "color" }, + "color-gray-600": { "$value": "rgb(47, 49, 54)", "$type": "color" }, + "color-gray-500": { "$value": "rgb(59, 63, 70)", "$type": "color" }, + "color-gray-400": { "$value": "rgb(68, 72, 79)", "$type": "color" }, + "color-gray-300": { "$value": "rgb(76, 80, 91)", "$type": "color" }, + "color-gray-200": { "$value": "rgb(97, 101, 110)", "$type": "color" }, + "color-gray-100": { "$value": "rgb(116, 119, 127)", "$type": "color" }, + "color-gray-90": { "$value": "rgb(132, 135, 142)", "$type": "color" }, + "color-gray-80": { "$value": "rgb(159, 163, 170)", "$type": "color" }, + "color-gray-70": { "$value": "rgb(180, 183, 190)", "$type": "color" }, + "color-gray-60": { "$value": "rgb(197, 201, 208)", "$type": "color" }, + "color-gray-50": { "$value": "rgb(206, 210, 217)", "$type": "color" }, + "color-gray-40": { "$value": "rgb(217, 221, 227)", "$type": "color" }, + "color-gray-30": { "$value": "rgb(224, 228, 233)", "$type": "color" }, + "color-gray-20": { "$value": "rgb(234, 237, 239)", "$type": "color" }, + "color-gray-10": { "$value": "rgb(242, 244, 246)", "$type": "color" }, + "color-purple-900": { "$value": "rgb(59, 16, 84)", "$type": "color" }, + "color-purple-800": { "$value": "rgb(83, 37, 109)", "$type": "color" }, + "color-purple-700": { "$value": "rgb(103, 46, 122)", "$type": "color" }, + "color-purple-600": { "$value": "rgb(129, 60, 141)", "$type": "color" }, + "color-purple-500": { "$value": "rgb(150, 78, 162)", "$type": "color" }, + "color-purple-400": { "$value": "rgb(169, 97, 181)", "$type": "color" }, + "color-purple-300": { "$value": "rgb(192, 116, 203)", "$type": "color" }, + "color-purple-200": { "$value": "rgb(205, 135, 215)", "$type": "color" }, + "color-purple-100": { "$value": "rgb(223, 156, 225)", "$type": "color" }, + "color-purple-50": { "$value": "rgb(241, 178, 235)", "$type": "color" }, + "color-purple-40": { "$value": "rgb(243, 189, 238)", "$type": "color" }, + "color-purple-30": { "$value": "rgb(245, 201, 241)", "$type": "color" }, + "color-purple-20": { "$value": "rgb(247, 212, 244)", "$type": "color" }, + "color-purple-10": { "$value": "rgb(249, 224, 247)", "$type": "color" }, + "color-blue-900": { "$value": "rgb(35, 47, 56)", "$type": "color" }, + "color-blue-800": { "$value": "rgb(39, 60, 77)", "$type": "color" }, + "color-blue-700": { "$value": "rgb(0, 71, 123)", "$type": "color" }, + "color-blue-600": { "$value": "rgb(21, 92, 147)", "$type": "color" }, + "color-blue-500": { "$value": "rgb(38, 112, 169)", "$type": "color" }, + "color-blue-400": { "$value": "rgb(46, 132, 198)", "$type": "color" }, + "color-blue-300": { "$value": "rgb(51, 141, 205)", "$type": "color" }, + "color-blue-200": { "$value": "rgb(75, 159, 216)", "$type": "color" }, + "color-blue-100": { "$value": "rgb(100, 177, 228)", "$type": "color" }, + "color-blue-50": { "$value": "rgb(125, 195, 240)", "$type": "color" }, + "color-blue-40": { "$value": "rgb(144, 204, 242)", "$type": "color" }, + "color-blue-30": { "$value": "rgb(164, 213, 244)", "$type": "color" }, + "color-blue-20": { "$value": "rgb(183, 222, 246)", "$type": "color" }, + "color-blue-10": { "$value": "rgb(203, 231, 249)", "$type": "color" }, + "color-teal-900": { "$value": "rgb(0, 49, 76)", "$type": "color" }, + "color-teal-800": { "$value": "rgb(1, 65, 86)", "$type": "color" }, + "color-teal-700": { "$value": "rgb(0, 85, 113)", "$type": "color" }, + "color-teal-600": { "$value": "rgb(27, 107, 133)", "$type": "color" }, + "color-teal-500": { "$value": "rgb(0, 130, 151)", "$type": "color" }, + "color-teal-400": { "$value": "rgb(48, 149, 166)", "$type": "color" }, + "color-teal-300": { "$value": "rgb(73, 160, 172)", "$type": "color" }, + "color-teal-200": { "$value": "rgb(99, 181, 192)", "$type": "color" }, + "color-teal-100": { "$value": "rgb(123, 193, 200)", "$type": "color" }, + "color-teal-50": { "$value": "rgb(141, 205, 209)", "$type": "color" }, + "color-teal-40": { "$value": "rgb(162, 217, 218)", "$type": "color" }, + "color-teal-30": { "$value": "rgb(180, 224, 225)", "$type": "color" }, + "color-teal-20": { "$value": "rgb(199, 232, 232)", "$type": "color" }, + "color-teal-10": { "$value": "rgb(218, 240, 240)", "$type": "color" }, + "color-green-900": { "$value": "rgb(35, 52, 43)", "$type": "color" }, + "color-green-800": { "$value": "rgb(1, 73, 32)", "$type": "color" }, + "color-green-700": { "$value": "rgb(12, 93, 46)", "$type": "color" }, + "color-green-600": { "$value": "rgb(24, 114, 61)", "$type": "color" }, + "color-green-500": { "$value": "rgb(36, 135, 75)", "$type": "color" }, + "color-green-400": { "$value": "rgb(48, 156, 90)", "$type": "color" }, + "color-green-300": { "$value": "rgb(60, 171, 96)", "$type": "color" }, + "color-green-200": { "$value": "rgb(77, 180, 105)", "$type": "color" }, + "color-green-100": { "$value": "rgb(93, 189, 116)", "$type": "color" }, + "color-green-50": { "$value": "rgb(112, 199, 127)", "$type": "color" }, + "color-green-40": { "$value": "rgb(136, 210, 145)", "$type": "color" }, + "color-green-30": { "$value": "rgb(160, 221, 164)", "$type": "color" }, + "color-green-20": { "$value": "rgb(184, 232, 182)", "$type": "color" }, + "color-green-10": { "$value": "rgb(209, 244, 201)", "$type": "color" }, + "color-orange-900": { "$value": "rgb(54, 44, 36)", "$type": "color" }, + "color-orange-800": { "$value": "rgb(204, 68, 13)", "$type": "color" }, + "color-orange-700": { "$value": "rgb(214, 85, 19)", "$type": "color" }, + "color-orange-600": { "$value": "rgb(224, 101, 25)", "$type": "color" }, + "color-orange-500": { "$value": "rgb(234, 115, 25)", "$type": "color" }, + "color-orange-400": { "$value": "rgb(238, 133, 43)", "$type": "color" }, + "color-orange-300": { "$value": "rgb(242, 149, 56)", "$type": "color" }, + "color-orange-200": { "$value": "rgb(246, 165, 68)", "$type": "color" }, + "color-orange-100": { "$value": "rgb(250, 181, 81)", "$type": "color" }, + "color-orange-50": { "$value": "rgb(254, 197, 94)", "$type": "color" }, + "color-orange-40": { "$value": "rgb(254, 205, 118)", "$type": "color" }, + "color-orange-30": { "$value": "rgb(254, 214, 142)", "$type": "color" }, + "color-orange-20": { "$value": "rgb(254, 223, 166)", "$type": "color" }, + "color-orange-10": { "$value": "rgb(255, 232, 191)", "$type": "color" }, + "color-red-900": { "$value": "rgb(65, 37, 34)", "$type": "color" }, + "color-red-800": { "$value": "rgb(136, 10, 5)", "$type": "color" }, + "color-red-700": { "$value": "rgb(166, 21, 11)", "$type": "color" }, + "color-red-600": { "$value": "rgb(196, 32, 16)", "$type": "color" }, + "color-red-500": { "$value": "rgb(227, 43, 22)", "$type": "color" }, + "color-red-400": { "$value": "rgb(237, 65, 42)", "$type": "color" }, + "color-red-300": { "$value": "rgb(255, 89, 66)", "$type": "color" }, + "color-red-200": { "$value": "rgb(255, 108, 88)", "$type": "color" }, + "color-red-100": { "$value": "rgb(255, 128, 111)", "$type": "color" }, + "color-red-50": { "$value": "rgb(255, 148, 133)", "$type": "color" }, + "color-red-40": { "$value": "rgb(255, 167, 156)", "$type": "color" }, + "color-red-30": { "$value": "rgb(255, 187, 178)", "$type": "color" }, + "color-red-20": { "$value": "rgb(255, 207, 201)", "$type": "color" }, + "color-red-10": { "$value": "rgb(255, 227, 224)", "$type": "color" }, + "color-black": { "$value": "rgb(0, 0, 0)", "$type": "color" }, + "color-white": { "$value": "rgb(255, 255, 255)", "$type": "color" } + }, + curve: { + "curve-999": { "$value": "999px", "$type": "dimension" }, + "curve-150": { "$value": "12px", "$type": "dimension" }, + "curve-100": { "$value": "8px", "$type": "dimension" }, + "curve-50": { "$value": "4px", "$type": "dimension" }, + "curve-0": { "$value": "0", "$type": "dimension" } + }, + duration: { + "duration-cutoff": { "$value": "10000ms", "$type": "duration" }, + "duration-notable": { "$value": "1000ms", "$type": "duration" }, + "duration-perceptible": { "$value": "300ms", "$type": "duration" }, + "duration-instant": { "$value": "0ms", "$type": "duration" } + }, + "opacity": { + "opacity-70": { "$value": "0.7", "$type": "number" }, + "opacity-40": { "$value": "0.4", "$type": "number" }, + "opacity-25": { "$value": "0.25", "$type": "number" }, + "opacity-15": { "$value": "0.15", "$type": "number" }, + "opacity-8": { "$value": "0.08", "$type": "number" }, + "opacity-0": { "$value": "0", "$type": "number" } + }, + shadow: { + "shadow-500": { + "$value": { + offsetX: "0", + offsetY: "12px", + blur: "40px", + spread: "0", + "color": "shadow-500-color" + }, + "$type": "shadow", + "$rawValue": "0, 12px, 40px, 0, rgba(0, 0, 0, 0.65)" + }, + "shadow-400": { + "$value": { + offsetX: "0", + offsetY: "6px", + blur: "10px", + spread: "0", + "color": "shadow-400-color" + }, + "$type": "shadow", + "$rawValue": "0, 6px, 10px, 0, rgba(0, 0, 0, 0.55)" + }, + "shadow-300": { + "$value": { + offsetX: "0", + offsetY: "4px", + blur: "8px", + spread: "0", + "color": "shadow-300-color" + }, + "$type": "shadow", + "$rawValue": "0, 4px, 8px, 0, rgba(0, 0, 0, 0.55)" + }, + "shadow-200": { + "$value": { + offsetX: "0", + offsetY: "2px", + blur: "4px", + spread: "0", + "color": "shadow-200-color" + }, + "$type": "shadow", + "$rawValue": "0, 2px, 4px, 0, rgba(0, 0, 0, 0.5)" + }, + "shadow-100": { + "$value": { + offsetX: "0", + offsetY: "1px", + blur: "3px", + spread: "0", + "color": "shadow-100-color" + }, + "$type": "shadow", + "$rawValue": "0, 1px, 3px, 0, rgba(0, 0, 0, 0.5)" + }, + "shadow-500-color": { "$value": "rgba(0, 0, 0, 0.65)", "$type": "color" }, + "shadow-400-color": { "$value": "rgba(0, 0, 0, 0.55)", "$type": "color" }, + "shadow-300-color": { "$value": "rgba(0, 0, 0, 0.55)", "$type": "color" }, + "shadow-200-color": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color" }, + "shadow-100-color": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color" } + }, + size: { + "size-border-strong": { "$value": "2px", "$type": "dimension" }, + "size-bar-small": { "$value": "2px", "$type": "dimension" }, + "size-bar-strong": { "$value": "16px", "$type": "dimension" }, + "size-selectable": { "$value": "18px", "$type": "dimension" }, + "size-indicator": { "$value": "4px", "$type": "dimension" }, + "size-icon": { "$value": "16px", "$type": "dimension" }, + "size-border": { "$value": "1px", "$type": "dimension" }, + "size-base": { "$value": "44px", "$type": "dimension" }, + "size-bar": { "$value": "8px", "$type": "dimension" }, + "size-adornment": { "$value": "12px", "$type": "dimension" } + }, + spacing: { + "spacing-400": { + "$value": "calc(4 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 16 + }, + "spacing-350": { + "$value": "calc(3.5 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 14 + }, + "spacing-300": { + "$value": "calc(3 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 12 + }, + "spacing-250": { + "$value": "calc(2.5 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 10 + }, + "spacing-200": { + "$value": "calc(2 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 8 + }, + "spacing-150": { + "$value": "calc(1.5 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 6 + }, + "spacing-75": { + "$value": "calc(0.75 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 3 + }, + "spacing-50": { + "$value": "calc(0.5 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 2 + }, + "spacing-25": { + "$value": "calc(0.25 * var(--salt-spacing-100))", + "$type": "dimension", + "$rawValue": 1 + }, + "spacing-100": { "$value": "4px", "$type": "dimension" } + }, + typography: { + "typography-fontWeight-extraBold": { "$value": "800", "$type": "fontWeight" }, + "typography-fontWeight-bold": { "$value": "700", "$type": "fontWeight" }, + "typography-fontWeight-semiBold": { "$value": "600", "$type": "fontWeight" }, + "typography-fontWeight-medium": { "$value": "500", "$type": "fontWeight" }, + "typography-fontWeight-regular": { "$value": "400", "$type": "fontWeight" }, + "typography-fontWeight-light": { "$value": "300", "$type": "fontWeight" }, + "typography-fontFamily-code": { "$value": ""PT Mono"", "$type": "fontFamily" }, + "typography-fontFamily": { "$value": ""Open Sans"", "$type": "fontFamily" } + }, + zIndex: { + "zIndex-flyover": { "$value": "1500", "$type": "number" }, + "zIndex-contextMenu": { "$value": "1450", "$type": "number" }, + "zIndex-dragObject": { "$value": "1420", "$type": "number" }, + "zIndex-notification": { "$value": "1400", "$type": "number" }, + "zIndex-modal": { "$value": "1300", "$type": "number" }, + "zIndex-drawer": { "$value": "1200", "$type": "number" }, + "zIndex-appHeader": { "$value": "1100", "$type": "number" }, + "zIndex-popout": { "$value": "1000", "$type": "number" }, + "zIndex-default": { "$value": "1", "$type": "number" } + } + } +} +O716774 in ~/git/jpmc/salt-ds theme-json > \ No newline at end of file diff --git a/packages/theme/json/themeToJson.js b/packages/theme/json/themeToJson.js new file mode 100644 index 00000000000..393581eda44 --- /dev/null +++ b/packages/theme/json/themeToJson.js @@ -0,0 +1,163 @@ +const fs = require("fs"); +const path = require("path"); +const util = require("util"); + +function getCssVariablesFromDir(dirPath) { + const cssVariableRegex = /([a-zA-Z0-9_-]+)\s*:\s*([^;]+)/g; + const cssVariables = {}; + + const files = fs.readdirSync(dirPath); + + files.forEach((file) => { + const filePath = path.join(dirPath, file); + const stats = fs.statSync(filePath); + + if (stats.isDirectory()) { + // Recursively process subdirectories + Object.assign(cssVariables, getCssVariablesFromDir(filePath)); + } else if ( + stats.isFile() && + path.extname(file) === ".css" && + !filePath.includes("animation") + ) { + // Process CSS files + const cssContent = fs.readFileSync(filePath, "utf8"); + let match; + + while ((match = cssVariableRegex.exec(cssContent)) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + cssVariables[variableName] = variableValue; + } + } + }); + + return cssVariables; +} + +function stripVar(cssVar) { + return cssVar.replace("var(", "").replaceAll(")", "").replaceAll(" ", ""); +} + +function format(variables) { + const jsonTokens = { palette: {}, foundations: {} }; + + for (const token of Object.entries(variables)) { + var tokenName = token[0].replace("--salt-", ""); + var tokenValue = token[1]; + let type; + let rawValue; + + if (tokenName.startsWith("palette")) { + const semantic = tokenName.split("-")[1]; + if (semantic === "corner") { + type = "dimension"; + } else if (semantic === "opacity") { + type = "number"; + } else { + type = "color"; + } + const rawValue = variables[`${stripVar(tokenValue)}`]; + jsonTokens["palette"][semantic] = { + [tokenName]: { + $value: tokenValue, + $type: type, + ...(rawValue && { + $rawValue: rawValue, + }), + }, + ...jsonTokens["palette"][semantic], + }; + } else { + const semantic = tokenName.split("-")[0]; + if (["curve", "size"].includes(semantic)) { + type = "dimension"; + } else if (semantic === "spacing") { + type = "dimension"; + if (tokenValue.includes("calc")) { + let [multiplier, multipleToken] = tokenValue + .replace("calc(", "") + .replace(")", "") + .split(" * "); + multipleToken = variables[stripVar(multipleToken)].replace("px", ""); + rawValue = multiplier * multipleToken; + } + } else if (["opacity", "zIndex"].includes(semantic)) { + type = "number"; + } else if (semantic === "duration") { + type = "duration"; + } else if (semantic === "typography") { + const attribute = tokenName.split("-")[1]; + type = attribute; + } else if (semantic === "shadow") { + if (tokenName.includes("color")) { + type = "color"; + } else { + type = "shadow"; + const [offsetX, offsetY, blur, spread, color] = tokenValue.split(" "); + tokenValue = { + offsetX: offsetX, + offsetY: offsetY, + blur: blur, + spread: spread, + color: stripVar(color).replace("--salt-", ""), + }; + const rawColor = variables[stripVar(color)]; + rawValue = `${offsetX}, ${offsetY}, ${blur}, ${spread}, ${rawColor}`; + } + } else if (semantic === "color") { + if (tokenName.includes("fade")) { + type = "color"; + + const colorToken = `${tokenName.split("-fade")[0]}`; + const rawColorValue = variables[`--salt-${colorToken}`]; + + const opacityValue = stripVar( + tokenValue.split(",")[3].replace("--salt-", "") + ); + const foundationOpacityValue = variables[`--salt-${opacityValue}`]; + const rawOpacityValue = + variables[`${stripVar(foundationOpacityValue)}`]; + + rawValue = `${rawColorValue + .replace("rgb", "rgba") + .replace(")", "")}, ${rawOpacityValue})`; + + tokenValue = { + color: colorToken, + opacity: opacityValue, + }; + } else { + type = "color"; + } + } + + if (type) { + jsonTokens["foundations"][semantic] = { + [tokenName]: { + $value: tokenValue, + $type: type, + ...(rawValue && { + $rawValue: rawValue, + }), + }, + ...jsonTokens["foundations"][semantic], + }; + } + } + } + + console.log(util.inspect(jsonTokens, false, null, true /* enable colors */)); +} + +function themeToJson() { + const paletteVariables = getCssVariablesFromDir( + path.resolve(__dirname, "../css/palette") + ); + const foundationVariables = {getCssVariablesFromDir( + path.resolve(__dirname, "../css/foundations") + );} + format({ ...paletteVariables, ...foundationVariables }); +} + +themeToJson(); From 5bf88fd0f09e3013a38d1889afce0209e5893ffd Mon Sep 17 00:00:00 2001 From: libertymayc Date: Mon, 11 Mar 2024 14:47:54 -0400 Subject: [PATCH 21/50] update to use brackets and aliass --- packages/theme/json/example.json | 918 ++++++++++++++++++----------- packages/theme/json/themeToJson.js | 203 ++++--- 2 files changed, 685 insertions(+), 436 deletions(-) diff --git a/packages/theme/json/example.json b/packages/theme/json/example.json index 3506c03c0ee..310d5009c78 100644 --- a/packages/theme/json/example.json +++ b/packages/theme/json/example.json @@ -1,605 +1,800 @@ { "palette": { "accent": { - "palette-accent-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, - "palette-accent-border": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, - "palette-accent-background": { "$value": "var(--salt-color-blue-500)", "$type": "color" } + "palette-accent-foreground": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, + "palette-accent-border": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" + }, + "palette-accent-background": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" + } }, "corner": { - "palette-corner-strongest": { "$value": "var(--salt-curve-999)", "$type": "dimension" }, - "palette-corner": { "$value": "var(--salt-curve-0)", "$type": "dimension" }, - "palette-corner-weak": { "$value": "var(--salt-curve-0)", "$type": "dimension" }, - "palette-corner-weaker": { "$value": "var(--salt-curve-0)", "$type": "dimension" } + "palette-corner-strongest": { + "$value": "{curve-999}", + "$type": "dimension", + "$rawValue": "999px" + }, + "palette-corner": { + "$value": "{curve-0}", + "$type": "dimension", + "$rawValue": "0" + }, + "palette-corner-weak": { + "$value": "{curve-0}", + "$type": "dimension", + "$rawValue": "0" + }, + "palette-corner-weaker": { + "$value": "{curve-0}", + "$type": "dimension", + "$rawValue": "0" + } }, "error": { - "palette-error-foreground": { "$value": "var(--salt-color-red-500)", "$type": "color" }, - "palette-error-border": { "$value": "var(--salt-color-red-500)", "$type": "color" }, - "palette-error-background-selected": { "$value": "var(--salt-color-red-900)", "$type": "color" }, - "palette-error-background": { "$value": "var(--salt-color-red-900)", "$type": "color" } + "palette-error-foreground": { + "$value": "{color-red-500}", + "$type": "color", + "$rawValue": "rgb(227, 43, 22)" + }, + "palette-error-border": { + "$value": "{color-red-500}", + "$type": "color", + "$rawValue": "rgb(227, 43, 22)" + }, + "palette-error-background-selected": { + "$value": "{color-red-900}", + "$type": "color", + "$rawValue": "rgb(65, 37, 34)" + }, + "palette-error-background": { + "$value": "{color-red-900}", + "$type": "color", + "$rawValue": "rgb(65, 37, 34)" + } }, "info": { - "palette-info-foreground": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, - "palette-info-border": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, - "palette-info-background": { "$value": "var(--salt-color-blue-900)", "$type": "color" } + "palette-info-foreground": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" + }, + "palette-info-border": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" + }, + "palette-info-background": { + "$value": "{color-blue-900}", + "$type": "color", + "$rawValue": "rgb(35, 47, 56)" + } }, "interact": { - "palette-interact-secondary-foreground-hover": { "$value": "var(--salt-color-white)", "$type": "color" }, + "palette-interact-secondary-foreground-hover": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, "palette-interact-secondary-foreground-disabled": { - "$value": "var(--salt-color-white-fade-foreground)", + "$value": "{color-white-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "palette-interact-secondary-foreground-active": { + "$value": "{color-gray-900}", + "$type": "color", + "$rawValue": "rgb(22, 22, 22)" + }, + "palette-interact-secondary-foreground": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, + "palette-interact-secondary-background-hover": { + "$value": "{color-gray-200}", + "$type": "color", + "$rawValue": "rgb(97, 101, 110)" + }, + "palette-interact-secondary-background-disabled": { + "$value": "{transparent}", "$type": "color" }, - "palette-interact-secondary-foreground-active": { "$value": "var(--salt-color-gray-900)", "$type": "color" }, - "palette-interact-secondary-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, - "palette-interact-secondary-background-hover": { "$value": "var(--salt-color-gray-200)", "$type": "color" }, - "palette-interact-secondary-background-disabled": { "$value": "transparent", "$type": "color" }, - "palette-interact-secondary-background-active": { "$value": "var(--salt-color-gray-70)", "$type": "color" }, - "palette-interact-secondary-background": { "$value": "transparent", "$type": "color" }, - "palette-interact-primary-foreground-hover": { "$value": "var(--salt-color-white)", "$type": "color" }, - "palette-interact-primary-foreground-disabled": { - "$value": "var(--salt-color-white-fade-foreground)", + "palette-interact-secondary-background-active": { + "$value": "{color-gray-70}", + "$type": "color", + "$rawValue": "rgb(180, 183, 190)" + }, + "palette-interact-secondary-background": { + "$value": "{transparent}", "$type": "color" }, - "palette-interact-primary-foreground-active": { "$value": "var(--salt-color-gray-900)", "$type": "color" }, - "palette-interact-primary-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, - "palette-interact-primary-background-hover": { "$value": "var(--salt-color-gray-200)", "$type": "color" }, + "palette-interact-primary-foreground-hover": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, + "palette-interact-primary-foreground-disabled": { + "$value": "{color-white-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "palette-interact-primary-foreground-active": { + "$value": "{color-gray-900}", + "$type": "color", + "$rawValue": "rgb(22, 22, 22)" + }, + "palette-interact-primary-foreground": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, + "palette-interact-primary-background-hover": { + "$value": "{color-gray-200}", + "$type": "color", + "$rawValue": "rgb(97, 101, 110)" + }, "palette-interact-primary-background-disabled": { - "$value": "var(--salt-color-gray-300-fade-background)", - "$type": "color" + "$value": "{color-gray-300-fade-background}", + "$type": "color", + "$rawValue": "rgba(76, 80, 91, 0.4)" + }, + "palette-interact-primary-background-active": { + "$value": "{color-gray-70}", + "$type": "color", + "$rawValue": "rgb(180, 183, 190)" + }, + "palette-interact-primary-background": { + "$value": "{color-gray-300}", + "$type": "color", + "$rawValue": "rgb(76, 80, 91)" + }, + "palette-interact-cta-foreground-hover": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" }, - "palette-interact-primary-background-active": { "$value": "var(--salt-color-gray-70)", "$type": "color" }, - "palette-interact-primary-background": { "$value": "var(--salt-color-gray-300)", "$type": "color" }, - "palette-interact-cta-foreground-hover": { "$value": "var(--salt-color-white)", "$type": "color" }, "palette-interact-cta-foreground-disabled": { - "$value": "var(--salt-color-white-fade-foreground)", - "$type": "color" + "$value": "{color-white-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "palette-interact-cta-foreground-active": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, + "palette-interact-cta-foreground": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" + }, + "palette-interact-cta-background-hover": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" }, - "palette-interact-cta-foreground-active": { "$value": "var(--salt-color-white)", "$type": "color" }, - "palette-interact-cta-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, - "palette-interact-cta-background-hover": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, "palette-interact-cta-background-disabled": { - "$value": "var(--salt-color-blue-600-fade-background)", - "$type": "color" + "$value": "{color-blue-600-fade-background}", + "$type": "color", + "$rawValue": "rgba(21, 92, 147, 0.4)" + }, + "palette-interact-cta-background-active": { + "$value": "{color-blue-700}", + "$type": "color", + "$rawValue": "rgb(0, 71, 123)" + }, + "palette-interact-cta-background": { + "$value": "{color-blue-600}", + "$type": "color", + "$rawValue": "rgb(21, 92, 147)" + }, + "palette-interact-outline": { + "$value": "{color-blue-100}", + "$type": "color", + "$rawValue": "rgb(100, 177, 228)" + }, + "palette-interact-foreground-hover": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" }, - "palette-interact-cta-background-active": { "$value": "var(--salt-color-blue-700)", "$type": "color" }, - "palette-interact-cta-background": { "$value": "var(--salt-color-blue-600)", "$type": "color" }, - "palette-interact-outline": { "$value": "var(--salt-color-blue-100)", "$type": "color" }, - "palette-interact-foreground-hover": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, "palette-interact-foreground-disabled": { - "$value": "var(--salt-color-gray-90-fade-foreground)", - "$type": "color" + "$value": "{color-gray-90-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(132, 135, 142, 0.4)" }, "palette-interact-foreground-activeDisabled": { - "$value": "var(--salt-color-blue-100-fade-foreground)", - "$type": "color" + "$value": "{color-blue-100-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(100, 177, 228, 0.4)" + }, + "palette-interact-foreground-active": { + "$value": "{color-blue-100}", + "$type": "color", + "$rawValue": "rgb(100, 177, 228)" + }, + "palette-interact-foreground": { + "$value": "{color-gray-90}", + "$type": "color", + "$rawValue": "rgb(132, 135, 142)" }, - "palette-interact-foreground-active": { "$value": "var(--salt-color-blue-100)", "$type": "color" }, - "palette-interact-foreground": { "$value": "var(--salt-color-gray-90)", "$type": "color" }, "palette-interact-border-readonly": { - "$value": "var(--salt-color-gray-90-fade-border-readonly)", - "$type": "color" + "$value": "{color-gray-90-fade-border-readonly}", + "$type": "color", + "$rawValue": "rgba(132, 135, 142, 0.15)" + }, + "palette-interact-border-hover": { + "$value": "{color-blue-500}", + "$type": "color", + "$rawValue": "rgb(38, 112, 169)" }, - "palette-interact-border-hover": { "$value": "var(--salt-color-blue-500)", "$type": "color" }, "palette-interact-border-disabled": { - "$value": "var(--salt-color-gray-90-fade-border)", - "$type": "color" + "$value": "{color-gray-90-fade-border}", + "$type": "color", + "$rawValue": "rgba(132, 135, 142, 0.4)" }, "palette-interact-border-activeDisabled": { - "$value": "var(--salt-color-blue-100-fade-fill)", - "$type": "color" + "$value": "{color-blue-100-fade-fill}", + "$type": "color", + "$rawValue": "rgba(100, 177, 228, 0.4)" + }, + "palette-interact-border-active": { + "$value": "{color-blue-100}", + "$type": "color", + "$rawValue": "rgb(100, 177, 228)" + }, + "palette-interact-border": { + "$value": "{color-gray-90}", + "$type": "color", + "$rawValue": "rgb(132, 135, 142)" }, - "palette-interact-border-active": { "$value": "var(--salt-color-blue-100)", "$type": "color" }, - "palette-interact-border": { "$value": "var(--salt-color-gray-90)", "$type": "color" }, "palette-interact-background-activeDisabled": { - "$value": "var(--salt-color-blue-700-fade-background)", + "$value": "{color-blue-700-fade-background}", + "$type": "color", + "$rawValue": "rgba(0, 71, 123, 0.4)" + }, + "palette-interact-background-disabled": { + "$value": "{transparent}", "$type": "color" }, - "palette-interact-background-disabled": { "$value": "transparent", "$type": "color" }, - "palette-interact-background-active": { "$value": "var(--salt-color-blue-700)", "$type": "color" }, - "palette-interact-background-hover": { "$value": "var(--salt-color-blue-800)", "$type": "color" }, - "palette-interact-background-blurSelected": { "$value": "var(--salt-color-gray-600)", "$type": "color" }, - "palette-interact-background": { "$value": "transparent", "$type": "color" } + "palette-interact-background-active": { + "$value": "{color-blue-700}", + "$type": "color", + "$rawValue": "rgb(0, 71, 123)" + }, + "palette-interact-background-hover": { + "$value": "{color-blue-800}", + "$type": "color", + "$rawValue": "rgb(39, 60, 77)" + }, + "palette-interact-background-blurSelected": { + "$value": "{color-gray-600}", + "$type": "color", + "$rawValue": "rgb(47, 49, 54)" + }, + "palette-interact-background": { + "$value": "{transparent}", + "$type": "color" + } }, "navigate": { - "palette-navigate-indicator-active": { "$value": "var(--salt-color-orange-400)", "$type": "color" }, - "palette-navigate-indicator-hover": { "$value": "var(--salt-color-gray-90)", "$type": "color" }, - "palette-navigate-foreground-visited": { "$value": "var(--salt-color-purple-100)", "$type": "color" }, - "palette-navigate-foreground-active": { "$value": "var(--salt-color-blue-300)", "$type": "color" }, - "palette-navigate-foreground-hover": { "$value": "var(--salt-color-blue-200)", "$type": "color" }, + "palette-navigate-indicator-active": { + "$value": "{color-orange-400}", + "$type": "color", + "$rawValue": "rgb(238, 133, 43)" + }, + "palette-navigate-indicator-hover": { + "$value": "{color-gray-90}", + "$type": "color", + "$rawValue": "rgb(132, 135, 142)" + }, + "palette-navigate-foreground-visited": { + "$value": "{color-purple-100}", + "$type": "color", + "$rawValue": "rgb(223, 156, 225)" + }, + "palette-navigate-foreground-active": { + "$value": "{color-blue-300}", + "$type": "color", + "$rawValue": "rgb(51, 141, 205)" + }, + "palette-navigate-foreground-hover": { + "$value": "{color-blue-200}", + "$type": "color", + "$rawValue": "rgb(75, 159, 216)" + }, "palette-navigate-background-hover": { - "$value": "var(--salt-color-white-fade-background-hover)", - "$type": "color" + "$value": "{color-white-fade-background-hover}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, var(--salt-opacity-8))" } }, "negative": { - "palette-negative-foreground": { "$value": "var(--salt-color-red-300)", "$type": "color" } + "palette-negative-foreground": { + "$value": "{color-red-300}", + "$type": "color", + "$rawValue": "rgb(255, 89, 66)" + } }, "neutral": { "palette-neutral-tertiary-separator": { - "$value": "var(--salt-color-white-fade-separatorOpacity-tertiary)", - "$type": "color" + "$value": "{color-white-fade-separatorOpacity-tertiary}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.15)" }, "palette-neutral-secondary-separator": { - "$value": "var(--salt-color-white-fade-separatorOpacity-secondary)", - "$type": "color" + "$value": "{color-white-fade-separatorOpacity-secondary}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.25)" }, "palette-neutral-backdrop": { - "$value": "var(--salt-color-black-fade-backdrop)", - "$type": "color" + "$value": "{color-black-fade-backdrop}", + "$type": "color", + "$rawValue": "rgba(0, 0, 0, 0.7)" }, "palette-neutral-secondary-foreground-disabled": { - "$value": "var(--salt-color-gray-70-fade-foreground)", - "$type": "color" + "$value": "{color-gray-70-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(180, 183, 190, 0.4)" + }, + "palette-neutral-secondary-foreground": { + "$value": "{color-gray-70}", + "$type": "color", + "$rawValue": "rgb(180, 183, 190)" }, - "palette-neutral-secondary-foreground": { "$value": "var(--salt-color-gray-70)", "$type": "color" }, "palette-neutral-secondary-border-disabled": { - "$value": "var(--salt-color-gray-300-fade-border)", - "$type": "color" + "$value": "{color-gray-300-fade-border}", + "$type": "color", + "$rawValue": "rgba(76, 80, 91, 0.4)" + }, + "palette-neutral-secondary-border": { + "$value": "{color-gray-300}", + "$type": "color", + "$rawValue": "rgb(76, 80, 91)" }, - "palette-neutral-secondary-border": { "$value": "var(--salt-color-gray-300)", "$type": "color" }, "palette-neutral-secondary-background-readonly": { - "$value": "var(--salt-color-gray-600-fade-background-readonly)", - "$type": "color" + "$value": "{color-gray-600-fade-background-readonly}", + "$type": "color", + "$rawValue": "rgba(47, 49, 54, 0)" }, "palette-neutral-secondary-background-disabled": { - "$value": "var(--salt-color-gray-600-fade-background)", - "$type": "color" + "$value": "{color-gray-600-fade-background}", + "$type": "color", + "$rawValue": "rgba(47, 49, 54, 0.4)" + }, + "palette-neutral-secondary-background": { + "$value": "{color-gray-600}", + "$type": "color", + "$rawValue": "rgb(47, 49, 54)" }, - "palette-neutral-secondary-background": { "$value": "var(--salt-color-gray-600)", "$type": "color" }, "palette-neutral-primary-border-disabled": { - "$value": "var(--salt-color-gray-300-fade-border)", - "$type": "color" + "$value": "{color-gray-300-fade-border}", + "$type": "color", + "$rawValue": "rgba(76, 80, 91, 0.4)" + }, + "palette-neutral-primary-border": { + "$value": "{color-gray-300}", + "$type": "color", + "$rawValue": "rgb(76, 80, 91)" }, - "palette-neutral-primary-border": { "$value": "var(--salt-color-gray-300)", "$type": "color" }, "palette-neutral-primary-separator": { - "$value": "var(--salt-color-white-fade-separatorOpacity-primary)", - "$type": "color" + "$value": "{color-white-fade-separatorOpacity-primary}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" }, "palette-neutral-primary-foreground-disabled": { - "$value": "var(--salt-color-white-fade-foreground)", - "$type": "color" + "$value": "{color-white-fade-foreground}", + "$type": "color", + "$rawValue": "rgba(255, 255, 255, 0.4)" + }, + "palette-neutral-primary-foreground": { + "$value": "{color-white}", + "$type": "color", + "$rawValue": "rgb(255, 255, 255)" }, - "palette-neutral-primary-foreground": { "$value": "var(--salt-color-white)", "$type": "color" }, "palette-neutral-primary-background-readonly": { - "$value": "var(--salt-color-gray-800-fade-background-readonly)", - "$type": "color" + "$value": "{color-gray-800-fade-background-readonly}", + "$type": "color", + "$rawValue": "rgba(36, 37, 38, 0)" }, "palette-neutral-primary-background-disabled": { - "$value": "var(--salt-color-gray-800-fade-background)", - "$type": "color" + "$value": "{color-gray-800-fade-background}", + "$type": "color", + "$rawValue": "rgba(36, 37, 38, 0.4)" }, - "palette-neutral-primary-background": { "$value": "var(--salt-color-gray-800)", "$type": "color" } + "palette-neutral-primary-background": { + "$value": "{color-gray-800}", + "$type": "color", + "$rawValue": "rgb(36, 37, 38)" + } }, "opacity": { - "palette-opacity-tertiary-border": { "$value": "var(--salt-opacity-15)", "$type": "number" }, - "palette-opacity-secondary-border": { "$value": "var(--salt-opacity-25)", "$type": "number" }, - "palette-opacity-primary-border": { "$value": "var(--salt-opacity-40)", "$type": "number" }, - "palette-opacity-border-readonly": { "$value": "var(--salt-opacity-15)", "$type": "number" }, - "palette-opacity-background-readonly": { "$value": "var(--salt-opacity-0)", "$type": "number" }, - "palette-opacity-disabled": { "$value": "var(--salt-opacity-40)", "$type": "number" }, - "palette-opacity-backdrop": { "$value": "var(--salt-opacity-70)", "$type": "number" } + "palette-opacity-tertiary-border": { + "$value": "{opacity-15}", + "$type": "number", + "$rawValue": "0.15" + }, + "palette-opacity-secondary-border": { + "$value": "{opacity-25}", + "$type": "number", + "$rawValue": "0.25" + }, + "palette-opacity-primary-border": { + "$value": "{opacity-40}", + "$type": "number", + "$rawValue": "0.4" + }, + "palette-opacity-border-readonly": { + "$value": "{opacity-15}", + "$type": "number", + "$rawValue": "0.15" + }, + "palette-opacity-background-readonly": { + "$value": "{opacity-0}", + "$type": "number", + "$rawValue": "0" + }, + "palette-opacity-disabled": { + "$value": "{opacity-40}", + "$type": "number", + "$rawValue": "0.4" + }, + "palette-opacity-backdrop": { + "$value": "{opacity-70}", + "$type": "number", + "$rawValue": "0.7" + } }, "positive": { - "palette-positive-foreground": { "$value": "var(--salt-color-green-300)", "$type": "color" } + "palette-positive-foreground": { + "$value": "{color-green-300}", + "$type": "color", + "$rawValue": "rgb(60, 171, 96)" + } }, "success": { - "palette-success-foreground": { "$value": "var(--salt-color-green-400)", "$type": "color" }, - "palette-success-border": { "$value": "var(--salt-color-green-400)", "$type": "color" }, - "palette-success-background-selected": { "$value": "var(--salt-color-green-900)", "$type": "color" }, - "palette-success-background": { "$value": "var(--salt-color-green-900)", "$type": "color" } + "palette-success-foreground": { + "$value": "{color-green-400}", + "$type": "color", + "$rawValue": "rgb(48, 156, 90)" + }, + "palette-success-border": { + "$value": "{color-green-400}", + "$type": "color", + "$rawValue": "rgb(48, 156, 90)" + }, + "palette-success-background-selected": { + "$value": "{color-green-900}", + "$type": "color", + "$rawValue": "rgb(35, 52, 43)" + }, + "palette-success-background": { + "$value": "{color-green-900}", + "$type": "color", + "$rawValue": "rgb(35, 52, 43)" + } }, "warning": { - "palette-warning-foreground": { "$value": "var(--salt-color-orange-500)", "$type": "color" }, - "palette-warning-border": { "$value": "var(--salt-color-orange-500)", "$type": "color" }, - "palette-warning-background-selected": { "$value": "var(--salt-color-orange-900)", "$type": "color" }, - "palette-warning-background": { "$value": "var(--salt-color-orange-900)", "$type": "color" } + "palette-warning-foreground": { + "$value": "{color-orange-500}", + "$type": "color", + "$rawValue": "rgb(234, 115, 25)" + }, + "palette-warning-border": { + "$value": "{color-orange-500}", + "$type": "color", + "$rawValue": "rgb(234, 115, 25)" + }, + "palette-warning-background-selected": { + "$value": "{color-orange-900}", + "$type": "color", + "$rawValue": "rgb(54, 44, 36)" + }, + "palette-warning-background": { + "$value": "{color-orange-900}", + "$type": "color", + "$rawValue": "rgb(54, 44, 36)" + } } }, "foundations": { "color": { "color-white-fade-background-hover": { - "$value": { "color": "color-white", "opacity": "opacity-8" }, + "$value": { "color": "{color-white}", "opacity": "{opacity-8}" }, "$type": "color", - "$rawValue": "rgba(255, 255, 255, undefined)" + "$rawValue": "rgba(255, 255, 255, 0.08)" }, "color-black-fade-background-hover": { - "$value": { "color": "color-black", "opacity": "opacity-8" }, + "$value": { "color": "{color-black}", "opacity": "{opacity-8}" }, "$type": "color", - "$rawValue": "rgba(0, 0, 0, undefined)" + "$rawValue": "rgba(0, 0, 0, 0.08)" }, "color-black-fade-separatorOpacity-tertiary": { - "$value": { - "color": "color-black", - "opacity": "palette-opacity-tertiary-border" - }, + "$value": { "color": "{color-black}", "opacity": "{opacity-15}" }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.15)" }, "color-black-fade-separatorOpacity-secondary": { - "$value": { - "color": "color-black", - "opacity": "palette-opacity-secondary-border" - }, + "$value": { "color": "{color-black}", "opacity": "{opacity-25}" }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.25)" }, "color-black-fade-separatorOpacity-primary": { - "$value": { - "color": "color-black", - "opacity": "palette-opacity-primary-border" - }, + "$value": { "color": "{color-black}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.4)" }, "color-white-fade-separatorOpacity-tertiary": { - "$value": { - "color": "color-white", - "opacity": "palette-opacity-tertiary-border" - }, + "$value": { "color": "{color-white}", "opacity": "{opacity-15}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.15)" }, "color-white-fade-separatorOpacity-secondary": { - "$value": { - "color": "color-white", - "opacity": "palette-opacity-secondary-border" - }, + "$value": { "color": "{color-white}", "opacity": "{opacity-25}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.25)" }, "color-white-fade-separatorOpacity-primary": { - "$value": { - "color": "color-white", - "opacity": "palette-opacity-primary-border" - }, + "$value": { "color": "{color-white}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "color-blue-600-fade-fill": { - "$value": { - "color": "color-blue-600", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-600}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "color-blue-100-fade-fill": { - "$value": { - "color": "color-blue-100", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-100}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(100, 177, 228, 0.4)" }, "color-black-fade-backdrop": { - "$value": { "color": "color-black", "opacity": "palette-opacity-backdrop" }, + "$value": { "color": "{color-black}", "opacity": "{opacity-70}" }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.7)" }, "color-white-fade-backdrop": { - "$value": { "color": "color-white", "opacity": "palette-opacity-backdrop" }, + "$value": { "color": "{color-white}", "opacity": "{opacity-70}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.7)" }, "color-gray-800-fade-background-readonly": { - "$value": { - "color": "color-gray-800", - "opacity": "palette-opacity-background-readonly" - }, + "$value": { "color": "{color-gray-800}", "opacity": "{opacity-0}" }, "$type": "color", "$rawValue": "rgba(36, 37, 38, 0)" }, "color-gray-600-fade-background-readonly": { - "$value": { - "color": "color-gray-600", - "opacity": "palette-opacity-background-readonly" - }, + "$value": { "color": "{color-gray-600}", "opacity": "{opacity-0}" }, "$type": "color", "$rawValue": "rgba(47, 49, 54, 0)" }, "color-gray-20-fade-background-readonly": { - "$value": { - "color": "color-gray-20", - "opacity": "palette-opacity-background-readonly" - }, + "$value": { "color": "{color-gray-20}", "opacity": "{opacity-0}" }, "$type": "color", "$rawValue": "rgba(234, 237, 239, 0)" }, "color-white-fade-background-readonly": { - "$value": { - "color": "color-white", - "opacity": "palette-opacity-background-readonly" - }, + "$value": { "color": "{color-white}", "opacity": "{opacity-0}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0)" }, "color-white-fade-background": { - "$value": { "color": "color-white", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-white}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "color-gray-800-fade-background": { - "$value": { - "color": "color-gray-800", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-800}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(36, 37, 38, 0.4)" }, "color-gray-600-fade-background": { - "$value": { - "color": "color-gray-600", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-600}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(47, 49, 54, 0.4)" }, "color-gray-300-fade-background": { - "$value": { - "color": "color-gray-300", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-300}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "color-gray-200-fade-background": { - "$value": { - "color": "color-gray-200", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-200}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.4)" }, "color-gray-70-fade-background": { - "$value": { "color": "color-gray-70", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-70}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(180, 183, 190, 0.4)" }, "color-gray-60-fade-background": { - "$value": { "color": "color-gray-60", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-60}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(197, 201, 208, 0.4)" }, "color-gray-20-fade-background": { - "$value": { "color": "color-gray-20", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-20}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(234, 237, 239, 0.4)" }, "color-blue-700-fade-background": { - "$value": { - "color": "color-blue-700", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-700}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(0, 71, 123, 0.4)" }, "color-blue-600-fade-background": { - "$value": { - "color": "color-blue-600", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-600}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "color-blue-500-fade-background": { - "$value": { - "color": "color-blue-500", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(38, 112, 169, 0.4)" }, "color-blue-30-fade-background": { - "$value": { "color": "color-blue-30", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-blue-30}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(164, 213, 244, 0.4)" }, "color-gray-200-fade-border-readonly": { - "$value": { - "color": "color-gray-200", - "opacity": "palette-opacity-border-readonly" - }, + "$value": { "color": "{color-gray-200}", "opacity": "{opacity-15}" }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.15)" }, "color-gray-90-fade-border-readonly": { - "$value": { - "color": "color-gray-90", - "opacity": "palette-opacity-border-readonly" - }, + "$value": { "color": "{color-gray-90}", "opacity": "{opacity-15}" }, "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.15)" }, "color-red-500-fade-border": { - "$value": { "color": "color-red-500", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-red-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(227, 43, 22, 0.4)" }, "color-orange-700-fade-border": { - "$value": { - "color": "color-orange-700", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-orange-700}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(214, 85, 19, 0.4)" }, "color-orange-600-fade-border": { - "$value": { - "color": "color-orange-600", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-orange-600}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(224, 101, 25, 0.4)" }, "color-orange-500-fade-border": { - "$value": { - "color": "color-orange-500", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-orange-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(234, 115, 25, 0.4)" }, "color-orange-400-fade-border": { - "$value": { - "color": "color-orange-400", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-orange-400}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(238, 133, 43, 0.4)" }, "color-green-500-fade-border": { - "$value": { - "color": "color-green-500", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-green-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(36, 135, 75, 0.4)" }, "color-green-400-fade-border": { - "$value": { - "color": "color-green-400", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-green-400}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(48, 156, 90, 0.4)" }, "color-gray-300-fade-border": { - "$value": { - "color": "color-gray-300", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-300}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "color-gray-200-fade-border": { - "$value": { - "color": "color-gray-200", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-200}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.4)" }, "color-gray-90-fade-border": { - "$value": { "color": "color-gray-90", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-90}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.4)" }, "color-gray-60-fade-border": { - "$value": { "color": "color-gray-60", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-60}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(197, 201, 208, 0.4)" }, "color-gray-50-fade-border": { - "$value": { "color": "color-gray-50", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-50}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(206, 210, 217, 0.4)" }, "color-blue-500-fade-border": { - "$value": { - "color": "color-blue-500", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(38, 112, 169, 0.4)" }, "color-white-fade-foreground": { - "$value": { "color": "color-white", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-white}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "color-red-700-fade-foreground": { - "$value": { "color": "color-red-700", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-red-700}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(166, 21, 11, 0.4)" }, "color-red-500-fade-foreground": { - "$value": { "color": "color-red-500", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-red-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(227, 43, 22, 0.4)" }, "color-red-300-fade-foreground": { - "$value": { "color": "color-red-300", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-red-300}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(255, 89, 66, 0.4)" }, "color-green-700-fade-foreground": { - "$value": { - "color": "color-green-700", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-green-700}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(12, 93, 46, 0.4)" }, "color-green-500-fade-foreground": { - "$value": { - "color": "color-green-500", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-green-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(36, 135, 75, 0.4)" }, "color-green-400-fade-foreground": { - "$value": { - "color": "color-green-400", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-green-400}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(48, 156, 90, 0.4)" }, "color-green-300-fade-foreground": { - "$value": { - "color": "color-green-300", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-green-300}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(60, 171, 96, 0.4)" }, "color-gray-900-fade-foreground": { - "$value": { - "color": "color-gray-900", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-900}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(22, 22, 22, 0.4)" }, "color-gray-90-fade-foreground": { - "$value": { "color": "color-gray-90", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-90}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.4)" }, "color-gray-70-fade-foreground": { - "$value": { "color": "color-gray-70", "opacity": "palette-opacity-disabled" }, + "$value": { "color": "{color-gray-70}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(180, 183, 190, 0.4)" }, "color-gray-200-fade-foreground": { - "$value": { - "color": "color-gray-200", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-gray-200}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.4)" }, "color-blue-600-fade-foreground": { - "$value": { - "color": "color-blue-600", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-600}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "color-blue-500-fade-foreground": { - "$value": { - "color": "color-blue-500", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-500}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(38, 112, 169, 0.4)" }, "color-blue-100-fade-foreground": { - "$value": { - "color": "color-blue-100", - "opacity": "palette-opacity-disabled" - }, + "$value": { "color": "{color-blue-100}", "opacity": "{opacity-40}" }, "$type": "color", "$rawValue": "rgba(100, 177, 228, 0.4)" }, @@ -708,14 +903,14 @@ "color-black": { "$value": "rgb(0, 0, 0)", "$type": "color" }, "color-white": { "$value": "rgb(255, 255, 255)", "$type": "color" } }, - curve: { + "curve": { "curve-999": { "$value": "999px", "$type": "dimension" }, "curve-150": { "$value": "12px", "$type": "dimension" }, "curve-100": { "$value": "8px", "$type": "dimension" }, "curve-50": { "$value": "4px", "$type": "dimension" }, "curve-0": { "$value": "0", "$type": "dimension" } }, - duration: { + "duration": { "duration-cutoff": { "$value": "10000ms", "$type": "duration" }, "duration-notable": { "$value": "1000ms", "$type": "duration" }, "duration-perceptible": { "$value": "300ms", "$type": "duration" }, @@ -729,58 +924,58 @@ "opacity-8": { "$value": "0.08", "$type": "number" }, "opacity-0": { "$value": "0", "$type": "number" } }, - shadow: { + "shadow": { "shadow-500": { "$value": { - offsetX: "0", - offsetY: "12px", - blur: "40px", - spread: "0", - "color": "shadow-500-color" + "offsetX": "0", + "offsetY": "12px", + "blur": "40px", + "spread": "0", + "color": "{shadow-500-color}" }, "$type": "shadow", "$rawValue": "0, 12px, 40px, 0, rgba(0, 0, 0, 0.65)" }, "shadow-400": { "$value": { - offsetX: "0", - offsetY: "6px", - blur: "10px", - spread: "0", - "color": "shadow-400-color" + "offsetX": "0", + "offsetY": "6px", + "blur": "10px", + "spread": "0", + "color": "{shadow-400-color}" }, "$type": "shadow", "$rawValue": "0, 6px, 10px, 0, rgba(0, 0, 0, 0.55)" }, "shadow-300": { "$value": { - offsetX: "0", - offsetY: "4px", - blur: "8px", - spread: "0", - "color": "shadow-300-color" + "offsetX": "0", + "offsetY": "4px", + "blur": "8px", + "spread": "0", + "color": "{shadow-300-color}" }, "$type": "shadow", "$rawValue": "0, 4px, 8px, 0, rgba(0, 0, 0, 0.55)" }, "shadow-200": { "$value": { - offsetX: "0", - offsetY: "2px", - blur: "4px", - spread: "0", - "color": "shadow-200-color" + "offsetX": "0", + "offsetY": "2px", + "blur": "4px", + "spread": "0", + "color": "{shadow-200-color}" }, "$type": "shadow", "$rawValue": "0, 2px, 4px, 0, rgba(0, 0, 0, 0.5)" }, "shadow-100": { "$value": { - offsetX: "0", - offsetY: "1px", - blur: "3px", - spread: "0", - "color": "shadow-100-color" + "offsetX": "0", + "offsetY": "1px", + "blur": "3px", + "spread": "0", + "color": "{shadow-100-color}" }, "$type": "shadow", "$rawValue": "0, 1px, 3px, 0, rgba(0, 0, 0, 0.5)" @@ -791,7 +986,7 @@ "shadow-200-color": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color" }, "shadow-100-color": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color" } }, - size: { + "size": { "size-border-strong": { "$value": "2px", "$type": "dimension" }, "size-bar-small": { "$value": "2px", "$type": "dimension" }, "size-bar-strong": { "$value": "16px", "$type": "dimension" }, @@ -803,65 +998,83 @@ "size-bar": { "$value": "8px", "$type": "dimension" }, "size-adornment": { "$value": "12px", "$type": "dimension" } }, - spacing: { + "spacing": { "spacing-400": { - "$value": "calc(4 * var(--salt-spacing-100))", + "$value": "calc(4*{spacing-100})", "$type": "dimension", - "$rawValue": 16 + "$rawValue": "16" }, "spacing-350": { - "$value": "calc(3.5 * var(--salt-spacing-100))", + "$value": "calc(3.5*{spacing-100})", "$type": "dimension", - "$rawValue": 14 + "$rawValue": "14" }, "spacing-300": { - "$value": "calc(3 * var(--salt-spacing-100))", + "$value": "calc(3*{spacing-100})", "$type": "dimension", - "$rawValue": 12 + "$rawValue": "12" }, "spacing-250": { - "$value": "calc(2.5 * var(--salt-spacing-100))", + "$value": "calc(2.5*{spacing-100})", "$type": "dimension", - "$rawValue": 10 + "$rawValue": "10" }, "spacing-200": { - "$value": "calc(2 * var(--salt-spacing-100))", + "$value": "calc(2*{spacing-100})", "$type": "dimension", - "$rawValue": 8 + "$rawValue": "8" }, "spacing-150": { - "$value": "calc(1.5 * var(--salt-spacing-100))", + "$value": "calc(1.5*{spacing-100})", "$type": "dimension", - "$rawValue": 6 + "$rawValue": "6" }, "spacing-75": { - "$value": "calc(0.75 * var(--salt-spacing-100))", + "$value": "calc(0.75*{spacing-100})", "$type": "dimension", - "$rawValue": 3 + "$rawValue": "3" }, "spacing-50": { - "$value": "calc(0.5 * var(--salt-spacing-100))", + "$value": "calc(0.5*{spacing-100})", "$type": "dimension", - "$rawValue": 2 + "$rawValue": "2" }, "spacing-25": { - "$value": "calc(0.25 * var(--salt-spacing-100))", + "$value": "calc(0.25*{spacing-100})", "$type": "dimension", - "$rawValue": 1 + "$rawValue": "1" }, "spacing-100": { "$value": "4px", "$type": "dimension" } }, - typography: { - "typography-fontWeight-extraBold": { "$value": "800", "$type": "fontWeight" }, + "typography": { + "typography-fontWeight-extraBold": { + "$value": "800", + "$type": "fontWeight" + }, "typography-fontWeight-bold": { "$value": "700", "$type": "fontWeight" }, - "typography-fontWeight-semiBold": { "$value": "600", "$type": "fontWeight" }, - "typography-fontWeight-medium": { "$value": "500", "$type": "fontWeight" }, - "typography-fontWeight-regular": { "$value": "400", "$type": "fontWeight" }, + "typography-fontWeight-semiBold": { + "$value": "600", + "$type": "fontWeight" + }, + "typography-fontWeight-medium": { + "$value": "500", + "$type": "fontWeight" + }, + "typography-fontWeight-regular": { + "$value": "400", + "$type": "fontWeight" + }, "typography-fontWeight-light": { "$value": "300", "$type": "fontWeight" }, - "typography-fontFamily-code": { "$value": ""PT Mono"", "$type": "fontFamily" }, - "typography-fontFamily": { "$value": ""Open Sans"", "$type": "fontFamily" } + "typography-fontFamily-code": { + "$value": "\"PT Mono\"", + "$type": "fontFamily" + }, + "typography-fontFamily": { + "$value": "\"Open Sans\"", + "$type": "fontFamily" + } }, - zIndex: { + "zIndex": { "zIndex-flyover": { "$value": "1500", "$type": "number" }, "zIndex-contextMenu": { "$value": "1450", "$type": "number" }, "zIndex-dragObject": { "$value": "1420", "$type": "number" }, @@ -874,4 +1087,3 @@ } } } -O716774 in ~/git/jpmc/salt-ds theme-json > \ No newline at end of file diff --git a/packages/theme/json/themeToJson.js b/packages/theme/json/themeToJson.js index 393581eda44..e5695b7019b 100644 --- a/packages/theme/json/themeToJson.js +++ b/packages/theme/json/themeToJson.js @@ -35,15 +35,26 @@ function getCssVariablesFromDir(dirPath) { return cssVariables; } -function stripVar(cssVar) { +/* Removes surrounding CSS var('...') function from a token */ +function stripVarFunc(cssVar) { return cssVar.replace("var(", "").replaceAll(")", "").replaceAll(" ", ""); } +/* Removes --salt- prefix from a token */ +function removePrefix(cssVar) { + return cssVar.replace("--salt-", ""); +} + +/* Adds curly brackets around token */ +function formatValue(cssVar) { + return `{${removePrefix(cssVar)}}`; +} + function format(variables) { const jsonTokens = { palette: {}, foundations: {} }; for (const token of Object.entries(variables)) { - var tokenName = token[0].replace("--salt-", ""); + var tokenName = removePrefix(token[0]); var tokenValue = token[1]; let type; let rawValue; @@ -57,10 +68,19 @@ function format(variables) { } else { type = "color"; } - const rawValue = variables[`${stripVar(tokenValue)}`]; + const aliasToken = stripVarFunc(tokenValue); + let rawValue = variables[`${aliasToken}`]; + if (rawValue && rawValue.includes("palette-opacity")) { + let opacityToken = rawValue.split(",")[3]; + rawValue = + rawValue.split(",").slice(0, 3).join(",") + + `, ${ + variables[stripVarFunc(variables[stripVarFunc(opacityToken)])] + })`; + } jsonTokens["palette"][semantic] = { [tokenName]: { - $value: tokenValue, + $value: formatValue(aliasToken), $type: type, ...(rawValue && { $rawValue: rawValue, @@ -68,83 +88,100 @@ function format(variables) { }, ...jsonTokens["palette"][semantic], }; - } else { - const semantic = tokenName.split("-")[0]; - if (["curve", "size"].includes(semantic)) { - type = "dimension"; - } else if (semantic === "spacing") { - type = "dimension"; - if (tokenValue.includes("calc")) { - let [multiplier, multipleToken] = tokenValue - .replace("calc(", "") - .replace(")", "") - .split(" * "); - multipleToken = variables[stripVar(multipleToken)].replace("px", ""); - rawValue = multiplier * multipleToken; - } - } else if (["opacity", "zIndex"].includes(semantic)) { - type = "number"; - } else if (semantic === "duration") { - type = "duration"; - } else if (semantic === "typography") { - const attribute = tokenName.split("-")[1]; - type = attribute; - } else if (semantic === "shadow") { - if (tokenName.includes("color")) { - type = "color"; - } else { - type = "shadow"; - const [offsetX, offsetY, blur, spread, color] = tokenValue.split(" "); - tokenValue = { - offsetX: offsetX, - offsetY: offsetY, - blur: blur, - spread: spread, - color: stripVar(color).replace("--salt-", ""), - }; - const rawColor = variables[stripVar(color)]; - rawValue = `${offsetX}, ${offsetY}, ${blur}, ${spread}, ${rawColor}`; - } - } else if (semantic === "color") { - if (tokenName.includes("fade")) { - type = "color"; - - const colorToken = `${tokenName.split("-fade")[0]}`; - const rawColorValue = variables[`--salt-${colorToken}`]; - - const opacityValue = stripVar( - tokenValue.split(",")[3].replace("--salt-", "") - ); - const foundationOpacityValue = variables[`--salt-${opacityValue}`]; - const rawOpacityValue = - variables[`${stripVar(foundationOpacityValue)}`]; - - rawValue = `${rawColorValue - .replace("rgb", "rgba") - .replace(")", "")}, ${rawOpacityValue})`; - - tokenValue = { - color: colorToken, - opacity: opacityValue, - }; - } else { - type = "color"; - } - } - - if (type) { - jsonTokens["foundations"][semantic] = { - [tokenName]: { - $value: tokenValue, - $type: type, - ...(rawValue && { - $rawValue: rawValue, - }), - }, - ...jsonTokens["foundations"][semantic], - }; - } - } + } + // else { + // const semantic = tokenName.split("-")[0]; + // if (["curve", "size"].includes(semantic)) { + // type = "dimension"; + // } else if (semantic === "spacing") { + // type = "dimension"; + // if (tokenValue.includes("calc")) { + // let [multiplier, multipleToken] = tokenValue + // .replace("calc(", "") + // .replace(")", "") + // .split(" * "); + // tokenValue = removePrefix(stripVarFunc(tokenValue)) + // .replace("spacing", `{spacing`) + // .replace("100", "100})"); + // multipleToken = variables[stripVarFunc(multipleToken)].replace( + // "px", + // "" + // ); + // rawValue = `${multiplier * multipleToken}`; + // } + // } else if (["opacity", "zIndex"].includes(semantic)) { + // type = "number"; + // } else if (semantic === "duration") { + // type = "duration"; + // } else if (semantic === "typography") { + // const attribute = tokenName.split("-")[1]; + // type = attribute; + // } else if (semantic === "shadow") { + // if (tokenName.includes("color")) { + // type = "color"; + // } else { + // type = "shadow"; + // const [offsetX, offsetY, blur, spread, color] = tokenValue.split(" "); + // tokenValue = { + // offsetX: offsetX, + // offsetY: offsetY, + // blur: blur, + // spread: spread, + // color: formatValue(stripVarFunc(color)), + // }; + // const rawColor = variables[stripVarFunc(color)]; + // rawValue = `${offsetX}, ${offsetY}, ${blur}, ${spread}, ${rawColor}`; + // } + // } else if (semantic === "color") { + // if (tokenName.includes("fade")) { + // type = "color"; + + // const colorToken = `${tokenName.split("-fade")[0]}`; + // const rawColorValue = variables[`--salt-${colorToken}`]; + + // const opacityValue = stripVarFunc(tokenValue.split(",")[3]); + // const foundationOpacityValue = variables[`${opacityValue}`]; + + // // e.g. --salt-palette-opacity-disabled -> --salt-opacity-40 + // if (foundationOpacityValue.includes("opacity")) { + // const opacityAlias = stripVarFunc(foundationOpacityValue); + // let rawOpacityValue = variables[`${opacityAlias}`]; + // tokenValue = { + // color: formatValue(colorToken), + // opacity: formatValue(opacityAlias), + // }; + // rawValue = `${rawColorValue + // .replace("rgb", "rgba") + // .replace(")", "")}, ${rawOpacityValue})`; + // } + // // eg. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover + // else { + // tokenValue = { + // color: formatValue(colorToken), + // opacity: formatValue(opacityValue), + // }; + // rawValue = `${rawColorValue + // .replace("rgb", "rgba") + // .replace(")", "")}, ${foundationOpacityValue})`; + // } + // } else { + // type = "color"; + // } + // } + + // if (type) { + // jsonTokens["foundations"][semantic] = { + // [tokenName]: { + // $value: tokenValue, + // $type: type, + // ...(rawValue && { + // $rawValue: rawValue, + // }), + // }, + // ...jsonTokens["foundations"][semantic], + // }; + // } + // } } console.log(util.inspect(jsonTokens, false, null, true /* enable colors */)); @@ -154,9 +191,9 @@ function themeToJson() { const paletteVariables = getCssVariablesFromDir( path.resolve(__dirname, "../css/palette") ); - const foundationVariables = {getCssVariablesFromDir( + const foundationVariables = getCssVariablesFromDir( path.resolve(__dirname, "../css/foundations") - );} + ); format({ ...paletteVariables, ...foundationVariables }); } From ade7d7b3f506a1419dc6dddc2d3af7531a1e0abf Mon Sep 17 00:00:00 2001 From: libertymayc Date: Mon, 11 Mar 2024 16:09:21 -0400 Subject: [PATCH 22/50] use groupings --- packages/theme/css/foundations/fade.css | 2 + packages/theme/css/foundations/shadow.css | 1 + packages/theme/json/example.json | 532 ++++++++++++++-------- packages/theme/json/themeToJson.js | 209 +++++---- 4 files changed, 468 insertions(+), 276 deletions(-) diff --git a/packages/theme/css/foundations/fade.css b/packages/theme/css/foundations/fade.css index ed2797dffad..bcb4de547ae 100644 --- a/packages/theme/css/foundations/fade.css +++ b/packages/theme/css/foundations/fade.css @@ -56,6 +56,7 @@ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled)); --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled)); + /* -separatorOpacity would be better off within -border collection ? */ --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border)); --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border)); --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border)); @@ -63,6 +64,7 @@ --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border)); --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); + /* These are the only tokens directly using opacity rather than through palette */ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8)); } diff --git a/packages/theme/css/foundations/shadow.css b/packages/theme/css/foundations/shadow.css index 7fa72c06894..666c19af5e3 100644 --- a/packages/theme/css/foundations/shadow.css +++ b/packages/theme/css/foundations/shadow.css @@ -1,4 +1,5 @@ .salt-theme[data-mode="light"] { + /* these should probably be related to fade tokens with black value? */ --salt-shadow-100-color: rgba(0, 0, 0, 0.1); --salt-shadow-200-color: rgba(0, 0, 0, 0.1); --salt-shadow-300-color: rgba(0, 0, 0, 0.15); diff --git a/packages/theme/json/example.json b/packages/theme/json/example.json index 310d5009c78..c7901562112 100644 --- a/packages/theme/json/example.json +++ b/packages/theme/json/example.json @@ -2,505 +2,505 @@ "palette": { "accent": { "palette-accent-foreground": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-accent-border": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" }, "palette-accent-background": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" } }, "corner": { "palette-corner-strongest": { - "$value": "{curve-999}", + "$value": "{foundations.curve.curve-999}", "$type": "dimension", "$rawValue": "999px" }, "palette-corner": { - "$value": "{curve-0}", + "$value": "{foundations.curve.curve-0}", "$type": "dimension", "$rawValue": "0" }, "palette-corner-weak": { - "$value": "{curve-0}", + "$value": "{foundations.curve.curve-0}", "$type": "dimension", "$rawValue": "0" }, "palette-corner-weaker": { - "$value": "{curve-0}", + "$value": "{foundations.curve.curve-0}", "$type": "dimension", "$rawValue": "0" } }, "error": { "palette-error-foreground": { - "$value": "{color-red-500}", + "$value": "{foundations.color.color-red-500}", "$type": "color", "$rawValue": "rgb(227, 43, 22)" }, "palette-error-border": { - "$value": "{color-red-500}", + "$value": "{foundations.color.color-red-500}", "$type": "color", "$rawValue": "rgb(227, 43, 22)" }, "palette-error-background-selected": { - "$value": "{color-red-900}", + "$value": "{foundations.color.color-red-900}", "$type": "color", "$rawValue": "rgb(65, 37, 34)" }, "palette-error-background": { - "$value": "{color-red-900}", + "$value": "{foundations.color.color-red-900}", "$type": "color", "$rawValue": "rgb(65, 37, 34)" } }, "info": { "palette-info-foreground": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" }, "palette-info-border": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" }, "palette-info-background": { - "$value": "{color-blue-900}", + "$value": "{foundations.color.color-blue-900}", "$type": "color", "$rawValue": "rgb(35, 47, 56)" } }, "interact": { "palette-interact-secondary-foreground-hover": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-secondary-foreground-disabled": { - "$value": "{color-white-fade-foreground}", + "$value": "{foundations.color.color-white-fade-foreground}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "palette-interact-secondary-foreground-active": { - "$value": "{color-gray-900}", + "$value": "{foundations.color.color-gray-900}", "$type": "color", "$rawValue": "rgb(22, 22, 22)" }, "palette-interact-secondary-foreground": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-secondary-background-hover": { - "$value": "{color-gray-200}", + "$value": "{foundations.color.color-gray-200}", "$type": "color", "$rawValue": "rgb(97, 101, 110)" }, "palette-interact-secondary-background-disabled": { - "$value": "{transparent}", + "$value": "transparent", "$type": "color" }, "palette-interact-secondary-background-active": { - "$value": "{color-gray-70}", + "$value": "{foundations.color.color-gray-70}", "$type": "color", "$rawValue": "rgb(180, 183, 190)" }, "palette-interact-secondary-background": { - "$value": "{transparent}", + "$value": "transparent", "$type": "color" }, "palette-interact-primary-foreground-hover": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-primary-foreground-disabled": { - "$value": "{color-white-fade-foreground}", + "$value": "{foundations.color.color-white-fade-foreground}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "palette-interact-primary-foreground-active": { - "$value": "{color-gray-900}", + "$value": "{foundations.color.color-gray-900}", "$type": "color", "$rawValue": "rgb(22, 22, 22)" }, "palette-interact-primary-foreground": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-primary-background-hover": { - "$value": "{color-gray-200}", + "$value": "{foundations.color.color-gray-200}", "$type": "color", "$rawValue": "rgb(97, 101, 110)" }, "palette-interact-primary-background-disabled": { - "$value": "{color-gray-300-fade-background}", + "$value": "{foundations.color.color-gray-300-fade-background}", "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "palette-interact-primary-background-active": { - "$value": "{color-gray-70}", + "$value": "{foundations.color.color-gray-70}", "$type": "color", "$rawValue": "rgb(180, 183, 190)" }, "palette-interact-primary-background": { - "$value": "{color-gray-300}", + "$value": "{foundations.color.color-gray-300}", "$type": "color", "$rawValue": "rgb(76, 80, 91)" }, "palette-interact-cta-foreground-hover": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-cta-foreground-disabled": { - "$value": "{color-white-fade-foreground}", + "$value": "{foundations.color.color-white-fade-foreground}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "palette-interact-cta-foreground-active": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-cta-foreground": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-interact-cta-background-hover": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" }, "palette-interact-cta-background-disabled": { - "$value": "{color-blue-600-fade-background}", + "$value": "{foundations.color.color-blue-600-fade-background}", "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "palette-interact-cta-background-active": { - "$value": "{color-blue-700}", + "$value": "{foundations.color.color-blue-700}", "$type": "color", "$rawValue": "rgb(0, 71, 123)" }, "palette-interact-cta-background": { - "$value": "{color-blue-600}", + "$value": "{foundations.color.color-blue-600}", "$type": "color", "$rawValue": "rgb(21, 92, 147)" }, "palette-interact-outline": { - "$value": "{color-blue-100}", + "$value": "{foundations.color.color-blue-100}", "$type": "color", "$rawValue": "rgb(100, 177, 228)" }, "palette-interact-foreground-hover": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" }, "palette-interact-foreground-disabled": { - "$value": "{color-gray-90-fade-foreground}", + "$value": "{foundations.color.color-gray-90-fade-foreground}", "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.4)" }, "palette-interact-foreground-activeDisabled": { - "$value": "{color-blue-100-fade-foreground}", + "$value": "{foundations.color.color-blue-100-fade-foreground}", "$type": "color", "$rawValue": "rgba(100, 177, 228, 0.4)" }, "palette-interact-foreground-active": { - "$value": "{color-blue-100}", + "$value": "{foundations.color.color-blue-100}", "$type": "color", "$rawValue": "rgb(100, 177, 228)" }, "palette-interact-foreground": { - "$value": "{color-gray-90}", + "$value": "{foundations.color.color-gray-90}", "$type": "color", "$rawValue": "rgb(132, 135, 142)" }, "palette-interact-border-readonly": { - "$value": "{color-gray-90-fade-border-readonly}", + "$value": "{foundations.color.color-gray-90-fade-border-readonly}", "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.15)" }, "palette-interact-border-hover": { - "$value": "{color-blue-500}", + "$value": "{foundations.color.color-blue-500}", "$type": "color", "$rawValue": "rgb(38, 112, 169)" }, "palette-interact-border-disabled": { - "$value": "{color-gray-90-fade-border}", + "$value": "{foundations.color.color-gray-90-fade-border}", "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.4)" }, "palette-interact-border-activeDisabled": { - "$value": "{color-blue-100-fade-fill}", + "$value": "{foundations.color.color-blue-100-fade-fill}", "$type": "color", "$rawValue": "rgba(100, 177, 228, 0.4)" }, "palette-interact-border-active": { - "$value": "{color-blue-100}", + "$value": "{foundations.color.color-blue-100}", "$type": "color", "$rawValue": "rgb(100, 177, 228)" }, "palette-interact-border": { - "$value": "{color-gray-90}", + "$value": "{foundations.color.color-gray-90}", "$type": "color", "$rawValue": "rgb(132, 135, 142)" }, "palette-interact-background-activeDisabled": { - "$value": "{color-blue-700-fade-background}", + "$value": "{foundations.color.color-blue-700-fade-background}", "$type": "color", "$rawValue": "rgba(0, 71, 123, 0.4)" }, "palette-interact-background-disabled": { - "$value": "{transparent}", + "$value": "transparent", "$type": "color" }, "palette-interact-background-active": { - "$value": "{color-blue-700}", + "$value": "{foundations.color.color-blue-700}", "$type": "color", "$rawValue": "rgb(0, 71, 123)" }, "palette-interact-background-hover": { - "$value": "{color-blue-800}", + "$value": "{foundations.color.color-blue-800}", "$type": "color", "$rawValue": "rgb(39, 60, 77)" }, "palette-interact-background-blurSelected": { - "$value": "{color-gray-600}", + "$value": "{foundations.color.color-gray-600}", "$type": "color", "$rawValue": "rgb(47, 49, 54)" }, "palette-interact-background": { - "$value": "{transparent}", + "$value": "transparent", "$type": "color" } }, "navigate": { "palette-navigate-indicator-active": { - "$value": "{color-orange-400}", + "$value": "{foundations.color.color-orange-400}", "$type": "color", "$rawValue": "rgb(238, 133, 43)" }, "palette-navigate-indicator-hover": { - "$value": "{color-gray-90}", + "$value": "{foundations.color.color-gray-90}", "$type": "color", "$rawValue": "rgb(132, 135, 142)" }, "palette-navigate-foreground-visited": { - "$value": "{color-purple-100}", + "$value": "{foundations.color.color-purple-100}", "$type": "color", "$rawValue": "rgb(223, 156, 225)" }, "palette-navigate-foreground-active": { - "$value": "{color-blue-300}", + "$value": "{foundations.color.color-blue-300}", "$type": "color", "$rawValue": "rgb(51, 141, 205)" }, "palette-navigate-foreground-hover": { - "$value": "{color-blue-200}", + "$value": "{foundations.color.color-blue-200}", "$type": "color", "$rawValue": "rgb(75, 159, 216)" }, "palette-navigate-background-hover": { - "$value": "{color-white-fade-background-hover}", + "$value": "{foundations.color.color-white-fade-background-hover}", "$type": "color", - "$rawValue": "rgba(255, 255, 255, var(--salt-opacity-8))" + "$rawValue": "rgba(255, 255, 255, 0.08)" } }, "negative": { "palette-negative-foreground": { - "$value": "{color-red-300}", + "$value": "{foundations.color.color-red-300}", "$type": "color", "$rawValue": "rgb(255, 89, 66)" } }, "neutral": { "palette-neutral-tertiary-separator": { - "$value": "{color-white-fade-separatorOpacity-tertiary}", + "$value": "{foundations.color.color-white-fade-separatorOpacity-tertiary}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.15)" }, "palette-neutral-secondary-separator": { - "$value": "{color-white-fade-separatorOpacity-secondary}", + "$value": "{foundations.color.color-white-fade-separatorOpacity-secondary}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.25)" }, "palette-neutral-backdrop": { - "$value": "{color-black-fade-backdrop}", + "$value": "{foundations.color.color-black-fade-backdrop}", "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.7)" }, "palette-neutral-secondary-foreground-disabled": { - "$value": "{color-gray-70-fade-foreground}", + "$value": "{foundations.color.color-gray-70-fade-foreground}", "$type": "color", "$rawValue": "rgba(180, 183, 190, 0.4)" }, "palette-neutral-secondary-foreground": { - "$value": "{color-gray-70}", + "$value": "{foundations.color.color-gray-70}", "$type": "color", "$rawValue": "rgb(180, 183, 190)" }, "palette-neutral-secondary-border-disabled": { - "$value": "{color-gray-300-fade-border}", + "$value": "{foundations.color.color-gray-300-fade-border}", "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "palette-neutral-secondary-border": { - "$value": "{color-gray-300}", + "$value": "{foundations.color.color-gray-300}", "$type": "color", "$rawValue": "rgb(76, 80, 91)" }, "palette-neutral-secondary-background-readonly": { - "$value": "{color-gray-600-fade-background-readonly}", + "$value": "{foundations.color.color-gray-600-fade-background-readonly}", "$type": "color", "$rawValue": "rgba(47, 49, 54, 0)" }, "palette-neutral-secondary-background-disabled": { - "$value": "{color-gray-600-fade-background}", + "$value": "{foundations.color.color-gray-600-fade-background}", "$type": "color", "$rawValue": "rgba(47, 49, 54, 0.4)" }, "palette-neutral-secondary-background": { - "$value": "{color-gray-600}", + "$value": "{foundations.color.color-gray-600}", "$type": "color", "$rawValue": "rgb(47, 49, 54)" }, "palette-neutral-primary-border-disabled": { - "$value": "{color-gray-300-fade-border}", + "$value": "{foundations.color.color-gray-300-fade-border}", "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "palette-neutral-primary-border": { - "$value": "{color-gray-300}", + "$value": "{foundations.color.color-gray-300}", "$type": "color", "$rawValue": "rgb(76, 80, 91)" }, "palette-neutral-primary-separator": { - "$value": "{color-white-fade-separatorOpacity-primary}", + "$value": "{foundations.color.color-white-fade-separatorOpacity-primary}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "palette-neutral-primary-foreground-disabled": { - "$value": "{color-white-fade-foreground}", + "$value": "{foundations.color.color-white-fade-foreground}", "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "palette-neutral-primary-foreground": { - "$value": "{color-white}", + "$value": "{foundations.color.color-white}", "$type": "color", "$rawValue": "rgb(255, 255, 255)" }, "palette-neutral-primary-background-readonly": { - "$value": "{color-gray-800-fade-background-readonly}", + "$value": "{foundations.color.color-gray-800-fade-background-readonly}", "$type": "color", "$rawValue": "rgba(36, 37, 38, 0)" }, "palette-neutral-primary-background-disabled": { - "$value": "{color-gray-800-fade-background}", + "$value": "{foundations.color.color-gray-800-fade-background}", "$type": "color", "$rawValue": "rgba(36, 37, 38, 0.4)" }, "palette-neutral-primary-background": { - "$value": "{color-gray-800}", + "$value": "{foundations.color.color-gray-800}", "$type": "color", "$rawValue": "rgb(36, 37, 38)" } }, "opacity": { "palette-opacity-tertiary-border": { - "$value": "{opacity-15}", + "$value": "{foundations.opacity.opacity-15}", "$type": "number", "$rawValue": "0.15" }, "palette-opacity-secondary-border": { - "$value": "{opacity-25}", + "$value": "{foundations.opacity.opacity-25}", "$type": "number", "$rawValue": "0.25" }, "palette-opacity-primary-border": { - "$value": "{opacity-40}", + "$value": "{foundations.opacity.opacity-40}", "$type": "number", "$rawValue": "0.4" }, "palette-opacity-border-readonly": { - "$value": "{opacity-15}", + "$value": "{foundations.opacity.opacity-15}", "$type": "number", "$rawValue": "0.15" }, "palette-opacity-background-readonly": { - "$value": "{opacity-0}", + "$value": "{foundations.opacity.opacity-0}", "$type": "number", "$rawValue": "0" }, "palette-opacity-disabled": { - "$value": "{opacity-40}", + "$value": "{foundations.opacity.opacity-40}", "$type": "number", "$rawValue": "0.4" }, "palette-opacity-backdrop": { - "$value": "{opacity-70}", + "$value": "{foundations.opacity.opacity-70}", "$type": "number", "$rawValue": "0.7" } }, "positive": { "palette-positive-foreground": { - "$value": "{color-green-300}", + "$value": "{foundations.color.color-green-300}", "$type": "color", "$rawValue": "rgb(60, 171, 96)" } }, "success": { "palette-success-foreground": { - "$value": "{color-green-400}", + "$value": "{foundations.color.color-green-400}", "$type": "color", "$rawValue": "rgb(48, 156, 90)" }, "palette-success-border": { - "$value": "{color-green-400}", + "$value": "{foundations.color.color-green-400}", "$type": "color", "$rawValue": "rgb(48, 156, 90)" }, "palette-success-background-selected": { - "$value": "{color-green-900}", + "$value": "{foundations.color.color-green-900}", "$type": "color", "$rawValue": "rgb(35, 52, 43)" }, "palette-success-background": { - "$value": "{color-green-900}", + "$value": "{foundations.color.color-green-900}", "$type": "color", "$rawValue": "rgb(35, 52, 43)" } }, "warning": { "palette-warning-foreground": { - "$value": "{color-orange-500}", + "$value": "{foundations.color.color-orange-500}", "$type": "color", "$rawValue": "rgb(234, 115, 25)" }, "palette-warning-border": { - "$value": "{color-orange-500}", + "$value": "{foundations.color.color-orange-500}", "$type": "color", "$rawValue": "rgb(234, 115, 25)" }, "palette-warning-background-selected": { - "$value": "{color-orange-900}", + "$value": "{foundations.color.color-orange-900}", "$type": "color", "$rawValue": "rgb(54, 44, 36)" }, "palette-warning-background": { - "$value": "{color-orange-900}", + "$value": "{foundations.color.color-orange-900}", "$type": "color", "$rawValue": "rgb(54, 44, 36)" } @@ -509,292 +509,466 @@ "foundations": { "color": { "color-white-fade-background-hover": { - "$value": { "color": "{color-white}", "opacity": "{opacity-8}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-8}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.08)" }, "color-black-fade-background-hover": { - "$value": { "color": "{color-black}", "opacity": "{opacity-8}" }, + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-8}" + }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.08)" }, "color-black-fade-separatorOpacity-tertiary": { - "$value": { "color": "{color-black}", "opacity": "{opacity-15}" }, + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-15}" + }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.15)" }, "color-black-fade-separatorOpacity-secondary": { - "$value": { "color": "{color-black}", "opacity": "{opacity-25}" }, + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-25}" + }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.25)" }, "color-black-fade-separatorOpacity-primary": { - "$value": { "color": "{color-black}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.4)" }, "color-white-fade-separatorOpacity-tertiary": { - "$value": { "color": "{color-white}", "opacity": "{opacity-15}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-15}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.15)" }, "color-white-fade-separatorOpacity-secondary": { - "$value": { "color": "{color-white}", "opacity": "{opacity-25}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-25}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.25)" }, "color-white-fade-separatorOpacity-primary": { - "$value": { "color": "{color-white}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "color-blue-600-fade-fill": { - "$value": { "color": "{color-blue-600}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "color-blue-100-fade-fill": { - "$value": { "color": "{color-blue-100}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-100}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(100, 177, 228, 0.4)" }, "color-black-fade-backdrop": { - "$value": { "color": "{color-black}", "opacity": "{opacity-70}" }, + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-70}" + }, "$type": "color", "$rawValue": "rgba(0, 0, 0, 0.7)" }, "color-white-fade-backdrop": { - "$value": { "color": "{color-white}", "opacity": "{opacity-70}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-70}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.7)" }, "color-gray-800-fade-background-readonly": { - "$value": { "color": "{color-gray-800}", "opacity": "{opacity-0}" }, + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{foundations.opacity.opacity-0}" + }, "$type": "color", "$rawValue": "rgba(36, 37, 38, 0)" }, "color-gray-600-fade-background-readonly": { - "$value": { "color": "{color-gray-600}", "opacity": "{opacity-0}" }, + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{foundations.opacity.opacity-0}" + }, "$type": "color", "$rawValue": "rgba(47, 49, 54, 0)" }, "color-gray-20-fade-background-readonly": { - "$value": { "color": "{color-gray-20}", "opacity": "{opacity-0}" }, + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{foundations.opacity.opacity-0}" + }, "$type": "color", "$rawValue": "rgba(234, 237, 239, 0)" }, "color-white-fade-background-readonly": { - "$value": { "color": "{color-white}", "opacity": "{opacity-0}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-0}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0)" }, "color-white-fade-background": { - "$value": { "color": "{color-white}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "color-gray-800-fade-background": { - "$value": { "color": "{color-gray-800}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(36, 37, 38, 0.4)" }, "color-gray-600-fade-background": { - "$value": { "color": "{color-gray-600}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(47, 49, 54, 0.4)" }, "color-gray-300-fade-background": { - "$value": { "color": "{color-gray-300}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "color-gray-200-fade-background": { - "$value": { "color": "{color-gray-200}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.4)" }, "color-gray-70-fade-background": { - "$value": { "color": "{color-gray-70}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-70}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(180, 183, 190, 0.4)" }, "color-gray-60-fade-background": { - "$value": { "color": "{color-gray-60}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(197, 201, 208, 0.4)" }, "color-gray-20-fade-background": { - "$value": { "color": "{color-gray-20}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(234, 237, 239, 0.4)" }, "color-blue-700-fade-background": { - "$value": { "color": "{color-blue-700}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(0, 71, 123, 0.4)" }, "color-blue-600-fade-background": { - "$value": { "color": "{color-blue-600}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "color-blue-500-fade-background": { - "$value": { "color": "{color-blue-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(38, 112, 169, 0.4)" }, "color-blue-30-fade-background": { - "$value": { "color": "{color-blue-30}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-30}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(164, 213, 244, 0.4)" }, "color-gray-200-fade-border-readonly": { - "$value": { "color": "{color-gray-200}", "opacity": "{opacity-15}" }, + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{foundations.opacity.opacity-15}" + }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.15)" }, "color-gray-90-fade-border-readonly": { - "$value": { "color": "{color-gray-90}", "opacity": "{opacity-15}" }, + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{foundations.opacity.opacity-15}" + }, "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.15)" }, "color-red-500-fade-border": { - "$value": { "color": "{color-red-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(227, 43, 22, 0.4)" }, "color-orange-700-fade-border": { - "$value": { "color": "{color-orange-700}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-orange-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(214, 85, 19, 0.4)" }, "color-orange-600-fade-border": { - "$value": { "color": "{color-orange-600}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-orange-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(224, 101, 25, 0.4)" }, "color-orange-500-fade-border": { - "$value": { "color": "{color-orange-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-orange-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(234, 115, 25, 0.4)" }, "color-orange-400-fade-border": { - "$value": { "color": "{color-orange-400}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-orange-400}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(238, 133, 43, 0.4)" }, "color-green-500-fade-border": { - "$value": { "color": "{color-green-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-green-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(36, 135, 75, 0.4)" }, "color-green-400-fade-border": { - "$value": { "color": "{color-green-400}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-green-400}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(48, 156, 90, 0.4)" }, "color-gray-300-fade-border": { - "$value": { "color": "{color-gray-300}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(76, 80, 91, 0.4)" }, "color-gray-200-fade-border": { - "$value": { "color": "{color-gray-200}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.4)" }, "color-gray-90-fade-border": { - "$value": { "color": "{color-gray-90}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.4)" }, "color-gray-60-fade-border": { - "$value": { "color": "{color-gray-60}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(197, 201, 208, 0.4)" }, "color-gray-50-fade-border": { - "$value": { "color": "{color-gray-50}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-50}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(206, 210, 217, 0.4)" }, "color-blue-500-fade-border": { - "$value": { "color": "{color-blue-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(38, 112, 169, 0.4)" }, "color-white-fade-foreground": { - "$value": { "color": "{color-white}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(255, 255, 255, 0.4)" }, "color-red-700-fade-foreground": { - "$value": { "color": "{color-red-700}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-red-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(166, 21, 11, 0.4)" }, "color-red-500-fade-foreground": { - "$value": { "color": "{color-red-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(227, 43, 22, 0.4)" }, "color-red-300-fade-foreground": { - "$value": { "color": "{color-red-300}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-red-300}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(255, 89, 66, 0.4)" }, "color-green-700-fade-foreground": { - "$value": { "color": "{color-green-700}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-green-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(12, 93, 46, 0.4)" }, "color-green-500-fade-foreground": { - "$value": { "color": "{color-green-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-green-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(36, 135, 75, 0.4)" }, "color-green-400-fade-foreground": { - "$value": { "color": "{color-green-400}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-green-400}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(48, 156, 90, 0.4)" }, "color-green-300-fade-foreground": { - "$value": { "color": "{color-green-300}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-green-300}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(60, 171, 96, 0.4)" }, "color-gray-900-fade-foreground": { - "$value": { "color": "{color-gray-900}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-900}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(22, 22, 22, 0.4)" }, "color-gray-90-fade-foreground": { - "$value": { "color": "{color-gray-90}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(132, 135, 142, 0.4)" }, "color-gray-70-fade-foreground": { - "$value": { "color": "{color-gray-70}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-70}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(180, 183, 190, 0.4)" }, "color-gray-200-fade-foreground": { - "$value": { "color": "{color-gray-200}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(97, 101, 110, 0.4)" }, "color-blue-600-fade-foreground": { - "$value": { "color": "{color-blue-600}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(21, 92, 147, 0.4)" }, "color-blue-500-fade-foreground": { - "$value": { "color": "{color-blue-500}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(38, 112, 169, 0.4)" }, "color-blue-100-fade-foreground": { - "$value": { "color": "{color-blue-100}", "opacity": "{opacity-40}" }, + "$value": { + "color": "{foundations.color.color-blue-100}", + "opacity": "{foundations.opacity.opacity-40}" + }, "$type": "color", "$rawValue": "rgba(100, 177, 228, 0.4)" }, @@ -931,7 +1105,7 @@ "offsetY": "12px", "blur": "40px", "spread": "0", - "color": "{shadow-500-color}" + "color": "{foundations.color.shadow-500-color}" }, "$type": "shadow", "$rawValue": "0, 12px, 40px, 0, rgba(0, 0, 0, 0.65)" @@ -942,7 +1116,7 @@ "offsetY": "6px", "blur": "10px", "spread": "0", - "color": "{shadow-400-color}" + "color": "{foundations.color.shadow-400-color}" }, "$type": "shadow", "$rawValue": "0, 6px, 10px, 0, rgba(0, 0, 0, 0.55)" @@ -953,7 +1127,7 @@ "offsetY": "4px", "blur": "8px", "spread": "0", - "color": "{shadow-300-color}" + "color": "{foundations.color.shadow-300-color}" }, "$type": "shadow", "$rawValue": "0, 4px, 8px, 0, rgba(0, 0, 0, 0.55)" @@ -964,7 +1138,7 @@ "offsetY": "2px", "blur": "4px", "spread": "0", - "color": "{shadow-200-color}" + "color": "{foundations.color.shadow-200-color}" }, "$type": "shadow", "$rawValue": "0, 2px, 4px, 0, rgba(0, 0, 0, 0.5)" @@ -975,7 +1149,7 @@ "offsetY": "1px", "blur": "3px", "spread": "0", - "color": "{shadow-100-color}" + "color": "{foundations.color.shadow-100-color}" }, "$type": "shadow", "$rawValue": "0, 1px, 3px, 0, rgba(0, 0, 0, 0.5)" @@ -1000,49 +1174,49 @@ }, "spacing": { "spacing-400": { - "$value": "calc(4*{spacing-100})", + "$value": "16", "$type": "dimension", - "$rawValue": "16" + "$calculation": "4*{spacing-100}" }, "spacing-350": { - "$value": "calc(3.5*{spacing-100})", + "$value": "14", "$type": "dimension", - "$rawValue": "14" + "$calculation": "3.5*{spacing-100}" }, "spacing-300": { - "$value": "calc(3*{spacing-100})", + "$value": "12", "$type": "dimension", - "$rawValue": "12" + "$calculation": "3*{spacing-100}" }, "spacing-250": { - "$value": "calc(2.5*{spacing-100})", + "$value": "10", "$type": "dimension", - "$rawValue": "10" + "$calculation": "2.5*{spacing-100}" }, "spacing-200": { - "$value": "calc(2*{spacing-100})", + "$value": "8", "$type": "dimension", - "$rawValue": "8" + "$calculation": "2*{spacing-100}" }, "spacing-150": { - "$value": "calc(1.5*{spacing-100})", + "$value": "6", "$type": "dimension", - "$rawValue": "6" + "$calculation": "1.5*{spacing-100}" }, "spacing-75": { - "$value": "calc(0.75*{spacing-100})", + "$value": "3", "$type": "dimension", - "$rawValue": "3" + "$calculation": "0.75*{spacing-100}" }, "spacing-50": { - "$value": "calc(0.5*{spacing-100})", + "$value": "2", "$type": "dimension", - "$rawValue": "2" + "$calculation": "0.5*{spacing-100}" }, "spacing-25": { - "$value": "calc(0.25*{spacing-100})", + "$value": "1", "$type": "dimension", - "$rawValue": "1" + "$calculation": "0.25*{spacing-100}" }, "spacing-100": { "$value": "4px", "$type": "dimension" } }, diff --git a/packages/theme/json/themeToJson.js b/packages/theme/json/themeToJson.js index e5695b7019b..86955c296bd 100644 --- a/packages/theme/json/themeToJson.js +++ b/packages/theme/json/themeToJson.js @@ -58,6 +58,7 @@ function format(variables) { var tokenValue = token[1]; let type; let rawValue; + let calculation; if (tokenName.startsWith("palette")) { const semantic = tokenName.split("-")[1]; @@ -70,17 +71,28 @@ function format(variables) { } const aliasToken = stripVarFunc(tokenValue); let rawValue = variables[`${aliasToken}`]; - if (rawValue && rawValue.includes("palette-opacity")) { + if (rawValue && rawValue.includes("opacity")) { let opacityToken = rawValue.split(",")[3]; + let opacityValue = variables[stripVarFunc(opacityToken)]; rawValue = rawValue.split(",").slice(0, 3).join(",") + `, ${ - variables[stripVarFunc(variables[stripVarFunc(opacityToken)])] + opacityValue.includes("opacity") + ? variables[stripVarFunc(opacityValue)] + : opacityValue })`; } jsonTokens["palette"][semantic] = { [tokenName]: { - $value: formatValue(aliasToken), + $value: !rawValue + ? "transparent" + : `{foundations.${ + semantic === "corner" + ? "curve" + : semantic === "opacity" + ? "opacity" + : "color" + }.${removePrefix(aliasToken)}}`, $type: type, ...(rawValue && { $rawValue: rawValue, @@ -88,100 +100,103 @@ function format(variables) { }, ...jsonTokens["palette"][semantic], }; - } - // else { - // const semantic = tokenName.split("-")[0]; - // if (["curve", "size"].includes(semantic)) { - // type = "dimension"; - // } else if (semantic === "spacing") { - // type = "dimension"; - // if (tokenValue.includes("calc")) { - // let [multiplier, multipleToken] = tokenValue - // .replace("calc(", "") - // .replace(")", "") - // .split(" * "); - // tokenValue = removePrefix(stripVarFunc(tokenValue)) - // .replace("spacing", `{spacing`) - // .replace("100", "100})"); - // multipleToken = variables[stripVarFunc(multipleToken)].replace( - // "px", - // "" - // ); - // rawValue = `${multiplier * multipleToken}`; - // } - // } else if (["opacity", "zIndex"].includes(semantic)) { - // type = "number"; - // } else if (semantic === "duration") { - // type = "duration"; - // } else if (semantic === "typography") { - // const attribute = tokenName.split("-")[1]; - // type = attribute; - // } else if (semantic === "shadow") { - // if (tokenName.includes("color")) { - // type = "color"; - // } else { - // type = "shadow"; - // const [offsetX, offsetY, blur, spread, color] = tokenValue.split(" "); - // tokenValue = { - // offsetX: offsetX, - // offsetY: offsetY, - // blur: blur, - // spread: spread, - // color: formatValue(stripVarFunc(color)), - // }; - // const rawColor = variables[stripVarFunc(color)]; - // rawValue = `${offsetX}, ${offsetY}, ${blur}, ${spread}, ${rawColor}`; - // } - // } else if (semantic === "color") { - // if (tokenName.includes("fade")) { - // type = "color"; - - // const colorToken = `${tokenName.split("-fade")[0]}`; - // const rawColorValue = variables[`--salt-${colorToken}`]; - - // const opacityValue = stripVarFunc(tokenValue.split(",")[3]); - // const foundationOpacityValue = variables[`${opacityValue}`]; - - // // e.g. --salt-palette-opacity-disabled -> --salt-opacity-40 - // if (foundationOpacityValue.includes("opacity")) { - // const opacityAlias = stripVarFunc(foundationOpacityValue); - // let rawOpacityValue = variables[`${opacityAlias}`]; - // tokenValue = { - // color: formatValue(colorToken), - // opacity: formatValue(opacityAlias), - // }; - // rawValue = `${rawColorValue - // .replace("rgb", "rgba") - // .replace(")", "")}, ${rawOpacityValue})`; - // } - // // eg. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover - // else { - // tokenValue = { - // color: formatValue(colorToken), - // opacity: formatValue(opacityValue), - // }; - // rawValue = `${rawColorValue - // .replace("rgb", "rgba") - // .replace(")", "")}, ${foundationOpacityValue})`; - // } - // } else { - // type = "color"; - // } - // } - - // if (type) { - // jsonTokens["foundations"][semantic] = { - // [tokenName]: { - // $value: tokenValue, - // $type: type, - // ...(rawValue && { - // $rawValue: rawValue, - // }), - // }, - // ...jsonTokens["foundations"][semantic], - // }; - // } - // } + } else { + const semantic = tokenName.split("-")[0]; + if (["curve", "size"].includes(semantic)) { + type = "dimension"; + } else if (semantic === "spacing") { + type = "dimension"; + if (tokenValue.includes("calc")) { + let [multiplier, multipleToken] = tokenValue + .replace("calc(", "") + .replace(")", "") + .split(" * "); + multipleToken = variables[stripVarFunc(multipleToken)].replace( + "px", + "" + ); + calculation = removePrefix(stripVarFunc(tokenValue)) + .replace("spacing", `{spacing`) + .replace("100", "100}") + .replace("calc(", ""); + tokenValue = `${multiplier * multipleToken}`; + } + } else if (["opacity", "zIndex"].includes(semantic)) { + type = "number"; + } else if (semantic === "duration") { + type = "duration"; + } else if (semantic === "typography") { + const attribute = tokenName.split("-")[1]; + type = attribute; + } else if (semantic === "shadow") { + if (tokenName.includes("color")) { + type = "color"; + } else { + type = "shadow"; + const [offsetX, offsetY, blur, spread, color] = tokenValue.split(" "); + tokenValue = { + offsetX: offsetX, + offsetY: offsetY, + blur: blur, + spread: spread, + color: `{foundations.color.${removePrefix(stripVarFunc(color))}}`, + }; + const rawColor = variables[stripVarFunc(color)]; + rawValue = `${offsetX}, ${offsetY}, ${blur}, ${spread}, ${rawColor}`; + } + } else if (semantic === "color") { + if (tokenName.includes("fade")) { + type = "color"; + + const colorToken = `${tokenName.split("-fade")[0]}`; + const rawColorValue = variables[`--salt-${colorToken}`]; + + const opacityValue = stripVarFunc(tokenValue.split(",")[3]); + const foundationOpacityValue = variables[`${opacityValue}`]; + + // e.g. --salt-palette-opacity-disabled -> --salt-opacity-40 + if (foundationOpacityValue.includes("opacity")) { + const opacityAlias = stripVarFunc(foundationOpacityValue); + let rawOpacityValue = variables[`${opacityAlias}`]; + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{foundations.opacity.${removePrefix(opacityAlias)}}`, + }; + rawValue = `${rawColorValue + .replace("rgb", "rgba") + .replace(")", "")}, ${rawOpacityValue})`; + } + // eg. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover + else { + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{foundations.opacity.${removePrefix(opacityValue)}}`, + }; + rawValue = `${rawColorValue + .replace("rgb", "rgba") + .replace(")", "")}, ${foundationOpacityValue})`; + } + } else { + type = "color"; + } + } + + if (type) { + jsonTokens["foundations"][semantic] = { + [tokenName]: { + $value: tokenValue, + $type: type, + ...(rawValue && { + $rawValue: rawValue, + }), + ...(calculation && { + $calculation: calculation, + }), + }, + ...jsonTokens["foundations"][semantic], + }; + } + } } console.log(util.inspect(jsonTokens, false, null, true /* enable colors */)); From 51cd6a38942c3b1bf12d22e2089dd2fce29cbffc Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 12 Mar 2024 16:42:08 -0400 Subject: [PATCH 23/50] include density and mode in json --- packages/theme/json/example.json | 2053 +++++++++-------- packages/theme/json/getCssVariablesFromDir.js | 110 + packages/theme/json/themeToJson.js | 376 +-- 3 files changed, 1409 insertions(+), 1130 deletions(-) create mode 100644 packages/theme/json/getCssVariablesFromDir.js diff --git a/packages/theme/json/example.json b/packages/theme/json/example.json index c7901562112..4cb7d527256 100644 --- a/packages/theme/json/example.json +++ b/packages/theme/json/example.json @@ -1,1263 +1,1412 @@ { "palette": { "accent": { - "palette-accent-foreground": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-accent-background": { + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" }, "palette-accent-border": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" }, - "palette-accent-background": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" - } - }, - "corner": { - "palette-corner-strongest": { - "$value": "{foundations.curve.curve-999}", - "$type": "dimension", - "$rawValue": "999px" - }, - "palette-corner": { - "$value": "{foundations.curve.curve-0}", - "$type": "dimension", - "$rawValue": "0" - }, - "palette-corner-weak": { - "$value": "{foundations.curve.curve-0}", - "$type": "dimension", - "$rawValue": "0" - }, - "palette-corner-weaker": { - "$value": "{foundations.curve.curve-0}", - "$type": "dimension", - "$rawValue": "0" + "palette-accent-foreground": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-white}" + }, + "$type": "color" } }, "error": { - "palette-error-foreground": { - "$value": "{foundations.color.color-red-500}", - "$type": "color", - "$rawValue": "rgb(227, 43, 22)" - }, - "palette-error-border": { - "$value": "{foundations.color.color-red-500}", - "$type": "color", - "$rawValue": "rgb(227, 43, 22)" + "palette-error-background": { + "$value": { + "dark": "{foundations.color.color-red-900}", + "light": "{foundations.color.color-red-10}" + }, + "$type": "color" }, "palette-error-background-selected": { - "$value": "{foundations.color.color-red-900}", - "$type": "color", - "$rawValue": "rgb(65, 37, 34)" + "$value": { + "dark": "{foundations.color.color-red-900}", + "light": "{foundations.color.color-red-20}" + }, + "$type": "color" }, - "palette-error-background": { - "$value": "{foundations.color.color-red-900}", - "$type": "color", - "$rawValue": "rgb(65, 37, 34)" + "palette-error-border": { + "$value": { + "dark": "{foundations.color.color-red-500}", + "light": "{foundations.color.color-red-500}" + }, + "$type": "color" + }, + "palette-error-foreground": { + "$value": { + "dark": "{foundations.color.color-red-500}", + "light": "{foundations.color.color-red-500}" + }, + "$type": "color" } }, "info": { - "palette-info-foreground": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" + "palette-info-background": { + "$value": { + "dark": "{foundations.color.color-blue-900}", + "light": "{foundations.color.color-blue-10}" + }, + "$type": "color" }, "palette-info-border": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" }, - "palette-info-background": { - "$value": "{foundations.color.color-blue-900}", - "$type": "color", - "$rawValue": "rgb(35, 47, 56)" + "palette-info-foreground": { + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" } }, "interact": { - "palette-interact-secondary-foreground-hover": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" - }, - "palette-interact-secondary-foreground-disabled": { - "$value": "{foundations.color.color-white-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" + "palette-interact-background": { + "$value": { + "dark": "{foundations.color.transparent}", + "light": "{foundations.color.transparent}" + }, + "$type": "color" }, - "palette-interact-secondary-foreground-active": { - "$value": "{foundations.color.color-gray-900}", - "$type": "color", - "$rawValue": "rgb(22, 22, 22)" + "palette-interact-background-blurSelected": { + "$value": { + "dark": "{foundations.color.color-gray-600}", + "light": "{foundations.color.color-gray-30}" + }, + "$type": "color" }, - "palette-interact-secondary-foreground": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-interact-background-hover": { + "$value": { + "dark": "{foundations.color.color-blue-800}", + "light": "{foundations.color.color-blue-10}" + }, + "$type": "color" }, - "palette-interact-secondary-background-hover": { - "$value": "{foundations.color.color-gray-200}", - "$type": "color", - "$rawValue": "rgb(97, 101, 110)" + "palette-interact-background-active": { + "$value": { + "dark": "{foundations.color.color-blue-700}", + "light": "{foundations.color.color-blue-30}" + }, + "$type": "color" }, - "palette-interact-secondary-background-disabled": { - "$value": "transparent", + "palette-interact-background-disabled": { + "$value": { + "dark": "{foundations.color.transparent}", + "light": "{foundations.color.transparent}" + }, "$type": "color" }, - "palette-interact-secondary-background-active": { - "$value": "{foundations.color.color-gray-70}", - "$type": "color", - "$rawValue": "rgb(180, 183, 190)" + "palette-interact-background-activeDisabled": { + "$value": { + "dark": "{foundations.color.color-blue-700-fade-background}", + "light": "{foundations.color.color-blue-30-fade-background}" + }, + "$type": "color" }, - "palette-interact-secondary-background": { - "$value": "transparent", + "palette-interact-border": { + "$value": { + "dark": "{foundations.color.color-gray-90}", + "light": "{foundations.color.color-gray-200}" + }, "$type": "color" }, - "palette-interact-primary-foreground-hover": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-interact-border-active": { + "$value": { + "dark": "{foundations.color.color-blue-100}", + "light": "{foundations.color.color-blue-600}" + }, + "$type": "color" }, - "palette-interact-primary-foreground-disabled": { - "$value": "{foundations.color.color-white-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" + "palette-interact-border-activeDisabled": { + "$value": { + "dark": "{foundations.color.color-blue-100-fade-fill}", + "light": "{foundations.color.color-blue-600-fade-fill}" + }, + "$type": "color" }, - "palette-interact-primary-foreground-active": { - "$value": "{foundations.color.color-gray-900}", - "$type": "color", - "$rawValue": "rgb(22, 22, 22)" + "palette-interact-border-disabled": { + "$value": { + "dark": "{foundations.color.color-gray-90-fade-border}", + "light": "{foundations.color.color-gray-200-fade-border}" + }, + "$type": "color" }, - "palette-interact-primary-foreground": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-interact-border-hover": { + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" }, - "palette-interact-primary-background-hover": { - "$value": "{foundations.color.color-gray-200}", - "$type": "color", - "$rawValue": "rgb(97, 101, 110)" + "palette-interact-border-readonly": { + "$value": { + "dark": "{foundations.color.color-gray-90-fade-border-readonly}", + "light": "{foundations.color.color-gray-200-fade-border-readonly}" + }, + "$type": "color" }, - "palette-interact-primary-background-disabled": { - "$value": "{foundations.color.color-gray-300-fade-background}", - "$type": "color", - "$rawValue": "rgba(76, 80, 91, 0.4)" + "palette-interact-foreground": { + "$value": { + "dark": "{foundations.color.color-gray-90}", + "light": "{foundations.color.color-gray-200}" + }, + "$type": "color" }, - "palette-interact-primary-background-active": { - "$value": "{foundations.color.color-gray-70}", - "$type": "color", - "$rawValue": "rgb(180, 183, 190)" + "palette-interact-foreground-active": { + "$value": { + "dark": "{foundations.color.color-blue-100}", + "light": "{foundations.color.color-blue-600}" + }, + "$type": "color" }, - "palette-interact-primary-background": { - "$value": "{foundations.color.color-gray-300}", - "$type": "color", - "$rawValue": "rgb(76, 80, 91)" + "palette-interact-foreground-activeDisabled": { + "$value": { + "dark": "{foundations.color.color-blue-100-fade-foreground}", + "light": "{foundations.color.color-blue-600-fade-foreground}" + }, + "$type": "color" }, - "palette-interact-cta-foreground-hover": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-interact-foreground-disabled": { + "$value": { + "dark": "{foundations.color.color-gray-90-fade-foreground}", + "light": "{foundations.color.color-gray-200-fade-foreground}" + }, + "$type": "color" }, - "palette-interact-cta-foreground-disabled": { - "$value": "{foundations.color.color-white-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" + "palette-interact-foreground-hover": { + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" }, - "palette-interact-cta-foreground-active": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-interact-outline": { + "$value": { + "dark": "{foundations.color.color-blue-100}", + "light": "{foundations.color.color-blue-600}" + }, + "$type": "color" }, - "palette-interact-cta-foreground": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" + "palette-interact-cta-background": { + "$value": { + "dark": "{foundations.color.color-blue-600}", + "light": "{foundations.color.color-blue-600}" + }, + "$type": "color" }, - "palette-interact-cta-background-hover": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" + "palette-interact-cta-background-active": { + "$value": { + "dark": "{foundations.color.color-blue-700}", + "light": "{foundations.color.color-blue-700}" + }, + "$type": "color" }, "palette-interact-cta-background-disabled": { - "$value": "{foundations.color.color-blue-600-fade-background}", - "$type": "color", - "$rawValue": "rgba(21, 92, 147, 0.4)" + "$value": { + "dark": "{foundations.color.color-blue-600-fade-background}", + "light": "{foundations.color.color-blue-600-fade-background}" + }, + "$type": "color" }, - "palette-interact-cta-background-active": { - "$value": "{foundations.color.color-blue-700}", - "$type": "color", - "$rawValue": "rgb(0, 71, 123)" + "palette-interact-cta-background-hover": { + "$value": { + "dark": "{foundations.color.color-blue-500}", + "light": "{foundations.color.color-blue-500}" + }, + "$type": "color" }, - "palette-interact-cta-background": { - "$value": "{foundations.color.color-blue-600}", - "$type": "color", - "$rawValue": "rgb(21, 92, 147)" + "palette-interact-cta-foreground": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-white}" + }, + "$type": "color" }, - "palette-interact-outline": { - "$value": "{foundations.color.color-blue-100}", - "$type": "color", - "$rawValue": "rgb(100, 177, 228)" + "palette-interact-cta-foreground-active": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-white}" + }, + "$type": "color" }, - "palette-interact-foreground-hover": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" + "palette-interact-cta-foreground-disabled": { + "$value": { + "dark": "{foundations.color.color-white-fade-foreground}", + "light": "{foundations.color.color-white-fade-foreground}" + }, + "$type": "color" }, - "palette-interact-foreground-disabled": { - "$value": "{foundations.color.color-gray-90-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(132, 135, 142, 0.4)" + "palette-interact-cta-foreground-hover": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-white}" + }, + "$type": "color" }, - "palette-interact-foreground-activeDisabled": { - "$value": "{foundations.color.color-blue-100-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(100, 177, 228, 0.4)" + "palette-interact-primary-background": { + "$value": { + "dark": "{foundations.color.color-gray-300}", + "light": "{foundations.color.color-gray-60}" + }, + "$type": "color" }, - "palette-interact-foreground-active": { - "$value": "{foundations.color.color-blue-100}", - "$type": "color", - "$rawValue": "rgb(100, 177, 228)" + "palette-interact-primary-background-active": { + "$value": { + "dark": "{foundations.color.color-gray-70}", + "light": "{foundations.color.color-gray-200}" + }, + "$type": "color" }, - "palette-interact-foreground": { - "$value": "{foundations.color.color-gray-90}", - "$type": "color", - "$rawValue": "rgb(132, 135, 142)" + "palette-interact-primary-background-disabled": { + "$value": { + "dark": "{foundations.color.color-gray-300-fade-background}", + "light": "{foundations.color.color-gray-60-fade-background}" + }, + "$type": "color" }, - "palette-interact-border-readonly": { - "$value": "{foundations.color.color-gray-90-fade-border-readonly}", - "$type": "color", - "$rawValue": "rgba(132, 135, 142, 0.15)" + "palette-interact-primary-background-hover": { + "$value": { + "dark": "{foundations.color.color-gray-200}", + "light": "{foundations.color.color-gray-40}" + }, + "$type": "color" }, - "palette-interact-border-hover": { - "$value": "{foundations.color.color-blue-500}", - "$type": "color", - "$rawValue": "rgb(38, 112, 169)" + "palette-interact-primary-foreground": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-gray-900}" + }, + "$type": "color" }, - "palette-interact-border-disabled": { - "$value": "{foundations.color.color-gray-90-fade-border}", - "$type": "color", - "$rawValue": "rgba(132, 135, 142, 0.4)" + "palette-interact-primary-foreground-active": { + "$value": { + "dark": "{foundations.color.color-gray-900}", + "light": "{foundations.color.color-white}" + }, + "$type": "color" }, - "palette-interact-border-activeDisabled": { - "$value": "{foundations.color.color-blue-100-fade-fill}", - "$type": "color", - "$rawValue": "rgba(100, 177, 228, 0.4)" + "palette-interact-primary-foreground-disabled": { + "$value": { + "dark": "{foundations.color.color-white-fade-foreground}", + "light": "{foundations.color.color-gray-900-fade-foreground}" + }, + "$type": "color" }, - "palette-interact-border-active": { - "$value": "{foundations.color.color-blue-100}", - "$type": "color", - "$rawValue": "rgb(100, 177, 228)" + "palette-interact-primary-foreground-hover": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-gray-900}" + }, + "$type": "color" }, - "palette-interact-border": { - "$value": "{foundations.color.color-gray-90}", - "$type": "color", - "$rawValue": "rgb(132, 135, 142)" + "palette-interact-secondary-background": { + "$value": { + "dark": "{foundations.color.transparent}", + "light": "{foundations.color.transparent}" + }, + "$type": "color" }, - "palette-interact-background-activeDisabled": { - "$value": "{foundations.color.color-blue-700-fade-background}", - "$type": "color", - "$rawValue": "rgba(0, 71, 123, 0.4)" + "palette-interact-secondary-background-active": { + "$value": { + "dark": "{foundations.color.color-gray-70}", + "light": "{foundations.color.color-gray-200}" + }, + "$type": "color" }, - "palette-interact-background-disabled": { - "$value": "transparent", + "palette-interact-secondary-background-disabled": { + "$value": { + "dark": "{foundations.color.transparent}", + "light": "{foundations.color.transparent}" + }, "$type": "color" }, - "palette-interact-background-active": { - "$value": "{foundations.color.color-blue-700}", - "$type": "color", - "$rawValue": "rgb(0, 71, 123)" + "palette-interact-secondary-background-hover": { + "$value": { + "dark": "{foundations.color.color-gray-200}", + "light": "{foundations.color.color-gray-40}" + }, + "$type": "color" }, - "palette-interact-background-hover": { - "$value": "{foundations.color.color-blue-800}", - "$type": "color", - "$rawValue": "rgb(39, 60, 77)" + "palette-interact-secondary-foreground": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-gray-900}" + }, + "$type": "color" }, - "palette-interact-background-blurSelected": { - "$value": "{foundations.color.color-gray-600}", - "$type": "color", - "$rawValue": "rgb(47, 49, 54)" + "palette-interact-secondary-foreground-active": { + "$value": { + "dark": "{foundations.color.color-gray-900}", + "light": "{foundations.color.color-white}" + }, + "$type": "color" }, - "palette-interact-background": { - "$value": "transparent", + "palette-interact-secondary-foreground-disabled": { + "$value": { + "dark": "{foundations.color.color-white-fade-foreground}", + "light": "{foundations.color.color-gray-900-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-hover": { + "$value": { + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-gray-900}" + }, "$type": "color" } }, "navigate": { - "palette-navigate-indicator-active": { - "$value": "{foundations.color.color-orange-400}", - "$type": "color", - "$rawValue": "rgb(238, 133, 43)" - }, - "palette-navigate-indicator-hover": { - "$value": "{foundations.color.color-gray-90}", - "$type": "color", - "$rawValue": "rgb(132, 135, 142)" + "palette-navigate-background-hover": { + "$value": { + "dark": "{foundations.color.color-white-fade-background-hover}", + "light": "{foundations.color.color-black-fade-background-hover}" + }, + "$type": "color" }, - "palette-navigate-foreground-visited": { - "$value": "{foundations.color.color-purple-100}", - "$type": "color", - "$rawValue": "rgb(223, 156, 225)" + "palette-navigate-foreground-hover": { + "$value": { + "dark": "{foundations.color.color-blue-200}", + "light": "{foundations.color.color-blue-600}" + }, + "$type": "color" }, "palette-navigate-foreground-active": { - "$value": "{foundations.color.color-blue-300}", - "$type": "color", - "$rawValue": "rgb(51, 141, 205)" + "$value": { + "dark": "{foundations.color.color-blue-300}", + "light": "{foundations.color.color-blue-700}" + }, + "$type": "color" }, - "palette-navigate-foreground-hover": { - "$value": "{foundations.color.color-blue-200}", - "$type": "color", - "$rawValue": "rgb(75, 159, 216)" + "palette-navigate-foreground-visited": { + "$value": { + "dark": "{foundations.color.color-purple-100}", + "light": "{foundations.color.color-purple-800}" + }, + "$type": "color" }, - "palette-navigate-background-hover": { - "$value": "{foundations.color.color-white-fade-background-hover}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.08)" + "palette-navigate-indicator-hover": { + "$value": { + "dark": "{foundations.color.color-gray-90}", + "light": "{foundations.color.color-gray-90}" + }, + "$type": "color" + }, + "palette-navigate-indicator-active": { + "$value": { + "dark": "{foundations.color.color-orange-400}", + "light": "{foundations.color.color-orange-600}" + }, + "$type": "color" } }, "negative": { "palette-negative-foreground": { - "$value": "{foundations.color.color-red-300}", - "$type": "color", - "$rawValue": "rgb(255, 89, 66)" + "$value": { + "dark": "{foundations.color.color-red-300}", + "light": "{foundations.color.color-red-700}" + }, + "$type": "color" } }, "neutral": { - "palette-neutral-tertiary-separator": { - "$value": "{foundations.color.color-white-fade-separatorOpacity-tertiary}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.15)" - }, - "palette-neutral-secondary-separator": { - "$value": "{foundations.color.color-white-fade-separatorOpacity-secondary}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.25)" - }, - "palette-neutral-backdrop": { - "$value": "{foundations.color.color-black-fade-backdrop}", - "$type": "color", - "$rawValue": "rgba(0, 0, 0, 0.7)" - }, - "palette-neutral-secondary-foreground-disabled": { - "$value": "{foundations.color.color-gray-70-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(180, 183, 190, 0.4)" - }, - "palette-neutral-secondary-foreground": { - "$value": "{foundations.color.color-gray-70}", - "$type": "color", - "$rawValue": "rgb(180, 183, 190)" - }, - "palette-neutral-secondary-border-disabled": { - "$value": "{foundations.color.color-gray-300-fade-border}", - "$type": "color", - "$rawValue": "rgba(76, 80, 91, 0.4)" - }, - "palette-neutral-secondary-border": { - "$value": "{foundations.color.color-gray-300}", - "$type": "color", - "$rawValue": "rgb(76, 80, 91)" - }, - "palette-neutral-secondary-background-readonly": { - "$value": "{foundations.color.color-gray-600-fade-background-readonly}", - "$type": "color", - "$rawValue": "rgba(47, 49, 54, 0)" - }, - "palette-neutral-secondary-background-disabled": { - "$value": "{foundations.color.color-gray-600-fade-background}", - "$type": "color", - "$rawValue": "rgba(47, 49, 54, 0.4)" - }, - "palette-neutral-secondary-background": { - "$value": "{foundations.color.color-gray-600}", - "$type": "color", - "$rawValue": "rgb(47, 49, 54)" - }, - "palette-neutral-primary-border-disabled": { - "$value": "{foundations.color.color-gray-300-fade-border}", - "$type": "color", - "$rawValue": "rgba(76, 80, 91, 0.4)" - }, - "palette-neutral-primary-border": { - "$value": "{foundations.color.color-gray-300}", - "$type": "color", - "$rawValue": "rgb(76, 80, 91)" - }, - "palette-neutral-primary-separator": { - "$value": "{foundations.color.color-white-fade-separatorOpacity-primary}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" - }, - "palette-neutral-primary-foreground-disabled": { - "$value": "{foundations.color.color-white-fade-foreground}", - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" - }, - "palette-neutral-primary-foreground": { - "$value": "{foundations.color.color-white}", - "$type": "color", - "$rawValue": "rgb(255, 255, 255)" - }, - "palette-neutral-primary-background-readonly": { - "$value": "{foundations.color.color-gray-800-fade-background-readonly}", - "$type": "color", - "$rawValue": "rgba(36, 37, 38, 0)" - }, - "palette-neutral-primary-background-disabled": { - "$value": "{foundations.color.color-gray-800-fade-background}", - "$type": "color", - "$rawValue": "rgba(36, 37, 38, 0.4)" - }, "palette-neutral-primary-background": { - "$value": "{foundations.color.color-gray-800}", - "$type": "color", - "$rawValue": "rgb(36, 37, 38)" - } - }, - "opacity": { - "palette-opacity-tertiary-border": { - "$value": "{foundations.opacity.opacity-15}", - "$type": "number", - "$rawValue": "0.15" - }, - "palette-opacity-secondary-border": { - "$value": "{foundations.opacity.opacity-25}", - "$type": "number", - "$rawValue": "0.25" - }, - "palette-opacity-primary-border": { - "$value": "{foundations.opacity.opacity-40}", - "$type": "number", - "$rawValue": "0.4" - }, - "palette-opacity-border-readonly": { - "$value": "{foundations.opacity.opacity-15}", - "$type": "number", - "$rawValue": "0.15" - }, - "palette-opacity-background-readonly": { - "$value": "{foundations.opacity.opacity-0}", - "$type": "number", - "$rawValue": "0" - }, - "palette-opacity-disabled": { - "$value": "{foundations.opacity.opacity-40}", - "$type": "number", - "$rawValue": "0.4" - }, - "palette-opacity-backdrop": { - "$value": "{foundations.opacity.opacity-70}", - "$type": "number", - "$rawValue": "0.7" - } - }, - "positive": { - "palette-positive-foreground": { - "$value": "{foundations.color.color-green-300}", - "$type": "color", - "$rawValue": "rgb(60, 171, 96)" - } - }, - "success": { - "palette-success-foreground": { - "$value": "{foundations.color.color-green-400}", - "$type": "color", - "$rawValue": "rgb(48, 156, 90)" - }, - "palette-success-border": { - "$value": "{foundations.color.color-green-400}", - "$type": "color", - "$rawValue": "rgb(48, 156, 90)" - }, - "palette-success-background-selected": { - "$value": "{foundations.color.color-green-900}", - "$type": "color", - "$rawValue": "rgb(35, 52, 43)" - }, - "palette-success-background": { - "$value": "{foundations.color.color-green-900}", - "$type": "color", - "$rawValue": "rgb(35, 52, 43)" - } - }, - "warning": { - "palette-warning-foreground": { - "$value": "{foundations.color.color-orange-500}", - "$type": "color", - "$rawValue": "rgb(234, 115, 25)" - }, - "palette-warning-border": { - "$value": "{foundations.color.color-orange-500}", - "$type": "color", - "$rawValue": "rgb(234, 115, 25)" - }, - "palette-warning-background-selected": { - "$value": "{foundations.color.color-orange-900}", - "$type": "color", - "$rawValue": "rgb(54, 44, 36)" - }, - "palette-warning-background": { - "$value": "{foundations.color.color-orange-900}", - "$type": "color", - "$rawValue": "rgb(54, 44, 36)" - } - } - }, - "foundations": { - "color": { - "color-white-fade-background-hover": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-8}" + "dark": "{foundations.color.color-gray-800}", + "light": "{foundations.color.color-white}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.08)" + "$type": "color" }, - "color-black-fade-background-hover": { + "palette-neutral-primary-background-disabled": { "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-8}" + "dark": "{foundations.color.color-gray-800-fade-background}", + "light": "{foundations.color.color-white-fade-background}" }, - "$type": "color", - "$rawValue": "rgba(0, 0, 0, 0.08)" + "$type": "color" }, - "color-black-fade-separatorOpacity-tertiary": { + "palette-neutral-primary-background-readonly": { "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-15}" + "dark": "{foundations.color.color-gray-800-fade-background-readonly}", + "light": "{foundations.color.color-white-fade-background-readonly}" }, - "$type": "color", - "$rawValue": "rgba(0, 0, 0, 0.15)" + "$type": "color" }, - "color-black-fade-separatorOpacity-secondary": { + "palette-neutral-primary-foreground": { "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-25}" + "dark": "{foundations.color.color-white}", + "light": "{foundations.color.color-gray-900}" }, - "$type": "color", - "$rawValue": "rgba(0, 0, 0, 0.25)" + "$type": "color" }, - "color-black-fade-separatorOpacity-primary": { + "palette-neutral-primary-foreground-disabled": { "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-white-fade-foreground}", + "light": "{foundations.color.color-gray-900-fade-foreground}" }, - "$type": "color", - "$rawValue": "rgba(0, 0, 0, 0.4)" + "$type": "color" }, - "color-white-fade-separatorOpacity-tertiary": { + "palette-neutral-primary-separator": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-15}" + "dark": "{foundations.color.color-white-fade-separatorOpacity-primary}", + "light": "{foundations.color.color-black-fade-separatorOpacity-primary}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.15)" + "$type": "color" }, - "color-white-fade-separatorOpacity-secondary": { + "palette-neutral-primary-border": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-25}" + "dark": "{foundations.color.color-gray-300}", + "light": "{foundations.color.color-gray-50}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.25)" + "$type": "color" }, - "color-white-fade-separatorOpacity-primary": { + "palette-neutral-primary-border-disabled": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-gray-300-fade-border}", + "light": "{foundations.color.color-gray-50-fade-border}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" + "$type": "color" }, - "color-blue-600-fade-fill": { + "palette-neutral-secondary-background": { "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-gray-600}", + "light": "{foundations.color.color-gray-20}" }, - "$type": "color", - "$rawValue": "rgba(21, 92, 147, 0.4)" + "$type": "color" }, - "color-blue-100-fade-fill": { + "palette-neutral-secondary-background-disabled": { "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-gray-600-fade-background}", + "light": "{foundations.color.color-gray-20-fade-background}" }, - "$type": "color", - "$rawValue": "rgba(100, 177, 228, 0.4)" + "$type": "color" }, - "color-black-fade-backdrop": { + "palette-neutral-secondary-background-readonly": { "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-70}" + "dark": "{foundations.color.color-gray-600-fade-background-readonly}", + "light": "{foundations.color.color-gray-20-fade-background-readonly}" }, - "$type": "color", - "$rawValue": "rgba(0, 0, 0, 0.7)" + "$type": "color" }, - "color-white-fade-backdrop": { + "palette-neutral-secondary-border": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-70}" + "dark": "{foundations.color.color-gray-300}", + "light": "{foundations.color.color-gray-50}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.7)" + "$type": "color" }, - "color-gray-800-fade-background-readonly": { + "palette-neutral-secondary-border-disabled": { "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{foundations.opacity.opacity-0}" + "dark": "{foundations.color.color-gray-300-fade-border}", + "light": "{foundations.color.color-gray-50-fade-border}" }, - "$type": "color", - "$rawValue": "rgba(36, 37, 38, 0)" + "$type": "color" }, - "color-gray-600-fade-background-readonly": { + "palette-neutral-secondary-foreground": { "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{foundations.opacity.opacity-0}" + "dark": "{foundations.color.color-gray-70}", + "light": "{foundations.color.color-gray-200}" }, - "$type": "color", - "$rawValue": "rgba(47, 49, 54, 0)" + "$type": "color" }, - "color-gray-20-fade-background-readonly": { + "palette-neutral-secondary-foreground-disabled": { "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{foundations.opacity.opacity-0}" + "dark": "{foundations.color.color-gray-70-fade-foreground}", + "light": "{foundations.color.color-gray-200-fade-foreground}" }, - "$type": "color", - "$rawValue": "rgba(234, 237, 239, 0)" + "$type": "color" }, - "color-white-fade-background-readonly": { + "palette-neutral-backdrop": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-0}" + "dark": "{foundations.color.color-black-fade-backdrop}", + "light": "{foundations.color.color-white-fade-backdrop}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0)" + "$type": "color" }, - "color-white-fade-background": { + "palette-neutral-secondary-separator": { "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-white-fade-separatorOpacity-secondary}", + "light": "{foundations.color.color-black-fade-separatorOpacity-secondary}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" + "$type": "color" }, - "color-gray-800-fade-background": { + "palette-neutral-tertiary-separator": { "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-white-fade-separatorOpacity-tertiary}", + "light": "{foundations.color.color-black-fade-separatorOpacity-tertiary}" }, - "$type": "color", - "$rawValue": "rgba(36, 37, 38, 0.4)" - }, - "color-gray-600-fade-background": { + "$type": "color" + } + }, + "positive": { + "palette-positive-foreground": { "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-green-300}", + "light": "{foundations.color.color-green-700}" }, - "$type": "color", - "$rawValue": "rgba(47, 49, 54, 0.4)" - }, - "color-gray-300-fade-background": { + "$type": "color" + } + }, + "success": { + "palette-success-background": { "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-green-900}", + "light": "{foundations.color.color-green-10}" }, - "$type": "color", - "$rawValue": "rgba(76, 80, 91, 0.4)" + "$type": "color" }, - "color-gray-200-fade-background": { + "palette-success-background-selected": { "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-green-900}", + "light": "{foundations.color.color-green-20}" }, - "$type": "color", - "$rawValue": "rgba(97, 101, 110, 0.4)" + "$type": "color" }, - "color-gray-70-fade-background": { + "palette-success-border": { "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-green-400}", + "light": "{foundations.color.color-green-500}" }, - "$type": "color", - "$rawValue": "rgba(180, 183, 190, 0.4)" + "$type": "color" }, - "color-gray-60-fade-background": { + "palette-success-foreground": { "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-green-400}", + "light": "{foundations.color.color-green-500}" }, - "$type": "color", - "$rawValue": "rgba(197, 201, 208, 0.4)" - }, - "color-gray-20-fade-background": { + "$type": "color" + } + }, + "warning": { + "palette-warning-background": { "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-orange-900}", + "light": "{foundations.color.color-orange-10}" }, - "$type": "color", - "$rawValue": "rgba(234, 237, 239, 0.4)" + "$type": "color" }, - "color-blue-700-fade-background": { + "palette-warning-background-selected": { "$value": { - "color": "{foundations.color.color-blue-700}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-orange-900}", + "light": "{foundations.color.color-orange-20}" }, - "$type": "color", - "$rawValue": "rgba(0, 71, 123, 0.4)" + "$type": "color" }, - "color-blue-600-fade-background": { + "palette-warning-border": { "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-orange-500}", + "light": "{foundations.color.color-orange-700}" }, - "$type": "color", - "$rawValue": "rgba(21, 92, 147, 0.4)" + "$type": "color" }, - "color-blue-500-fade-background": { + "palette-warning-foreground": { "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "{foundations.color.color-orange-500}", + "light": "{foundations.color.color-orange-700}" }, - "$type": "color", - "$rawValue": "rgba(38, 112, 169, 0.4)" - }, - "color-blue-30-fade-background": { + "$type": "color" + } + }, + "opacity": { + "palette-opacity-backdrop": { + "$value": "{foundations.color.opacity-70}", + "$type": "number" + }, + "palette-opacity-disabled": { + "$value": "{foundations.color.opacity-40}", + "$type": "number" + }, + "palette-opacity-background-readonly": { + "$value": "{foundations.color.opacity-0}", + "$type": "number" + }, + "palette-opacity-border-readonly": { + "$value": "{foundations.color.opacity-15}", + "$type": "number" + }, + "palette-opacity-primary-border": { + "$value": "{foundations.color.opacity-40}", + "$type": "number" + }, + "palette-opacity-secondary-border": { + "$value": "{foundations.color.opacity-25}", + "$type": "number" + }, + "palette-opacity-tertiary-border": { + "$value": "{foundations.color.opacity-15}", + "$type": "number" + } + } + }, + "foundations": { + "shadow": { + "shadow-100-color": { "$value": { - "color": "{foundations.color.color-blue-30}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "rgba(0, 0, 0, 0.5)", + "light": "rgba(0, 0, 0, 0.1)" }, - "$type": "color", - "$rawValue": "rgba(164, 213, 244, 0.4)" + "$type": "color" }, - "color-gray-200-fade-border-readonly": { + "shadow-200-color": { "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{foundations.opacity.opacity-15}" + "dark": "rgba(0, 0, 0, 0.5)", + "light": "rgba(0, 0, 0, 0.1)" }, - "$type": "color", - "$rawValue": "rgba(97, 101, 110, 0.15)" + "$type": "color" }, - "color-gray-90-fade-border-readonly": { + "shadow-300-color": { "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{foundations.opacity.opacity-15}" + "dark": "rgba(0, 0, 0, 0.55)", + "light": "rgba(0, 0, 0, 0.15)" }, - "$type": "color", - "$rawValue": "rgba(132, 135, 142, 0.15)" + "$type": "color" }, - "color-red-500-fade-border": { + "shadow-400-color": { "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "rgba(0, 0, 0, 0.55)", + "light": "rgba(0, 0, 0, 0.2)" }, - "$type": "color", - "$rawValue": "rgba(227, 43, 22, 0.4)" + "$type": "color" }, - "color-orange-700-fade-border": { + "shadow-500-color": { "$value": { - "color": "{foundations.color.color-orange-700}", - "opacity": "{foundations.opacity.opacity-40}" + "dark": "rgba(0, 0, 0, 0.65)", + "light": "rgba(0, 0, 0, 0.3)" }, - "$type": "color", - "$rawValue": "rgba(214, 85, 19, 0.4)" + "$type": "color" }, - "color-orange-600-fade-border": { + "shadow-100": { "$value": { - "color": "{foundations.color.color-orange-600}", - "opacity": "{foundations.opacity.opacity-40}" + "offsetX": "0", + "offsetY": "1px", + "blur": "3px", + "spread": "0", + "color": "{foundations.color.shadow-100-color}" }, - "$type": "color", - "$rawValue": "rgba(224, 101, 25, 0.4)" + "$type": "shadow" }, - "color-orange-500-fade-border": { + "shadow-200": { "$value": { - "color": "{foundations.color.color-orange-500}", - "opacity": "{foundations.opacity.opacity-40}" + "offsetX": "0", + "offsetY": "2px", + "blur": "4px", + "spread": "0", + "color": "{foundations.color.shadow-200-color}" }, - "$type": "color", - "$rawValue": "rgba(234, 115, 25, 0.4)" + "$type": "shadow" }, - "color-orange-400-fade-border": { + "shadow-300": { "$value": { - "color": "{foundations.color.color-orange-400}", - "opacity": "{foundations.opacity.opacity-40}" + "offsetX": "0", + "offsetY": "4px", + "blur": "8px", + "spread": "0", + "color": "{foundations.color.shadow-300-color}" }, - "$type": "color", - "$rawValue": "rgba(238, 133, 43, 0.4)" + "$type": "shadow" }, - "color-green-500-fade-border": { + "shadow-400": { "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{foundations.opacity.opacity-40}" + "offsetX": "0", + "offsetY": "6px", + "blur": "10px", + "spread": "0", + "color": "{foundations.color.shadow-400-color}" }, - "$type": "color", - "$rawValue": "rgba(36, 135, 75, 0.4)" + "$type": "shadow" }, - "color-green-400-fade-border": { + "shadow-500": { "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{foundations.opacity.opacity-40}" + "offsetX": "0", + "offsetY": "12px", + "blur": "40px", + "spread": "0", + "color": "{foundations.color.shadow-500-color}" }, - "$type": "color", - "$rawValue": "rgba(48, 156, 90, 0.4)" + "$type": "shadow" + } + }, + "curve": { + "curve-0": { + "$value": { "ld": "0", "td": "0", "md": "0", "hd": "0" }, + "$type": "dimension" }, - "color-gray-300-fade-border": { + "curve-50": { + "$value": { "ld": "3px", "td": "4px", "md": "2px", "hd": "1px" }, + "$type": "dimension" + }, + "curve-100": { + "$value": { "ld": "6px", "td": "8px", "md": "4px", "hd": "2px" }, + "$type": "dimension" + }, + "curve-150": { + "$value": { "ld": "9px", "td": "12px", "md": "6px", "hd": "3px" }, + "$type": "dimension" + }, + "curve-999": { "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{foundations.opacity.opacity-40}" + "ld": "999px", + "td": "999px", + "md": "999px", + "hd": "999px" }, - "$type": "color", - "$rawValue": "rgba(76, 80, 91, 0.4)" + "$type": "dimension" + } + }, + "size": { + "size-adornment": { + "$value": { "ld": "10px", "td": "12px", "md": "8px", "hd": "6px" }, + "$type": "dimension" }, - "color-gray-200-fade-border": { + "size-bar": { + "$value": { "ld": "6px", "td": "8px", "md": "4px", "hd": "2px" }, + "$type": "dimension" + }, + "size-base": { + "$value": { "ld": "36px", "td": "44px", "md": "28px", "hd": "20px" }, + "$type": "dimension" + }, + "size-border": { + "$value": { "ld": "1px", "td": "1px", "md": "1px", "hd": "1px" }, + "$type": "dimension" + }, + "size-icon": { + "$value": { "ld": "14px", "td": "16px", "md": "12px", "hd": "10px" }, + "$type": "dimension" + }, + "size-indicator": { + "$value": { "ld": "3px", "td": "4px", "md": "2px", "hd": "1px" }, + "$type": "dimension" + }, + "size-selectable": { + "$value": { "ld": "16px", "td": "18px", "md": "14px", "hd": "12px" }, + "$type": "dimension" + }, + "size-bar-strong": { + "$value": { "ld": "12px", "td": "16px", "md": "8px", "hd": "4px" }, + "$type": "dimension" + }, + "size-bar-small": { + "$value": { "ld": "2px", "td": "2px", "md": "2px", "hd": "2px" }, + "$type": "dimension" + }, + "size-border-strong": { + "$value": { "ld": "2px", "td": "2px", "md": "2px", "hd": "2px" }, + "$type": "dimension" + } + }, + "spacing": { + "spacing-100": { + "$value": { "ld": "12px", "td": "16px", "md": "8px", "hd": "4px" }, + "$type": "dimension" + } + }, + "zIndex": { + "zIndex-default": { + "$value": { "ld": "1", "td": "1", "md": "1", "hd": "1" }, + "$type": "number" + }, + "zIndex-popout": { + "$value": { "ld": "1000", "td": "1000", "md": "1000", "hd": "1000" }, + "$type": "number" + }, + "zIndex-appHeader": { + "$value": { "ld": "1100", "td": "1100", "md": "1100", "hd": "1100" }, + "$type": "number" + }, + "zIndex-drawer": { + "$value": { "ld": "1200", "td": "1200", "md": "1200", "hd": "1200" }, + "$type": "number" + }, + "zIndex-modal": { + "$value": { "ld": "1300", "td": "1300", "md": "1300", "hd": "1300" }, + "$type": "number" + }, + "zIndex-notification": { + "$value": { "ld": "1400", "td": "1400", "md": "1400", "hd": "1400" }, + "$type": "number" + }, + "zIndex-dragObject": { + "$value": { "ld": "1420", "td": "1420", "md": "1420", "hd": "1420" }, + "$type": "number" + }, + "zIndex-contextMenu": { + "$value": { "ld": "1450", "td": "1450", "md": "1450", "hd": "1450" }, + "$type": "number" + }, + "zIndex-flyover": { + "$value": { "ld": "1500", "td": "1500", "md": "1500", "hd": "1500" }, + "$type": "number" + } + }, + "color": { + "color-white": { "$value": "rgb(255, 255, 255)", "$type": "color" }, + "color-black": { "$value": "rgb(0, 0, 0)", "$type": "color" }, + "color-red-10": { "$value": "rgb(255, 227, 224)", "$type": "color" }, + "color-red-20": { "$value": "rgb(255, 207, 201)", "$type": "color" }, + "color-red-30": { "$value": "rgb(255, 187, 178)", "$type": "color" }, + "color-red-40": { "$value": "rgb(255, 167, 156)", "$type": "color" }, + "color-red-50": { "$value": "rgb(255, 148, 133)", "$type": "color" }, + "color-red-100": { "$value": "rgb(255, 128, 111)", "$type": "color" }, + "color-red-200": { "$value": "rgb(255, 108, 88)", "$type": "color" }, + "color-red-300": { "$value": "rgb(255, 89, 66)", "$type": "color" }, + "color-red-400": { "$value": "rgb(237, 65, 42)", "$type": "color" }, + "color-red-500": { "$value": "rgb(227, 43, 22)", "$type": "color" }, + "color-red-600": { "$value": "rgb(196, 32, 16)", "$type": "color" }, + "color-red-700": { "$value": "rgb(166, 21, 11)", "$type": "color" }, + "color-red-800": { "$value": "rgb(136, 10, 5)", "$type": "color" }, + "color-red-900": { "$value": "rgb(65, 37, 34)", "$type": "color" }, + "color-orange-10": { "$value": "rgb(255, 232, 191)", "$type": "color" }, + "color-orange-20": { "$value": "rgb(254, 223, 166)", "$type": "color" }, + "color-orange-30": { "$value": "rgb(254, 214, 142)", "$type": "color" }, + "color-orange-40": { "$value": "rgb(254, 205, 118)", "$type": "color" }, + "color-orange-50": { "$value": "rgb(254, 197, 94)", "$type": "color" }, + "color-orange-100": { "$value": "rgb(250, 181, 81)", "$type": "color" }, + "color-orange-200": { "$value": "rgb(246, 165, 68)", "$type": "color" }, + "color-orange-300": { "$value": "rgb(242, 149, 56)", "$type": "color" }, + "color-orange-400": { "$value": "rgb(238, 133, 43)", "$type": "color" }, + "color-orange-500": { "$value": "rgb(234, 115, 25)", "$type": "color" }, + "color-orange-600": { "$value": "rgb(224, 101, 25)", "$type": "color" }, + "color-orange-700": { "$value": "rgb(214, 85, 19)", "$type": "color" }, + "color-orange-800": { "$value": "rgb(204, 68, 13)", "$type": "color" }, + "color-orange-900": { "$value": "rgb(54, 44, 36)", "$type": "color" }, + "color-green-10": { "$value": "rgb(209, 244, 201)", "$type": "color" }, + "color-green-20": { "$value": "rgb(184, 232, 182)", "$type": "color" }, + "color-green-30": { "$value": "rgb(160, 221, 164)", "$type": "color" }, + "color-green-40": { "$value": "rgb(136, 210, 145)", "$type": "color" }, + "color-green-50": { "$value": "rgb(112, 199, 127)", "$type": "color" }, + "color-green-100": { "$value": "rgb(93, 189, 116)", "$type": "color" }, + "color-green-200": { "$value": "rgb(77, 180, 105)", "$type": "color" }, + "color-green-300": { "$value": "rgb(60, 171, 96)", "$type": "color" }, + "color-green-400": { "$value": "rgb(48, 156, 90)", "$type": "color" }, + "color-green-500": { "$value": "rgb(36, 135, 75)", "$type": "color" }, + "color-green-600": { "$value": "rgb(24, 114, 61)", "$type": "color" }, + "color-green-700": { "$value": "rgb(12, 93, 46)", "$type": "color" }, + "color-green-800": { "$value": "rgb(1, 73, 32)", "$type": "color" }, + "color-green-900": { "$value": "rgb(35, 52, 43)", "$type": "color" }, + "color-teal-10": { "$value": "rgb(218, 240, 240)", "$type": "color" }, + "color-teal-20": { "$value": "rgb(199, 232, 232)", "$type": "color" }, + "color-teal-30": { "$value": "rgb(180, 224, 225)", "$type": "color" }, + "color-teal-40": { "$value": "rgb(162, 217, 218)", "$type": "color" }, + "color-teal-50": { "$value": "rgb(141, 205, 209)", "$type": "color" }, + "color-teal-100": { "$value": "rgb(123, 193, 200)", "$type": "color" }, + "color-teal-200": { "$value": "rgb(99, 181, 192)", "$type": "color" }, + "color-teal-300": { "$value": "rgb(73, 160, 172)", "$type": "color" }, + "color-teal-400": { "$value": "rgb(48, 149, 166)", "$type": "color" }, + "color-teal-500": { "$value": "rgb(0, 130, 151)", "$type": "color" }, + "color-teal-600": { "$value": "rgb(27, 107, 133)", "$type": "color" }, + "color-teal-700": { "$value": "rgb(0, 85, 113)", "$type": "color" }, + "color-teal-800": { "$value": "rgb(1, 65, 86)", "$type": "color" }, + "color-teal-900": { "$value": "rgb(0, 49, 76)", "$type": "color" }, + "color-blue-10": { "$value": "rgb(203, 231, 249)", "$type": "color" }, + "color-blue-20": { "$value": "rgb(183, 222, 246)", "$type": "color" }, + "color-blue-30": { "$value": "rgb(164, 213, 244)", "$type": "color" }, + "color-blue-40": { "$value": "rgb(144, 204, 242)", "$type": "color" }, + "color-blue-50": { "$value": "rgb(125, 195, 240)", "$type": "color" }, + "color-blue-100": { "$value": "rgb(100, 177, 228)", "$type": "color" }, + "color-blue-200": { "$value": "rgb(75, 159, 216)", "$type": "color" }, + "color-blue-300": { "$value": "rgb(51, 141, 205)", "$type": "color" }, + "color-blue-400": { "$value": "rgb(46, 132, 198)", "$type": "color" }, + "color-blue-500": { "$value": "rgb(38, 112, 169)", "$type": "color" }, + "color-blue-600": { "$value": "rgb(21, 92, 147)", "$type": "color" }, + "color-blue-700": { "$value": "rgb(0, 71, 123)", "$type": "color" }, + "color-blue-800": { "$value": "rgb(39, 60, 77)", "$type": "color" }, + "color-blue-900": { "$value": "rgb(35, 47, 56)", "$type": "color" }, + "color-purple-10": { "$value": "rgb(249, 224, 247)", "$type": "color" }, + "color-purple-20": { "$value": "rgb(247, 212, 244)", "$type": "color" }, + "color-purple-30": { "$value": "rgb(245, 201, 241)", "$type": "color" }, + "color-purple-40": { "$value": "rgb(243, 189, 238)", "$type": "color" }, + "color-purple-50": { "$value": "rgb(241, 178, 235)", "$type": "color" }, + "color-purple-100": { "$value": "rgb(223, 156, 225)", "$type": "color" }, + "color-purple-200": { "$value": "rgb(205, 135, 215)", "$type": "color" }, + "color-purple-300": { "$value": "rgb(192, 116, 203)", "$type": "color" }, + "color-purple-400": { "$value": "rgb(169, 97, 181)", "$type": "color" }, + "color-purple-500": { "$value": "rgb(150, 78, 162)", "$type": "color" }, + "color-purple-600": { "$value": "rgb(129, 60, 141)", "$type": "color" }, + "color-purple-700": { "$value": "rgb(103, 46, 122)", "$type": "color" }, + "color-purple-800": { "$value": "rgb(83, 37, 109)", "$type": "color" }, + "color-purple-900": { "$value": "rgb(59, 16, 84)", "$type": "color" }, + "color-gray-10": { "$value": "rgb(242, 244, 246)", "$type": "color" }, + "color-gray-20": { "$value": "rgb(234, 237, 239)", "$type": "color" }, + "color-gray-30": { "$value": "rgb(224, 228, 233)", "$type": "color" }, + "color-gray-40": { "$value": "rgb(217, 221, 227)", "$type": "color" }, + "color-gray-50": { "$value": "rgb(206, 210, 217)", "$type": "color" }, + "color-gray-60": { "$value": "rgb(197, 201, 208)", "$type": "color" }, + "color-gray-70": { "$value": "rgb(180, 183, 190)", "$type": "color" }, + "color-gray-80": { "$value": "rgb(159, 163, 170)", "$type": "color" }, + "color-gray-90": { "$value": "rgb(132, 135, 142)", "$type": "color" }, + "color-gray-100": { "$value": "rgb(116, 119, 127)", "$type": "color" }, + "color-gray-200": { "$value": "rgb(97, 101, 110)", "$type": "color" }, + "color-gray-300": { "$value": "rgb(76, 80, 91)", "$type": "color" }, + "color-gray-400": { "$value": "rgb(68, 72, 79)", "$type": "color" }, + "color-gray-500": { "$value": "rgb(59, 63, 70)", "$type": "color" }, + "color-gray-600": { "$value": "rgb(47, 49, 54)", "$type": "color" }, + "color-gray-700": { "$value": "rgb(42, 44, 47)", "$type": "color" }, + "color-gray-800": { "$value": "rgb(36, 37, 38)", "$type": "color" }, + "color-gray-900": { "$value": "rgb(22, 22, 22)", "$type": "color" }, + "color-blue-100-fade-foreground": { "$value": { - "color": "{foundations.color.color-gray-200}", + "color": "{foundations.color.color-blue-100}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(97, 101, 110, 0.4)" + "$type": "color" }, - "color-gray-90-fade-border": { + "color-blue-500-fade-foreground": { "$value": { - "color": "{foundations.color.color-gray-90}", + "color": "{foundations.color.color-blue-500}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(132, 135, 142, 0.4)" + "$type": "color" }, - "color-gray-60-fade-border": { + "color-blue-600-fade-foreground": { "$value": { - "color": "{foundations.color.color-gray-60}", + "color": "{foundations.color.color-blue-600}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(197, 201, 208, 0.4)" + "$type": "color" }, - "color-gray-50-fade-border": { + "color-gray-200-fade-foreground": { "$value": { - "color": "{foundations.color.color-gray-50}", + "color": "{foundations.color.color-gray-200}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(206, 210, 217, 0.4)" + "$type": "color" }, - "color-blue-500-fade-border": { + "color-gray-70-fade-foreground": { "$value": { - "color": "{foundations.color.color-blue-500}", + "color": "{foundations.color.color-gray-70}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(38, 112, 169, 0.4)" + "$type": "color" }, - "color-white-fade-foreground": { + "color-gray-90-fade-foreground": { "$value": { - "color": "{foundations.color.color-white}", + "color": "{foundations.color.color-gray-90}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(255, 255, 255, 0.4)" + "$type": "color" }, - "color-red-700-fade-foreground": { + "color-gray-900-fade-foreground": { "$value": { - "color": "{foundations.color.color-red-700}", + "color": "{foundations.color.color-gray-900}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(166, 21, 11, 0.4)" + "$type": "color" }, - "color-red-500-fade-foreground": { + "color-green-300-fade-foreground": { "$value": { - "color": "{foundations.color.color-red-500}", + "color": "{foundations.color.color-green-300}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(227, 43, 22, 0.4)" + "$type": "color" }, - "color-red-300-fade-foreground": { + "color-green-400-fade-foreground": { "$value": { - "color": "{foundations.color.color-red-300}", + "color": "{foundations.color.color-green-400}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-green-500-fade-foreground": { + "$value": { + "color": "{foundations.color.color-green-500}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(255, 89, 66, 0.4)" + "$type": "color" }, "color-green-700-fade-foreground": { "$value": { "color": "{foundations.color.color-green-700}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(12, 93, 46, 0.4)" + "$type": "color" }, - "color-green-500-fade-foreground": { + "color-red-300-fade-foreground": { "$value": { - "color": "{foundations.color.color-green-500}", + "color": "{foundations.color.color-red-300}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(36, 135, 75, 0.4)" + "$type": "color" }, - "color-green-400-fade-foreground": { + "color-red-500-fade-foreground": { + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-red-700-fade-foreground": { + "$value": { + "color": "{foundations.color.color-red-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-white-fade-foreground": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-blue-500-fade-border": { + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-50-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-50}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-60-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-90-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-200-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-300-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-green-400-fade-border": { "$value": { "color": "{foundations.color.color-green-400}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(48, 156, 90, 0.4)" + "$type": "color" }, - "color-green-300-fade-foreground": { + "color-green-500-fade-border": { "$value": { - "color": "{foundations.color.color-green-300}", + "color": "{foundations.color.color-green-500}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(60, 171, 96, 0.4)" + "$type": "color" }, - "color-gray-900-fade-foreground": { + "color-orange-400-fade-border": { "$value": { - "color": "{foundations.color.color-gray-900}", + "color": "{foundations.color.color-orange-400}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(22, 22, 22, 0.4)" + "$type": "color" }, - "color-gray-90-fade-foreground": { + "color-orange-500-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-orange-600-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-orange-700-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-red-500-fade-border": { + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-90-fade-border-readonly": { "$value": { "color": "{foundations.color.color-gray-90}", + "opacity": "{foundations.opacity.opacity-15}" + }, + "$type": "color" + }, + "color-gray-200-fade-border-readonly": { + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{foundations.opacity.opacity-15}" + }, + "$type": "color" + }, + "color-blue-30-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-30}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(132, 135, 142, 0.4)" + "$type": "color" }, - "color-gray-70-fade-foreground": { + "color-blue-500-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-blue-600-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-blue-700-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-700}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-20-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-60-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-gray-70-fade-background": { "$value": { "color": "{foundations.color.color-gray-70}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(180, 183, 190, 0.4)" + "$type": "color" }, - "color-gray-200-fade-foreground": { + "color-gray-200-fade-background": { "$value": { "color": "{foundations.color.color-gray-200}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(97, 101, 110, 0.4)" + "$type": "color" }, - "color-blue-600-fade-foreground": { + "color-gray-300-fade-background": { "$value": { - "color": "{foundations.color.color-blue-600}", + "color": "{foundations.color.color-gray-300}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(21, 92, 147, 0.4)" + "$type": "color" }, - "color-blue-500-fade-foreground": { + "color-gray-600-fade-background": { "$value": { - "color": "{foundations.color.color-blue-500}", + "color": "{foundations.color.color-gray-600}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(38, 112, 169, 0.4)" + "$type": "color" }, - "color-blue-100-fade-foreground": { + "color-gray-800-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-white-fade-background": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-white-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-0}" + }, + "$type": "color" + }, + "color-gray-20-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{foundations.opacity.opacity-0}" + }, + "$type": "color" + }, + "color-gray-600-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{foundations.opacity.opacity-0}" + }, + "$type": "color" + }, + "color-gray-800-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{foundations.opacity.opacity-0}" + }, + "$type": "color" + }, + "color-white-fade-backdrop": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-70}" + }, + "$type": "color" + }, + "color-black-fade-backdrop": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-70}" + }, + "$type": "color" + }, + "color-blue-100-fade-fill": { "$value": { "color": "{foundations.color.color-blue-100}", "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "color", - "$rawValue": "rgba(100, 177, 228, 0.4)" + "$type": "color" }, - "color-gray-900": { "$value": "rgb(22, 22, 22)", "$type": "color" }, - "color-gray-800": { "$value": "rgb(36, 37, 38)", "$type": "color" }, - "color-gray-700": { "$value": "rgb(42, 44, 47)", "$type": "color" }, - "color-gray-600": { "$value": "rgb(47, 49, 54)", "$type": "color" }, - "color-gray-500": { "$value": "rgb(59, 63, 70)", "$type": "color" }, - "color-gray-400": { "$value": "rgb(68, 72, 79)", "$type": "color" }, - "color-gray-300": { "$value": "rgb(76, 80, 91)", "$type": "color" }, - "color-gray-200": { "$value": "rgb(97, 101, 110)", "$type": "color" }, - "color-gray-100": { "$value": "rgb(116, 119, 127)", "$type": "color" }, - "color-gray-90": { "$value": "rgb(132, 135, 142)", "$type": "color" }, - "color-gray-80": { "$value": "rgb(159, 163, 170)", "$type": "color" }, - "color-gray-70": { "$value": "rgb(180, 183, 190)", "$type": "color" }, - "color-gray-60": { "$value": "rgb(197, 201, 208)", "$type": "color" }, - "color-gray-50": { "$value": "rgb(206, 210, 217)", "$type": "color" }, - "color-gray-40": { "$value": "rgb(217, 221, 227)", "$type": "color" }, - "color-gray-30": { "$value": "rgb(224, 228, 233)", "$type": "color" }, - "color-gray-20": { "$value": "rgb(234, 237, 239)", "$type": "color" }, - "color-gray-10": { "$value": "rgb(242, 244, 246)", "$type": "color" }, - "color-purple-900": { "$value": "rgb(59, 16, 84)", "$type": "color" }, - "color-purple-800": { "$value": "rgb(83, 37, 109)", "$type": "color" }, - "color-purple-700": { "$value": "rgb(103, 46, 122)", "$type": "color" }, - "color-purple-600": { "$value": "rgb(129, 60, 141)", "$type": "color" }, - "color-purple-500": { "$value": "rgb(150, 78, 162)", "$type": "color" }, - "color-purple-400": { "$value": "rgb(169, 97, 181)", "$type": "color" }, - "color-purple-300": { "$value": "rgb(192, 116, 203)", "$type": "color" }, - "color-purple-200": { "$value": "rgb(205, 135, 215)", "$type": "color" }, - "color-purple-100": { "$value": "rgb(223, 156, 225)", "$type": "color" }, - "color-purple-50": { "$value": "rgb(241, 178, 235)", "$type": "color" }, - "color-purple-40": { "$value": "rgb(243, 189, 238)", "$type": "color" }, - "color-purple-30": { "$value": "rgb(245, 201, 241)", "$type": "color" }, - "color-purple-20": { "$value": "rgb(247, 212, 244)", "$type": "color" }, - "color-purple-10": { "$value": "rgb(249, 224, 247)", "$type": "color" }, - "color-blue-900": { "$value": "rgb(35, 47, 56)", "$type": "color" }, - "color-blue-800": { "$value": "rgb(39, 60, 77)", "$type": "color" }, - "color-blue-700": { "$value": "rgb(0, 71, 123)", "$type": "color" }, - "color-blue-600": { "$value": "rgb(21, 92, 147)", "$type": "color" }, - "color-blue-500": { "$value": "rgb(38, 112, 169)", "$type": "color" }, - "color-blue-400": { "$value": "rgb(46, 132, 198)", "$type": "color" }, - "color-blue-300": { "$value": "rgb(51, 141, 205)", "$type": "color" }, - "color-blue-200": { "$value": "rgb(75, 159, 216)", "$type": "color" }, - "color-blue-100": { "$value": "rgb(100, 177, 228)", "$type": "color" }, - "color-blue-50": { "$value": "rgb(125, 195, 240)", "$type": "color" }, - "color-blue-40": { "$value": "rgb(144, 204, 242)", "$type": "color" }, - "color-blue-30": { "$value": "rgb(164, 213, 244)", "$type": "color" }, - "color-blue-20": { "$value": "rgb(183, 222, 246)", "$type": "color" }, - "color-blue-10": { "$value": "rgb(203, 231, 249)", "$type": "color" }, - "color-teal-900": { "$value": "rgb(0, 49, 76)", "$type": "color" }, - "color-teal-800": { "$value": "rgb(1, 65, 86)", "$type": "color" }, - "color-teal-700": { "$value": "rgb(0, 85, 113)", "$type": "color" }, - "color-teal-600": { "$value": "rgb(27, 107, 133)", "$type": "color" }, - "color-teal-500": { "$value": "rgb(0, 130, 151)", "$type": "color" }, - "color-teal-400": { "$value": "rgb(48, 149, 166)", "$type": "color" }, - "color-teal-300": { "$value": "rgb(73, 160, 172)", "$type": "color" }, - "color-teal-200": { "$value": "rgb(99, 181, 192)", "$type": "color" }, - "color-teal-100": { "$value": "rgb(123, 193, 200)", "$type": "color" }, - "color-teal-50": { "$value": "rgb(141, 205, 209)", "$type": "color" }, - "color-teal-40": { "$value": "rgb(162, 217, 218)", "$type": "color" }, - "color-teal-30": { "$value": "rgb(180, 224, 225)", "$type": "color" }, - "color-teal-20": { "$value": "rgb(199, 232, 232)", "$type": "color" }, - "color-teal-10": { "$value": "rgb(218, 240, 240)", "$type": "color" }, - "color-green-900": { "$value": "rgb(35, 52, 43)", "$type": "color" }, - "color-green-800": { "$value": "rgb(1, 73, 32)", "$type": "color" }, - "color-green-700": { "$value": "rgb(12, 93, 46)", "$type": "color" }, - "color-green-600": { "$value": "rgb(24, 114, 61)", "$type": "color" }, - "color-green-500": { "$value": "rgb(36, 135, 75)", "$type": "color" }, - "color-green-400": { "$value": "rgb(48, 156, 90)", "$type": "color" }, - "color-green-300": { "$value": "rgb(60, 171, 96)", "$type": "color" }, - "color-green-200": { "$value": "rgb(77, 180, 105)", "$type": "color" }, - "color-green-100": { "$value": "rgb(93, 189, 116)", "$type": "color" }, - "color-green-50": { "$value": "rgb(112, 199, 127)", "$type": "color" }, - "color-green-40": { "$value": "rgb(136, 210, 145)", "$type": "color" }, - "color-green-30": { "$value": "rgb(160, 221, 164)", "$type": "color" }, - "color-green-20": { "$value": "rgb(184, 232, 182)", "$type": "color" }, - "color-green-10": { "$value": "rgb(209, 244, 201)", "$type": "color" }, - "color-orange-900": { "$value": "rgb(54, 44, 36)", "$type": "color" }, - "color-orange-800": { "$value": "rgb(204, 68, 13)", "$type": "color" }, - "color-orange-700": { "$value": "rgb(214, 85, 19)", "$type": "color" }, - "color-orange-600": { "$value": "rgb(224, 101, 25)", "$type": "color" }, - "color-orange-500": { "$value": "rgb(234, 115, 25)", "$type": "color" }, - "color-orange-400": { "$value": "rgb(238, 133, 43)", "$type": "color" }, - "color-orange-300": { "$value": "rgb(242, 149, 56)", "$type": "color" }, - "color-orange-200": { "$value": "rgb(246, 165, 68)", "$type": "color" }, - "color-orange-100": { "$value": "rgb(250, 181, 81)", "$type": "color" }, - "color-orange-50": { "$value": "rgb(254, 197, 94)", "$type": "color" }, - "color-orange-40": { "$value": "rgb(254, 205, 118)", "$type": "color" }, - "color-orange-30": { "$value": "rgb(254, 214, 142)", "$type": "color" }, - "color-orange-20": { "$value": "rgb(254, 223, 166)", "$type": "color" }, - "color-orange-10": { "$value": "rgb(255, 232, 191)", "$type": "color" }, - "color-red-900": { "$value": "rgb(65, 37, 34)", "$type": "color" }, - "color-red-800": { "$value": "rgb(136, 10, 5)", "$type": "color" }, - "color-red-700": { "$value": "rgb(166, 21, 11)", "$type": "color" }, - "color-red-600": { "$value": "rgb(196, 32, 16)", "$type": "color" }, - "color-red-500": { "$value": "rgb(227, 43, 22)", "$type": "color" }, - "color-red-400": { "$value": "rgb(237, 65, 42)", "$type": "color" }, - "color-red-300": { "$value": "rgb(255, 89, 66)", "$type": "color" }, - "color-red-200": { "$value": "rgb(255, 108, 88)", "$type": "color" }, - "color-red-100": { "$value": "rgb(255, 128, 111)", "$type": "color" }, - "color-red-50": { "$value": "rgb(255, 148, 133)", "$type": "color" }, - "color-red-40": { "$value": "rgb(255, 167, 156)", "$type": "color" }, - "color-red-30": { "$value": "rgb(255, 187, 178)", "$type": "color" }, - "color-red-20": { "$value": "rgb(255, 207, 201)", "$type": "color" }, - "color-red-10": { "$value": "rgb(255, 227, 224)", "$type": "color" }, - "color-black": { "$value": "rgb(0, 0, 0)", "$type": "color" }, - "color-white": { "$value": "rgb(255, 255, 255)", "$type": "color" } - }, - "curve": { - "curve-999": { "$value": "999px", "$type": "dimension" }, - "curve-150": { "$value": "12px", "$type": "dimension" }, - "curve-100": { "$value": "8px", "$type": "dimension" }, - "curve-50": { "$value": "4px", "$type": "dimension" }, - "curve-0": { "$value": "0", "$type": "dimension" } - }, - "duration": { - "duration-cutoff": { "$value": "10000ms", "$type": "duration" }, - "duration-notable": { "$value": "1000ms", "$type": "duration" }, - "duration-perceptible": { "$value": "300ms", "$type": "duration" }, - "duration-instant": { "$value": "0ms", "$type": "duration" } - }, - "opacity": { - "opacity-70": { "$value": "0.7", "$type": "number" }, - "opacity-40": { "$value": "0.4", "$type": "number" }, - "opacity-25": { "$value": "0.25", "$type": "number" }, - "opacity-15": { "$value": "0.15", "$type": "number" }, - "opacity-8": { "$value": "0.08", "$type": "number" }, - "opacity-0": { "$value": "0", "$type": "number" } - }, - "shadow": { - "shadow-500": { + "color-blue-600-fade-fill": { "$value": { - "offsetX": "0", - "offsetY": "12px", - "blur": "40px", - "spread": "0", - "color": "{foundations.color.shadow-500-color}" + "color": "{foundations.color.color-blue-600}", + "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "shadow", - "$rawValue": "0, 12px, 40px, 0, rgba(0, 0, 0, 0.65)" + "$type": "color" }, - "shadow-400": { + "color-white-fade-separatorOpacity-primary": { "$value": { - "offsetX": "0", - "offsetY": "6px", - "blur": "10px", - "spread": "0", - "color": "{foundations.color.shadow-400-color}" + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-40}" }, - "$type": "shadow", - "$rawValue": "0, 6px, 10px, 0, rgba(0, 0, 0, 0.55)" + "$type": "color" }, - "shadow-300": { + "color-white-fade-separatorOpacity-secondary": { "$value": { - "offsetX": "0", - "offsetY": "4px", - "blur": "8px", - "spread": "0", - "color": "{foundations.color.shadow-300-color}" + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-25}" }, - "$type": "shadow", - "$rawValue": "0, 4px, 8px, 0, rgba(0, 0, 0, 0.55)" + "$type": "color" }, - "shadow-200": { + "color-white-fade-separatorOpacity-tertiary": { "$value": { - "offsetX": "0", - "offsetY": "2px", - "blur": "4px", - "spread": "0", - "color": "{foundations.color.shadow-200-color}" + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-15}" }, - "$type": "shadow", - "$rawValue": "0, 2px, 4px, 0, rgba(0, 0, 0, 0.5)" + "$type": "color" }, - "shadow-100": { + "color-black-fade-separatorOpacity-primary": { "$value": { - "offsetX": "0", - "offsetY": "1px", - "blur": "3px", - "spread": "0", - "color": "{foundations.color.shadow-100-color}" + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-40}" + }, + "$type": "color" + }, + "color-black-fade-separatorOpacity-secondary": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-25}" + }, + "$type": "color" + }, + "color-black-fade-separatorOpacity-tertiary": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-15}" + }, + "$type": "color" + }, + "color-black-fade-background-hover": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-8}" }, - "$type": "shadow", - "$rawValue": "0, 1px, 3px, 0, rgba(0, 0, 0, 0.5)" + "$type": "color" }, - "shadow-500-color": { "$value": "rgba(0, 0, 0, 0.65)", "$type": "color" }, - "shadow-400-color": { "$value": "rgba(0, 0, 0, 0.55)", "$type": "color" }, - "shadow-300-color": { "$value": "rgba(0, 0, 0, 0.55)", "$type": "color" }, - "shadow-200-color": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color" }, - "shadow-100-color": { "$value": "rgba(0, 0, 0, 0.5)", "$type": "color" } + "color-white-fade-background-hover": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-8}" + }, + "$type": "color" + } }, - "size": { - "size-border-strong": { "$value": "2px", "$type": "dimension" }, - "size-bar-small": { "$value": "2px", "$type": "dimension" }, - "size-bar-strong": { "$value": "16px", "$type": "dimension" }, - "size-selectable": { "$value": "18px", "$type": "dimension" }, - "size-indicator": { "$value": "4px", "$type": "dimension" }, - "size-icon": { "$value": "16px", "$type": "dimension" }, - "size-border": { "$value": "1px", "$type": "dimension" }, - "size-base": { "$value": "44px", "$type": "dimension" }, - "size-bar": { "$value": "8px", "$type": "dimension" }, - "size-adornment": { "$value": "12px", "$type": "dimension" } + "duration": { + "duration-instant": { "$value": "0ms", "$type": "duration" }, + "duration-perceptible": { "$value": "300ms", "$type": "duration" }, + "duration-notable": { "$value": "1000ms", "$type": "duration" }, + "duration-cutoff": { "$value": "10000ms", "$type": "duration" } }, - "spacing": { - "spacing-400": { - "$value": "16", - "$type": "dimension", - "$calculation": "4*{spacing-100}" - }, - "spacing-350": { - "$value": "14", - "$type": "dimension", - "$calculation": "3.5*{spacing-100}" - }, - "spacing-300": { - "$value": "12", - "$type": "dimension", - "$calculation": "3*{spacing-100}" - }, - "spacing-250": { - "$value": "10", - "$type": "dimension", - "$calculation": "2.5*{spacing-100}" - }, - "spacing-200": { - "$value": "8", - "$type": "dimension", - "$calculation": "2*{spacing-100}" - }, - "spacing-150": { - "$value": "6", - "$type": "dimension", - "$calculation": "1.5*{spacing-100}" - }, - "spacing-75": { - "$value": "3", - "$type": "dimension", - "$calculation": "0.75*{spacing-100}" - }, - "spacing-50": { - "$value": "2", - "$type": "dimension", - "$calculation": "0.5*{spacing-100}" - }, - "spacing-25": { - "$value": "1", - "$type": "dimension", - "$calculation": "0.25*{spacing-100}" - }, - "spacing-100": { "$value": "4px", "$type": "dimension" } + "opacity": { + "opacity-0": { "$value": "0", "$type": "number" }, + "opacity-8": { "$value": "0.08", "$type": "number" }, + "opacity-15": { "$value": "0.15", "$type": "number" }, + "opacity-25": { "$value": "0.25", "$type": "number" }, + "opacity-40": { "$value": "0.4", "$type": "number" }, + "opacity-70": { "$value": "0.7", "$type": "number" } }, "typography": { - "typography-fontWeight-extraBold": { - "$value": "800", - "$type": "fontWeight" + "typography-fontFamily": { + "$value": "\"Open Sans\"", + "$type": "fontFamily" }, - "typography-fontWeight-bold": { "$value": "700", "$type": "fontWeight" }, - "typography-fontWeight-semiBold": { - "$value": "600", + "typography-fontFamily-code": { + "$value": "\"PT Mono\"", + "$type": "fontFamily" + }, + "typography-fontWeight-light": { "$value": "300", "$type": "fontWeight" }, + "typography-fontWeight-regular": { + "$value": "400", "$type": "fontWeight" }, "typography-fontWeight-medium": { "$value": "500", "$type": "fontWeight" }, - "typography-fontWeight-regular": { - "$value": "400", + "typography-fontWeight-semiBold": { + "$value": "600", "$type": "fontWeight" }, - "typography-fontWeight-light": { "$value": "300", "$type": "fontWeight" }, - "typography-fontFamily-code": { - "$value": "\"PT Mono\"", - "$type": "fontFamily" - }, - "typography-fontFamily": { - "$value": "\"Open Sans\"", - "$type": "fontFamily" + "typography-fontWeight-bold": { "$value": "700", "$type": "fontWeight" }, + "typography-fontWeight-extraBold": { + "$value": "800", + "$type": "fontWeight" } - }, - "zIndex": { - "zIndex-flyover": { "$value": "1500", "$type": "number" }, - "zIndex-contextMenu": { "$value": "1450", "$type": "number" }, - "zIndex-dragObject": { "$value": "1420", "$type": "number" }, - "zIndex-notification": { "$value": "1400", "$type": "number" }, - "zIndex-modal": { "$value": "1300", "$type": "number" }, - "zIndex-drawer": { "$value": "1200", "$type": "number" }, - "zIndex-appHeader": { "$value": "1100", "$type": "number" }, - "zIndex-popout": { "$value": "1000", "$type": "number" }, - "zIndex-default": { "$value": "1", "$type": "number" } } } } diff --git a/packages/theme/json/getCssVariablesFromDir.js b/packages/theme/json/getCssVariablesFromDir.js new file mode 100644 index 00000000000..527e356d226 --- /dev/null +++ b/packages/theme/json/getCssVariablesFromDir.js @@ -0,0 +1,110 @@ +const fs = require("fs"); +const path = require("path"); + +module.exports = function getCssVariablesFromDir(dirPath) { + const cssVariableRegex = /([a-zA-Z0-9_-]+)\s*:\s*([^;]+)/g; + + const lightModeRegex = /\.salt-theme\[data-mode="light"\].*?\{(.*?)\}.*?/s; + const darkModeRegex = /\.salt-theme\[data-mode="dark"\].*?\{(.*?)\}.*?/s; + const highDensityRegex = /\.salt-density-high.*?\{(.*?)\}.*?/s; + const mediumDensityRegex = /\.salt-density-medium.*?\{(.*?)\}.*?/s; + const lowDensityRegex = /\.salt-density-low.*?\{(.*?)\}.*?/s; + const touchDensityRegex = /\.salt-density-touch.*?\{(.*?)\}.*?/s; + const generalThemeRegex = /\.salt-theme.\{(.*?)\}.*?/s; + + const cssVariables = {}; + const lightModeVariables = {}; + const darkModeVariables = {}; + const hdVariables = {}; + const mdVariables = {}; + const ldVariables = {}; + const tdVariables = {}; + + const files = fs.readdirSync(dirPath); + + files.forEach((file) => { + const filePath = path.join(dirPath, file); + const stats = fs.statSync(filePath); + + if (stats.isDirectory()) { + // Recursively process subdirectories + Object.assign(cssVariables, getCssVariablesFromDir(filePath)); + } else if ( + stats.isFile() && + path.extname(file) === ".css" && + !filePath.includes("animation") + ) { + // Process CSS files + const cssContent = fs.readFileSync(filePath, "utf8"); + + let match; + let lightContent = cssContent.match(lightModeRegex); + let darkContent = cssContent.match(darkModeRegex); + let generalContent = cssContent.match(generalThemeRegex); + let hdContent = cssContent.match(highDensityRegex); + let mdContent = cssContent.match(mediumDensityRegex); + let ldContent = cssContent.match(lowDensityRegex); + let tdContent = cssContent.match(touchDensityRegex); + + if (lightContent) { + while ((match = cssVariableRegex.exec(lightContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + lightModeVariables[variableName] = variableValue; + } + } + if (darkContent) { + while ((match = cssVariableRegex.exec(darkContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + darkModeVariables[variableName] = variableValue; + } + } + if (hdContent) { + while ((match = cssVariableRegex.exec(hdContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + hdVariables[variableName] = variableValue; + } + } + if (mdContent) { + while ((match = cssVariableRegex.exec(mdContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + mdVariables[variableName] = variableValue; + } + } + if (ldContent) { + while ((match = cssVariableRegex.exec(ldContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + ldVariables[variableName] = variableValue; + } + } + if (tdContent) { + while ((match = cssVariableRegex.exec(tdContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + tdVariables[variableName] = variableValue; + } + } + if (generalContent) { + while ((match = cssVariableRegex.exec(generalContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + cssVariables[variableName] = variableValue; + } + } + } + }); + + return { + light: lightModeVariables, + dark: darkModeVariables, + hd: hdVariables, + md: mdVariables, + ld: ldVariables, + td: tdVariables, + general: cssVariables, + }; +}; diff --git a/packages/theme/json/themeToJson.js b/packages/theme/json/themeToJson.js index 86955c296bd..9134da72ea2 100644 --- a/packages/theme/json/themeToJson.js +++ b/packages/theme/json/themeToJson.js @@ -1,39 +1,6 @@ -const fs = require("fs"); -const path = require("path"); const util = require("util"); - -function getCssVariablesFromDir(dirPath) { - const cssVariableRegex = /([a-zA-Z0-9_-]+)\s*:\s*([^;]+)/g; - const cssVariables = {}; - - const files = fs.readdirSync(dirPath); - - files.forEach((file) => { - const filePath = path.join(dirPath, file); - const stats = fs.statSync(filePath); - - if (stats.isDirectory()) { - // Recursively process subdirectories - Object.assign(cssVariables, getCssVariablesFromDir(filePath)); - } else if ( - stats.isFile() && - path.extname(file) === ".css" && - !filePath.includes("animation") - ) { - // Process CSS files - const cssContent = fs.readFileSync(filePath, "utf8"); - let match; - - while ((match = cssVariableRegex.exec(cssContent)) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - cssVariables[variableName] = variableValue; - } - } - }); - - return cssVariables; -} +const path = require("path"); +const getCssVariablesFromDir = require("./getCssVariablesFromDir"); /* Removes surrounding CSS var('...') function from a token */ function stripVarFunc(cssVar) { @@ -45,157 +12,170 @@ function removePrefix(cssVar) { return cssVar.replace("--salt-", ""); } -/* Adds curly brackets around token */ -function formatValue(cssVar) { - return `{${removePrefix(cssVar)}}`; +const jsonTokens = { palette: {}, foundations: {} }; +/* + * Adds token to JSON schema + * @param key - Mode or density the token belongs to, or 'general' if it has the same value in all modes and densities + * @param themeLevel - One of 'palette', 'foundations', 'characteristics' + * @param semantic - Key within theme level, e.g. 'accent', 'color', 'size', etc + * @param tokenName - Name of the token + * @param type - Token type, see https://design-tokens.github.io/community-group/format/#types + * @tokenValue - Value of token (alias, e.g. {color.white}, or raw value, e.g. '4px') + **/ +function addToJson(key, themeLevel, semantic, tokenName, type, tokenValue) { + if (key !== "general") { + // In this case, value will belong to either a mode or density, + // ensure to keep all values within the field + tokenValue = { + [key]: tokenValue, + ...(jsonTokens[themeLevel][semantic] && + jsonTokens[themeLevel][semantic][tokenName] && { + ...jsonTokens[themeLevel][semantic][tokenName].$value, + }), + }; + } + jsonTokens[themeLevel][semantic] = { + ...jsonTokens[themeLevel][semantic], + [tokenName]: { + $value: tokenValue, + $type: type, + }, + }; } -function format(variables) { - const jsonTokens = { palette: {}, foundations: {} }; +function formatFoundationValue(semantic, tokenValue) { + const alias = removePrefix(stripVarFunc(tokenValue)); + + let foundationSemantic; + switch (semantic) { + case "corner": + foundationSemantic = "curve"; + case "opacity": + foundationSemantic = "opacity"; + default: + foundationSemantic = "color"; + } - for (const token of Object.entries(variables)) { - var tokenName = removePrefix(token[0]); - var tokenValue = token[1]; - let type; - let rawValue; - let calculation; + return `{foundations.${foundationSemantic}.${alias}}`; +} - if (tokenName.startsWith("palette")) { - const semantic = tokenName.split("-")[1]; - if (semantic === "corner") { - type = "dimension"; - } else if (semantic === "opacity") { - type = "number"; - } else { - type = "color"; - } - const aliasToken = stripVarFunc(tokenValue); - let rawValue = variables[`${aliasToken}`]; - if (rawValue && rawValue.includes("opacity")) { - let opacityToken = rawValue.split(",")[3]; - let opacityValue = variables[stripVarFunc(opacityToken)]; - rawValue = - rawValue.split(",").slice(0, 3).join(",") + - `, ${ - opacityValue.includes("opacity") - ? variables[stripVarFunc(opacityValue)] - : opacityValue - })`; - } - jsonTokens["palette"][semantic] = { - [tokenName]: { - $value: !rawValue - ? "transparent" - : `{foundations.${ - semantic === "corner" - ? "curve" - : semantic === "opacity" - ? "opacity" - : "color" - }.${removePrefix(aliasToken)}}`, - $type: type, - ...(rawValue && { - $rawValue: rawValue, - }), - }, - ...jsonTokens["palette"][semantic], - }; - } else { - const semantic = tokenName.split("-")[0]; - if (["curve", "size"].includes(semantic)) { - type = "dimension"; - } else if (semantic === "spacing") { - type = "dimension"; - if (tokenValue.includes("calc")) { - let [multiplier, multipleToken] = tokenValue - .replace("calc(", "") - .replace(")", "") - .split(" * "); - multipleToken = variables[stripVarFunc(multipleToken)].replace( - "px", - "" - ); - calculation = removePrefix(stripVarFunc(tokenValue)) - .replace("spacing", `{spacing`) - .replace("100", "100}") - .replace("calc(", ""); - tokenValue = `${multiplier * multipleToken}`; +function format(variables) { + for (const key in variables) { + for (const token of Object.entries(variables[key])) { + var tokenName = removePrefix(token[0]); + var tokenValue = token[1]; + let type; + + if (tokenName.startsWith("palette")) { + const semantic = tokenName.split("-")[1]; + switch (semantic) { + case "corner": + type = "dimension"; + break; + case "opacity": + type = "number"; + break; + default: + type = "color"; } - } else if (["opacity", "zIndex"].includes(semantic)) { - type = "number"; - } else if (semantic === "duration") { - type = "duration"; - } else if (semantic === "typography") { - const attribute = tokenName.split("-")[1]; - type = attribute; - } else if (semantic === "shadow") { - if (tokenName.includes("color")) { - type = "color"; - } else { - type = "shadow"; - const [offsetX, offsetY, blur, spread, color] = tokenValue.split(" "); - tokenValue = { - offsetX: offsetX, - offsetY: offsetY, - blur: blur, - spread: spread, - color: `{foundations.color.${removePrefix(stripVarFunc(color))}}`, - }; - const rawColor = variables[stripVarFunc(color)]; - rawValue = `${offsetX}, ${offsetY}, ${blur}, ${spread}, ${rawColor}`; + tokenValue = + !tokenValue !== "transparent" + ? formatFoundationValue(semantic, tokenValue) + : tokenValue; + addToJson(key, "palette", semantic, tokenName, type, tokenValue); + } else { + const semantic = tokenName.split("-")[0]; + switch (semantic) { + case "curve": + type = "dimension"; + break; + case "size": + type = "dimension"; + break; + case "spacing": + type = "dimension"; + if (tokenValue.includes("calc")) { + let [multiplier, multipleToken] = tokenValue + .replace("calc(", "") + .replace(")", "") + .split(" * "); + multipleToken = variables["general"][ + stripVarFunc(multipleToken) + ].replace("px", ""); + tokenValue = removePrefix(stripVarFunc(tokenValue)) + .replace("spacing", `{spacing`) + .replace("100", "100}") + .replace("calc(", ""); + } + break; + case "opacity": + type = "number"; + break; + case "zIndex": + type = "number"; + break; + case "duration": + type = "duration"; + break; + case "typography": + const attribute = tokenName.split("-")[1]; + type = attribute; + break; + case "shadow": + if (tokenName.includes("color")) { + type = "color"; + } else { + type = "shadow"; + const [offsetX, offsetY, blur, spread, color] = + tokenValue.split(" "); + tokenValue = { + offsetX: offsetX, + offsetY: offsetY, + blur: blur, + spread: spread, + color: `{foundations.color.${removePrefix( + stripVarFunc(color) + )}}`, + }; + } + break; + case "color": + if (tokenName.includes("fade")) { + type = "color"; + const colorToken = `${tokenName.split("-fade")[0]}`; + const opacityValue = stripVarFunc(tokenValue.split(",")[3]); + const foundationOpacityValue = + variables["general"][`${opacityValue}`]; + // e.g. --salt-palette-opacity-disabled -> --salt-opacity-40 + if (foundationOpacityValue.includes("opacity")) { + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{foundations.opacity.${removePrefix( + stripVarFunc(foundationOpacityValue) + )}}`, + }; + } + // eg. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover + else { + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{foundations.opacity.${removePrefix( + opacityValue + )}}`, + }; + } + } else { + type = "color"; + } + break; + default: + type = "undefined"; } - } else if (semantic === "color") { - if (tokenName.includes("fade")) { - type = "color"; - - const colorToken = `${tokenName.split("-fade")[0]}`; - const rawColorValue = variables[`--salt-${colorToken}`]; - - const opacityValue = stripVarFunc(tokenValue.split(",")[3]); - const foundationOpacityValue = variables[`${opacityValue}`]; - // e.g. --salt-palette-opacity-disabled -> --salt-opacity-40 - if (foundationOpacityValue.includes("opacity")) { - const opacityAlias = stripVarFunc(foundationOpacityValue); - let rawOpacityValue = variables[`${opacityAlias}`]; - tokenValue = { - color: `{foundations.color.${colorToken}}`, - opacity: `{foundations.opacity.${removePrefix(opacityAlias)}}`, - }; - rawValue = `${rawColorValue - .replace("rgb", "rgba") - .replace(")", "")}, ${rawOpacityValue})`; - } - // eg. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover - else { - tokenValue = { - color: `{foundations.color.${colorToken}}`, - opacity: `{foundations.opacity.${removePrefix(opacityValue)}}`, - }; - rawValue = `${rawColorValue - .replace("rgb", "rgba") - .replace(")", "")}, ${foundationOpacityValue})`; - } - } else { - type = "color"; + if (type !== "undefined") { + addToJson(key, "foundations", semantic, tokenName, type, tokenValue); } } - - if (type) { - jsonTokens["foundations"][semantic] = { - [tokenName]: { - $value: tokenValue, - $type: type, - ...(rawValue && { - $rawValue: rawValue, - }), - ...(calculation && { - $calculation: calculation, - }), - }, - ...jsonTokens["foundations"][semantic], - }; - } } } @@ -209,7 +189,47 @@ function themeToJson() { const foundationVariables = getCssVariablesFromDir( path.resolve(__dirname, "../css/foundations") ); - format({ ...paletteVariables, ...foundationVariables }); + const characteristicVariables = {}; + // getCssVariablesFromDir( + // path.resolve(__dirname, "../css/characteristics") + // ); + format({ + light: { + ...paletteVariables.light, + ...foundationVariables.light, + ...characteristicVariables.light, + }, + dark: { + ...paletteVariables.dark, + ...foundationVariables.dark, + ...characteristicVariables.dark, + }, + hd: { + ...paletteVariables.hd, + ...foundationVariables.hd, + ...characteristicVariables.hd, + }, + md: { + ...paletteVariables.md, + ...foundationVariables.md, + ...characteristicVariables.md, + }, + td: { + ...paletteVariables.td, + ...foundationVariables.td, + ...characteristicVariables.td, + }, + ld: { + ...paletteVariables.ld, + ...foundationVariables.ld, + ...characteristicVariables.ld, + }, + general: { + ...paletteVariables.general, + ...foundationVariables.general, + ...characteristicVariables.general, + }, + }); } themeToJson(); From fc30e4abd3544d3bf282bdffb90ff93169f0c5ce Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 13 Mar 2024 16:41:57 -0400 Subject: [PATCH 24/50] parse back to css --- .gitignore | 4 +- packages/theme/json/colorFormatSwap.js | 41 ++ packages/theme/json/getCssVariablesFromDir.js | 8 +- packages/theme/json/parsedToCss.css | 494 ++++++++++++++++++ packages/theme/json/themeToJson.js | 98 ++-- packages/theme/json/toCss.js | 186 +++++++ packages/theme/package.json | 3 +- 7 files changed, 778 insertions(+), 56 deletions(-) create mode 100644 packages/theme/json/colorFormatSwap.js create mode 100644 packages/theme/json/parsedToCss.css create mode 100644 packages/theme/json/toCss.js diff --git a/.gitignore b/.gitignore index 0ba110ed599..9b2aad1e205 100644 --- a/.gitignore +++ b/.gitignore @@ -47,4 +47,6 @@ yarn-error.log* /packages/ag-grid-theme/uitk-ag-theme.css /packages/ag-grid-theme/salt-ag-theme.css /docs/css/salt-core.css -/docs/css/salt-lab.css \ No newline at end of file +/docs/css/salt-lab.css + +/packages/theme/json/*.ts \ No newline at end of file diff --git a/packages/theme/json/colorFormatSwap.js b/packages/theme/json/colorFormatSwap.js new file mode 100644 index 00000000000..5d44f19e694 --- /dev/null +++ b/packages/theme/json/colorFormatSwap.js @@ -0,0 +1,41 @@ +function componentToHex(c) { + var hex = c.toString(16); + return hex.length == 1 ? "0" + hex : hex; +} + +function rgbToHex(r, g, b) { + return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); +} +function hexToRGB(hex) { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + return { + r, + g, + b, + }; +} + +module.exports = function colorFormatSwap(swapTo, color) { + if (swapTo === "hex") { + if (color.includes("rgba")) { + let [r, g, b, a] = color + .replace("rgba(", "") + .replace(")", "") + .split(",") + .map((x) => parseInt(x.trim())); + a = ((a * 255) | (1 << 8)).toString(16).slice(1).trim(); + return rgbToHex(r, g, b) + a; + } else { + const [r, g, b] = color + .replace("rgb(", "") + .replace(")", "") + .split(",") + .map((x) => parseInt(x.trim())); + return rgbToHex(r, g, b); + } + } else { + return hexToRGB(color); + } +}; diff --git a/packages/theme/json/getCssVariablesFromDir.js b/packages/theme/json/getCssVariablesFromDir.js index 527e356d226..d966d85d9ac 100644 --- a/packages/theme/json/getCssVariablesFromDir.js +++ b/packages/theme/json/getCssVariablesFromDir.js @@ -101,10 +101,10 @@ module.exports = function getCssVariablesFromDir(dirPath) { return { light: lightModeVariables, dark: darkModeVariables, - hd: hdVariables, - md: mdVariables, - ld: ldVariables, - td: tdVariables, + high: hdVariables, + medium: mdVariables, + low: ldVariables, + touch: tdVariables, general: cssVariables, }; }; diff --git a/packages/theme/json/parsedToCss.css b/packages/theme/json/parsedToCss.css new file mode 100644 index 00000000000..a5d99640644 --- /dev/null +++ b/packages/theme/json/parsedToCss.css @@ -0,0 +1,494 @@ +.salt-theme[data-mode="light"] { + --salt-palette-accent-background: var(--salt-color-blue-500); + --salt-palette-accent-border: var(--salt-color-blue-500); + --salt-palette-accent-foreground: var(--salt-color-white); + --salt-palette-error-background: var(--salt-color-red-10); + --salt-palette-error-background-selected: var(--salt-color-red-20); + --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-foreground: var(--salt-color-red-500); + --salt-palette-info-background: var(--salt-color-blue-10); + --salt-palette-info-border: var(--salt-color-blue-500); + --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-interact-background: transparent; + --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30); + --salt-palette-interact-background-hover: var(--salt-color-blue-10); + --salt-palette-interact-background-active: var(--salt-color-blue-30); + --salt-palette-interact-background-disabled: transparent; + --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background); + --salt-palette-interact-border: var(--salt-color-gray-200); + --salt-palette-interact-border-active: var(--salt-color-blue-600); + --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill); + --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border); + --salt-palette-interact-border-hover: var(--salt-color-blue-500); + --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly); + --salt-palette-interact-foreground: var(--salt-color-gray-200); + --salt-palette-interact-foreground-active: var(--salt-color-blue-600); + --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground); + --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground); + --salt-palette-interact-foreground-hover: var(--salt-color-blue-500); + --salt-palette-interact-outline: var(--salt-color-blue-600); + --salt-palette-interact-cta-background: var(--salt-color-blue-600); + --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); + --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); + --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); + --salt-palette-interact-cta-foreground: var(--salt-color-white); + --salt-palette-interact-cta-foreground-active: var(--salt-color-white); + --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); + --salt-palette-interact-primary-background: var(--salt-color-gray-60); + --salt-palette-interact-primary-background-active: var(--salt-color-gray-200); + --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background); + --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40); + --salt-palette-interact-primary-foreground: var(--salt-color-gray-900); + --salt-palette-interact-primary-foreground-active: var(--salt-color-white); + --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900); + --salt-palette-interact-secondary-background: transparent; + --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200); + --salt-palette-interact-secondary-background-disabled: transparent; + --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40); + --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900); + --salt-palette-interact-secondary-foreground-active: var(--salt-color-white); + --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900); + --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover); + --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600); + --salt-palette-navigate-foreground-active: var(--salt-color-blue-700); + --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800); + --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); + --salt-palette-navigate-indicator-active: var(--salt-color-orange-600); + --salt-palette-negative-foreground: var(--salt-color-red-700); + --salt-palette-neutral-primary-background: var(--salt-color-white); + --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background); + --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly); + --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900); + --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary); + --salt-palette-neutral-primary-border: var(--salt-color-gray-50); + --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border); + --salt-palette-neutral-secondary-background: var(--salt-color-gray-20); + --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background); + --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly); + --salt-palette-neutral-secondary-border: var(--salt-color-gray-50); + --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border); + --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200); + --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground); + --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop); + --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary); + --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary); + --salt-palette-positive-foreground: var(--salt-color-green-700); + --salt-palette-success-background: var(--salt-color-green-10); + --salt-palette-success-background-selected: var(--salt-color-green-20); + --salt-palette-success-border: var(--salt-color-green-500); + --salt-palette-success-foreground: var(--salt-color-green-500); + --salt-palette-warning-background: var(--salt-color-orange-10); + --salt-palette-warning-background-selected: var(--salt-color-orange-20); + --salt-palette-warning-border: var(--salt-color-orange-700); + --salt-palette-warning-foreground: var(--salt-color-orange-700); + --salt-shadow-100-color: rgb(0, 0, 0); + --salt-shadow-200-color: rgb(0, 0, 0); + --salt-shadow-300-color: rgb(0, 0, 0); + --salt-shadow-400-color: rgb(0, 0, 0); + --salt-shadow-500-color: rgb(0, 0, 0); +} + +.salt-theme[data-mode="dark"] { + --salt-palette-accent-background: var(--salt-color-blue-500); + --salt-palette-accent-border: var(--salt-color-blue-500); + --salt-palette-accent-foreground: var(--salt-color-white); + --salt-palette-error-background: var(--salt-color-red-900); + --salt-palette-error-background-selected: var(--salt-color-red-900); + --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-foreground: var(--salt-color-red-500); + --salt-palette-info-background: var(--salt-color-blue-900); + --salt-palette-info-border: var(--salt-color-blue-500); + --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-interact-background: transparent; + --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600); + --salt-palette-interact-background-hover: var(--salt-color-blue-800); + --salt-palette-interact-background-active: var(--salt-color-blue-700); + --salt-palette-interact-background-disabled: transparent; + --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background); + --salt-palette-interact-border: var(--salt-color-gray-90); + --salt-palette-interact-border-active: var(--salt-color-blue-100); + --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill); + --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border); + --salt-palette-interact-border-hover: var(--salt-color-blue-500); + --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly); + --salt-palette-interact-foreground: var(--salt-color-gray-90); + --salt-palette-interact-foreground-active: var(--salt-color-blue-100); + --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground); + --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground); + --salt-palette-interact-foreground-hover: var(--salt-color-blue-500); + --salt-palette-interact-outline: var(--salt-color-blue-100); + --salt-palette-interact-cta-background: var(--salt-color-blue-600); + --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); + --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); + --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); + --salt-palette-interact-cta-foreground: var(--salt-color-white); + --salt-palette-interact-cta-foreground-active: var(--salt-color-white); + --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); + --salt-palette-interact-primary-background: var(--salt-color-gray-300); + --salt-palette-interact-primary-background-active: var(--salt-color-gray-70); + --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background); + --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200); + --salt-palette-interact-primary-foreground: var(--salt-color-white); + --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900); + --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-primary-foreground-hover: var(--salt-color-white); + --salt-palette-interact-secondary-background: transparent; + --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70); + --salt-palette-interact-secondary-background-disabled: transparent; + --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200); + --salt-palette-interact-secondary-foreground: var(--salt-color-white); + --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900); + --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white); + --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover); + --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200); + --salt-palette-navigate-foreground-active: var(--salt-color-blue-300); + --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100); + --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); + --salt-palette-navigate-indicator-active: var(--salt-color-orange-400); + --salt-palette-negative-foreground: var(--salt-color-red-300); + --salt-palette-neutral-primary-background: var(--salt-color-gray-800); + --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background); + --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly); + --salt-palette-neutral-primary-foreground: var(--salt-color-white); + --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary); + --salt-palette-neutral-primary-border: var(--salt-color-gray-300); + --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border); + --salt-palette-neutral-secondary-background: var(--salt-color-gray-600); + --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background); + --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly); + --salt-palette-neutral-secondary-border: var(--salt-color-gray-300); + --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border); + --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70); + --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground); + --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop); + --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary); + --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary); + --salt-palette-positive-foreground: var(--salt-color-green-300); + --salt-palette-success-background: var(--salt-color-green-900); + --salt-palette-success-background-selected: var(--salt-color-green-900); + --salt-palette-success-border: var(--salt-color-green-400); + --salt-palette-success-foreground: var(--salt-color-green-400); + --salt-palette-warning-background: var(--salt-color-orange-900); + --salt-palette-warning-background-selected: var(--salt-color-orange-900); + --salt-palette-warning-border: var(--salt-color-orange-500); + --salt-palette-warning-foreground: var(--salt-color-orange-500); + --salt-shadow-100-color: rgb(0, 0, 0); + --salt-shadow-200-color: rgb(0, 0, 0); + --salt-shadow-300-color: rgb(0, 0, 0); + --salt-shadow-400-color: rgb(0, 0, 0); + --salt-shadow-500-color: rgb(0, 0, 0); +} + +.salt-density-high { + --salt-curve-0: 0; + --salt-curve-50: 1px; + --salt-curve-100: 2px; + --salt-curve-150: 3px; + --salt-curve-999: 999px; + --salt-size-adornment: 6px; + --salt-size-bar: 2px; + --salt-size-base: 20px; + --salt-size-border: 1px; + --salt-size-icon: 10px; + --salt-size-indicator: 1px; + --salt-size-selectable: 12px; + --salt-size-bar-strong: 4px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 4px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-density-medium { + --salt-curve-0: 0; + --salt-curve-50: 2px; + --salt-curve-100: 4px; + --salt-curve-150: 6px; + --salt-curve-999: 999px; + --salt-size-adornment: 8px; + --salt-size-bar: 4px; + --salt-size-base: 28px; + --salt-size-border: 1px; + --salt-size-icon: 12px; + --salt-size-indicator: 2px; + --salt-size-selectable: 14px; + --salt-size-bar-strong: 8px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 8px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-density-low { + --salt-curve-0: 0; + --salt-curve-50: 3px; + --salt-curve-100: 6px; + --salt-curve-150: 9px; + --salt-curve-999: 999px; + --salt-size-adornment: 10px; + --salt-size-bar: 6px; + --salt-size-base: 36px; + --salt-size-border: 1px; + --salt-size-icon: 14px; + --salt-size-indicator: 3px; + --salt-size-selectable: 16px; + --salt-size-bar-strong: 12px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 12px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-density-touch { + --salt-curve-0: 0; + --salt-curve-50: 4px; + --salt-curve-100: 8px; + --salt-curve-150: 12px; + --salt-curve-999: 999px; + --salt-size-adornment: 12px; + --salt-size-bar: 8px; + --salt-size-base: 44px; + --salt-size-border: 1px; + --salt-size-icon: 16px; + --salt-size-indicator: 4px; + --salt-size-selectable: 18px; + --salt-size-bar-strong: 16px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 16px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-theme { + --salt-palette-opacity-backdrop: var(--salt-opacity-70); + --salt-palette-opacity-disabled: var(--salt-opacity-40); + --salt-palette-opacity-background-readonly: var(--salt-opacity-0); + --salt-palette-opacity-border-readonly: var(--salt-opacity-15); + --salt-palette-opacity-primary-border: var(--salt-opacity-40); + --salt-palette-opacity-secondary-border: var(--salt-opacity-25); + --salt-palette-opacity-tertiary-border: var(--salt-opacity-15); + --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color); + --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color); + --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color); + --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color); + --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color); + --salt-color-white: rgb(255, 255, 15); + --salt-color-black: rgb(0, 0, 0); + --salt-color-red-10: rgb(254, 62, 0); + --salt-color-red-20: rgb(252, 252, 9); + --salt-color-red-30: rgb(251, 187, 2); + --salt-color-red-40: rgb(250, 121, 12); + --salt-color-red-50: rgb(249, 72, 5); + --salt-color-red-100: rgb(248, 6, 15); + --salt-color-red-200: rgb(246, 197, 8); + --salt-color-red-300: rgb(245, 148, 2); + --salt-color-red-400: rgb(212, 18, 10); + --salt-color-red-500: rgb(50, 177, 6); + --salt-color-red-600: rgb(66, 1, 0); + --salt-color-red-700: rgb(97, 80, 11); + --salt-color-red-800: rgb(128, 160, 5); + --salt-color-red-900: rgb(18, 82, 2); + --salt-color-orange-10: rgb(254, 139, 15); + --salt-color-orange-20: rgb(237, 250, 6); + --salt-color-orange-30: rgb(237, 104, 14); + --salt-color-orange-40: rgb(236, 215, 6); + --salt-color-orange-50: rgb(236, 85, 14); + --salt-color-orange-100: rgb(171, 85, 1); + --salt-color-orange-200: rgb(106, 84, 4); + --salt-color-orange-300: rgb(41, 83, 8); + --salt-color-orange-400: rgb(232, 82, 11); + --salt-color-orange-500: rgb(167, 49, 9); + --salt-color-orange-600: rgb(6, 81, 9); + --salt-color-orange-700: rgb(101, 81, 3); + --salt-color-orange-800: rgb(196, 64, 13); + --salt-color-orange-900: rgb(98, 194, 4); + --salt-color-green-10: rgb(31, 76, 9); + --salt-color-green-20: rgb(142, 139, 6); + --salt-color-green-30: rgb(13, 218, 4); + --salt-color-green-40: rgb(141, 41, 1); + --salt-color-green-50: rgb(12, 119, 15); + --salt-color-green-100: rgb(219, 215, 4); + --salt-color-green-200: rgb(219, 70, 9); + --salt-color-green-300: rgb(202, 182, 0); + --salt-color-green-400: rgb(9, 197, 10); + --salt-color-green-500: rgb(72, 116, 11); + --salt-color-green-600: rgb(135, 35, 13); + --salt-color-green-700: rgb(197, 210, 14); + --salt-color-green-800: rgb(20, 146, 0); + --salt-color-green-900: rgb(51, 66, 11); + --salt-color-teal-10: rgb(175, 15, 0); + --salt-color-teal-20: rgb(126, 142, 8); + --salt-color-teal-30: rgb(78, 14, 1); + --salt-color-teal-40: rgb(45, 157, 10); + --salt-color-teal-50: rgb(220, 221, 1); + --salt-color-teal-100: rgb(188, 28, 8); + --salt-color-teal-200: rgb(59, 92, 0); + --salt-color-teal-300: rgb(154, 10, 12); + --salt-color-teal-400: rgb(9, 90, 6); + --salt-color-teal-500: rgb(8, 41, 7); + --salt-color-teal-600: rgb(182, 184, 5); + --salt-color-teal-700: rgb(5, 87, 1); + --salt-color-teal-800: rgb(20, 21, 6); + --salt-color-teal-900: rgb(3, 20, 12); + --salt-color-blue-10: rgb(190, 127, 9); + --salt-color-blue-20: rgb(125, 239, 6); + --salt-color-blue-30: rgb(77, 95, 4); + --salt-color-blue-40: rgb(12, 207, 2); + --salt-color-blue-50: rgb(220, 63, 0); + --salt-color-blue-100: rgb(75, 30, 4); + --salt-color-blue-200: rgb(185, 253, 8); + --salt-color-blue-300: rgb(56, 220, 13); + --salt-color-blue-400: rgb(232, 76, 6); + --salt-color-blue-500: rgb(103, 10, 9); + --salt-color-blue-600: rgb(85, 201, 3); + --salt-color-blue-700: rgb(4, 119, 11); + --salt-color-blue-800: rgb(115, 196, 13); + --salt-color-blue-900: rgb(50, 243, 8); + --salt-color-purple-10: rgb(158, 15, 7); + --salt-color-purple-20: rgb(125, 79, 4); + --salt-color-purple-30: rgb(92, 159, 1); + --salt-color-purple-40: rgb(59, 222, 14); + --salt-color-purple-50: rgb(27, 46, 11); + --salt-color-purple-100: rgb(249, 206, 1); + --salt-color-purple-200: rgb(216, 125, 7); + --salt-color-purple-300: rgb(7, 76, 11); + --salt-color-purple-400: rgb(150, 27, 5); + --salt-color-purple-500: rgb(100, 234, 2); + --salt-color-purple-600: rgb(19, 200, 13); + --salt-color-purple-700: rgb(114, 231, 10); + --salt-color-purple-800: rgb(50, 86, 13); + --salt-color-purple-900: rgb(177, 5, 4); + --salt-color-gray-10: rgb(47, 79, 6); + --salt-color-gray-20: rgb(174, 222, 15); + --salt-color-gray-30: rgb(14, 78, 9); + --salt-color-gray-40: rgb(157, 222, 3); + --salt-color-gray-50: rgb(237, 45, 9); + --salt-color-gray-60: rgb(92, 157, 0); + --salt-color-gray-70: rgb(75, 123, 14); + --salt-color-gray-80: rgb(250, 58, 10); + --salt-color-gray-90: rgb(72, 120, 14); + --salt-color-gray-100: rgb(71, 119, 15); + --salt-color-gray-200: rgb(22, 86, 14); + --salt-color-gray-300: rgb(197, 5, 11); + --salt-color-gray-400: rgb(68, 132, 15); + --salt-color-gray-500: rgb(179, 244, 6); + --salt-color-gray-600: rgb(243, 19, 6); + --salt-color-gray-700: rgb(162, 194, 15); + --salt-color-gray-800: rgb(66, 82, 6); + --salt-color-gray-900: rgb(97, 97, 6); + --salt-color-blue-100-fade-foreground: rgba(75, 30, 4, var(--salt-palette-opacity-disabled)); + --salt-color-blue-500-fade-foreground: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); + --salt-color-blue-600-fade-foreground: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); + --salt-color-gray-200-fade-foreground: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-70-fade-foreground: rgba(75, 123, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-90-fade-foreground: rgba(72, 120, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-900-fade-foreground: rgba(97, 97, 6, var(--salt-palette-opacity-disabled)); + --salt-color-green-300-fade-foreground: rgba(202, 182, 0, var(--salt-palette-opacity-disabled)); + --salt-color-green-400-fade-foreground: rgba(9, 197, 10, var(--salt-palette-opacity-disabled)); + --salt-color-green-500-fade-foreground: rgba(72, 116, 11, var(--salt-palette-opacity-disabled)); + --salt-color-green-700-fade-foreground: rgba(197, 210, 14, var(--salt-palette-opacity-disabled)); + --salt-color-red-300-fade-foreground: rgba(245, 148, 2, var(--salt-palette-opacity-disabled)); + --salt-color-red-500-fade-foreground: rgba(50, 177, 6, var(--salt-palette-opacity-disabled)); + --salt-color-red-700-fade-foreground: rgba(97, 80, 11, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-foreground: rgba(255, 255, 15, var(--salt-palette-opacity-disabled)); + --salt-color-blue-500-fade-border: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); + --salt-color-gray-50-fade-border: rgba(237, 45, 9, var(--salt-palette-opacity-disabled)); + --salt-color-gray-60-fade-border: rgba(92, 157, 0, var(--salt-palette-opacity-disabled)); + --salt-color-gray-90-fade-border: rgba(72, 120, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-200-fade-border: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-300-fade-border: rgba(197, 5, 11, var(--salt-palette-opacity-disabled)); + --salt-color-green-400-fade-border: rgba(9, 197, 10, var(--salt-palette-opacity-disabled)); + --salt-color-green-500-fade-border: rgba(72, 116, 11, var(--salt-palette-opacity-disabled)); + --salt-color-orange-400-fade-border: rgba(232, 82, 11, var(--salt-palette-opacity-disabled)); + --salt-color-orange-500-fade-border: rgba(167, 49, 9, var(--salt-palette-opacity-disabled)); + --salt-color-orange-600-fade-border: rgba(6, 81, 9, var(--salt-palette-opacity-disabled)); + --salt-color-orange-700-fade-border: rgba(101, 81, 3, var(--salt-palette-opacity-disabled)); + --salt-color-red-500-fade-border: rgba(50, 177, 6, var(--salt-palette-opacity-disabled)); + --salt-color-gray-90-fade-border-readonly: rgba(72, 120, 14, var(--salt-palette-opacity-border-readonly)); + --salt-color-gray-200-fade-border-readonly: rgba(22, 86, 14, var(--salt-palette-opacity-border-readonly)); + --salt-color-blue-30-fade-background: rgba(77, 95, 4, var(--salt-palette-opacity-disabled)); + --salt-color-blue-500-fade-background: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); + --salt-color-blue-600-fade-background: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); + --salt-color-blue-700-fade-background: rgba(4, 119, 11, var(--salt-palette-opacity-disabled)); + --salt-color-gray-20-fade-background: rgba(174, 222, 15, var(--salt-palette-opacity-disabled)); + --salt-color-gray-60-fade-background: rgba(92, 157, 0, var(--salt-palette-opacity-disabled)); + --salt-color-gray-70-fade-background: rgba(75, 123, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-200-fade-background: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-300-fade-background: rgba(197, 5, 11, var(--salt-palette-opacity-disabled)); + --salt-color-gray-600-fade-background: rgba(243, 19, 6, var(--salt-palette-opacity-disabled)); + --salt-color-gray-800-fade-background: rgba(66, 82, 6, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-background: rgba(255, 255, 15, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-background-readonly: rgba(255, 255, 15, var(--salt-palette-opacity-background-readonly)); + --salt-color-gray-20-fade-background-readonly: rgba(174, 222, 15, var(--salt-palette-opacity-background-readonly)); + --salt-color-gray-600-fade-background-readonly: rgba(243, 19, 6, var(--salt-palette-opacity-background-readonly)); + --salt-color-gray-800-fade-background-readonly: rgba(66, 82, 6, var(--salt-palette-opacity-background-readonly)); + --salt-color-white-fade-backdrop: rgba(255, 255, 15, var(--salt-palette-opacity-backdrop)); + --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop)); + --salt-color-blue-100-fade-fill: rgba(75, 30, 4, var(--salt-palette-opacity-disabled)); + --salt-color-blue-600-fade-fill: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 15, var(--salt-palette-opacity-primary-border)); + --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 15, var(--salt-palette-opacity-secondary-border)); + --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 15, var(--salt-palette-opacity-tertiary-border)); + --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border)); + --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border)); + --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); + --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); + --salt-color-white-fade-background-hover: rgba(255, 255, 15, var(--salt-opacity-8)); + --salt-duration-instant: 0ms; + --salt-duration-perceptible: 300ms; + --salt-duration-notable: 1000ms; + --salt-duration-cutoff: 10000ms; + --salt-opacity-0: 0; + --salt-opacity-8: 0.08; + --salt-opacity-15: 0.15; + --salt-opacity-25: 0.25; + --salt-opacity-40: 0.4; + --salt-opacity-70: 0.7; + --salt-typography-fontFamily: "Open Sans"; + --salt-typography-fontFamily-code: "PT Mono"; + --salt-typography-fontWeight-light: 300; + --salt-typography-fontWeight-regular: 400; + --salt-typography-fontWeight-medium: 500; + --salt-typography-fontWeight-semiBold: 600; + --salt-typography-fontWeight-bold: 700; + --salt-typography-fontWeight-extraBold: 800; +} diff --git a/packages/theme/json/themeToJson.js b/packages/theme/json/themeToJson.js index 9134da72ea2..7a96a75fd76 100644 --- a/packages/theme/json/themeToJson.js +++ b/packages/theme/json/themeToJson.js @@ -1,6 +1,7 @@ const util = require("util"); const path = require("path"); const getCssVariablesFromDir = require("./getCssVariablesFromDir"); +const colorFormatSwap = require("./colorFormatSwap"); /* Removes surrounding CSS var('...') function from a token */ function stripVarFunc(cssVar) { @@ -12,7 +13,12 @@ function removePrefix(cssVar) { return cssVar.replace("--salt-", ""); } -const jsonTokens = { palette: {}, foundations: {} }; +const jsonTokens = { + modes: ["$light", "$dark"], + densities: ["$high", "$medium", "$low", "$touch"], + palette: {}, + foundations: {}, +}; /* * Adds token to JSON schema * @param key - Mode or density the token belongs to, or 'general' if it has the same value in all modes and densities @@ -20,7 +26,7 @@ const jsonTokens = { palette: {}, foundations: {} }; * @param semantic - Key within theme level, e.g. 'accent', 'color', 'size', etc * @param tokenName - Name of the token * @param type - Token type, see https://design-tokens.github.io/community-group/format/#types - * @tokenValue - Value of token (alias, e.g. {color.white}, or raw value, e.g. '4px') + * @tokenValue - Value of token (alias, e.g. {color.white}, or raw value, e.g. '4px', 'transparent') **/ function addToJson(key, themeLevel, semantic, tokenName, type, tokenValue) { if (key !== "general") { @@ -43,6 +49,9 @@ function addToJson(key, themeLevel, semantic, tokenName, type, tokenValue) { }; } +/** + * Maps semantic of palette to corresponding semantic of foundation + **/ function formatFoundationValue(semantic, tokenValue) { const alias = removePrefix(stripVarFunc(tokenValue)); @@ -79,7 +88,7 @@ function format(variables) { type = "color"; } tokenValue = - !tokenValue !== "transparent" + tokenValue !== "transparent" ? formatFoundationValue(semantic, tokenValue) : tokenValue; addToJson(key, "palette", semantic, tokenName, type, tokenValue); @@ -124,6 +133,7 @@ function format(variables) { case "shadow": if (tokenName.includes("color")) { type = "color"; + tokenValue = colorFormatSwap("hex", tokenValue); } else { type = "shadow"; const [offsetX, offsetY, blur, spread, color] = @@ -133,7 +143,7 @@ function format(variables) { offsetY: offsetY, blur: blur, spread: spread, - color: `{foundations.color.${removePrefix( + color: `{foundations.shadow.${removePrefix( stripVarFunc(color) )}}`, }; @@ -144,28 +154,17 @@ function format(variables) { type = "color"; const colorToken = `${tokenName.split("-fade")[0]}`; const opacityValue = stripVarFunc(tokenValue.split(",")[3]); - const foundationOpacityValue = - variables["general"][`${opacityValue}`]; - // e.g. --salt-palette-opacity-disabled -> --salt-opacity-40 - if (foundationOpacityValue.includes("opacity")) { - tokenValue = { - color: `{foundations.color.${colorToken}}`, - opacity: `{foundations.opacity.${removePrefix( - stripVarFunc(foundationOpacityValue) - )}}`, - }; - } - // eg. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover - else { - tokenValue = { - color: `{foundations.color.${colorToken}}`, - opacity: `{foundations.opacity.${removePrefix( - opacityValue - )}}`, - }; - } + // the semantic check here is due to e.g. --salt-palette-opacity-disabled used in fade tokens (correct) vs + // e.g. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover (this is technically wrong) + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{${ + opacityValue.includes("palette") ? "palette" : "foundations" + }.opacity.${removePrefix(stripVarFunc(opacityValue))}}`, + }; } else { type = "color"; + tokenValue = colorFormatSwap("hex", tokenValue); } break; default: @@ -179,50 +178,49 @@ function format(variables) { } } - console.log(util.inspect(jsonTokens, false, null, true /* enable colors */)); + // console.log(util.inspect(jsonTokens, false, null, true /* enable colors */)); } -function themeToJson() { +module.exports = function themeToJson() { const paletteVariables = getCssVariablesFromDir( path.resolve(__dirname, "../css/palette") ); const foundationVariables = getCssVariablesFromDir( path.resolve(__dirname, "../css/foundations") ); - const characteristicVariables = {}; - // getCssVariablesFromDir( - // path.resolve(__dirname, "../css/characteristics") - // ); + const characteristicVariables = getCssVariablesFromDir( + path.resolve(__dirname, "../css/characteristics") + ); format({ - light: { + $light: { ...paletteVariables.light, ...foundationVariables.light, ...characteristicVariables.light, }, - dark: { + $dark: { ...paletteVariables.dark, ...foundationVariables.dark, ...characteristicVariables.dark, }, - hd: { - ...paletteVariables.hd, - ...foundationVariables.hd, - ...characteristicVariables.hd, + $high: { + ...paletteVariables.high, + ...foundationVariables.high, + ...characteristicVariables.high, }, - md: { - ...paletteVariables.md, - ...foundationVariables.md, - ...characteristicVariables.md, + $medium: { + ...paletteVariables.medium, + ...foundationVariables.medium, + ...characteristicVariables.medium, }, - td: { - ...paletteVariables.td, - ...foundationVariables.td, - ...characteristicVariables.td, + $touch: { + ...paletteVariables.touch, + ...foundationVariables.touch, + ...characteristicVariables.touch, }, - ld: { - ...paletteVariables.ld, - ...foundationVariables.ld, - ...characteristicVariables.ld, + $low: { + ...paletteVariables.low, + ...foundationVariables.low, + ...characteristicVariables.low, }, general: { ...paletteVariables.general, @@ -230,6 +228,6 @@ function themeToJson() { ...characteristicVariables.general, }, }); -} -themeToJson(); + return jsonTokens; +}; diff --git a/packages/theme/json/toCss.js b/packages/theme/json/toCss.js new file mode 100644 index 00000000000..c9013f22824 --- /dev/null +++ b/packages/theme/json/toCss.js @@ -0,0 +1,186 @@ +const util = require("util"); +const themeToJson = require("./themeToJson"); +const colorFormatSwap = require("./colorFormatSwap"); + +const themeJson = themeToJson(); + +var hexRegex = /^#[0-9A-F]{6}[0-9a-f]{0,2}$/i; + +function convertToRgb(alias) { + // color needs converting + const color = alias.replace("#", ""); + return colorFormatSwap("rgb", color); +} + +function getActualColor(alias, mode) { + const pathByGrouping = alias.slice(1, -1).split("."); + + let x = 0; + let p = { ...themeJson }; + + while (pathByGrouping[x]) { + p = p[pathByGrouping[x]]; + x++; + } + + if (!p["$value"]) { + return undefined; + } + + const hex = mode ? p["$value"][mode] : p["$value"]; + return convertToRgb(hex); +} + +function getValue(alias) { + if (hexRegex.test(alias)) { + const rgb = convertToRgb(alias); + return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; + } + + if (!(alias.startsWith("{") && alias.endsWith("}"))) { + // must be raw value, e.g. 'transparent' + return alias; + } + + // else must be true alias, get path + const pathByGrouping = alias.slice(1, -1).split("."); + + let x = 0; + let p = pathByGrouping[x]; + + while (pathByGrouping[x]) { + p = pathByGrouping[x]; + x++; + } + + return `var(--salt-${p})`; +} + +function toCSS() { + const classes = { + ...themeJson.modes.reduce( + (a, mode) => ({ + ...a, + [mode]: { + class: `.salt-theme[data-mode="${mode.slice(1)}"]`, + variables: [], + }, + }), + {} + ), + ...themeJson.densities.reduce( + (a, density) => ({ + ...a, + [density]: { + class: `.salt-density-${density.slice(1)}`, + variables: [], + }, + }), + {} + ), + ["general"]: { + class: `.salt-theme`, + variables: [], + }, + }; + + // Palette + for (const semantic of Object.entries(themeJson.palette)) { + // General + for (const token of Object.entries(semantic[1])) { + if (typeof token[1]["$value"] === "string") { + const value = getValue(token[1]["$value"]); + classes["general"].variables = [ + ...classes["general"].variables, + `--salt-${token[0]}: ${value};`, + ]; + } + } + // Modes + for (const mode of themeJson.modes) { + for (const token of Object.entries(semantic[1])) { + if (token[1]["$value"][mode]) { + const value = getValue(token[1]["$value"][mode]); + classes[mode].variables = [ + ...classes[mode].variables, + `--salt-${token[0]}: ${value};`, + ]; + } + } + } + } + + // Foundations + for (const semantic of Object.entries(themeJson.foundations)) { + // General + for (const token of Object.entries(semantic[1])) { + if (typeof token[1]["$value"] === "string") { + const value = getValue(token[1]["$value"]); + classes["general"].variables = [ + ...classes["general"].variables, + `--salt-${token[0]}: ${value};`, + ]; + } + if (token[1]["$value"]["opacity"] && token[1]["$value"]["color"]) { + const color = getActualColor(token[1]["$value"]["color"]); + const opacity = getValue(token[1]["$value"]["opacity"]); + classes["general"].variables = [ + ...classes["general"].variables, + `--salt-${token[0]}: rgba(${color.r}, ${color.g}, ${color.b}, ${opacity});`, + ]; + } + if ( + token[1]["$value"][ + "offsetX" + ] /* can be improved when typed; but this must be a shadow */ + ) { + const offsetX = token[1]["$value"]["offsetX"]; + const offsetY = token[1]["$value"]["offsetY"]; + const blur = token[1]["$value"]["blur"]; + const spread = token[1]["$value"]["spread"]; + const color = getValue(token[1]["$value"]["color"]); + classes["general"].variables = [ + ...classes["general"].variables, + `--salt-${token[0]}: ${offsetX} ${offsetY} ${blur} ${spread} ${color};`, + ]; + } + } + // Modes + for (const mode of themeJson.modes) { + for (const token of Object.entries(semantic[1])) { + if (token[1]["$value"][mode]) { + const value = getValue(token[1]["$value"][mode]); + classes[mode].variables = [ + ...classes[mode].variables, + `--salt-${token[0]}: ${value};`, + ]; + } + } + } + // Densities + for (const density of themeJson.densities) { + for (const token of Object.entries(semantic[1])) { + if (token[1]["$value"][density]) { + const value = getValue(token[1]["$value"][density]); + classes[density].variables = [ + ...classes[density].variables, + `--salt-${token[0]}: ${value};`, + ]; + } + } + } + } + + // console.log(util.inspect(classes, false, null, true /* enable colors */)); + + let CSS = ""; + + for (const c of Object.entries(classes)) { + CSS += c[1].class + " {\n"; + CSS += "\t" + c[1].variables.join("\n\t") + " \n}\n\n"; + } + + console.log(CSS); +} + +toCSS(); diff --git a/packages/theme/package.json b/packages/theme/package.json index 0843fe121d2..20e99cdd74f 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -11,7 +11,8 @@ "style": "index.css", "files": [ "/index.css", - "/css" + "/css", + "/json" ], "scripts": { "build": "yarn node ./scripts/build.mjs" From cb81dcd79b807a9508d17e1e8552f28011f655a3 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 15:21:37 -0400 Subject: [PATCH 25/50] restructure for snapshot --- packages/theme/css/global.css | 2 +- packages/theme/json/example.json | 1412 ------------ packages/theme/json/parsedToCss.css | 494 ----- .../json/{ => parsers}/colorFormatSwap.js | 1 + .../{ => parsers}/getCssVariablesFromDir.js | 0 .../theme/json/{ => parsers}/themeToJson.js | 26 +- packages/theme/json/{ => parsers}/toCss.js | 28 +- packages/theme/json/theme.css | 495 +++++ packages/theme/json/theme.json | 1890 +++++++++++++++++ 9 files changed, 2422 insertions(+), 1926 deletions(-) delete mode 100644 packages/theme/json/example.json delete mode 100644 packages/theme/json/parsedToCss.css rename packages/theme/json/{ => parsers}/colorFormatSwap.js (99%) rename packages/theme/json/{ => parsers}/getCssVariablesFromDir.js (100%) rename packages/theme/json/{ => parsers}/themeToJson.js (92%) rename packages/theme/json/{ => parsers}/toCss.js (91%) create mode 100644 packages/theme/json/theme.css create mode 100644 packages/theme/json/theme.json diff --git a/packages/theme/css/global.css b/packages/theme/css/global.css index c7231b9ec62..a92a75f7bfd 100644 --- a/packages/theme/css/global.css +++ b/packages/theme/css/global.css @@ -1,5 +1,5 @@ /** - * Have some global styles to simulate more realistic app. Currently only for Storybook. + * Global styles */ .salt-theme { diff --git a/packages/theme/json/example.json b/packages/theme/json/example.json deleted file mode 100644 index 4cb7d527256..00000000000 --- a/packages/theme/json/example.json +++ /dev/null @@ -1,1412 +0,0 @@ -{ - "palette": { - "accent": { - "palette-accent-background": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-accent-border": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-accent-foreground": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - } - }, - "error": { - "palette-error-background": { - "$value": { - "dark": "{foundations.color.color-red-900}", - "light": "{foundations.color.color-red-10}" - }, - "$type": "color" - }, - "palette-error-background-selected": { - "$value": { - "dark": "{foundations.color.color-red-900}", - "light": "{foundations.color.color-red-20}" - }, - "$type": "color" - }, - "palette-error-border": { - "$value": { - "dark": "{foundations.color.color-red-500}", - "light": "{foundations.color.color-red-500}" - }, - "$type": "color" - }, - "palette-error-foreground": { - "$value": { - "dark": "{foundations.color.color-red-500}", - "light": "{foundations.color.color-red-500}" - }, - "$type": "color" - } - }, - "info": { - "palette-info-background": { - "$value": { - "dark": "{foundations.color.color-blue-900}", - "light": "{foundations.color.color-blue-10}" - }, - "$type": "color" - }, - "palette-info-border": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-info-foreground": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - } - }, - "interact": { - "palette-interact-background": { - "$value": { - "dark": "{foundations.color.transparent}", - "light": "{foundations.color.transparent}" - }, - "$type": "color" - }, - "palette-interact-background-blurSelected": { - "$value": { - "dark": "{foundations.color.color-gray-600}", - "light": "{foundations.color.color-gray-30}" - }, - "$type": "color" - }, - "palette-interact-background-hover": { - "$value": { - "dark": "{foundations.color.color-blue-800}", - "light": "{foundations.color.color-blue-10}" - }, - "$type": "color" - }, - "palette-interact-background-active": { - "$value": { - "dark": "{foundations.color.color-blue-700}", - "light": "{foundations.color.color-blue-30}" - }, - "$type": "color" - }, - "palette-interact-background-disabled": { - "$value": { - "dark": "{foundations.color.transparent}", - "light": "{foundations.color.transparent}" - }, - "$type": "color" - }, - "palette-interact-background-activeDisabled": { - "$value": { - "dark": "{foundations.color.color-blue-700-fade-background}", - "light": "{foundations.color.color-blue-30-fade-background}" - }, - "$type": "color" - }, - "palette-interact-border": { - "$value": { - "dark": "{foundations.color.color-gray-90}", - "light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-border-active": { - "$value": { - "dark": "{foundations.color.color-blue-100}", - "light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-border-activeDisabled": { - "$value": { - "dark": "{foundations.color.color-blue-100-fade-fill}", - "light": "{foundations.color.color-blue-600-fade-fill}" - }, - "$type": "color" - }, - "palette-interact-border-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-90-fade-border}", - "light": "{foundations.color.color-gray-200-fade-border}" - }, - "$type": "color" - }, - "palette-interact-border-hover": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-interact-border-readonly": { - "$value": { - "dark": "{foundations.color.color-gray-90-fade-border-readonly}", - "light": "{foundations.color.color-gray-200-fade-border-readonly}" - }, - "$type": "color" - }, - "palette-interact-foreground": { - "$value": { - "dark": "{foundations.color.color-gray-90}", - "light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-foreground-active": { - "$value": { - "dark": "{foundations.color.color-blue-100}", - "light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-foreground-activeDisabled": { - "$value": { - "dark": "{foundations.color.color-blue-100-fade-foreground}", - "light": "{foundations.color.color-blue-600-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-foreground-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-90-fade-foreground}", - "light": "{foundations.color.color-gray-200-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-foreground-hover": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-interact-outline": { - "$value": { - "dark": "{foundations.color.color-blue-100}", - "light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-cta-background": { - "$value": { - "dark": "{foundations.color.color-blue-600}", - "light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-cta-background-active": { - "$value": { - "dark": "{foundations.color.color-blue-700}", - "light": "{foundations.color.color-blue-700}" - }, - "$type": "color" - }, - "palette-interact-cta-background-disabled": { - "$value": { - "dark": "{foundations.color.color-blue-600-fade-background}", - "light": "{foundations.color.color-blue-600-fade-background}" - }, - "$type": "color" - }, - "palette-interact-cta-background-hover": { - "$value": { - "dark": "{foundations.color.color-blue-500}", - "light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground-active": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground-disabled": { - "$value": { - "dark": "{foundations.color.color-white-fade-foreground}", - "light": "{foundations.color.color-white-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground-hover": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-primary-background": { - "$value": { - "dark": "{foundations.color.color-gray-300}", - "light": "{foundations.color.color-gray-60}" - }, - "$type": "color" - }, - "palette-interact-primary-background-active": { - "$value": { - "dark": "{foundations.color.color-gray-70}", - "light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-primary-background-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-300-fade-background}", - "light": "{foundations.color.color-gray-60-fade-background}" - }, - "$type": "color" - }, - "palette-interact-primary-background-hover": { - "$value": { - "dark": "{foundations.color.color-gray-200}", - "light": "{foundations.color.color-gray-40}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground-active": { - "$value": { - "dark": "{foundations.color.color-gray-900}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground-disabled": { - "$value": { - "dark": "{foundations.color.color-white-fade-foreground}", - "light": "{foundations.color.color-gray-900-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground-hover": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-interact-secondary-background": { - "$value": { - "dark": "{foundations.color.transparent}", - "light": "{foundations.color.transparent}" - }, - "$type": "color" - }, - "palette-interact-secondary-background-active": { - "$value": { - "dark": "{foundations.color.color-gray-70}", - "light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-secondary-background-disabled": { - "$value": { - "dark": "{foundations.color.transparent}", - "light": "{foundations.color.transparent}" - }, - "$type": "color" - }, - "palette-interact-secondary-background-hover": { - "$value": { - "dark": "{foundations.color.color-gray-200}", - "light": "{foundations.color.color-gray-40}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground-active": { - "$value": { - "dark": "{foundations.color.color-gray-900}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground-disabled": { - "$value": { - "dark": "{foundations.color.color-white-fade-foreground}", - "light": "{foundations.color.color-gray-900-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground-hover": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - } - }, - "navigate": { - "palette-navigate-background-hover": { - "$value": { - "dark": "{foundations.color.color-white-fade-background-hover}", - "light": "{foundations.color.color-black-fade-background-hover}" - }, - "$type": "color" - }, - "palette-navigate-foreground-hover": { - "$value": { - "dark": "{foundations.color.color-blue-200}", - "light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-navigate-foreground-active": { - "$value": { - "dark": "{foundations.color.color-blue-300}", - "light": "{foundations.color.color-blue-700}" - }, - "$type": "color" - }, - "palette-navigate-foreground-visited": { - "$value": { - "dark": "{foundations.color.color-purple-100}", - "light": "{foundations.color.color-purple-800}" - }, - "$type": "color" - }, - "palette-navigate-indicator-hover": { - "$value": { - "dark": "{foundations.color.color-gray-90}", - "light": "{foundations.color.color-gray-90}" - }, - "$type": "color" - }, - "palette-navigate-indicator-active": { - "$value": { - "dark": "{foundations.color.color-orange-400}", - "light": "{foundations.color.color-orange-600}" - }, - "$type": "color" - } - }, - "negative": { - "palette-negative-foreground": { - "$value": { - "dark": "{foundations.color.color-red-300}", - "light": "{foundations.color.color-red-700}" - }, - "$type": "color" - } - }, - "neutral": { - "palette-neutral-primary-background": { - "$value": { - "dark": "{foundations.color.color-gray-800}", - "light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-neutral-primary-background-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-800-fade-background}", - "light": "{foundations.color.color-white-fade-background}" - }, - "$type": "color" - }, - "palette-neutral-primary-background-readonly": { - "$value": { - "dark": "{foundations.color.color-gray-800-fade-background-readonly}", - "light": "{foundations.color.color-white-fade-background-readonly}" - }, - "$type": "color" - }, - "palette-neutral-primary-foreground": { - "$value": { - "dark": "{foundations.color.color-white}", - "light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-neutral-primary-foreground-disabled": { - "$value": { - "dark": "{foundations.color.color-white-fade-foreground}", - "light": "{foundations.color.color-gray-900-fade-foreground}" - }, - "$type": "color" - }, - "palette-neutral-primary-separator": { - "$value": { - "dark": "{foundations.color.color-white-fade-separatorOpacity-primary}", - "light": "{foundations.color.color-black-fade-separatorOpacity-primary}" - }, - "$type": "color" - }, - "palette-neutral-primary-border": { - "$value": { - "dark": "{foundations.color.color-gray-300}", - "light": "{foundations.color.color-gray-50}" - }, - "$type": "color" - }, - "palette-neutral-primary-border-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-300-fade-border}", - "light": "{foundations.color.color-gray-50-fade-border}" - }, - "$type": "color" - }, - "palette-neutral-secondary-background": { - "$value": { - "dark": "{foundations.color.color-gray-600}", - "light": "{foundations.color.color-gray-20}" - }, - "$type": "color" - }, - "palette-neutral-secondary-background-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-600-fade-background}", - "light": "{foundations.color.color-gray-20-fade-background}" - }, - "$type": "color" - }, - "palette-neutral-secondary-background-readonly": { - "$value": { - "dark": "{foundations.color.color-gray-600-fade-background-readonly}", - "light": "{foundations.color.color-gray-20-fade-background-readonly}" - }, - "$type": "color" - }, - "palette-neutral-secondary-border": { - "$value": { - "dark": "{foundations.color.color-gray-300}", - "light": "{foundations.color.color-gray-50}" - }, - "$type": "color" - }, - "palette-neutral-secondary-border-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-300-fade-border}", - "light": "{foundations.color.color-gray-50-fade-border}" - }, - "$type": "color" - }, - "palette-neutral-secondary-foreground": { - "$value": { - "dark": "{foundations.color.color-gray-70}", - "light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-neutral-secondary-foreground-disabled": { - "$value": { - "dark": "{foundations.color.color-gray-70-fade-foreground}", - "light": "{foundations.color.color-gray-200-fade-foreground}" - }, - "$type": "color" - }, - "palette-neutral-backdrop": { - "$value": { - "dark": "{foundations.color.color-black-fade-backdrop}", - "light": "{foundations.color.color-white-fade-backdrop}" - }, - "$type": "color" - }, - "palette-neutral-secondary-separator": { - "$value": { - "dark": "{foundations.color.color-white-fade-separatorOpacity-secondary}", - "light": "{foundations.color.color-black-fade-separatorOpacity-secondary}" - }, - "$type": "color" - }, - "palette-neutral-tertiary-separator": { - "$value": { - "dark": "{foundations.color.color-white-fade-separatorOpacity-tertiary}", - "light": "{foundations.color.color-black-fade-separatorOpacity-tertiary}" - }, - "$type": "color" - } - }, - "positive": { - "palette-positive-foreground": { - "$value": { - "dark": "{foundations.color.color-green-300}", - "light": "{foundations.color.color-green-700}" - }, - "$type": "color" - } - }, - "success": { - "palette-success-background": { - "$value": { - "dark": "{foundations.color.color-green-900}", - "light": "{foundations.color.color-green-10}" - }, - "$type": "color" - }, - "palette-success-background-selected": { - "$value": { - "dark": "{foundations.color.color-green-900}", - "light": "{foundations.color.color-green-20}" - }, - "$type": "color" - }, - "palette-success-border": { - "$value": { - "dark": "{foundations.color.color-green-400}", - "light": "{foundations.color.color-green-500}" - }, - "$type": "color" - }, - "palette-success-foreground": { - "$value": { - "dark": "{foundations.color.color-green-400}", - "light": "{foundations.color.color-green-500}" - }, - "$type": "color" - } - }, - "warning": { - "palette-warning-background": { - "$value": { - "dark": "{foundations.color.color-orange-900}", - "light": "{foundations.color.color-orange-10}" - }, - "$type": "color" - }, - "palette-warning-background-selected": { - "$value": { - "dark": "{foundations.color.color-orange-900}", - "light": "{foundations.color.color-orange-20}" - }, - "$type": "color" - }, - "palette-warning-border": { - "$value": { - "dark": "{foundations.color.color-orange-500}", - "light": "{foundations.color.color-orange-700}" - }, - "$type": "color" - }, - "palette-warning-foreground": { - "$value": { - "dark": "{foundations.color.color-orange-500}", - "light": "{foundations.color.color-orange-700}" - }, - "$type": "color" - } - }, - "opacity": { - "palette-opacity-backdrop": { - "$value": "{foundations.color.opacity-70}", - "$type": "number" - }, - "palette-opacity-disabled": { - "$value": "{foundations.color.opacity-40}", - "$type": "number" - }, - "palette-opacity-background-readonly": { - "$value": "{foundations.color.opacity-0}", - "$type": "number" - }, - "palette-opacity-border-readonly": { - "$value": "{foundations.color.opacity-15}", - "$type": "number" - }, - "palette-opacity-primary-border": { - "$value": "{foundations.color.opacity-40}", - "$type": "number" - }, - "palette-opacity-secondary-border": { - "$value": "{foundations.color.opacity-25}", - "$type": "number" - }, - "palette-opacity-tertiary-border": { - "$value": "{foundations.color.opacity-15}", - "$type": "number" - } - } - }, - "foundations": { - "shadow": { - "shadow-100-color": { - "$value": { - "dark": "rgba(0, 0, 0, 0.5)", - "light": "rgba(0, 0, 0, 0.1)" - }, - "$type": "color" - }, - "shadow-200-color": { - "$value": { - "dark": "rgba(0, 0, 0, 0.5)", - "light": "rgba(0, 0, 0, 0.1)" - }, - "$type": "color" - }, - "shadow-300-color": { - "$value": { - "dark": "rgba(0, 0, 0, 0.55)", - "light": "rgba(0, 0, 0, 0.15)" - }, - "$type": "color" - }, - "shadow-400-color": { - "$value": { - "dark": "rgba(0, 0, 0, 0.55)", - "light": "rgba(0, 0, 0, 0.2)" - }, - "$type": "color" - }, - "shadow-500-color": { - "$value": { - "dark": "rgba(0, 0, 0, 0.65)", - "light": "rgba(0, 0, 0, 0.3)" - }, - "$type": "color" - }, - "shadow-100": { - "$value": { - "offsetX": "0", - "offsetY": "1px", - "blur": "3px", - "spread": "0", - "color": "{foundations.color.shadow-100-color}" - }, - "$type": "shadow" - }, - "shadow-200": { - "$value": { - "offsetX": "0", - "offsetY": "2px", - "blur": "4px", - "spread": "0", - "color": "{foundations.color.shadow-200-color}" - }, - "$type": "shadow" - }, - "shadow-300": { - "$value": { - "offsetX": "0", - "offsetY": "4px", - "blur": "8px", - "spread": "0", - "color": "{foundations.color.shadow-300-color}" - }, - "$type": "shadow" - }, - "shadow-400": { - "$value": { - "offsetX": "0", - "offsetY": "6px", - "blur": "10px", - "spread": "0", - "color": "{foundations.color.shadow-400-color}" - }, - "$type": "shadow" - }, - "shadow-500": { - "$value": { - "offsetX": "0", - "offsetY": "12px", - "blur": "40px", - "spread": "0", - "color": "{foundations.color.shadow-500-color}" - }, - "$type": "shadow" - } - }, - "curve": { - "curve-0": { - "$value": { "ld": "0", "td": "0", "md": "0", "hd": "0" }, - "$type": "dimension" - }, - "curve-50": { - "$value": { "ld": "3px", "td": "4px", "md": "2px", "hd": "1px" }, - "$type": "dimension" - }, - "curve-100": { - "$value": { "ld": "6px", "td": "8px", "md": "4px", "hd": "2px" }, - "$type": "dimension" - }, - "curve-150": { - "$value": { "ld": "9px", "td": "12px", "md": "6px", "hd": "3px" }, - "$type": "dimension" - }, - "curve-999": { - "$value": { - "ld": "999px", - "td": "999px", - "md": "999px", - "hd": "999px" - }, - "$type": "dimension" - } - }, - "size": { - "size-adornment": { - "$value": { "ld": "10px", "td": "12px", "md": "8px", "hd": "6px" }, - "$type": "dimension" - }, - "size-bar": { - "$value": { "ld": "6px", "td": "8px", "md": "4px", "hd": "2px" }, - "$type": "dimension" - }, - "size-base": { - "$value": { "ld": "36px", "td": "44px", "md": "28px", "hd": "20px" }, - "$type": "dimension" - }, - "size-border": { - "$value": { "ld": "1px", "td": "1px", "md": "1px", "hd": "1px" }, - "$type": "dimension" - }, - "size-icon": { - "$value": { "ld": "14px", "td": "16px", "md": "12px", "hd": "10px" }, - "$type": "dimension" - }, - "size-indicator": { - "$value": { "ld": "3px", "td": "4px", "md": "2px", "hd": "1px" }, - "$type": "dimension" - }, - "size-selectable": { - "$value": { "ld": "16px", "td": "18px", "md": "14px", "hd": "12px" }, - "$type": "dimension" - }, - "size-bar-strong": { - "$value": { "ld": "12px", "td": "16px", "md": "8px", "hd": "4px" }, - "$type": "dimension" - }, - "size-bar-small": { - "$value": { "ld": "2px", "td": "2px", "md": "2px", "hd": "2px" }, - "$type": "dimension" - }, - "size-border-strong": { - "$value": { "ld": "2px", "td": "2px", "md": "2px", "hd": "2px" }, - "$type": "dimension" - } - }, - "spacing": { - "spacing-100": { - "$value": { "ld": "12px", "td": "16px", "md": "8px", "hd": "4px" }, - "$type": "dimension" - } - }, - "zIndex": { - "zIndex-default": { - "$value": { "ld": "1", "td": "1", "md": "1", "hd": "1" }, - "$type": "number" - }, - "zIndex-popout": { - "$value": { "ld": "1000", "td": "1000", "md": "1000", "hd": "1000" }, - "$type": "number" - }, - "zIndex-appHeader": { - "$value": { "ld": "1100", "td": "1100", "md": "1100", "hd": "1100" }, - "$type": "number" - }, - "zIndex-drawer": { - "$value": { "ld": "1200", "td": "1200", "md": "1200", "hd": "1200" }, - "$type": "number" - }, - "zIndex-modal": { - "$value": { "ld": "1300", "td": "1300", "md": "1300", "hd": "1300" }, - "$type": "number" - }, - "zIndex-notification": { - "$value": { "ld": "1400", "td": "1400", "md": "1400", "hd": "1400" }, - "$type": "number" - }, - "zIndex-dragObject": { - "$value": { "ld": "1420", "td": "1420", "md": "1420", "hd": "1420" }, - "$type": "number" - }, - "zIndex-contextMenu": { - "$value": { "ld": "1450", "td": "1450", "md": "1450", "hd": "1450" }, - "$type": "number" - }, - "zIndex-flyover": { - "$value": { "ld": "1500", "td": "1500", "md": "1500", "hd": "1500" }, - "$type": "number" - } - }, - "color": { - "color-white": { "$value": "rgb(255, 255, 255)", "$type": "color" }, - "color-black": { "$value": "rgb(0, 0, 0)", "$type": "color" }, - "color-red-10": { "$value": "rgb(255, 227, 224)", "$type": "color" }, - "color-red-20": { "$value": "rgb(255, 207, 201)", "$type": "color" }, - "color-red-30": { "$value": "rgb(255, 187, 178)", "$type": "color" }, - "color-red-40": { "$value": "rgb(255, 167, 156)", "$type": "color" }, - "color-red-50": { "$value": "rgb(255, 148, 133)", "$type": "color" }, - "color-red-100": { "$value": "rgb(255, 128, 111)", "$type": "color" }, - "color-red-200": { "$value": "rgb(255, 108, 88)", "$type": "color" }, - "color-red-300": { "$value": "rgb(255, 89, 66)", "$type": "color" }, - "color-red-400": { "$value": "rgb(237, 65, 42)", "$type": "color" }, - "color-red-500": { "$value": "rgb(227, 43, 22)", "$type": "color" }, - "color-red-600": { "$value": "rgb(196, 32, 16)", "$type": "color" }, - "color-red-700": { "$value": "rgb(166, 21, 11)", "$type": "color" }, - "color-red-800": { "$value": "rgb(136, 10, 5)", "$type": "color" }, - "color-red-900": { "$value": "rgb(65, 37, 34)", "$type": "color" }, - "color-orange-10": { "$value": "rgb(255, 232, 191)", "$type": "color" }, - "color-orange-20": { "$value": "rgb(254, 223, 166)", "$type": "color" }, - "color-orange-30": { "$value": "rgb(254, 214, 142)", "$type": "color" }, - "color-orange-40": { "$value": "rgb(254, 205, 118)", "$type": "color" }, - "color-orange-50": { "$value": "rgb(254, 197, 94)", "$type": "color" }, - "color-orange-100": { "$value": "rgb(250, 181, 81)", "$type": "color" }, - "color-orange-200": { "$value": "rgb(246, 165, 68)", "$type": "color" }, - "color-orange-300": { "$value": "rgb(242, 149, 56)", "$type": "color" }, - "color-orange-400": { "$value": "rgb(238, 133, 43)", "$type": "color" }, - "color-orange-500": { "$value": "rgb(234, 115, 25)", "$type": "color" }, - "color-orange-600": { "$value": "rgb(224, 101, 25)", "$type": "color" }, - "color-orange-700": { "$value": "rgb(214, 85, 19)", "$type": "color" }, - "color-orange-800": { "$value": "rgb(204, 68, 13)", "$type": "color" }, - "color-orange-900": { "$value": "rgb(54, 44, 36)", "$type": "color" }, - "color-green-10": { "$value": "rgb(209, 244, 201)", "$type": "color" }, - "color-green-20": { "$value": "rgb(184, 232, 182)", "$type": "color" }, - "color-green-30": { "$value": "rgb(160, 221, 164)", "$type": "color" }, - "color-green-40": { "$value": "rgb(136, 210, 145)", "$type": "color" }, - "color-green-50": { "$value": "rgb(112, 199, 127)", "$type": "color" }, - "color-green-100": { "$value": "rgb(93, 189, 116)", "$type": "color" }, - "color-green-200": { "$value": "rgb(77, 180, 105)", "$type": "color" }, - "color-green-300": { "$value": "rgb(60, 171, 96)", "$type": "color" }, - "color-green-400": { "$value": "rgb(48, 156, 90)", "$type": "color" }, - "color-green-500": { "$value": "rgb(36, 135, 75)", "$type": "color" }, - "color-green-600": { "$value": "rgb(24, 114, 61)", "$type": "color" }, - "color-green-700": { "$value": "rgb(12, 93, 46)", "$type": "color" }, - "color-green-800": { "$value": "rgb(1, 73, 32)", "$type": "color" }, - "color-green-900": { "$value": "rgb(35, 52, 43)", "$type": "color" }, - "color-teal-10": { "$value": "rgb(218, 240, 240)", "$type": "color" }, - "color-teal-20": { "$value": "rgb(199, 232, 232)", "$type": "color" }, - "color-teal-30": { "$value": "rgb(180, 224, 225)", "$type": "color" }, - "color-teal-40": { "$value": "rgb(162, 217, 218)", "$type": "color" }, - "color-teal-50": { "$value": "rgb(141, 205, 209)", "$type": "color" }, - "color-teal-100": { "$value": "rgb(123, 193, 200)", "$type": "color" }, - "color-teal-200": { "$value": "rgb(99, 181, 192)", "$type": "color" }, - "color-teal-300": { "$value": "rgb(73, 160, 172)", "$type": "color" }, - "color-teal-400": { "$value": "rgb(48, 149, 166)", "$type": "color" }, - "color-teal-500": { "$value": "rgb(0, 130, 151)", "$type": "color" }, - "color-teal-600": { "$value": "rgb(27, 107, 133)", "$type": "color" }, - "color-teal-700": { "$value": "rgb(0, 85, 113)", "$type": "color" }, - "color-teal-800": { "$value": "rgb(1, 65, 86)", "$type": "color" }, - "color-teal-900": { "$value": "rgb(0, 49, 76)", "$type": "color" }, - "color-blue-10": { "$value": "rgb(203, 231, 249)", "$type": "color" }, - "color-blue-20": { "$value": "rgb(183, 222, 246)", "$type": "color" }, - "color-blue-30": { "$value": "rgb(164, 213, 244)", "$type": "color" }, - "color-blue-40": { "$value": "rgb(144, 204, 242)", "$type": "color" }, - "color-blue-50": { "$value": "rgb(125, 195, 240)", "$type": "color" }, - "color-blue-100": { "$value": "rgb(100, 177, 228)", "$type": "color" }, - "color-blue-200": { "$value": "rgb(75, 159, 216)", "$type": "color" }, - "color-blue-300": { "$value": "rgb(51, 141, 205)", "$type": "color" }, - "color-blue-400": { "$value": "rgb(46, 132, 198)", "$type": "color" }, - "color-blue-500": { "$value": "rgb(38, 112, 169)", "$type": "color" }, - "color-blue-600": { "$value": "rgb(21, 92, 147)", "$type": "color" }, - "color-blue-700": { "$value": "rgb(0, 71, 123)", "$type": "color" }, - "color-blue-800": { "$value": "rgb(39, 60, 77)", "$type": "color" }, - "color-blue-900": { "$value": "rgb(35, 47, 56)", "$type": "color" }, - "color-purple-10": { "$value": "rgb(249, 224, 247)", "$type": "color" }, - "color-purple-20": { "$value": "rgb(247, 212, 244)", "$type": "color" }, - "color-purple-30": { "$value": "rgb(245, 201, 241)", "$type": "color" }, - "color-purple-40": { "$value": "rgb(243, 189, 238)", "$type": "color" }, - "color-purple-50": { "$value": "rgb(241, 178, 235)", "$type": "color" }, - "color-purple-100": { "$value": "rgb(223, 156, 225)", "$type": "color" }, - "color-purple-200": { "$value": "rgb(205, 135, 215)", "$type": "color" }, - "color-purple-300": { "$value": "rgb(192, 116, 203)", "$type": "color" }, - "color-purple-400": { "$value": "rgb(169, 97, 181)", "$type": "color" }, - "color-purple-500": { "$value": "rgb(150, 78, 162)", "$type": "color" }, - "color-purple-600": { "$value": "rgb(129, 60, 141)", "$type": "color" }, - "color-purple-700": { "$value": "rgb(103, 46, 122)", "$type": "color" }, - "color-purple-800": { "$value": "rgb(83, 37, 109)", "$type": "color" }, - "color-purple-900": { "$value": "rgb(59, 16, 84)", "$type": "color" }, - "color-gray-10": { "$value": "rgb(242, 244, 246)", "$type": "color" }, - "color-gray-20": { "$value": "rgb(234, 237, 239)", "$type": "color" }, - "color-gray-30": { "$value": "rgb(224, 228, 233)", "$type": "color" }, - "color-gray-40": { "$value": "rgb(217, 221, 227)", "$type": "color" }, - "color-gray-50": { "$value": "rgb(206, 210, 217)", "$type": "color" }, - "color-gray-60": { "$value": "rgb(197, 201, 208)", "$type": "color" }, - "color-gray-70": { "$value": "rgb(180, 183, 190)", "$type": "color" }, - "color-gray-80": { "$value": "rgb(159, 163, 170)", "$type": "color" }, - "color-gray-90": { "$value": "rgb(132, 135, 142)", "$type": "color" }, - "color-gray-100": { "$value": "rgb(116, 119, 127)", "$type": "color" }, - "color-gray-200": { "$value": "rgb(97, 101, 110)", "$type": "color" }, - "color-gray-300": { "$value": "rgb(76, 80, 91)", "$type": "color" }, - "color-gray-400": { "$value": "rgb(68, 72, 79)", "$type": "color" }, - "color-gray-500": { "$value": "rgb(59, 63, 70)", "$type": "color" }, - "color-gray-600": { "$value": "rgb(47, 49, 54)", "$type": "color" }, - "color-gray-700": { "$value": "rgb(42, 44, 47)", "$type": "color" }, - "color-gray-800": { "$value": "rgb(36, 37, 38)", "$type": "color" }, - "color-gray-900": { "$value": "rgb(22, 22, 22)", "$type": "color" }, - "color-blue-100-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-600-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-200-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-70-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-90-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-900-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-900}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-green-300-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-300}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-green-400-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-green-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-green-700-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-700}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-red-300-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-300}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-red-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-red-700-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-700}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-white-fade-foreground": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-500-fade-border": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-50-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-50}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-60-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-90-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-200-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-300-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-green-400-fade-border": { - "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-green-500-fade-border": { - "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-orange-400-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-400}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-orange-500-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-orange-600-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-600}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-orange-700-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-700}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-red-500-fade-border": { - "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-90-fade-border-readonly": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{foundations.opacity.opacity-15}" - }, - "$type": "color" - }, - "color-gray-200-fade-border-readonly": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{foundations.opacity.opacity-15}" - }, - "$type": "color" - }, - "color-blue-30-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-30}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-500-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-600-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-700-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-700}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-20-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-60-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-70-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-200-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-300-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-600-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-gray-800-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-white-fade-background": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-white-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-0}" - }, - "$type": "color" - }, - "color-gray-20-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{foundations.opacity.opacity-0}" - }, - "$type": "color" - }, - "color-gray-600-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{foundations.opacity.opacity-0}" - }, - "$type": "color" - }, - "color-gray-800-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{foundations.opacity.opacity-0}" - }, - "$type": "color" - }, - "color-white-fade-backdrop": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-70}" - }, - "$type": "color" - }, - "color-black-fade-backdrop": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-70}" - }, - "$type": "color" - }, - "color-blue-100-fade-fill": { - "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-blue-600-fade-fill": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-white-fade-separatorOpacity-primary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-white-fade-separatorOpacity-secondary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-25}" - }, - "$type": "color" - }, - "color-white-fade-separatorOpacity-tertiary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-15}" - }, - "$type": "color" - }, - "color-black-fade-separatorOpacity-primary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-40}" - }, - "$type": "color" - }, - "color-black-fade-separatorOpacity-secondary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-25}" - }, - "$type": "color" - }, - "color-black-fade-separatorOpacity-tertiary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-15}" - }, - "$type": "color" - }, - "color-black-fade-background-hover": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-8}" - }, - "$type": "color" - }, - "color-white-fade-background-hover": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-8}" - }, - "$type": "color" - } - }, - "duration": { - "duration-instant": { "$value": "0ms", "$type": "duration" }, - "duration-perceptible": { "$value": "300ms", "$type": "duration" }, - "duration-notable": { "$value": "1000ms", "$type": "duration" }, - "duration-cutoff": { "$value": "10000ms", "$type": "duration" } - }, - "opacity": { - "opacity-0": { "$value": "0", "$type": "number" }, - "opacity-8": { "$value": "0.08", "$type": "number" }, - "opacity-15": { "$value": "0.15", "$type": "number" }, - "opacity-25": { "$value": "0.25", "$type": "number" }, - "opacity-40": { "$value": "0.4", "$type": "number" }, - "opacity-70": { "$value": "0.7", "$type": "number" } - }, - "typography": { - "typography-fontFamily": { - "$value": "\"Open Sans\"", - "$type": "fontFamily" - }, - "typography-fontFamily-code": { - "$value": "\"PT Mono\"", - "$type": "fontFamily" - }, - "typography-fontWeight-light": { "$value": "300", "$type": "fontWeight" }, - "typography-fontWeight-regular": { - "$value": "400", - "$type": "fontWeight" - }, - "typography-fontWeight-medium": { - "$value": "500", - "$type": "fontWeight" - }, - "typography-fontWeight-semiBold": { - "$value": "600", - "$type": "fontWeight" - }, - "typography-fontWeight-bold": { "$value": "700", "$type": "fontWeight" }, - "typography-fontWeight-extraBold": { - "$value": "800", - "$type": "fontWeight" - } - } - } -} diff --git a/packages/theme/json/parsedToCss.css b/packages/theme/json/parsedToCss.css deleted file mode 100644 index a5d99640644..00000000000 --- a/packages/theme/json/parsedToCss.css +++ /dev/null @@ -1,494 +0,0 @@ -.salt-theme[data-mode="light"] { - --salt-palette-accent-background: var(--salt-color-blue-500); - --salt-palette-accent-border: var(--salt-color-blue-500); - --salt-palette-accent-foreground: var(--salt-color-white); - --salt-palette-error-background: var(--salt-color-red-10); - --salt-palette-error-background-selected: var(--salt-color-red-20); - --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground: var(--salt-color-red-500); - --salt-palette-info-background: var(--salt-color-blue-10); - --salt-palette-info-border: var(--salt-color-blue-500); - --salt-palette-info-foreground: var(--salt-color-blue-500); - --salt-palette-interact-background: transparent; - --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30); - --salt-palette-interact-background-hover: var(--salt-color-blue-10); - --salt-palette-interact-background-active: var(--salt-color-blue-30); - --salt-palette-interact-background-disabled: transparent; - --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background); - --salt-palette-interact-border: var(--salt-color-gray-200); - --salt-palette-interact-border-active: var(--salt-color-blue-600); - --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill); - --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border); - --salt-palette-interact-border-hover: var(--salt-color-blue-500); - --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly); - --salt-palette-interact-foreground: var(--salt-color-gray-200); - --salt-palette-interact-foreground-active: var(--salt-color-blue-600); - --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground); - --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground); - --salt-palette-interact-foreground-hover: var(--salt-color-blue-500); - --salt-palette-interact-outline: var(--salt-color-blue-600); - --salt-palette-interact-cta-background: var(--salt-color-blue-600); - --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); - --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); - --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); - --salt-palette-interact-cta-foreground: var(--salt-color-white); - --salt-palette-interact-cta-foreground-active: var(--salt-color-white); - --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); - --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); - --salt-palette-interact-primary-background: var(--salt-color-gray-60); - --salt-palette-interact-primary-background-active: var(--salt-color-gray-200); - --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background); - --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40); - --salt-palette-interact-primary-foreground: var(--salt-color-gray-900); - --salt-palette-interact-primary-foreground-active: var(--salt-color-white); - --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); - --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900); - --salt-palette-interact-secondary-background: transparent; - --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200); - --salt-palette-interact-secondary-background-disabled: transparent; - --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40); - --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900); - --salt-palette-interact-secondary-foreground-active: var(--salt-color-white); - --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); - --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900); - --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover); - --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600); - --salt-palette-navigate-foreground-active: var(--salt-color-blue-700); - --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800); - --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); - --salt-palette-navigate-indicator-active: var(--salt-color-orange-600); - --salt-palette-negative-foreground: var(--salt-color-red-700); - --salt-palette-neutral-primary-background: var(--salt-color-white); - --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background); - --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly); - --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900); - --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); - --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary); - --salt-palette-neutral-primary-border: var(--salt-color-gray-50); - --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border); - --salt-palette-neutral-secondary-background: var(--salt-color-gray-20); - --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background); - --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly); - --salt-palette-neutral-secondary-border: var(--salt-color-gray-50); - --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border); - --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200); - --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground); - --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop); - --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary); - --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary); - --salt-palette-positive-foreground: var(--salt-color-green-700); - --salt-palette-success-background: var(--salt-color-green-10); - --salt-palette-success-background-selected: var(--salt-color-green-20); - --salt-palette-success-border: var(--salt-color-green-500); - --salt-palette-success-foreground: var(--salt-color-green-500); - --salt-palette-warning-background: var(--salt-color-orange-10); - --salt-palette-warning-background-selected: var(--salt-color-orange-20); - --salt-palette-warning-border: var(--salt-color-orange-700); - --salt-palette-warning-foreground: var(--salt-color-orange-700); - --salt-shadow-100-color: rgb(0, 0, 0); - --salt-shadow-200-color: rgb(0, 0, 0); - --salt-shadow-300-color: rgb(0, 0, 0); - --salt-shadow-400-color: rgb(0, 0, 0); - --salt-shadow-500-color: rgb(0, 0, 0); -} - -.salt-theme[data-mode="dark"] { - --salt-palette-accent-background: var(--salt-color-blue-500); - --salt-palette-accent-border: var(--salt-color-blue-500); - --salt-palette-accent-foreground: var(--salt-color-white); - --salt-palette-error-background: var(--salt-color-red-900); - --salt-palette-error-background-selected: var(--salt-color-red-900); - --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground: var(--salt-color-red-500); - --salt-palette-info-background: var(--salt-color-blue-900); - --salt-palette-info-border: var(--salt-color-blue-500); - --salt-palette-info-foreground: var(--salt-color-blue-500); - --salt-palette-interact-background: transparent; - --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600); - --salt-palette-interact-background-hover: var(--salt-color-blue-800); - --salt-palette-interact-background-active: var(--salt-color-blue-700); - --salt-palette-interact-background-disabled: transparent; - --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background); - --salt-palette-interact-border: var(--salt-color-gray-90); - --salt-palette-interact-border-active: var(--salt-color-blue-100); - --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill); - --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border); - --salt-palette-interact-border-hover: var(--salt-color-blue-500); - --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly); - --salt-palette-interact-foreground: var(--salt-color-gray-90); - --salt-palette-interact-foreground-active: var(--salt-color-blue-100); - --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground); - --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground); - --salt-palette-interact-foreground-hover: var(--salt-color-blue-500); - --salt-palette-interact-outline: var(--salt-color-blue-100); - --salt-palette-interact-cta-background: var(--salt-color-blue-600); - --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); - --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); - --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); - --salt-palette-interact-cta-foreground: var(--salt-color-white); - --salt-palette-interact-cta-foreground-active: var(--salt-color-white); - --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); - --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); - --salt-palette-interact-primary-background: var(--salt-color-gray-300); - --salt-palette-interact-primary-background-active: var(--salt-color-gray-70); - --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background); - --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200); - --salt-palette-interact-primary-foreground: var(--salt-color-white); - --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900); - --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground); - --salt-palette-interact-primary-foreground-hover: var(--salt-color-white); - --salt-palette-interact-secondary-background: transparent; - --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70); - --salt-palette-interact-secondary-background-disabled: transparent; - --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200); - --salt-palette-interact-secondary-foreground: var(--salt-color-white); - --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900); - --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground); - --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white); - --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover); - --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200); - --salt-palette-navigate-foreground-active: var(--salt-color-blue-300); - --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100); - --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); - --salt-palette-navigate-indicator-active: var(--salt-color-orange-400); - --salt-palette-negative-foreground: var(--salt-color-red-300); - --salt-palette-neutral-primary-background: var(--salt-color-gray-800); - --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background); - --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly); - --salt-palette-neutral-primary-foreground: var(--salt-color-white); - --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground); - --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary); - --salt-palette-neutral-primary-border: var(--salt-color-gray-300); - --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border); - --salt-palette-neutral-secondary-background: var(--salt-color-gray-600); - --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background); - --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly); - --salt-palette-neutral-secondary-border: var(--salt-color-gray-300); - --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border); - --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70); - --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground); - --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop); - --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary); - --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary); - --salt-palette-positive-foreground: var(--salt-color-green-300); - --salt-palette-success-background: var(--salt-color-green-900); - --salt-palette-success-background-selected: var(--salt-color-green-900); - --salt-palette-success-border: var(--salt-color-green-400); - --salt-palette-success-foreground: var(--salt-color-green-400); - --salt-palette-warning-background: var(--salt-color-orange-900); - --salt-palette-warning-background-selected: var(--salt-color-orange-900); - --salt-palette-warning-border: var(--salt-color-orange-500); - --salt-palette-warning-foreground: var(--salt-color-orange-500); - --salt-shadow-100-color: rgb(0, 0, 0); - --salt-shadow-200-color: rgb(0, 0, 0); - --salt-shadow-300-color: rgb(0, 0, 0); - --salt-shadow-400-color: rgb(0, 0, 0); - --salt-shadow-500-color: rgb(0, 0, 0); -} - -.salt-density-high { - --salt-curve-0: 0; - --salt-curve-50: 1px; - --salt-curve-100: 2px; - --salt-curve-150: 3px; - --salt-curve-999: 999px; - --salt-size-adornment: 6px; - --salt-size-bar: 2px; - --salt-size-base: 20px; - --salt-size-border: 1px; - --salt-size-icon: 10px; - --salt-size-indicator: 1px; - --salt-size-selectable: 12px; - --salt-size-bar-strong: 4px; - --salt-size-bar-small: 2px; - --salt-size-border-strong: 2px; - --salt-spacing-100: 4px; - --salt-zIndex-default: 1; - --salt-zIndex-popout: 1000; - --salt-zIndex-appHeader: 1100; - --salt-zIndex-drawer: 1200; - --salt-zIndex-modal: 1300; - --salt-zIndex-notification: 1400; - --salt-zIndex-dragObject: 1420; - --salt-zIndex-contextMenu: 1450; - --salt-zIndex-flyover: 1500; -} - -.salt-density-medium { - --salt-curve-0: 0; - --salt-curve-50: 2px; - --salt-curve-100: 4px; - --salt-curve-150: 6px; - --salt-curve-999: 999px; - --salt-size-adornment: 8px; - --salt-size-bar: 4px; - --salt-size-base: 28px; - --salt-size-border: 1px; - --salt-size-icon: 12px; - --salt-size-indicator: 2px; - --salt-size-selectable: 14px; - --salt-size-bar-strong: 8px; - --salt-size-bar-small: 2px; - --salt-size-border-strong: 2px; - --salt-spacing-100: 8px; - --salt-zIndex-default: 1; - --salt-zIndex-popout: 1000; - --salt-zIndex-appHeader: 1100; - --salt-zIndex-drawer: 1200; - --salt-zIndex-modal: 1300; - --salt-zIndex-notification: 1400; - --salt-zIndex-dragObject: 1420; - --salt-zIndex-contextMenu: 1450; - --salt-zIndex-flyover: 1500; -} - -.salt-density-low { - --salt-curve-0: 0; - --salt-curve-50: 3px; - --salt-curve-100: 6px; - --salt-curve-150: 9px; - --salt-curve-999: 999px; - --salt-size-adornment: 10px; - --salt-size-bar: 6px; - --salt-size-base: 36px; - --salt-size-border: 1px; - --salt-size-icon: 14px; - --salt-size-indicator: 3px; - --salt-size-selectable: 16px; - --salt-size-bar-strong: 12px; - --salt-size-bar-small: 2px; - --salt-size-border-strong: 2px; - --salt-spacing-100: 12px; - --salt-zIndex-default: 1; - --salt-zIndex-popout: 1000; - --salt-zIndex-appHeader: 1100; - --salt-zIndex-drawer: 1200; - --salt-zIndex-modal: 1300; - --salt-zIndex-notification: 1400; - --salt-zIndex-dragObject: 1420; - --salt-zIndex-contextMenu: 1450; - --salt-zIndex-flyover: 1500; -} - -.salt-density-touch { - --salt-curve-0: 0; - --salt-curve-50: 4px; - --salt-curve-100: 8px; - --salt-curve-150: 12px; - --salt-curve-999: 999px; - --salt-size-adornment: 12px; - --salt-size-bar: 8px; - --salt-size-base: 44px; - --salt-size-border: 1px; - --salt-size-icon: 16px; - --salt-size-indicator: 4px; - --salt-size-selectable: 18px; - --salt-size-bar-strong: 16px; - --salt-size-bar-small: 2px; - --salt-size-border-strong: 2px; - --salt-spacing-100: 16px; - --salt-zIndex-default: 1; - --salt-zIndex-popout: 1000; - --salt-zIndex-appHeader: 1100; - --salt-zIndex-drawer: 1200; - --salt-zIndex-modal: 1300; - --salt-zIndex-notification: 1400; - --salt-zIndex-dragObject: 1420; - --salt-zIndex-contextMenu: 1450; - --salt-zIndex-flyover: 1500; -} - -.salt-theme { - --salt-palette-opacity-backdrop: var(--salt-opacity-70); - --salt-palette-opacity-disabled: var(--salt-opacity-40); - --salt-palette-opacity-background-readonly: var(--salt-opacity-0); - --salt-palette-opacity-border-readonly: var(--salt-opacity-15); - --salt-palette-opacity-primary-border: var(--salt-opacity-40); - --salt-palette-opacity-secondary-border: var(--salt-opacity-25); - --salt-palette-opacity-tertiary-border: var(--salt-opacity-15); - --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color); - --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color); - --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color); - --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color); - --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color); - --salt-color-white: rgb(255, 255, 15); - --salt-color-black: rgb(0, 0, 0); - --salt-color-red-10: rgb(254, 62, 0); - --salt-color-red-20: rgb(252, 252, 9); - --salt-color-red-30: rgb(251, 187, 2); - --salt-color-red-40: rgb(250, 121, 12); - --salt-color-red-50: rgb(249, 72, 5); - --salt-color-red-100: rgb(248, 6, 15); - --salt-color-red-200: rgb(246, 197, 8); - --salt-color-red-300: rgb(245, 148, 2); - --salt-color-red-400: rgb(212, 18, 10); - --salt-color-red-500: rgb(50, 177, 6); - --salt-color-red-600: rgb(66, 1, 0); - --salt-color-red-700: rgb(97, 80, 11); - --salt-color-red-800: rgb(128, 160, 5); - --salt-color-red-900: rgb(18, 82, 2); - --salt-color-orange-10: rgb(254, 139, 15); - --salt-color-orange-20: rgb(237, 250, 6); - --salt-color-orange-30: rgb(237, 104, 14); - --salt-color-orange-40: rgb(236, 215, 6); - --salt-color-orange-50: rgb(236, 85, 14); - --salt-color-orange-100: rgb(171, 85, 1); - --salt-color-orange-200: rgb(106, 84, 4); - --salt-color-orange-300: rgb(41, 83, 8); - --salt-color-orange-400: rgb(232, 82, 11); - --salt-color-orange-500: rgb(167, 49, 9); - --salt-color-orange-600: rgb(6, 81, 9); - --salt-color-orange-700: rgb(101, 81, 3); - --salt-color-orange-800: rgb(196, 64, 13); - --salt-color-orange-900: rgb(98, 194, 4); - --salt-color-green-10: rgb(31, 76, 9); - --salt-color-green-20: rgb(142, 139, 6); - --salt-color-green-30: rgb(13, 218, 4); - --salt-color-green-40: rgb(141, 41, 1); - --salt-color-green-50: rgb(12, 119, 15); - --salt-color-green-100: rgb(219, 215, 4); - --salt-color-green-200: rgb(219, 70, 9); - --salt-color-green-300: rgb(202, 182, 0); - --salt-color-green-400: rgb(9, 197, 10); - --salt-color-green-500: rgb(72, 116, 11); - --salt-color-green-600: rgb(135, 35, 13); - --salt-color-green-700: rgb(197, 210, 14); - --salt-color-green-800: rgb(20, 146, 0); - --salt-color-green-900: rgb(51, 66, 11); - --salt-color-teal-10: rgb(175, 15, 0); - --salt-color-teal-20: rgb(126, 142, 8); - --salt-color-teal-30: rgb(78, 14, 1); - --salt-color-teal-40: rgb(45, 157, 10); - --salt-color-teal-50: rgb(220, 221, 1); - --salt-color-teal-100: rgb(188, 28, 8); - --salt-color-teal-200: rgb(59, 92, 0); - --salt-color-teal-300: rgb(154, 10, 12); - --salt-color-teal-400: rgb(9, 90, 6); - --salt-color-teal-500: rgb(8, 41, 7); - --salt-color-teal-600: rgb(182, 184, 5); - --salt-color-teal-700: rgb(5, 87, 1); - --salt-color-teal-800: rgb(20, 21, 6); - --salt-color-teal-900: rgb(3, 20, 12); - --salt-color-blue-10: rgb(190, 127, 9); - --salt-color-blue-20: rgb(125, 239, 6); - --salt-color-blue-30: rgb(77, 95, 4); - --salt-color-blue-40: rgb(12, 207, 2); - --salt-color-blue-50: rgb(220, 63, 0); - --salt-color-blue-100: rgb(75, 30, 4); - --salt-color-blue-200: rgb(185, 253, 8); - --salt-color-blue-300: rgb(56, 220, 13); - --salt-color-blue-400: rgb(232, 76, 6); - --salt-color-blue-500: rgb(103, 10, 9); - --salt-color-blue-600: rgb(85, 201, 3); - --salt-color-blue-700: rgb(4, 119, 11); - --salt-color-blue-800: rgb(115, 196, 13); - --salt-color-blue-900: rgb(50, 243, 8); - --salt-color-purple-10: rgb(158, 15, 7); - --salt-color-purple-20: rgb(125, 79, 4); - --salt-color-purple-30: rgb(92, 159, 1); - --salt-color-purple-40: rgb(59, 222, 14); - --salt-color-purple-50: rgb(27, 46, 11); - --salt-color-purple-100: rgb(249, 206, 1); - --salt-color-purple-200: rgb(216, 125, 7); - --salt-color-purple-300: rgb(7, 76, 11); - --salt-color-purple-400: rgb(150, 27, 5); - --salt-color-purple-500: rgb(100, 234, 2); - --salt-color-purple-600: rgb(19, 200, 13); - --salt-color-purple-700: rgb(114, 231, 10); - --salt-color-purple-800: rgb(50, 86, 13); - --salt-color-purple-900: rgb(177, 5, 4); - --salt-color-gray-10: rgb(47, 79, 6); - --salt-color-gray-20: rgb(174, 222, 15); - --salt-color-gray-30: rgb(14, 78, 9); - --salt-color-gray-40: rgb(157, 222, 3); - --salt-color-gray-50: rgb(237, 45, 9); - --salt-color-gray-60: rgb(92, 157, 0); - --salt-color-gray-70: rgb(75, 123, 14); - --salt-color-gray-80: rgb(250, 58, 10); - --salt-color-gray-90: rgb(72, 120, 14); - --salt-color-gray-100: rgb(71, 119, 15); - --salt-color-gray-200: rgb(22, 86, 14); - --salt-color-gray-300: rgb(197, 5, 11); - --salt-color-gray-400: rgb(68, 132, 15); - --salt-color-gray-500: rgb(179, 244, 6); - --salt-color-gray-600: rgb(243, 19, 6); - --salt-color-gray-700: rgb(162, 194, 15); - --salt-color-gray-800: rgb(66, 82, 6); - --salt-color-gray-900: rgb(97, 97, 6); - --salt-color-blue-100-fade-foreground: rgba(75, 30, 4, var(--salt-palette-opacity-disabled)); - --salt-color-blue-500-fade-foreground: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); - --salt-color-blue-600-fade-foreground: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); - --salt-color-gray-200-fade-foreground: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-70-fade-foreground: rgba(75, 123, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-90-fade-foreground: rgba(72, 120, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-900-fade-foreground: rgba(97, 97, 6, var(--salt-palette-opacity-disabled)); - --salt-color-green-300-fade-foreground: rgba(202, 182, 0, var(--salt-palette-opacity-disabled)); - --salt-color-green-400-fade-foreground: rgba(9, 197, 10, var(--salt-palette-opacity-disabled)); - --salt-color-green-500-fade-foreground: rgba(72, 116, 11, var(--salt-palette-opacity-disabled)); - --salt-color-green-700-fade-foreground: rgba(197, 210, 14, var(--salt-palette-opacity-disabled)); - --salt-color-red-300-fade-foreground: rgba(245, 148, 2, var(--salt-palette-opacity-disabled)); - --salt-color-red-500-fade-foreground: rgba(50, 177, 6, var(--salt-palette-opacity-disabled)); - --salt-color-red-700-fade-foreground: rgba(97, 80, 11, var(--salt-palette-opacity-disabled)); - --salt-color-white-fade-foreground: rgba(255, 255, 15, var(--salt-palette-opacity-disabled)); - --salt-color-blue-500-fade-border: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); - --salt-color-gray-50-fade-border: rgba(237, 45, 9, var(--salt-palette-opacity-disabled)); - --salt-color-gray-60-fade-border: rgba(92, 157, 0, var(--salt-palette-opacity-disabled)); - --salt-color-gray-90-fade-border: rgba(72, 120, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-200-fade-border: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-300-fade-border: rgba(197, 5, 11, var(--salt-palette-opacity-disabled)); - --salt-color-green-400-fade-border: rgba(9, 197, 10, var(--salt-palette-opacity-disabled)); - --salt-color-green-500-fade-border: rgba(72, 116, 11, var(--salt-palette-opacity-disabled)); - --salt-color-orange-400-fade-border: rgba(232, 82, 11, var(--salt-palette-opacity-disabled)); - --salt-color-orange-500-fade-border: rgba(167, 49, 9, var(--salt-palette-opacity-disabled)); - --salt-color-orange-600-fade-border: rgba(6, 81, 9, var(--salt-palette-opacity-disabled)); - --salt-color-orange-700-fade-border: rgba(101, 81, 3, var(--salt-palette-opacity-disabled)); - --salt-color-red-500-fade-border: rgba(50, 177, 6, var(--salt-palette-opacity-disabled)); - --salt-color-gray-90-fade-border-readonly: rgba(72, 120, 14, var(--salt-palette-opacity-border-readonly)); - --salt-color-gray-200-fade-border-readonly: rgba(22, 86, 14, var(--salt-palette-opacity-border-readonly)); - --salt-color-blue-30-fade-background: rgba(77, 95, 4, var(--salt-palette-opacity-disabled)); - --salt-color-blue-500-fade-background: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); - --salt-color-blue-600-fade-background: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); - --salt-color-blue-700-fade-background: rgba(4, 119, 11, var(--salt-palette-opacity-disabled)); - --salt-color-gray-20-fade-background: rgba(174, 222, 15, var(--salt-palette-opacity-disabled)); - --salt-color-gray-60-fade-background: rgba(92, 157, 0, var(--salt-palette-opacity-disabled)); - --salt-color-gray-70-fade-background: rgba(75, 123, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-200-fade-background: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); - --salt-color-gray-300-fade-background: rgba(197, 5, 11, var(--salt-palette-opacity-disabled)); - --salt-color-gray-600-fade-background: rgba(243, 19, 6, var(--salt-palette-opacity-disabled)); - --salt-color-gray-800-fade-background: rgba(66, 82, 6, var(--salt-palette-opacity-disabled)); - --salt-color-white-fade-background: rgba(255, 255, 15, var(--salt-palette-opacity-disabled)); - --salt-color-white-fade-background-readonly: rgba(255, 255, 15, var(--salt-palette-opacity-background-readonly)); - --salt-color-gray-20-fade-background-readonly: rgba(174, 222, 15, var(--salt-palette-opacity-background-readonly)); - --salt-color-gray-600-fade-background-readonly: rgba(243, 19, 6, var(--salt-palette-opacity-background-readonly)); - --salt-color-gray-800-fade-background-readonly: rgba(66, 82, 6, var(--salt-palette-opacity-background-readonly)); - --salt-color-white-fade-backdrop: rgba(255, 255, 15, var(--salt-palette-opacity-backdrop)); - --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop)); - --salt-color-blue-100-fade-fill: rgba(75, 30, 4, var(--salt-palette-opacity-disabled)); - --salt-color-blue-600-fade-fill: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); - --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 15, var(--salt-palette-opacity-primary-border)); - --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 15, var(--salt-palette-opacity-secondary-border)); - --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 15, var(--salt-palette-opacity-tertiary-border)); - --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border)); - --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border)); - --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); - --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); - --salt-color-white-fade-background-hover: rgba(255, 255, 15, var(--salt-opacity-8)); - --salt-duration-instant: 0ms; - --salt-duration-perceptible: 300ms; - --salt-duration-notable: 1000ms; - --salt-duration-cutoff: 10000ms; - --salt-opacity-0: 0; - --salt-opacity-8: 0.08; - --salt-opacity-15: 0.15; - --salt-opacity-25: 0.25; - --salt-opacity-40: 0.4; - --salt-opacity-70: 0.7; - --salt-typography-fontFamily: "Open Sans"; - --salt-typography-fontFamily-code: "PT Mono"; - --salt-typography-fontWeight-light: 300; - --salt-typography-fontWeight-regular: 400; - --salt-typography-fontWeight-medium: 500; - --salt-typography-fontWeight-semiBold: 600; - --salt-typography-fontWeight-bold: 700; - --salt-typography-fontWeight-extraBold: 800; -} diff --git a/packages/theme/json/colorFormatSwap.js b/packages/theme/json/parsers/colorFormatSwap.js similarity index 99% rename from packages/theme/json/colorFormatSwap.js rename to packages/theme/json/parsers/colorFormatSwap.js index 5d44f19e694..cc4ec3b3c6a 100644 --- a/packages/theme/json/colorFormatSwap.js +++ b/packages/theme/json/parsers/colorFormatSwap.js @@ -6,6 +6,7 @@ function componentToHex(c) { function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } + function hexToRGB(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); diff --git a/packages/theme/json/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js similarity index 100% rename from packages/theme/json/getCssVariablesFromDir.js rename to packages/theme/json/parsers/getCssVariablesFromDir.js diff --git a/packages/theme/json/themeToJson.js b/packages/theme/json/parsers/themeToJson.js similarity index 92% rename from packages/theme/json/themeToJson.js rename to packages/theme/json/parsers/themeToJson.js index 7a96a75fd76..28963c131cc 100644 --- a/packages/theme/json/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -1,5 +1,5 @@ -const util = require("util"); const path = require("path"); +const fs = require("fs"); const getCssVariablesFromDir = require("./getCssVariablesFromDir"); const colorFormatSwap = require("./colorFormatSwap"); @@ -177,19 +177,17 @@ function format(variables) { } } } - - // console.log(util.inspect(jsonTokens, false, null, true /* enable colors */)); } -module.exports = function themeToJson() { +function themeToJson() { const paletteVariables = getCssVariablesFromDir( - path.resolve(__dirname, "../css/palette") + path.resolve(__dirname, "../../css/palette") ); const foundationVariables = getCssVariablesFromDir( - path.resolve(__dirname, "../css/foundations") + path.resolve(__dirname, "../../css/foundations") ); const characteristicVariables = getCssVariablesFromDir( - path.resolve(__dirname, "../css/characteristics") + path.resolve(__dirname, "../../css/characteristics") ); format({ $light: { @@ -230,4 +228,18 @@ module.exports = function themeToJson() { }); return jsonTokens; +} + +module.exports = function getJson() { + return themeToJson(); }; + +const themeJson = themeToJson(); +const jsonData = JSON.stringify(themeJson, null, 2); +const outputPath = path.join(__dirname, "../theme.json"); + +try { + fs.writeFileSync(outputPath, jsonData, "utf8"); +} catch (err) { + console.error("Error writing JSON file:", err); +} diff --git a/packages/theme/json/toCss.js b/packages/theme/json/parsers/toCss.js similarity index 91% rename from packages/theme/json/toCss.js rename to packages/theme/json/parsers/toCss.js index c9013f22824..16769f218e3 100644 --- a/packages/theme/json/toCss.js +++ b/packages/theme/json/parsers/toCss.js @@ -1,9 +1,8 @@ -const util = require("util"); -const themeToJson = require("./themeToJson"); +const path = require("path"); +const fs = require("fs"); +const getJson = require("./themeToJson"); const colorFormatSwap = require("./colorFormatSwap"); -const themeJson = themeToJson(); - var hexRegex = /^#[0-9A-F]{6}[0-9a-f]{0,2}$/i; function convertToRgb(alias) { @@ -12,7 +11,7 @@ function convertToRgb(alias) { return colorFormatSwap("rgb", color); } -function getActualColor(alias, mode) { +function getActualColor(alias, themeJson) { const pathByGrouping = alias.slice(1, -1).split("."); let x = 0; @@ -27,7 +26,7 @@ function getActualColor(alias, mode) { return undefined; } - const hex = mode ? p["$value"][mode] : p["$value"]; + const hex = p["$value"]; return convertToRgb(hex); } @@ -56,7 +55,7 @@ function getValue(alias) { return `var(--salt-${p})`; } -function toCSS() { +function toCSS(themeJson) { const classes = { ...themeJson.modes.reduce( (a, mode) => ({ @@ -122,7 +121,7 @@ function toCSS() { ]; } if (token[1]["$value"]["opacity"] && token[1]["$value"]["color"]) { - const color = getActualColor(token[1]["$value"]["color"]); + const color = getActualColor(token[1]["$value"]["color"], themeJson); const opacity = getValue(token[1]["$value"]["opacity"]); classes["general"].variables = [ ...classes["general"].variables, @@ -171,8 +170,6 @@ function toCSS() { } } - // console.log(util.inspect(classes, false, null, true /* enable colors */)); - let CSS = ""; for (const c of Object.entries(classes)) { @@ -180,7 +177,14 @@ function toCSS() { CSS += "\t" + c[1].variables.join("\n\t") + " \n}\n\n"; } - console.log(CSS); + return CSS; } -toCSS(); +const themeCss = toCSS(getJson()); +const outputPath = path.join(__dirname, "../theme.css"); + +try { + fs.writeFileSync(outputPath, themeCss, "utf8"); +} catch (err) { + console.error("Error writing CSS file:", err); +} diff --git a/packages/theme/json/theme.css b/packages/theme/json/theme.css new file mode 100644 index 00000000000..babeaa54fba --- /dev/null +++ b/packages/theme/json/theme.css @@ -0,0 +1,495 @@ +.salt-theme[data-mode="light"] { + --salt-palette-accent-background: var(--salt-color-blue-500); + --salt-palette-accent-border: var(--salt-color-blue-500); + --salt-palette-accent-foreground: var(--salt-color-white); + --salt-palette-error-background: var(--salt-color-red-10); + --salt-palette-error-background-selected: var(--salt-color-red-20); + --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-foreground: var(--salt-color-red-500); + --salt-palette-info-background: var(--salt-color-blue-10); + --salt-palette-info-border: var(--salt-color-blue-500); + --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-interact-background: transparent; + --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30); + --salt-palette-interact-background-hover: var(--salt-color-blue-10); + --salt-palette-interact-background-active: var(--salt-color-blue-30); + --salt-palette-interact-background-disabled: transparent; + --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background); + --salt-palette-interact-border: var(--salt-color-gray-200); + --salt-palette-interact-border-active: var(--salt-color-blue-600); + --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill); + --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border); + --salt-palette-interact-border-hover: var(--salt-color-blue-500); + --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly); + --salt-palette-interact-foreground: var(--salt-color-gray-200); + --salt-palette-interact-foreground-active: var(--salt-color-blue-600); + --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground); + --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground); + --salt-palette-interact-foreground-hover: var(--salt-color-blue-500); + --salt-palette-interact-outline: var(--salt-color-blue-600); + --salt-palette-interact-cta-background: var(--salt-color-blue-600); + --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); + --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); + --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); + --salt-palette-interact-cta-foreground: var(--salt-color-white); + --salt-palette-interact-cta-foreground-active: var(--salt-color-white); + --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); + --salt-palette-interact-primary-background: var(--salt-color-gray-60); + --salt-palette-interact-primary-background-active: var(--salt-color-gray-200); + --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background); + --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40); + --salt-palette-interact-primary-foreground: var(--salt-color-gray-900); + --salt-palette-interact-primary-foreground-active: var(--salt-color-white); + --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900); + --salt-palette-interact-secondary-background: transparent; + --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200); + --salt-palette-interact-secondary-background-disabled: transparent; + --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40); + --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900); + --salt-palette-interact-secondary-foreground-active: var(--salt-color-white); + --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900); + --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover); + --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600); + --salt-palette-navigate-foreground-active: var(--salt-color-blue-700); + --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800); + --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); + --salt-palette-navigate-indicator-active: var(--salt-color-orange-600); + --salt-palette-negative-foreground: var(--salt-color-red-700); + --salt-palette-neutral-primary-background: var(--salt-color-white); + --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background); + --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly); + --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900); + --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground); + --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary); + --salt-palette-neutral-primary-border: var(--salt-color-gray-50); + --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border); + --salt-palette-neutral-secondary-background: var(--salt-color-gray-20); + --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background); + --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly); + --salt-palette-neutral-secondary-border: var(--salt-color-gray-50); + --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border); + --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200); + --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground); + --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop); + --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary); + --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary); + --salt-palette-positive-foreground: var(--salt-color-green-700); + --salt-palette-success-background: var(--salt-color-green-10); + --salt-palette-success-background-selected: var(--salt-color-green-20); + --salt-palette-success-border: var(--salt-color-green-500); + --salt-palette-success-foreground: var(--salt-color-green-500); + --salt-palette-warning-background: var(--salt-color-orange-10); + --salt-palette-warning-background-selected: var(--salt-color-orange-20); + --salt-palette-warning-border: var(--salt-color-orange-700); + --salt-palette-warning-foreground: var(--salt-color-orange-700); + --salt-shadow-100-color: rgb(0, 0, 0); + --salt-shadow-200-color: rgb(0, 0, 0); + --salt-shadow-300-color: rgb(0, 0, 0); + --salt-shadow-400-color: rgb(0, 0, 0); + --salt-shadow-500-color: rgb(0, 0, 0); +} + +.salt-theme[data-mode="dark"] { + --salt-palette-accent-background: var(--salt-color-blue-500); + --salt-palette-accent-border: var(--salt-color-blue-500); + --salt-palette-accent-foreground: var(--salt-color-white); + --salt-palette-error-background: var(--salt-color-red-900); + --salt-palette-error-background-selected: var(--salt-color-red-900); + --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-foreground: var(--salt-color-red-500); + --salt-palette-info-background: var(--salt-color-blue-900); + --salt-palette-info-border: var(--salt-color-blue-500); + --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-interact-background: transparent; + --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600); + --salt-palette-interact-background-hover: var(--salt-color-blue-800); + --salt-palette-interact-background-active: var(--salt-color-blue-700); + --salt-palette-interact-background-disabled: transparent; + --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background); + --salt-palette-interact-border: var(--salt-color-gray-90); + --salt-palette-interact-border-active: var(--salt-color-blue-100); + --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill); + --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border); + --salt-palette-interact-border-hover: var(--salt-color-blue-500); + --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly); + --salt-palette-interact-foreground: var(--salt-color-gray-90); + --salt-palette-interact-foreground-active: var(--salt-color-blue-100); + --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground); + --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground); + --salt-palette-interact-foreground-hover: var(--salt-color-blue-500); + --salt-palette-interact-outline: var(--salt-color-blue-100); + --salt-palette-interact-cta-background: var(--salt-color-blue-600); + --salt-palette-interact-cta-background-active: var(--salt-color-blue-700); + --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background); + --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500); + --salt-palette-interact-cta-foreground: var(--salt-color-white); + --salt-palette-interact-cta-foreground-active: var(--salt-color-white); + --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-cta-foreground-hover: var(--salt-color-white); + --salt-palette-interact-primary-background: var(--salt-color-gray-300); + --salt-palette-interact-primary-background-active: var(--salt-color-gray-70); + --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background); + --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200); + --salt-palette-interact-primary-foreground: var(--salt-color-white); + --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900); + --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-primary-foreground-hover: var(--salt-color-white); + --salt-palette-interact-secondary-background: transparent; + --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70); + --salt-palette-interact-secondary-background-disabled: transparent; + --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200); + --salt-palette-interact-secondary-foreground: var(--salt-color-white); + --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900); + --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white); + --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover); + --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200); + --salt-palette-navigate-foreground-active: var(--salt-color-blue-300); + --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100); + --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90); + --salt-palette-navigate-indicator-active: var(--salt-color-orange-400); + --salt-palette-negative-foreground: var(--salt-color-red-300); + --salt-palette-neutral-primary-background: var(--salt-color-gray-800); + --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background); + --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly); + --salt-palette-neutral-primary-foreground: var(--salt-color-white); + --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground); + --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary); + --salt-palette-neutral-primary-border: var(--salt-color-gray-300); + --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border); + --salt-palette-neutral-secondary-background: var(--salt-color-gray-600); + --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background); + --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly); + --salt-palette-neutral-secondary-border: var(--salt-color-gray-300); + --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border); + --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70); + --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground); + --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop); + --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary); + --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary); + --salt-palette-positive-foreground: var(--salt-color-green-300); + --salt-palette-success-background: var(--salt-color-green-900); + --salt-palette-success-background-selected: var(--salt-color-green-900); + --salt-palette-success-border: var(--salt-color-green-400); + --salt-palette-success-foreground: var(--salt-color-green-400); + --salt-palette-warning-background: var(--salt-color-orange-900); + --salt-palette-warning-background-selected: var(--salt-color-orange-900); + --salt-palette-warning-border: var(--salt-color-orange-500); + --salt-palette-warning-foreground: var(--salt-color-orange-500); + --salt-shadow-100-color: rgb(0, 0, 0); + --salt-shadow-200-color: rgb(0, 0, 0); + --salt-shadow-300-color: rgb(0, 0, 0); + --salt-shadow-400-color: rgb(0, 0, 0); + --salt-shadow-500-color: rgb(0, 0, 0); +} + +.salt-density-high { + --salt-curve-0: 0; + --salt-curve-50: 1px; + --salt-curve-100: 2px; + --salt-curve-150: 3px; + --salt-curve-999: 999px; + --salt-size-adornment: 6px; + --salt-size-bar: 2px; + --salt-size-base: 20px; + --salt-size-border: 1px; + --salt-size-icon: 10px; + --salt-size-indicator: 1px; + --salt-size-selectable: 12px; + --salt-size-bar-strong: 4px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 4px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-density-medium { + --salt-curve-0: 0; + --salt-curve-50: 2px; + --salt-curve-100: 4px; + --salt-curve-150: 6px; + --salt-curve-999: 999px; + --salt-size-adornment: 8px; + --salt-size-bar: 4px; + --salt-size-base: 28px; + --salt-size-border: 1px; + --salt-size-icon: 12px; + --salt-size-indicator: 2px; + --salt-size-selectable: 14px; + --salt-size-bar-strong: 8px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 8px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-density-low { + --salt-curve-0: 0; + --salt-curve-50: 3px; + --salt-curve-100: 6px; + --salt-curve-150: 9px; + --salt-curve-999: 999px; + --salt-size-adornment: 10px; + --salt-size-bar: 6px; + --salt-size-base: 36px; + --salt-size-border: 1px; + --salt-size-icon: 14px; + --salt-size-indicator: 3px; + --salt-size-selectable: 16px; + --salt-size-bar-strong: 12px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 12px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-density-touch { + --salt-curve-0: 0; + --salt-curve-50: 4px; + --salt-curve-100: 8px; + --salt-curve-150: 12px; + --salt-curve-999: 999px; + --salt-size-adornment: 12px; + --salt-size-bar: 8px; + --salt-size-base: 44px; + --salt-size-border: 1px; + --salt-size-icon: 16px; + --salt-size-indicator: 4px; + --salt-size-selectable: 18px; + --salt-size-bar-strong: 16px; + --salt-size-bar-small: 2px; + --salt-size-border-strong: 2px; + --salt-spacing-100: 16px; + --salt-zIndex-default: 1; + --salt-zIndex-popout: 1000; + --salt-zIndex-appHeader: 1100; + --salt-zIndex-drawer: 1200; + --salt-zIndex-modal: 1300; + --salt-zIndex-notification: 1400; + --salt-zIndex-dragObject: 1420; + --salt-zIndex-contextMenu: 1450; + --salt-zIndex-flyover: 1500; +} + +.salt-theme { + --salt-palette-opacity-backdrop: var(--salt-opacity-70); + --salt-palette-opacity-disabled: var(--salt-opacity-40); + --salt-palette-opacity-background-readonly: var(--salt-opacity-0); + --salt-palette-opacity-border-readonly: var(--salt-opacity-15); + --salt-palette-opacity-primary-border: var(--salt-opacity-40); + --salt-palette-opacity-secondary-border: var(--salt-opacity-25); + --salt-palette-opacity-tertiary-border: var(--salt-opacity-15); + --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color); + --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color); + --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color); + --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color); + --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color); + --salt-color-white: rgb(255, 255, 15); + --salt-color-black: rgb(0, 0, 0); + --salt-color-red-10: rgb(254, 62, 0); + --salt-color-red-20: rgb(252, 252, 9); + --salt-color-red-30: rgb(251, 187, 2); + --salt-color-red-40: rgb(250, 121, 12); + --salt-color-red-50: rgb(249, 72, 5); + --salt-color-red-100: rgb(248, 6, 15); + --salt-color-red-200: rgb(246, 197, 8); + --salt-color-red-300: rgb(245, 148, 2); + --salt-color-red-400: rgb(212, 18, 10); + --salt-color-red-500: rgb(50, 177, 6); + --salt-color-red-600: rgb(66, 1, 0); + --salt-color-red-700: rgb(97, 80, 11); + --salt-color-red-800: rgb(128, 160, 5); + --salt-color-red-900: rgb(18, 82, 2); + --salt-color-orange-10: rgb(254, 139, 15); + --salt-color-orange-20: rgb(237, 250, 6); + --salt-color-orange-30: rgb(237, 104, 14); + --salt-color-orange-40: rgb(236, 215, 6); + --salt-color-orange-50: rgb(236, 85, 14); + --salt-color-orange-100: rgb(171, 85, 1); + --salt-color-orange-200: rgb(106, 84, 4); + --salt-color-orange-300: rgb(41, 83, 8); + --salt-color-orange-400: rgb(232, 82, 11); + --salt-color-orange-500: rgb(167, 49, 9); + --salt-color-orange-600: rgb(6, 81, 9); + --salt-color-orange-700: rgb(101, 81, 3); + --salt-color-orange-800: rgb(196, 64, 13); + --salt-color-orange-900: rgb(98, 194, 4); + --salt-color-green-10: rgb(31, 76, 9); + --salt-color-green-20: rgb(142, 139, 6); + --salt-color-green-30: rgb(13, 218, 4); + --salt-color-green-40: rgb(141, 41, 1); + --salt-color-green-50: rgb(12, 119, 15); + --salt-color-green-100: rgb(219, 215, 4); + --salt-color-green-200: rgb(219, 70, 9); + --salt-color-green-300: rgb(202, 182, 0); + --salt-color-green-400: rgb(9, 197, 10); + --salt-color-green-500: rgb(72, 116, 11); + --salt-color-green-600: rgb(135, 35, 13); + --salt-color-green-700: rgb(197, 210, 14); + --salt-color-green-800: rgb(20, 146, 0); + --salt-color-green-900: rgb(51, 66, 11); + --salt-color-teal-10: rgb(175, 15, 0); + --salt-color-teal-20: rgb(126, 142, 8); + --salt-color-teal-30: rgb(78, 14, 1); + --salt-color-teal-40: rgb(45, 157, 10); + --salt-color-teal-50: rgb(220, 221, 1); + --salt-color-teal-100: rgb(188, 28, 8); + --salt-color-teal-200: rgb(59, 92, 0); + --salt-color-teal-300: rgb(154, 10, 12); + --salt-color-teal-400: rgb(9, 90, 6); + --salt-color-teal-500: rgb(8, 41, 7); + --salt-color-teal-600: rgb(182, 184, 5); + --salt-color-teal-700: rgb(5, 87, 1); + --salt-color-teal-800: rgb(20, 21, 6); + --salt-color-teal-900: rgb(3, 20, 12); + --salt-color-blue-10: rgb(190, 127, 9); + --salt-color-blue-20: rgb(125, 239, 6); + --salt-color-blue-30: rgb(77, 95, 4); + --salt-color-blue-40: rgb(12, 207, 2); + --salt-color-blue-50: rgb(220, 63, 0); + --salt-color-blue-100: rgb(75, 30, 4); + --salt-color-blue-200: rgb(185, 253, 8); + --salt-color-blue-300: rgb(56, 220, 13); + --salt-color-blue-400: rgb(232, 76, 6); + --salt-color-blue-500: rgb(103, 10, 9); + --salt-color-blue-600: rgb(85, 201, 3); + --salt-color-blue-700: rgb(4, 119, 11); + --salt-color-blue-800: rgb(115, 196, 13); + --salt-color-blue-900: rgb(50, 243, 8); + --salt-color-purple-10: rgb(158, 15, 7); + --salt-color-purple-20: rgb(125, 79, 4); + --salt-color-purple-30: rgb(92, 159, 1); + --salt-color-purple-40: rgb(59, 222, 14); + --salt-color-purple-50: rgb(27, 46, 11); + --salt-color-purple-100: rgb(249, 206, 1); + --salt-color-purple-200: rgb(216, 125, 7); + --salt-color-purple-300: rgb(7, 76, 11); + --salt-color-purple-400: rgb(150, 27, 5); + --salt-color-purple-500: rgb(100, 234, 2); + --salt-color-purple-600: rgb(19, 200, 13); + --salt-color-purple-700: rgb(114, 231, 10); + --salt-color-purple-800: rgb(50, 86, 13); + --salt-color-purple-900: rgb(177, 5, 4); + --salt-color-gray-10: rgb(47, 79, 6); + --salt-color-gray-20: rgb(174, 222, 15); + --salt-color-gray-30: rgb(14, 78, 9); + --salt-color-gray-40: rgb(157, 222, 3); + --salt-color-gray-50: rgb(237, 45, 9); + --salt-color-gray-60: rgb(92, 157, 0); + --salt-color-gray-70: rgb(75, 123, 14); + --salt-color-gray-80: rgb(250, 58, 10); + --salt-color-gray-90: rgb(72, 120, 14); + --salt-color-gray-100: rgb(71, 119, 15); + --salt-color-gray-200: rgb(22, 86, 14); + --salt-color-gray-300: rgb(197, 5, 11); + --salt-color-gray-400: rgb(68, 132, 15); + --salt-color-gray-500: rgb(179, 244, 6); + --salt-color-gray-600: rgb(243, 19, 6); + --salt-color-gray-700: rgb(162, 194, 15); + --salt-color-gray-800: rgb(66, 82, 6); + --salt-color-gray-900: rgb(97, 97, 6); + --salt-color-blue-100-fade-foreground: rgba(75, 30, 4, var(--salt-palette-opacity-disabled)); + --salt-color-blue-500-fade-foreground: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); + --salt-color-blue-600-fade-foreground: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); + --salt-color-gray-200-fade-foreground: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-70-fade-foreground: rgba(75, 123, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-90-fade-foreground: rgba(72, 120, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-900-fade-foreground: rgba(97, 97, 6, var(--salt-palette-opacity-disabled)); + --salt-color-green-300-fade-foreground: rgba(202, 182, 0, var(--salt-palette-opacity-disabled)); + --salt-color-green-400-fade-foreground: rgba(9, 197, 10, var(--salt-palette-opacity-disabled)); + --salt-color-green-500-fade-foreground: rgba(72, 116, 11, var(--salt-palette-opacity-disabled)); + --salt-color-green-700-fade-foreground: rgba(197, 210, 14, var(--salt-palette-opacity-disabled)); + --salt-color-red-300-fade-foreground: rgba(245, 148, 2, var(--salt-palette-opacity-disabled)); + --salt-color-red-500-fade-foreground: rgba(50, 177, 6, var(--salt-palette-opacity-disabled)); + --salt-color-red-700-fade-foreground: rgba(97, 80, 11, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-foreground: rgba(255, 255, 15, var(--salt-palette-opacity-disabled)); + --salt-color-blue-500-fade-border: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); + --salt-color-gray-50-fade-border: rgba(237, 45, 9, var(--salt-palette-opacity-disabled)); + --salt-color-gray-60-fade-border: rgba(92, 157, 0, var(--salt-palette-opacity-disabled)); + --salt-color-gray-90-fade-border: rgba(72, 120, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-200-fade-border: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-300-fade-border: rgba(197, 5, 11, var(--salt-palette-opacity-disabled)); + --salt-color-green-400-fade-border: rgba(9, 197, 10, var(--salt-palette-opacity-disabled)); + --salt-color-green-500-fade-border: rgba(72, 116, 11, var(--salt-palette-opacity-disabled)); + --salt-color-orange-400-fade-border: rgba(232, 82, 11, var(--salt-palette-opacity-disabled)); + --salt-color-orange-500-fade-border: rgba(167, 49, 9, var(--salt-palette-opacity-disabled)); + --salt-color-orange-600-fade-border: rgba(6, 81, 9, var(--salt-palette-opacity-disabled)); + --salt-color-orange-700-fade-border: rgba(101, 81, 3, var(--salt-palette-opacity-disabled)); + --salt-color-red-500-fade-border: rgba(50, 177, 6, var(--salt-palette-opacity-disabled)); + --salt-color-gray-90-fade-border-readonly: rgba(72, 120, 14, var(--salt-palette-opacity-border-readonly)); + --salt-color-gray-200-fade-border-readonly: rgba(22, 86, 14, var(--salt-palette-opacity-border-readonly)); + --salt-color-blue-30-fade-background: rgba(77, 95, 4, var(--salt-palette-opacity-disabled)); + --salt-color-blue-500-fade-background: rgba(103, 10, 9, var(--salt-palette-opacity-disabled)); + --salt-color-blue-600-fade-background: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); + --salt-color-blue-700-fade-background: rgba(4, 119, 11, var(--salt-palette-opacity-disabled)); + --salt-color-gray-20-fade-background: rgba(174, 222, 15, var(--salt-palette-opacity-disabled)); + --salt-color-gray-60-fade-background: rgba(92, 157, 0, var(--salt-palette-opacity-disabled)); + --salt-color-gray-70-fade-background: rgba(75, 123, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-200-fade-background: rgba(22, 86, 14, var(--salt-palette-opacity-disabled)); + --salt-color-gray-300-fade-background: rgba(197, 5, 11, var(--salt-palette-opacity-disabled)); + --salt-color-gray-600-fade-background: rgba(243, 19, 6, var(--salt-palette-opacity-disabled)); + --salt-color-gray-800-fade-background: rgba(66, 82, 6, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-background: rgba(255, 255, 15, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-background-readonly: rgba(255, 255, 15, var(--salt-palette-opacity-background-readonly)); + --salt-color-gray-20-fade-background-readonly: rgba(174, 222, 15, var(--salt-palette-opacity-background-readonly)); + --salt-color-gray-600-fade-background-readonly: rgba(243, 19, 6, var(--salt-palette-opacity-background-readonly)); + --salt-color-gray-800-fade-background-readonly: rgba(66, 82, 6, var(--salt-palette-opacity-background-readonly)); + --salt-color-white-fade-backdrop: rgba(255, 255, 15, var(--salt-palette-opacity-backdrop)); + --salt-color-black-fade-backdrop: rgba(0, 0, 0, var(--salt-palette-opacity-backdrop)); + --salt-color-blue-100-fade-fill: rgba(75, 30, 4, var(--salt-palette-opacity-disabled)); + --salt-color-blue-600-fade-fill: rgba(85, 201, 3, var(--salt-palette-opacity-disabled)); + --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 15, var(--salt-palette-opacity-primary-border)); + --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 15, var(--salt-palette-opacity-secondary-border)); + --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 15, var(--salt-palette-opacity-tertiary-border)); + --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border)); + --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border)); + --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); + --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); + --salt-color-white-fade-background-hover: rgba(255, 255, 15, var(--salt-opacity-8)); + --salt-duration-instant: 0ms; + --salt-duration-perceptible: 300ms; + --salt-duration-notable: 1000ms; + --salt-duration-cutoff: 10000ms; + --salt-opacity-0: 0; + --salt-opacity-8: 0.08; + --salt-opacity-15: 0.15; + --salt-opacity-25: 0.25; + --salt-opacity-40: 0.4; + --salt-opacity-70: 0.7; + --salt-typography-fontFamily: "Open Sans"; + --salt-typography-fontFamily-code: "PT Mono"; + --salt-typography-fontWeight-light: 300; + --salt-typography-fontWeight-regular: 400; + --salt-typography-fontWeight-medium: 500; + --salt-typography-fontWeight-semiBold: 600; + --salt-typography-fontWeight-bold: 700; + --salt-typography-fontWeight-extraBold: 800; +} + diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json new file mode 100644 index 00000000000..4a36142e727 --- /dev/null +++ b/packages/theme/json/theme.json @@ -0,0 +1,1890 @@ +{ + "modes": [ + "$light", + "$dark" + ], + "densities": [ + "$high", + "$medium", + "$low", + "$touch" + ], + "palette": { + "accent": { + "palette-accent-background": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + }, + "palette-accent-border": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + }, + "palette-accent-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + } + }, + "error": { + "palette-error-background": { + "$value": { + "$dark": "{foundations.color.color-red-900}", + "$light": "{foundations.color.color-red-10}" + }, + "$type": "color" + }, + "palette-error-background-selected": { + "$value": { + "$dark": "{foundations.color.color-red-900}", + "$light": "{foundations.color.color-red-20}" + }, + "$type": "color" + }, + "palette-error-border": { + "$value": { + "$dark": "{foundations.color.color-red-500}", + "$light": "{foundations.color.color-red-500}" + }, + "$type": "color" + }, + "palette-error-foreground": { + "$value": { + "$dark": "{foundations.color.color-red-500}", + "$light": "{foundations.color.color-red-500}" + }, + "$type": "color" + } + }, + "info": { + "palette-info-background": { + "$value": { + "$dark": "{foundations.color.color-blue-900}", + "$light": "{foundations.color.color-blue-10}" + }, + "$type": "color" + }, + "palette-info-border": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + }, + "palette-info-foreground": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + } + }, + "interact": { + "palette-interact-background": { + "$value": { + "$dark": "transparent", + "$light": "transparent" + }, + "$type": "color" + }, + "palette-interact-background-blurSelected": { + "$value": { + "$dark": "{foundations.color.color-gray-600}", + "$light": "{foundations.color.color-gray-30}" + }, + "$type": "color" + }, + "palette-interact-background-hover": { + "$value": { + "$dark": "{foundations.color.color-blue-800}", + "$light": "{foundations.color.color-blue-10}" + }, + "$type": "color" + }, + "palette-interact-background-active": { + "$value": { + "$dark": "{foundations.color.color-blue-700}", + "$light": "{foundations.color.color-blue-30}" + }, + "$type": "color" + }, + "palette-interact-background-disabled": { + "$value": { + "$dark": "transparent", + "$light": "transparent" + }, + "$type": "color" + }, + "palette-interact-background-activeDisabled": { + "$value": { + "$dark": "{foundations.color.color-blue-700-fade-background}", + "$light": "{foundations.color.color-blue-30-fade-background}" + }, + "$type": "color" + }, + "palette-interact-border": { + "$value": { + "$dark": "{foundations.color.color-gray-90}", + "$light": "{foundations.color.color-gray-200}" + }, + "$type": "color" + }, + "palette-interact-border-active": { + "$value": { + "$dark": "{foundations.color.color-blue-100}", + "$light": "{foundations.color.color-blue-600}" + }, + "$type": "color" + }, + "palette-interact-border-activeDisabled": { + "$value": { + "$dark": "{foundations.color.color-blue-100-fade-fill}", + "$light": "{foundations.color.color-blue-600-fade-fill}" + }, + "$type": "color" + }, + "palette-interact-border-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-90-fade-border}", + "$light": "{foundations.color.color-gray-200-fade-border}" + }, + "$type": "color" + }, + "palette-interact-border-hover": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + }, + "palette-interact-border-readonly": { + "$value": { + "$dark": "{foundations.color.color-gray-90-fade-border-readonly}", + "$light": "{foundations.color.color-gray-200-fade-border-readonly}" + }, + "$type": "color" + }, + "palette-interact-foreground": { + "$value": { + "$dark": "{foundations.color.color-gray-90}", + "$light": "{foundations.color.color-gray-200}" + }, + "$type": "color" + }, + "palette-interact-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-blue-100}", + "$light": "{foundations.color.color-blue-600}" + }, + "$type": "color" + }, + "palette-interact-foreground-activeDisabled": { + "$value": { + "$dark": "{foundations.color.color-blue-100-fade-foreground}", + "$light": "{foundations.color.color-blue-600-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-90-fade-foreground}", + "$light": "{foundations.color.color-gray-200-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + }, + "palette-interact-outline": { + "$value": { + "$dark": "{foundations.color.color-blue-100}", + "$light": "{foundations.color.color-blue-600}" + }, + "$type": "color" + }, + "palette-interact-cta-background": { + "$value": { + "$dark": "{foundations.color.color-blue-600}", + "$light": "{foundations.color.color-blue-600}" + }, + "$type": "color" + }, + "palette-interact-cta-background-active": { + "$value": { + "$dark": "{foundations.color.color-blue-700}", + "$light": "{foundations.color.color-blue-700}" + }, + "$type": "color" + }, + "palette-interact-cta-background-disabled": { + "$value": { + "$dark": "{foundations.color.color-blue-600-fade-background}", + "$light": "{foundations.color.color-blue-600-fade-background}" + }, + "$type": "color" + }, + "palette-interact-cta-background-hover": { + "$value": { + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" + }, + "$type": "color" + }, + "palette-interact-cta-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-interact-cta-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-interact-cta-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-white-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-cta-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-interact-primary-background": { + "$value": { + "$dark": "{foundations.color.color-gray-300}", + "$light": "{foundations.color.color-gray-60}" + }, + "$type": "color" + }, + "palette-interact-primary-background-active": { + "$value": { + "$dark": "{foundations.color.color-gray-70}", + "$light": "{foundations.color.color-gray-200}" + }, + "$type": "color" + }, + "palette-interact-primary-background-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-300-fade-background}", + "$light": "{foundations.color.color-gray-60-fade-background}" + }, + "$type": "color" + }, + "palette-interact-primary-background-hover": { + "$value": { + "$dark": "{foundations.color.color-gray-200}", + "$light": "{foundations.color.color-gray-40}" + }, + "$type": "color" + }, + "palette-interact-primary-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + }, + "palette-interact-primary-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-gray-900}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-interact-primary-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-gray-900-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-primary-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + }, + "palette-interact-secondary-background": { + "$value": { + "$dark": "transparent", + "$light": "transparent" + }, + "$type": "color" + }, + "palette-interact-secondary-background-active": { + "$value": { + "$dark": "{foundations.color.color-gray-70}", + "$light": "{foundations.color.color-gray-200}" + }, + "$type": "color" + }, + "palette-interact-secondary-background-disabled": { + "$value": { + "$dark": "transparent", + "$light": "transparent" + }, + "$type": "color" + }, + "palette-interact-secondary-background-hover": { + "$value": { + "$dark": "{foundations.color.color-gray-200}", + "$light": "{foundations.color.color-gray-40}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-gray-900}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-gray-900-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + } + }, + "navigate": { + "palette-navigate-background-hover": { + "$value": { + "$dark": "{foundations.color.color-white-fade-background-hover}", + "$light": "{foundations.color.color-black-fade-background-hover}" + }, + "$type": "color" + }, + "palette-navigate-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-blue-200}", + "$light": "{foundations.color.color-blue-600}" + }, + "$type": "color" + }, + "palette-navigate-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-blue-300}", + "$light": "{foundations.color.color-blue-700}" + }, + "$type": "color" + }, + "palette-navigate-foreground-visited": { + "$value": { + "$dark": "{foundations.color.color-purple-100}", + "$light": "{foundations.color.color-purple-800}" + }, + "$type": "color" + }, + "palette-navigate-indicator-hover": { + "$value": { + "$dark": "{foundations.color.color-gray-90}", + "$light": "{foundations.color.color-gray-90}" + }, + "$type": "color" + }, + "palette-navigate-indicator-active": { + "$value": { + "$dark": "{foundations.color.color-orange-400}", + "$light": "{foundations.color.color-orange-600}" + }, + "$type": "color" + } + }, + "negative": { + "palette-negative-foreground": { + "$value": { + "$dark": "{foundations.color.color-red-300}", + "$light": "{foundations.color.color-red-700}" + }, + "$type": "color" + } + }, + "neutral": { + "palette-neutral-primary-background": { + "$value": { + "$dark": "{foundations.color.color-gray-800}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-neutral-primary-background-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-800-fade-background}", + "$light": "{foundations.color.color-white-fade-background}" + }, + "$type": "color" + }, + "palette-neutral-primary-background-readonly": { + "$value": { + "$dark": "{foundations.color.color-gray-800-fade-background-readonly}", + "$light": "{foundations.color.color-white-fade-background-readonly}" + }, + "$type": "color" + }, + "palette-neutral-primary-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + }, + "palette-neutral-primary-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-gray-900-fade-foreground}" + }, + "$type": "color" + }, + "palette-neutral-primary-separator": { + "$value": { + "$dark": "{foundations.color.color-white-fade-separatorOpacity-primary}", + "$light": "{foundations.color.color-black-fade-separatorOpacity-primary}" + }, + "$type": "color" + }, + "palette-neutral-primary-border": { + "$value": { + "$dark": "{foundations.color.color-gray-300}", + "$light": "{foundations.color.color-gray-50}" + }, + "$type": "color" + }, + "palette-neutral-primary-border-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-300-fade-border}", + "$light": "{foundations.color.color-gray-50-fade-border}" + }, + "$type": "color" + }, + "palette-neutral-secondary-background": { + "$value": { + "$dark": "{foundations.color.color-gray-600}", + "$light": "{foundations.color.color-gray-20}" + }, + "$type": "color" + }, + "palette-neutral-secondary-background-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-600-fade-background}", + "$light": "{foundations.color.color-gray-20-fade-background}" + }, + "$type": "color" + }, + "palette-neutral-secondary-background-readonly": { + "$value": { + "$dark": "{foundations.color.color-gray-600-fade-background-readonly}", + "$light": "{foundations.color.color-gray-20-fade-background-readonly}" + }, + "$type": "color" + }, + "palette-neutral-secondary-border": { + "$value": { + "$dark": "{foundations.color.color-gray-300}", + "$light": "{foundations.color.color-gray-50}" + }, + "$type": "color" + }, + "palette-neutral-secondary-border-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-300-fade-border}", + "$light": "{foundations.color.color-gray-50-fade-border}" + }, + "$type": "color" + }, + "palette-neutral-secondary-foreground": { + "$value": { + "$dark": "{foundations.color.color-gray-70}", + "$light": "{foundations.color.color-gray-200}" + }, + "$type": "color" + }, + "palette-neutral-secondary-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-70-fade-foreground}", + "$light": "{foundations.color.color-gray-200-fade-foreground}" + }, + "$type": "color" + }, + "palette-neutral-backdrop": { + "$value": { + "$dark": "{foundations.color.color-black-fade-backdrop}", + "$light": "{foundations.color.color-white-fade-backdrop}" + }, + "$type": "color" + }, + "palette-neutral-secondary-separator": { + "$value": { + "$dark": "{foundations.color.color-white-fade-separatorOpacity-secondary}", + "$light": "{foundations.color.color-black-fade-separatorOpacity-secondary}" + }, + "$type": "color" + }, + "palette-neutral-tertiary-separator": { + "$value": { + "$dark": "{foundations.color.color-white-fade-separatorOpacity-tertiary}", + "$light": "{foundations.color.color-black-fade-separatorOpacity-tertiary}" + }, + "$type": "color" + } + }, + "positive": { + "palette-positive-foreground": { + "$value": { + "$dark": "{foundations.color.color-green-300}", + "$light": "{foundations.color.color-green-700}" + }, + "$type": "color" + } + }, + "success": { + "palette-success-background": { + "$value": { + "$dark": "{foundations.color.color-green-900}", + "$light": "{foundations.color.color-green-10}" + }, + "$type": "color" + }, + "palette-success-background-selected": { + "$value": { + "$dark": "{foundations.color.color-green-900}", + "$light": "{foundations.color.color-green-20}" + }, + "$type": "color" + }, + "palette-success-border": { + "$value": { + "$dark": "{foundations.color.color-green-400}", + "$light": "{foundations.color.color-green-500}" + }, + "$type": "color" + }, + "palette-success-foreground": { + "$value": { + "$dark": "{foundations.color.color-green-400}", + "$light": "{foundations.color.color-green-500}" + }, + "$type": "color" + } + }, + "warning": { + "palette-warning-background": { + "$value": { + "$dark": "{foundations.color.color-orange-900}", + "$light": "{foundations.color.color-orange-10}" + }, + "$type": "color" + }, + "palette-warning-background-selected": { + "$value": { + "$dark": "{foundations.color.color-orange-900}", + "$light": "{foundations.color.color-orange-20}" + }, + "$type": "color" + }, + "palette-warning-border": { + "$value": { + "$dark": "{foundations.color.color-orange-500}", + "$light": "{foundations.color.color-orange-700}" + }, + "$type": "color" + }, + "palette-warning-foreground": { + "$value": { + "$dark": "{foundations.color.color-orange-500}", + "$light": "{foundations.color.color-orange-700}" + }, + "$type": "color" + } + }, + "opacity": { + "palette-opacity-backdrop": { + "$value": "{foundations.color.opacity-70}", + "$type": "number" + }, + "palette-opacity-disabled": { + "$value": "{foundations.color.opacity-40}", + "$type": "number" + }, + "palette-opacity-background-readonly": { + "$value": "{foundations.color.opacity-0}", + "$type": "number" + }, + "palette-opacity-border-readonly": { + "$value": "{foundations.color.opacity-15}", + "$type": "number" + }, + "palette-opacity-primary-border": { + "$value": "{foundations.color.opacity-40}", + "$type": "number" + }, + "palette-opacity-secondary-border": { + "$value": "{foundations.color.opacity-25}", + "$type": "number" + }, + "palette-opacity-tertiary-border": { + "$value": "{foundations.color.opacity-15}", + "$type": "number" + } + } + }, + "foundations": { + "shadow": { + "shadow-100-color": { + "$value": { + "$dark": "#00000000", + "$light": "#00000000" + }, + "$type": "color" + }, + "shadow-200-color": { + "$value": { + "$dark": "#00000000", + "$light": "#00000000" + }, + "$type": "color" + }, + "shadow-300-color": { + "$value": { + "$dark": "#00000000", + "$light": "#00000000" + }, + "$type": "color" + }, + "shadow-400-color": { + "$value": { + "$dark": "#00000000", + "$light": "#00000000" + }, + "$type": "color" + }, + "shadow-500-color": { + "$value": { + "$dark": "#00000000", + "$light": "#00000000" + }, + "$type": "color" + }, + "shadow-100": { + "$value": { + "offsetX": "0", + "offsetY": "1px", + "blur": "3px", + "spread": "0", + "color": "{foundations.shadow.shadow-100-color}" + }, + "$type": "shadow" + }, + "shadow-200": { + "$value": { + "offsetX": "0", + "offsetY": "2px", + "blur": "4px", + "spread": "0", + "color": "{foundations.shadow.shadow-200-color}" + }, + "$type": "shadow" + }, + "shadow-300": { + "$value": { + "offsetX": "0", + "offsetY": "4px", + "blur": "8px", + "spread": "0", + "color": "{foundations.shadow.shadow-300-color}" + }, + "$type": "shadow" + }, + "shadow-400": { + "$value": { + "offsetX": "0", + "offsetY": "6px", + "blur": "10px", + "spread": "0", + "color": "{foundations.shadow.shadow-400-color}" + }, + "$type": "shadow" + }, + "shadow-500": { + "$value": { + "offsetX": "0", + "offsetY": "12px", + "blur": "40px", + "spread": "0", + "color": "{foundations.shadow.shadow-500-color}" + }, + "$type": "shadow" + } + }, + "curve": { + "curve-0": { + "$value": { + "$low": "0", + "$touch": "0", + "$medium": "0", + "$high": "0" + }, + "$type": "dimension" + }, + "curve-50": { + "$value": { + "$low": "3px", + "$touch": "4px", + "$medium": "2px", + "$high": "1px" + }, + "$type": "dimension" + }, + "curve-100": { + "$value": { + "$low": "6px", + "$touch": "8px", + "$medium": "4px", + "$high": "2px" + }, + "$type": "dimension" + }, + "curve-150": { + "$value": { + "$low": "9px", + "$touch": "12px", + "$medium": "6px", + "$high": "3px" + }, + "$type": "dimension" + }, + "curve-999": { + "$value": { + "$low": "999px", + "$touch": "999px", + "$medium": "999px", + "$high": "999px" + }, + "$type": "dimension" + } + }, + "size": { + "size-adornment": { + "$value": { + "$low": "10px", + "$touch": "12px", + "$medium": "8px", + "$high": "6px" + }, + "$type": "dimension" + }, + "size-bar": { + "$value": { + "$low": "6px", + "$touch": "8px", + "$medium": "4px", + "$high": "2px" + }, + "$type": "dimension" + }, + "size-base": { + "$value": { + "$low": "36px", + "$touch": "44px", + "$medium": "28px", + "$high": "20px" + }, + "$type": "dimension" + }, + "size-border": { + "$value": { + "$low": "1px", + "$touch": "1px", + "$medium": "1px", + "$high": "1px" + }, + "$type": "dimension" + }, + "size-icon": { + "$value": { + "$low": "14px", + "$touch": "16px", + "$medium": "12px", + "$high": "10px" + }, + "$type": "dimension" + }, + "size-indicator": { + "$value": { + "$low": "3px", + "$touch": "4px", + "$medium": "2px", + "$high": "1px" + }, + "$type": "dimension" + }, + "size-selectable": { + "$value": { + "$low": "16px", + "$touch": "18px", + "$medium": "14px", + "$high": "12px" + }, + "$type": "dimension" + }, + "size-bar-strong": { + "$value": { + "$low": "12px", + "$touch": "16px", + "$medium": "8px", + "$high": "4px" + }, + "$type": "dimension" + }, + "size-bar-small": { + "$value": { + "$low": "2px", + "$touch": "2px", + "$medium": "2px", + "$high": "2px" + }, + "$type": "dimension" + }, + "size-border-strong": { + "$value": { + "$low": "2px", + "$touch": "2px", + "$medium": "2px", + "$high": "2px" + }, + "$type": "dimension" + } + }, + "spacing": { + "spacing-100": { + "$value": { + "$low": "12px", + "$touch": "16px", + "$medium": "8px", + "$high": "4px" + }, + "$type": "dimension" + } + }, + "zIndex": { + "zIndex-default": { + "$value": { + "$low": "1", + "$touch": "1", + "$medium": "1", + "$high": "1" + }, + "$type": "number" + }, + "zIndex-popout": { + "$value": { + "$low": "1000", + "$touch": "1000", + "$medium": "1000", + "$high": "1000" + }, + "$type": "number" + }, + "zIndex-appHeader": { + "$value": { + "$low": "1100", + "$touch": "1100", + "$medium": "1100", + "$high": "1100" + }, + "$type": "number" + }, + "zIndex-drawer": { + "$value": { + "$low": "1200", + "$touch": "1200", + "$medium": "1200", + "$high": "1200" + }, + "$type": "number" + }, + "zIndex-modal": { + "$value": { + "$low": "1300", + "$touch": "1300", + "$medium": "1300", + "$high": "1300" + }, + "$type": "number" + }, + "zIndex-notification": { + "$value": { + "$low": "1400", + "$touch": "1400", + "$medium": "1400", + "$high": "1400" + }, + "$type": "number" + }, + "zIndex-dragObject": { + "$value": { + "$low": "1420", + "$touch": "1420", + "$medium": "1420", + "$high": "1420" + }, + "$type": "number" + }, + "zIndex-contextMenu": { + "$value": { + "$low": "1450", + "$touch": "1450", + "$medium": "1450", + "$high": "1450" + }, + "$type": "number" + }, + "zIndex-flyover": { + "$value": { + "$low": "1500", + "$touch": "1500", + "$medium": "1500", + "$high": "1500" + }, + "$type": "number" + } + }, + "color": { + "color-white": { + "$value": "#ffffff", + "$type": "color" + }, + "color-black": { + "$value": "#000000", + "$type": "color" + }, + "color-red-10": { + "$value": "#ffe3e0", + "$type": "color" + }, + "color-red-20": { + "$value": "#ffcfc9", + "$type": "color" + }, + "color-red-30": { + "$value": "#ffbbb2", + "$type": "color" + }, + "color-red-40": { + "$value": "#ffa79c", + "$type": "color" + }, + "color-red-50": { + "$value": "#ff9485", + "$type": "color" + }, + "color-red-100": { + "$value": "#ff806f", + "$type": "color" + }, + "color-red-200": { + "$value": "#ff6c58", + "$type": "color" + }, + "color-red-300": { + "$value": "#ff5942", + "$type": "color" + }, + "color-red-400": { + "$value": "#ed412a", + "$type": "color" + }, + "color-red-500": { + "$value": "#e32b16", + "$type": "color" + }, + "color-red-600": { + "$value": "#c42010", + "$type": "color" + }, + "color-red-700": { + "$value": "#a6150b", + "$type": "color" + }, + "color-red-800": { + "$value": "#880a05", + "$type": "color" + }, + "color-red-900": { + "$value": "#412522", + "$type": "color" + }, + "color-orange-10": { + "$value": "#ffe8bf", + "$type": "color" + }, + "color-orange-20": { + "$value": "#fedfa6", + "$type": "color" + }, + "color-orange-30": { + "$value": "#fed68e", + "$type": "color" + }, + "color-orange-40": { + "$value": "#fecd76", + "$type": "color" + }, + "color-orange-50": { + "$value": "#fec55e", + "$type": "color" + }, + "color-orange-100": { + "$value": "#fab551", + "$type": "color" + }, + "color-orange-200": { + "$value": "#f6a544", + "$type": "color" + }, + "color-orange-300": { + "$value": "#f29538", + "$type": "color" + }, + "color-orange-400": { + "$value": "#ee852b", + "$type": "color" + }, + "color-orange-500": { + "$value": "#ea7319", + "$type": "color" + }, + "color-orange-600": { + "$value": "#e06519", + "$type": "color" + }, + "color-orange-700": { + "$value": "#d65513", + "$type": "color" + }, + "color-orange-800": { + "$value": "#cc440d", + "$type": "color" + }, + "color-orange-900": { + "$value": "#362c24", + "$type": "color" + }, + "color-green-10": { + "$value": "#d1f4c9", + "$type": "color" + }, + "color-green-20": { + "$value": "#b8e8b6", + "$type": "color" + }, + "color-green-30": { + "$value": "#a0dda4", + "$type": "color" + }, + "color-green-40": { + "$value": "#88d291", + "$type": "color" + }, + "color-green-50": { + "$value": "#70c77f", + "$type": "color" + }, + "color-green-100": { + "$value": "#5dbd74", + "$type": "color" + }, + "color-green-200": { + "$value": "#4db469", + "$type": "color" + }, + "color-green-300": { + "$value": "#3cab60", + "$type": "color" + }, + "color-green-400": { + "$value": "#309c5a", + "$type": "color" + }, + "color-green-500": { + "$value": "#24874b", + "$type": "color" + }, + "color-green-600": { + "$value": "#18723d", + "$type": "color" + }, + "color-green-700": { + "$value": "#0c5d2e", + "$type": "color" + }, + "color-green-800": { + "$value": "#014920", + "$type": "color" + }, + "color-green-900": { + "$value": "#23342b", + "$type": "color" + }, + "color-teal-10": { + "$value": "#daf0f0", + "$type": "color" + }, + "color-teal-20": { + "$value": "#c7e8e8", + "$type": "color" + }, + "color-teal-30": { + "$value": "#b4e0e1", + "$type": "color" + }, + "color-teal-40": { + "$value": "#a2d9da", + "$type": "color" + }, + "color-teal-50": { + "$value": "#8dcdd1", + "$type": "color" + }, + "color-teal-100": { + "$value": "#7bc1c8", + "$type": "color" + }, + "color-teal-200": { + "$value": "#63b5c0", + "$type": "color" + }, + "color-teal-300": { + "$value": "#49a0ac", + "$type": "color" + }, + "color-teal-400": { + "$value": "#3095a6", + "$type": "color" + }, + "color-teal-500": { + "$value": "#008297", + "$type": "color" + }, + "color-teal-600": { + "$value": "#1b6b85", + "$type": "color" + }, + "color-teal-700": { + "$value": "#005571", + "$type": "color" + }, + "color-teal-800": { + "$value": "#014156", + "$type": "color" + }, + "color-teal-900": { + "$value": "#00314c", + "$type": "color" + }, + "color-blue-10": { + "$value": "#cbe7f9", + "$type": "color" + }, + "color-blue-20": { + "$value": "#b7def6", + "$type": "color" + }, + "color-blue-30": { + "$value": "#a4d5f4", + "$type": "color" + }, + "color-blue-40": { + "$value": "#90ccf2", + "$type": "color" + }, + "color-blue-50": { + "$value": "#7dc3f0", + "$type": "color" + }, + "color-blue-100": { + "$value": "#64b1e4", + "$type": "color" + }, + "color-blue-200": { + "$value": "#4b9fd8", + "$type": "color" + }, + "color-blue-300": { + "$value": "#338dcd", + "$type": "color" + }, + "color-blue-400": { + "$value": "#2e84c6", + "$type": "color" + }, + "color-blue-500": { + "$value": "#2670a9", + "$type": "color" + }, + "color-blue-600": { + "$value": "#155c93", + "$type": "color" + }, + "color-blue-700": { + "$value": "#00477b", + "$type": "color" + }, + "color-blue-800": { + "$value": "#273c4d", + "$type": "color" + }, + "color-blue-900": { + "$value": "#232f38", + "$type": "color" + }, + "color-purple-10": { + "$value": "#f9e0f7", + "$type": "color" + }, + "color-purple-20": { + "$value": "#f7d4f4", + "$type": "color" + }, + "color-purple-30": { + "$value": "#f5c9f1", + "$type": "color" + }, + "color-purple-40": { + "$value": "#f3bdee", + "$type": "color" + }, + "color-purple-50": { + "$value": "#f1b2eb", + "$type": "color" + }, + "color-purple-100": { + "$value": "#df9ce1", + "$type": "color" + }, + "color-purple-200": { + "$value": "#cd87d7", + "$type": "color" + }, + "color-purple-300": { + "$value": "#c074cb", + "$type": "color" + }, + "color-purple-400": { + "$value": "#a961b5", + "$type": "color" + }, + "color-purple-500": { + "$value": "#964ea2", + "$type": "color" + }, + "color-purple-600": { + "$value": "#813c8d", + "$type": "color" + }, + "color-purple-700": { + "$value": "#672e7a", + "$type": "color" + }, + "color-purple-800": { + "$value": "#53256d", + "$type": "color" + }, + "color-purple-900": { + "$value": "#3b1054", + "$type": "color" + }, + "color-gray-10": { + "$value": "#f2f4f6", + "$type": "color" + }, + "color-gray-20": { + "$value": "#eaedef", + "$type": "color" + }, + "color-gray-30": { + "$value": "#e0e4e9", + "$type": "color" + }, + "color-gray-40": { + "$value": "#d9dde3", + "$type": "color" + }, + "color-gray-50": { + "$value": "#ced2d9", + "$type": "color" + }, + "color-gray-60": { + "$value": "#c5c9d0", + "$type": "color" + }, + "color-gray-70": { + "$value": "#b4b7be", + "$type": "color" + }, + "color-gray-80": { + "$value": "#9fa3aa", + "$type": "color" + }, + "color-gray-90": { + "$value": "#84878e", + "$type": "color" + }, + "color-gray-100": { + "$value": "#74777f", + "$type": "color" + }, + "color-gray-200": { + "$value": "#61656e", + "$type": "color" + }, + "color-gray-300": { + "$value": "#4c505b", + "$type": "color" + }, + "color-gray-400": { + "$value": "#44484f", + "$type": "color" + }, + "color-gray-500": { + "$value": "#3b3f46", + "$type": "color" + }, + "color-gray-600": { + "$value": "#2f3136", + "$type": "color" + }, + "color-gray-700": { + "$value": "#2a2c2f", + "$type": "color" + }, + "color-gray-800": { + "$value": "#242526", + "$type": "color" + }, + "color-gray-900": { + "$value": "#161616", + "$type": "color" + }, + "color-blue-100-fade-foreground": { + "$value": { + "color": "{foundations.color.color-blue-100}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-500-fade-foreground": { + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-600-fade-foreground": { + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-200-fade-foreground": { + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-70-fade-foreground": { + "$value": { + "color": "{foundations.color.color-gray-70}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-90-fade-foreground": { + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-900-fade-foreground": { + "$value": { + "color": "{foundations.color.color-gray-900}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-green-300-fade-foreground": { + "$value": { + "color": "{foundations.color.color-green-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-green-400-fade-foreground": { + "$value": { + "color": "{foundations.color.color-green-400}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-green-500-fade-foreground": { + "$value": { + "color": "{foundations.color.color-green-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-green-700-fade-foreground": { + "$value": { + "color": "{foundations.color.color-green-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-red-300-fade-foreground": { + "$value": { + "color": "{foundations.color.color-red-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-red-500-fade-foreground": { + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-red-700-fade-foreground": { + "$value": { + "color": "{foundations.color.color-red-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-white-fade-foreground": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-500-fade-border": { + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-50-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-50}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-60-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-90-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-200-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-300-fade-border": { + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-green-400-fade-border": { + "$value": { + "color": "{foundations.color.color-green-400}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-green-500-fade-border": { + "$value": { + "color": "{foundations.color.color-green-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-orange-400-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-400}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-orange-500-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-orange-600-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-orange-700-fade-border": { + "$value": { + "color": "{foundations.color.color-orange-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-red-500-fade-border": { + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-90-fade-border-readonly": { + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{palette.opacity.palette-opacity-border-readonly}" + }, + "$type": "color" + }, + "color-gray-200-fade-border-readonly": { + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-border-readonly}" + }, + "$type": "color" + }, + "color-blue-30-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-30}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-500-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-600-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-700-fade-background": { + "$value": { + "color": "{foundations.color.color-blue-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-20-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-60-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-70-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-70}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-200-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-300-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-600-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-gray-800-fade-background": { + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-white-fade-background": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-white-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, + "$type": "color" + }, + "color-gray-20-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, + "$type": "color" + }, + "color-gray-600-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, + "$type": "color" + }, + "color-gray-800-fade-background-readonly": { + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, + "$type": "color" + }, + "color-white-fade-backdrop": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-backdrop}" + }, + "$type": "color" + }, + "color-black-fade-backdrop": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-backdrop}" + }, + "$type": "color" + }, + "color-blue-100-fade-fill": { + "$value": { + "color": "{foundations.color.color-blue-100}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-blue-600-fade-fill": { + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, + "$type": "color" + }, + "color-white-fade-separatorOpacity-primary": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-primary-border}" + }, + "$type": "color" + }, + "color-white-fade-separatorOpacity-secondary": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-secondary-border}" + }, + "$type": "color" + }, + "color-white-fade-separatorOpacity-tertiary": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-tertiary-border}" + }, + "$type": "color" + }, + "color-black-fade-separatorOpacity-primary": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-primary-border}" + }, + "$type": "color" + }, + "color-black-fade-separatorOpacity-secondary": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-secondary-border}" + }, + "$type": "color" + }, + "color-black-fade-separatorOpacity-tertiary": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-tertiary-border}" + }, + "$type": "color" + }, + "color-black-fade-background-hover": { + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-8}" + }, + "$type": "color" + }, + "color-white-fade-background-hover": { + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-8}" + }, + "$type": "color" + } + }, + "duration": { + "duration-instant": { + "$value": "0ms", + "$type": "duration" + }, + "duration-perceptible": { + "$value": "300ms", + "$type": "duration" + }, + "duration-notable": { + "$value": "1000ms", + "$type": "duration" + }, + "duration-cutoff": { + "$value": "10000ms", + "$type": "duration" + } + }, + "opacity": { + "opacity-0": { + "$value": "0", + "$type": "number" + }, + "opacity-8": { + "$value": "0.08", + "$type": "number" + }, + "opacity-15": { + "$value": "0.15", + "$type": "number" + }, + "opacity-25": { + "$value": "0.25", + "$type": "number" + }, + "opacity-40": { + "$value": "0.4", + "$type": "number" + }, + "opacity-70": { + "$value": "0.7", + "$type": "number" + } + }, + "typography": { + "typography-fontFamily": { + "$value": "\"Open Sans\"", + "$type": "fontFamily" + }, + "typography-fontFamily-code": { + "$value": "\"PT Mono\"", + "$type": "fontFamily" + }, + "typography-fontWeight-light": { + "$value": "300", + "$type": "fontWeight" + }, + "typography-fontWeight-regular": { + "$value": "400", + "$type": "fontWeight" + }, + "typography-fontWeight-medium": { + "$value": "500", + "$type": "fontWeight" + }, + "typography-fontWeight-semiBold": { + "$value": "600", + "$type": "fontWeight" + }, + "typography-fontWeight-bold": { + "$value": "700", + "$type": "fontWeight" + }, + "typography-fontWeight-extraBold": { + "$value": "800", + "$type": "fontWeight" + } + } + } +} \ No newline at end of file From f0a9f7202acee04f1127c0c0d93d2541d65f12d3 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 15:47:26 -0400 Subject: [PATCH 26/50] changeset --- .changeset/ninety-pumpkins-shake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ninety-pumpkins-shake.md diff --git a/.changeset/ninety-pumpkins-shake.md b/.changeset/ninety-pumpkins-shake.md new file mode 100644 index 00000000000..9975e9bfb4a --- /dev/null +++ b/.changeset/ninety-pumpkins-shake.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/theme": minor +--- + +Expose JSON theme From d34ae3ef48fc492959eb9b901c536e628370765c Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 15:57:21 -0400 Subject: [PATCH 27/50] export in .js and experiment with main tag --- packages/theme/json/index.js | 1 + packages/theme/json/theme.js | 1888 ++++++++++++++++++++++++++++++++++ packages/theme/package.json | 1 + 3 files changed, 1890 insertions(+) create mode 100644 packages/theme/json/index.js create mode 100644 packages/theme/json/theme.js diff --git a/packages/theme/json/index.js b/packages/theme/json/index.js new file mode 100644 index 00000000000..ac19a20c906 --- /dev/null +++ b/packages/theme/json/index.js @@ -0,0 +1 @@ +export { json } from "./theme.js"; diff --git a/packages/theme/json/theme.js b/packages/theme/json/theme.js new file mode 100644 index 00000000000..d542bb26728 --- /dev/null +++ b/packages/theme/json/theme.js @@ -0,0 +1,1888 @@ +export default { + modes: ["$light", "$dark"], + densities: ["$high", "$medium", "$low", "$touch"], + palette: { + accent: { + "palette-accent-background": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + "palette-accent-border": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + "palette-accent-foreground": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + }, + error: { + "palette-error-background": { + $value: { + $dark: "{foundations.color.color-red-900}", + $light: "{foundations.color.color-red-10}", + }, + $type: "color", + }, + "palette-error-background-selected": { + $value: { + $dark: "{foundations.color.color-red-900}", + $light: "{foundations.color.color-red-20}", + }, + $type: "color", + }, + "palette-error-border": { + $value: { + $dark: "{foundations.color.color-red-500}", + $light: "{foundations.color.color-red-500}", + }, + $type: "color", + }, + "palette-error-foreground": { + $value: { + $dark: "{foundations.color.color-red-500}", + $light: "{foundations.color.color-red-500}", + }, + $type: "color", + }, + }, + info: { + "palette-info-background": { + $value: { + $dark: "{foundations.color.color-blue-900}", + $light: "{foundations.color.color-blue-10}", + }, + $type: "color", + }, + "palette-info-border": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + "palette-info-foreground": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + }, + interact: { + "palette-interact-background": { + $value: { + $dark: "transparent", + $light: "transparent", + }, + $type: "color", + }, + "palette-interact-background-blurSelected": { + $value: { + $dark: "{foundations.color.color-gray-600}", + $light: "{foundations.color.color-gray-30}", + }, + $type: "color", + }, + "palette-interact-background-hover": { + $value: { + $dark: "{foundations.color.color-blue-800}", + $light: "{foundations.color.color-blue-10}", + }, + $type: "color", + }, + "palette-interact-background-active": { + $value: { + $dark: "{foundations.color.color-blue-700}", + $light: "{foundations.color.color-blue-30}", + }, + $type: "color", + }, + "palette-interact-background-disabled": { + $value: { + $dark: "transparent", + $light: "transparent", + }, + $type: "color", + }, + "palette-interact-background-activeDisabled": { + $value: { + $dark: "{foundations.color.color-blue-700-fade-background}", + $light: "{foundations.color.color-blue-30-fade-background}", + }, + $type: "color", + }, + "palette-interact-border": { + $value: { + $dark: "{foundations.color.color-gray-90}", + $light: "{foundations.color.color-gray-200}", + }, + $type: "color", + }, + "palette-interact-border-active": { + $value: { + $dark: "{foundations.color.color-blue-100}", + $light: "{foundations.color.color-blue-600}", + }, + $type: "color", + }, + "palette-interact-border-activeDisabled": { + $value: { + $dark: "{foundations.color.color-blue-100-fade-fill}", + $light: "{foundations.color.color-blue-600-fade-fill}", + }, + $type: "color", + }, + "palette-interact-border-disabled": { + $value: { + $dark: "{foundations.color.color-gray-90-fade-border}", + $light: "{foundations.color.color-gray-200-fade-border}", + }, + $type: "color", + }, + "palette-interact-border-hover": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + "palette-interact-border-readonly": { + $value: { + $dark: "{foundations.color.color-gray-90-fade-border-readonly}", + $light: "{foundations.color.color-gray-200-fade-border-readonly}", + }, + $type: "color", + }, + "palette-interact-foreground": { + $value: { + $dark: "{foundations.color.color-gray-90}", + $light: "{foundations.color.color-gray-200}", + }, + $type: "color", + }, + "palette-interact-foreground-active": { + $value: { + $dark: "{foundations.color.color-blue-100}", + $light: "{foundations.color.color-blue-600}", + }, + $type: "color", + }, + "palette-interact-foreground-activeDisabled": { + $value: { + $dark: "{foundations.color.color-blue-100-fade-foreground}", + $light: "{foundations.color.color-blue-600-fade-foreground}", + }, + $type: "color", + }, + "palette-interact-foreground-disabled": { + $value: { + $dark: "{foundations.color.color-gray-90-fade-foreground}", + $light: "{foundations.color.color-gray-200-fade-foreground}", + }, + $type: "color", + }, + "palette-interact-foreground-hover": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + "palette-interact-outline": { + $value: { + $dark: "{foundations.color.color-blue-100}", + $light: "{foundations.color.color-blue-600}", + }, + $type: "color", + }, + "palette-interact-cta-background": { + $value: { + $dark: "{foundations.color.color-blue-600}", + $light: "{foundations.color.color-blue-600}", + }, + $type: "color", + }, + "palette-interact-cta-background-active": { + $value: { + $dark: "{foundations.color.color-blue-700}", + $light: "{foundations.color.color-blue-700}", + }, + $type: "color", + }, + "palette-interact-cta-background-disabled": { + $value: { + $dark: "{foundations.color.color-blue-600-fade-background}", + $light: "{foundations.color.color-blue-600-fade-background}", + }, + $type: "color", + }, + "palette-interact-cta-background-hover": { + $value: { + $dark: "{foundations.color.color-blue-500}", + $light: "{foundations.color.color-blue-500}", + }, + $type: "color", + }, + "palette-interact-cta-foreground": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + "palette-interact-cta-foreground-active": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + "palette-interact-cta-foreground-disabled": { + $value: { + $dark: "{foundations.color.color-white-fade-foreground}", + $light: "{foundations.color.color-white-fade-foreground}", + }, + $type: "color", + }, + "palette-interact-cta-foreground-hover": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + "palette-interact-primary-background": { + $value: { + $dark: "{foundations.color.color-gray-300}", + $light: "{foundations.color.color-gray-60}", + }, + $type: "color", + }, + "palette-interact-primary-background-active": { + $value: { + $dark: "{foundations.color.color-gray-70}", + $light: "{foundations.color.color-gray-200}", + }, + $type: "color", + }, + "palette-interact-primary-background-disabled": { + $value: { + $dark: "{foundations.color.color-gray-300-fade-background}", + $light: "{foundations.color.color-gray-60-fade-background}", + }, + $type: "color", + }, + "palette-interact-primary-background-hover": { + $value: { + $dark: "{foundations.color.color-gray-200}", + $light: "{foundations.color.color-gray-40}", + }, + $type: "color", + }, + "palette-interact-primary-foreground": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-gray-900}", + }, + $type: "color", + }, + "palette-interact-primary-foreground-active": { + $value: { + $dark: "{foundations.color.color-gray-900}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + "palette-interact-primary-foreground-disabled": { + $value: { + $dark: "{foundations.color.color-white-fade-foreground}", + $light: "{foundations.color.color-gray-900-fade-foreground}", + }, + $type: "color", + }, + "palette-interact-primary-foreground-hover": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-gray-900}", + }, + $type: "color", + }, + "palette-interact-secondary-background": { + $value: { + $dark: "transparent", + $light: "transparent", + }, + $type: "color", + }, + "palette-interact-secondary-background-active": { + $value: { + $dark: "{foundations.color.color-gray-70}", + $light: "{foundations.color.color-gray-200}", + }, + $type: "color", + }, + "palette-interact-secondary-background-disabled": { + $value: { + $dark: "transparent", + $light: "transparent", + }, + $type: "color", + }, + "palette-interact-secondary-background-hover": { + $value: { + $dark: "{foundations.color.color-gray-200}", + $light: "{foundations.color.color-gray-40}", + }, + $type: "color", + }, + "palette-interact-secondary-foreground": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-gray-900}", + }, + $type: "color", + }, + "palette-interact-secondary-foreground-active": { + $value: { + $dark: "{foundations.color.color-gray-900}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + "palette-interact-secondary-foreground-disabled": { + $value: { + $dark: "{foundations.color.color-white-fade-foreground}", + $light: "{foundations.color.color-gray-900-fade-foreground}", + }, + $type: "color", + }, + "palette-interact-secondary-foreground-hover": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-gray-900}", + }, + $type: "color", + }, + }, + navigate: { + "palette-navigate-background-hover": { + $value: { + $dark: "{foundations.color.color-white-fade-background-hover}", + $light: "{foundations.color.color-black-fade-background-hover}", + }, + $type: "color", + }, + "palette-navigate-foreground-hover": { + $value: { + $dark: "{foundations.color.color-blue-200}", + $light: "{foundations.color.color-blue-600}", + }, + $type: "color", + }, + "palette-navigate-foreground-active": { + $value: { + $dark: "{foundations.color.color-blue-300}", + $light: "{foundations.color.color-blue-700}", + }, + $type: "color", + }, + "palette-navigate-foreground-visited": { + $value: { + $dark: "{foundations.color.color-purple-100}", + $light: "{foundations.color.color-purple-800}", + }, + $type: "color", + }, + "palette-navigate-indicator-hover": { + $value: { + $dark: "{foundations.color.color-gray-90}", + $light: "{foundations.color.color-gray-90}", + }, + $type: "color", + }, + "palette-navigate-indicator-active": { + $value: { + $dark: "{foundations.color.color-orange-400}", + $light: "{foundations.color.color-orange-600}", + }, + $type: "color", + }, + }, + negative: { + "palette-negative-foreground": { + $value: { + $dark: "{foundations.color.color-red-300}", + $light: "{foundations.color.color-red-700}", + }, + $type: "color", + }, + }, + neutral: { + "palette-neutral-primary-background": { + $value: { + $dark: "{foundations.color.color-gray-800}", + $light: "{foundations.color.color-white}", + }, + $type: "color", + }, + "palette-neutral-primary-background-disabled": { + $value: { + $dark: "{foundations.color.color-gray-800-fade-background}", + $light: "{foundations.color.color-white-fade-background}", + }, + $type: "color", + }, + "palette-neutral-primary-background-readonly": { + $value: { + $dark: "{foundations.color.color-gray-800-fade-background-readonly}", + $light: "{foundations.color.color-white-fade-background-readonly}", + }, + $type: "color", + }, + "palette-neutral-primary-foreground": { + $value: { + $dark: "{foundations.color.color-white}", + $light: "{foundations.color.color-gray-900}", + }, + $type: "color", + }, + "palette-neutral-primary-foreground-disabled": { + $value: { + $dark: "{foundations.color.color-white-fade-foreground}", + $light: "{foundations.color.color-gray-900-fade-foreground}", + }, + $type: "color", + }, + "palette-neutral-primary-separator": { + $value: { + $dark: + "{foundations.color.color-white-fade-separatorOpacity-primary}", + $light: + "{foundations.color.color-black-fade-separatorOpacity-primary}", + }, + $type: "color", + }, + "palette-neutral-primary-border": { + $value: { + $dark: "{foundations.color.color-gray-300}", + $light: "{foundations.color.color-gray-50}", + }, + $type: "color", + }, + "palette-neutral-primary-border-disabled": { + $value: { + $dark: "{foundations.color.color-gray-300-fade-border}", + $light: "{foundations.color.color-gray-50-fade-border}", + }, + $type: "color", + }, + "palette-neutral-secondary-background": { + $value: { + $dark: "{foundations.color.color-gray-600}", + $light: "{foundations.color.color-gray-20}", + }, + $type: "color", + }, + "palette-neutral-secondary-background-disabled": { + $value: { + $dark: "{foundations.color.color-gray-600-fade-background}", + $light: "{foundations.color.color-gray-20-fade-background}", + }, + $type: "color", + }, + "palette-neutral-secondary-background-readonly": { + $value: { + $dark: "{foundations.color.color-gray-600-fade-background-readonly}", + $light: "{foundations.color.color-gray-20-fade-background-readonly}", + }, + $type: "color", + }, + "palette-neutral-secondary-border": { + $value: { + $dark: "{foundations.color.color-gray-300}", + $light: "{foundations.color.color-gray-50}", + }, + $type: "color", + }, + "palette-neutral-secondary-border-disabled": { + $value: { + $dark: "{foundations.color.color-gray-300-fade-border}", + $light: "{foundations.color.color-gray-50-fade-border}", + }, + $type: "color", + }, + "palette-neutral-secondary-foreground": { + $value: { + $dark: "{foundations.color.color-gray-70}", + $light: "{foundations.color.color-gray-200}", + }, + $type: "color", + }, + "palette-neutral-secondary-foreground-disabled": { + $value: { + $dark: "{foundations.color.color-gray-70-fade-foreground}", + $light: "{foundations.color.color-gray-200-fade-foreground}", + }, + $type: "color", + }, + "palette-neutral-backdrop": { + $value: { + $dark: "{foundations.color.color-black-fade-backdrop}", + $light: "{foundations.color.color-white-fade-backdrop}", + }, + $type: "color", + }, + "palette-neutral-secondary-separator": { + $value: { + $dark: + "{foundations.color.color-white-fade-separatorOpacity-secondary}", + $light: + "{foundations.color.color-black-fade-separatorOpacity-secondary}", + }, + $type: "color", + }, + "palette-neutral-tertiary-separator": { + $value: { + $dark: + "{foundations.color.color-white-fade-separatorOpacity-tertiary}", + $light: + "{foundations.color.color-black-fade-separatorOpacity-tertiary}", + }, + $type: "color", + }, + }, + positive: { + "palette-positive-foreground": { + $value: { + $dark: "{foundations.color.color-green-300}", + $light: "{foundations.color.color-green-700}", + }, + $type: "color", + }, + }, + success: { + "palette-success-background": { + $value: { + $dark: "{foundations.color.color-green-900}", + $light: "{foundations.color.color-green-10}", + }, + $type: "color", + }, + "palette-success-background-selected": { + $value: { + $dark: "{foundations.color.color-green-900}", + $light: "{foundations.color.color-green-20}", + }, + $type: "color", + }, + "palette-success-border": { + $value: { + $dark: "{foundations.color.color-green-400}", + $light: "{foundations.color.color-green-500}", + }, + $type: "color", + }, + "palette-success-foreground": { + $value: { + $dark: "{foundations.color.color-green-400}", + $light: "{foundations.color.color-green-500}", + }, + $type: "color", + }, + }, + warning: { + "palette-warning-background": { + $value: { + $dark: "{foundations.color.color-orange-900}", + $light: "{foundations.color.color-orange-10}", + }, + $type: "color", + }, + "palette-warning-background-selected": { + $value: { + $dark: "{foundations.color.color-orange-900}", + $light: "{foundations.color.color-orange-20}", + }, + $type: "color", + }, + "palette-warning-border": { + $value: { + $dark: "{foundations.color.color-orange-500}", + $light: "{foundations.color.color-orange-700}", + }, + $type: "color", + }, + "palette-warning-foreground": { + $value: { + $dark: "{foundations.color.color-orange-500}", + $light: "{foundations.color.color-orange-700}", + }, + $type: "color", + }, + }, + opacity: { + "palette-opacity-backdrop": { + $value: "{foundations.color.opacity-70}", + $type: "number", + }, + "palette-opacity-disabled": { + $value: "{foundations.color.opacity-40}", + $type: "number", + }, + "palette-opacity-background-readonly": { + $value: "{foundations.color.opacity-0}", + $type: "number", + }, + "palette-opacity-border-readonly": { + $value: "{foundations.color.opacity-15}", + $type: "number", + }, + "palette-opacity-primary-border": { + $value: "{foundations.color.opacity-40}", + $type: "number", + }, + "palette-opacity-secondary-border": { + $value: "{foundations.color.opacity-25}", + $type: "number", + }, + "palette-opacity-tertiary-border": { + $value: "{foundations.color.opacity-15}", + $type: "number", + }, + }, + }, + foundations: { + shadow: { + "shadow-100-color": { + $value: { + $dark: "#00000000", + $light: "#00000000", + }, + $type: "color", + }, + "shadow-200-color": { + $value: { + $dark: "#00000000", + $light: "#00000000", + }, + $type: "color", + }, + "shadow-300-color": { + $value: { + $dark: "#00000000", + $light: "#00000000", + }, + $type: "color", + }, + "shadow-400-color": { + $value: { + $dark: "#00000000", + $light: "#00000000", + }, + $type: "color", + }, + "shadow-500-color": { + $value: { + $dark: "#00000000", + $light: "#00000000", + }, + $type: "color", + }, + "shadow-100": { + $value: { + offsetX: "0", + offsetY: "1px", + blur: "3px", + spread: "0", + color: "{foundations.shadow.shadow-100-color}", + }, + $type: "shadow", + }, + "shadow-200": { + $value: { + offsetX: "0", + offsetY: "2px", + blur: "4px", + spread: "0", + color: "{foundations.shadow.shadow-200-color}", + }, + $type: "shadow", + }, + "shadow-300": { + $value: { + offsetX: "0", + offsetY: "4px", + blur: "8px", + spread: "0", + color: "{foundations.shadow.shadow-300-color}", + }, + $type: "shadow", + }, + "shadow-400": { + $value: { + offsetX: "0", + offsetY: "6px", + blur: "10px", + spread: "0", + color: "{foundations.shadow.shadow-400-color}", + }, + $type: "shadow", + }, + "shadow-500": { + $value: { + offsetX: "0", + offsetY: "12px", + blur: "40px", + spread: "0", + color: "{foundations.shadow.shadow-500-color}", + }, + $type: "shadow", + }, + }, + curve: { + "curve-0": { + $value: { + $low: "0", + $touch: "0", + $medium: "0", + $high: "0", + }, + $type: "dimension", + }, + "curve-50": { + $value: { + $low: "3px", + $touch: "4px", + $medium: "2px", + $high: "1px", + }, + $type: "dimension", + }, + "curve-100": { + $value: { + $low: "6px", + $touch: "8px", + $medium: "4px", + $high: "2px", + }, + $type: "dimension", + }, + "curve-150": { + $value: { + $low: "9px", + $touch: "12px", + $medium: "6px", + $high: "3px", + }, + $type: "dimension", + }, + "curve-999": { + $value: { + $low: "999px", + $touch: "999px", + $medium: "999px", + $high: "999px", + }, + $type: "dimension", + }, + }, + size: { + "size-adornment": { + $value: { + $low: "10px", + $touch: "12px", + $medium: "8px", + $high: "6px", + }, + $type: "dimension", + }, + "size-bar": { + $value: { + $low: "6px", + $touch: "8px", + $medium: "4px", + $high: "2px", + }, + $type: "dimension", + }, + "size-base": { + $value: { + $low: "36px", + $touch: "44px", + $medium: "28px", + $high: "20px", + }, + $type: "dimension", + }, + "size-border": { + $value: { + $low: "1px", + $touch: "1px", + $medium: "1px", + $high: "1px", + }, + $type: "dimension", + }, + "size-icon": { + $value: { + $low: "14px", + $touch: "16px", + $medium: "12px", + $high: "10px", + }, + $type: "dimension", + }, + "size-indicator": { + $value: { + $low: "3px", + $touch: "4px", + $medium: "2px", + $high: "1px", + }, + $type: "dimension", + }, + "size-selectable": { + $value: { + $low: "16px", + $touch: "18px", + $medium: "14px", + $high: "12px", + }, + $type: "dimension", + }, + "size-bar-strong": { + $value: { + $low: "12px", + $touch: "16px", + $medium: "8px", + $high: "4px", + }, + $type: "dimension", + }, + "size-bar-small": { + $value: { + $low: "2px", + $touch: "2px", + $medium: "2px", + $high: "2px", + }, + $type: "dimension", + }, + "size-border-strong": { + $value: { + $low: "2px", + $touch: "2px", + $medium: "2px", + $high: "2px", + }, + $type: "dimension", + }, + }, + spacing: { + "spacing-100": { + $value: { + $low: "12px", + $touch: "16px", + $medium: "8px", + $high: "4px", + }, + $type: "dimension", + }, + }, + zIndex: { + "zIndex-default": { + $value: { + $low: "1", + $touch: "1", + $medium: "1", + $high: "1", + }, + $type: "number", + }, + "zIndex-popout": { + $value: { + $low: "1000", + $touch: "1000", + $medium: "1000", + $high: "1000", + }, + $type: "number", + }, + "zIndex-appHeader": { + $value: { + $low: "1100", + $touch: "1100", + $medium: "1100", + $high: "1100", + }, + $type: "number", + }, + "zIndex-drawer": { + $value: { + $low: "1200", + $touch: "1200", + $medium: "1200", + $high: "1200", + }, + $type: "number", + }, + "zIndex-modal": { + $value: { + $low: "1300", + $touch: "1300", + $medium: "1300", + $high: "1300", + }, + $type: "number", + }, + "zIndex-notification": { + $value: { + $low: "1400", + $touch: "1400", + $medium: "1400", + $high: "1400", + }, + $type: "number", + }, + "zIndex-dragObject": { + $value: { + $low: "1420", + $touch: "1420", + $medium: "1420", + $high: "1420", + }, + $type: "number", + }, + "zIndex-contextMenu": { + $value: { + $low: "1450", + $touch: "1450", + $medium: "1450", + $high: "1450", + }, + $type: "number", + }, + "zIndex-flyover": { + $value: { + $low: "1500", + $touch: "1500", + $medium: "1500", + $high: "1500", + }, + $type: "number", + }, + }, + color: { + "color-white": { + $value: "#ffffff", + $type: "color", + }, + "color-black": { + $value: "#000000", + $type: "color", + }, + "color-red-10": { + $value: "#ffe3e0", + $type: "color", + }, + "color-red-20": { + $value: "#ffcfc9", + $type: "color", + }, + "color-red-30": { + $value: "#ffbbb2", + $type: "color", + }, + "color-red-40": { + $value: "#ffa79c", + $type: "color", + }, + "color-red-50": { + $value: "#ff9485", + $type: "color", + }, + "color-red-100": { + $value: "#ff806f", + $type: "color", + }, + "color-red-200": { + $value: "#ff6c58", + $type: "color", + }, + "color-red-300": { + $value: "#ff5942", + $type: "color", + }, + "color-red-400": { + $value: "#ed412a", + $type: "color", + }, + "color-red-500": { + $value: "#e32b16", + $type: "color", + }, + "color-red-600": { + $value: "#c42010", + $type: "color", + }, + "color-red-700": { + $value: "#a6150b", + $type: "color", + }, + "color-red-800": { + $value: "#880a05", + $type: "color", + }, + "color-red-900": { + $value: "#412522", + $type: "color", + }, + "color-orange-10": { + $value: "#ffe8bf", + $type: "color", + }, + "color-orange-20": { + $value: "#fedfa6", + $type: "color", + }, + "color-orange-30": { + $value: "#fed68e", + $type: "color", + }, + "color-orange-40": { + $value: "#fecd76", + $type: "color", + }, + "color-orange-50": { + $value: "#fec55e", + $type: "color", + }, + "color-orange-100": { + $value: "#fab551", + $type: "color", + }, + "color-orange-200": { + $value: "#f6a544", + $type: "color", + }, + "color-orange-300": { + $value: "#f29538", + $type: "color", + }, + "color-orange-400": { + $value: "#ee852b", + $type: "color", + }, + "color-orange-500": { + $value: "#ea7319", + $type: "color", + }, + "color-orange-600": { + $value: "#e06519", + $type: "color", + }, + "color-orange-700": { + $value: "#d65513", + $type: "color", + }, + "color-orange-800": { + $value: "#cc440d", + $type: "color", + }, + "color-orange-900": { + $value: "#362c24", + $type: "color", + }, + "color-green-10": { + $value: "#d1f4c9", + $type: "color", + }, + "color-green-20": { + $value: "#b8e8b6", + $type: "color", + }, + "color-green-30": { + $value: "#a0dda4", + $type: "color", + }, + "color-green-40": { + $value: "#88d291", + $type: "color", + }, + "color-green-50": { + $value: "#70c77f", + $type: "color", + }, + "color-green-100": { + $value: "#5dbd74", + $type: "color", + }, + "color-green-200": { + $value: "#4db469", + $type: "color", + }, + "color-green-300": { + $value: "#3cab60", + $type: "color", + }, + "color-green-400": { + $value: "#309c5a", + $type: "color", + }, + "color-green-500": { + $value: "#24874b", + $type: "color", + }, + "color-green-600": { + $value: "#18723d", + $type: "color", + }, + "color-green-700": { + $value: "#0c5d2e", + $type: "color", + }, + "color-green-800": { + $value: "#014920", + $type: "color", + }, + "color-green-900": { + $value: "#23342b", + $type: "color", + }, + "color-teal-10": { + $value: "#daf0f0", + $type: "color", + }, + "color-teal-20": { + $value: "#c7e8e8", + $type: "color", + }, + "color-teal-30": { + $value: "#b4e0e1", + $type: "color", + }, + "color-teal-40": { + $value: "#a2d9da", + $type: "color", + }, + "color-teal-50": { + $value: "#8dcdd1", + $type: "color", + }, + "color-teal-100": { + $value: "#7bc1c8", + $type: "color", + }, + "color-teal-200": { + $value: "#63b5c0", + $type: "color", + }, + "color-teal-300": { + $value: "#49a0ac", + $type: "color", + }, + "color-teal-400": { + $value: "#3095a6", + $type: "color", + }, + "color-teal-500": { + $value: "#008297", + $type: "color", + }, + "color-teal-600": { + $value: "#1b6b85", + $type: "color", + }, + "color-teal-700": { + $value: "#005571", + $type: "color", + }, + "color-teal-800": { + $value: "#014156", + $type: "color", + }, + "color-teal-900": { + $value: "#00314c", + $type: "color", + }, + "color-blue-10": { + $value: "#cbe7f9", + $type: "color", + }, + "color-blue-20": { + $value: "#b7def6", + $type: "color", + }, + "color-blue-30": { + $value: "#a4d5f4", + $type: "color", + }, + "color-blue-40": { + $value: "#90ccf2", + $type: "color", + }, + "color-blue-50": { + $value: "#7dc3f0", + $type: "color", + }, + "color-blue-100": { + $value: "#64b1e4", + $type: "color", + }, + "color-blue-200": { + $value: "#4b9fd8", + $type: "color", + }, + "color-blue-300": { + $value: "#338dcd", + $type: "color", + }, + "color-blue-400": { + $value: "#2e84c6", + $type: "color", + }, + "color-blue-500": { + $value: "#2670a9", + $type: "color", + }, + "color-blue-600": { + $value: "#155c93", + $type: "color", + }, + "color-blue-700": { + $value: "#00477b", + $type: "color", + }, + "color-blue-800": { + $value: "#273c4d", + $type: "color", + }, + "color-blue-900": { + $value: "#232f38", + $type: "color", + }, + "color-purple-10": { + $value: "#f9e0f7", + $type: "color", + }, + "color-purple-20": { + $value: "#f7d4f4", + $type: "color", + }, + "color-purple-30": { + $value: "#f5c9f1", + $type: "color", + }, + "color-purple-40": { + $value: "#f3bdee", + $type: "color", + }, + "color-purple-50": { + $value: "#f1b2eb", + $type: "color", + }, + "color-purple-100": { + $value: "#df9ce1", + $type: "color", + }, + "color-purple-200": { + $value: "#cd87d7", + $type: "color", + }, + "color-purple-300": { + $value: "#c074cb", + $type: "color", + }, + "color-purple-400": { + $value: "#a961b5", + $type: "color", + }, + "color-purple-500": { + $value: "#964ea2", + $type: "color", + }, + "color-purple-600": { + $value: "#813c8d", + $type: "color", + }, + "color-purple-700": { + $value: "#672e7a", + $type: "color", + }, + "color-purple-800": { + $value: "#53256d", + $type: "color", + }, + "color-purple-900": { + $value: "#3b1054", + $type: "color", + }, + "color-gray-10": { + $value: "#f2f4f6", + $type: "color", + }, + "color-gray-20": { + $value: "#eaedef", + $type: "color", + }, + "color-gray-30": { + $value: "#e0e4e9", + $type: "color", + }, + "color-gray-40": { + $value: "#d9dde3", + $type: "color", + }, + "color-gray-50": { + $value: "#ced2d9", + $type: "color", + }, + "color-gray-60": { + $value: "#c5c9d0", + $type: "color", + }, + "color-gray-70": { + $value: "#b4b7be", + $type: "color", + }, + "color-gray-80": { + $value: "#9fa3aa", + $type: "color", + }, + "color-gray-90": { + $value: "#84878e", + $type: "color", + }, + "color-gray-100": { + $value: "#74777f", + $type: "color", + }, + "color-gray-200": { + $value: "#61656e", + $type: "color", + }, + "color-gray-300": { + $value: "#4c505b", + $type: "color", + }, + "color-gray-400": { + $value: "#44484f", + $type: "color", + }, + "color-gray-500": { + $value: "#3b3f46", + $type: "color", + }, + "color-gray-600": { + $value: "#2f3136", + $type: "color", + }, + "color-gray-700": { + $value: "#2a2c2f", + $type: "color", + }, + "color-gray-800": { + $value: "#242526", + $type: "color", + }, + "color-gray-900": { + $value: "#161616", + $type: "color", + }, + "color-blue-100-fade-foreground": { + $value: { + color: "{foundations.color.color-blue-100}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-500-fade-foreground": { + $value: { + color: "{foundations.color.color-blue-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-600-fade-foreground": { + $value: { + color: "{foundations.color.color-blue-600}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-200-fade-foreground": { + $value: { + color: "{foundations.color.color-gray-200}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-70-fade-foreground": { + $value: { + color: "{foundations.color.color-gray-70}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-90-fade-foreground": { + $value: { + color: "{foundations.color.color-gray-90}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-900-fade-foreground": { + $value: { + color: "{foundations.color.color-gray-900}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-green-300-fade-foreground": { + $value: { + color: "{foundations.color.color-green-300}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-green-400-fade-foreground": { + $value: { + color: "{foundations.color.color-green-400}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-green-500-fade-foreground": { + $value: { + color: "{foundations.color.color-green-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-green-700-fade-foreground": { + $value: { + color: "{foundations.color.color-green-700}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-red-300-fade-foreground": { + $value: { + color: "{foundations.color.color-red-300}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-red-500-fade-foreground": { + $value: { + color: "{foundations.color.color-red-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-red-700-fade-foreground": { + $value: { + color: "{foundations.color.color-red-700}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-white-fade-foreground": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-500-fade-border": { + $value: { + color: "{foundations.color.color-blue-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-50-fade-border": { + $value: { + color: "{foundations.color.color-gray-50}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-60-fade-border": { + $value: { + color: "{foundations.color.color-gray-60}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-90-fade-border": { + $value: { + color: "{foundations.color.color-gray-90}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-200-fade-border": { + $value: { + color: "{foundations.color.color-gray-200}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-300-fade-border": { + $value: { + color: "{foundations.color.color-gray-300}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-green-400-fade-border": { + $value: { + color: "{foundations.color.color-green-400}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-green-500-fade-border": { + $value: { + color: "{foundations.color.color-green-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-orange-400-fade-border": { + $value: { + color: "{foundations.color.color-orange-400}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-orange-500-fade-border": { + $value: { + color: "{foundations.color.color-orange-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-orange-600-fade-border": { + $value: { + color: "{foundations.color.color-orange-600}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-orange-700-fade-border": { + $value: { + color: "{foundations.color.color-orange-700}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-red-500-fade-border": { + $value: { + color: "{foundations.color.color-red-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-90-fade-border-readonly": { + $value: { + color: "{foundations.color.color-gray-90}", + opacity: "{palette.opacity.palette-opacity-border-readonly}", + }, + $type: "color", + }, + "color-gray-200-fade-border-readonly": { + $value: { + color: "{foundations.color.color-gray-200}", + opacity: "{palette.opacity.palette-opacity-border-readonly}", + }, + $type: "color", + }, + "color-blue-30-fade-background": { + $value: { + color: "{foundations.color.color-blue-30}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-500-fade-background": { + $value: { + color: "{foundations.color.color-blue-500}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-600-fade-background": { + $value: { + color: "{foundations.color.color-blue-600}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-700-fade-background": { + $value: { + color: "{foundations.color.color-blue-700}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-20-fade-background": { + $value: { + color: "{foundations.color.color-gray-20}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-60-fade-background": { + $value: { + color: "{foundations.color.color-gray-60}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-70-fade-background": { + $value: { + color: "{foundations.color.color-gray-70}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-200-fade-background": { + $value: { + color: "{foundations.color.color-gray-200}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-300-fade-background": { + $value: { + color: "{foundations.color.color-gray-300}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-600-fade-background": { + $value: { + color: "{foundations.color.color-gray-600}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-gray-800-fade-background": { + $value: { + color: "{foundations.color.color-gray-800}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-white-fade-background": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-white-fade-background-readonly": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-background-readonly}", + }, + $type: "color", + }, + "color-gray-20-fade-background-readonly": { + $value: { + color: "{foundations.color.color-gray-20}", + opacity: "{palette.opacity.palette-opacity-background-readonly}", + }, + $type: "color", + }, + "color-gray-600-fade-background-readonly": { + $value: { + color: "{foundations.color.color-gray-600}", + opacity: "{palette.opacity.palette-opacity-background-readonly}", + }, + $type: "color", + }, + "color-gray-800-fade-background-readonly": { + $value: { + color: "{foundations.color.color-gray-800}", + opacity: "{palette.opacity.palette-opacity-background-readonly}", + }, + $type: "color", + }, + "color-white-fade-backdrop": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-backdrop}", + }, + $type: "color", + }, + "color-black-fade-backdrop": { + $value: { + color: "{foundations.color.color-black}", + opacity: "{palette.opacity.palette-opacity-backdrop}", + }, + $type: "color", + }, + "color-blue-100-fade-fill": { + $value: { + color: "{foundations.color.color-blue-100}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-blue-600-fade-fill": { + $value: { + color: "{foundations.color.color-blue-600}", + opacity: "{palette.opacity.palette-opacity-disabled}", + }, + $type: "color", + }, + "color-white-fade-separatorOpacity-primary": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-primary-border}", + }, + $type: "color", + }, + "color-white-fade-separatorOpacity-secondary": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-secondary-border}", + }, + $type: "color", + }, + "color-white-fade-separatorOpacity-tertiary": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{palette.opacity.palette-opacity-tertiary-border}", + }, + $type: "color", + }, + "color-black-fade-separatorOpacity-primary": { + $value: { + color: "{foundations.color.color-black}", + opacity: "{palette.opacity.palette-opacity-primary-border}", + }, + $type: "color", + }, + "color-black-fade-separatorOpacity-secondary": { + $value: { + color: "{foundations.color.color-black}", + opacity: "{palette.opacity.palette-opacity-secondary-border}", + }, + $type: "color", + }, + "color-black-fade-separatorOpacity-tertiary": { + $value: { + color: "{foundations.color.color-black}", + opacity: "{palette.opacity.palette-opacity-tertiary-border}", + }, + $type: "color", + }, + "color-black-fade-background-hover": { + $value: { + color: "{foundations.color.color-black}", + opacity: "{foundations.opacity.opacity-8}", + }, + $type: "color", + }, + "color-white-fade-background-hover": { + $value: { + color: "{foundations.color.color-white}", + opacity: "{foundations.opacity.opacity-8}", + }, + $type: "color", + }, + }, + duration: { + "duration-instant": { + $value: "0ms", + $type: "duration", + }, + "duration-perceptible": { + $value: "300ms", + $type: "duration", + }, + "duration-notable": { + $value: "1000ms", + $type: "duration", + }, + "duration-cutoff": { + $value: "10000ms", + $type: "duration", + }, + }, + opacity: { + "opacity-0": { + $value: "0", + $type: "number", + }, + "opacity-8": { + $value: "0.08", + $type: "number", + }, + "opacity-15": { + $value: "0.15", + $type: "number", + }, + "opacity-25": { + $value: "0.25", + $type: "number", + }, + "opacity-40": { + $value: "0.4", + $type: "number", + }, + "opacity-70": { + $value: "0.7", + $type: "number", + }, + }, + typography: { + "typography-fontFamily": { + $value: '"Open Sans"', + $type: "fontFamily", + }, + "typography-fontFamily-code": { + $value: '"PT Mono"', + $type: "fontFamily", + }, + "typography-fontWeight-light": { + $value: "300", + $type: "fontWeight", + }, + "typography-fontWeight-regular": { + $value: "400", + $type: "fontWeight", + }, + "typography-fontWeight-medium": { + $value: "500", + $type: "fontWeight", + }, + "typography-fontWeight-semiBold": { + $value: "600", + $type: "fontWeight", + }, + "typography-fontWeight-bold": { + $value: "700", + $type: "fontWeight", + }, + "typography-fontWeight-extraBold": { + $value: "800", + $type: "fontWeight", + }, + }, + }, +}; diff --git a/packages/theme/package.json b/packages/theme/package.json index 20e99cdd74f..06e825baa0e 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -9,6 +9,7 @@ }, "bugs": "https://github.com/jpmorganchase/salt-ds/issues", "style": "index.css", + "main": "json/index.js", "files": [ "/index.css", "/css", From bc90b09ed8f0b553426034b40898258d9d32ccd5 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 16:37:29 -0400 Subject: [PATCH 28/50] rm gitignore file --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 9b2aad1e205..f16ac430281 100644 --- a/.gitignore +++ b/.gitignore @@ -49,4 +49,3 @@ yarn-error.log* /docs/css/salt-core.css /docs/css/salt-lab.css -/packages/theme/json/*.ts \ No newline at end of file From 323bff272d3c3960fb6dd71647081245a589dd7f Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 16:43:27 -0400 Subject: [PATCH 29/50] add path to build --- packages/theme/scripts/build.mjs | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index e848df40db2..9b95560ae37 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -17,6 +17,7 @@ esbuild "css/theme.css", "css/global.css", "css/theme-next.css", + "json/index.js", ], assetNames: "[dir]/[name]", outdir: buildFolder, From 0fbe8756f863290e94ea37c00a817da6b7b69fa5 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 17:10:00 -0400 Subject: [PATCH 30/50] add path to build --- packages/theme/json/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/json/theme.js b/packages/theme/json/theme.js index d542bb26728..447198306fb 100644 --- a/packages/theme/json/theme.js +++ b/packages/theme/json/theme.js @@ -1,4 +1,4 @@ -export default { +export const json = { modes: ["$light", "$dark"], densities: ["$high", "$medium", "$low", "$touch"], palette: { From 708506b6af3513c10b8f538d0558e61c04fc4c2a Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 14 Mar 2024 17:22:20 -0400 Subject: [PATCH 31/50] change build --- packages/theme/json/index.js | 1 - packages/theme/package.json | 2 +- packages/theme/scripts/build.mjs | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) delete mode 100644 packages/theme/json/index.js diff --git a/packages/theme/json/index.js b/packages/theme/json/index.js deleted file mode 100644 index ac19a20c906..00000000000 --- a/packages/theme/json/index.js +++ /dev/null @@ -1 +0,0 @@ -export { json } from "./theme.js"; diff --git a/packages/theme/package.json b/packages/theme/package.json index 06e825baa0e..18ff177f64a 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -9,7 +9,7 @@ }, "bugs": "https://github.com/jpmorganchase/salt-ds/issues", "style": "index.css", - "main": "json/index.js", + "main": "json/theme.js", "files": [ "/index.css", "/css", diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index 9b95560ae37..f442272da6e 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -17,7 +17,7 @@ esbuild "css/theme.css", "css/global.css", "css/theme-next.css", - "json/index.js", + "json/theme.js", ], assetNames: "[dir]/[name]", outdir: buildFolder, From 2d21ba925021d4222e0e54fd2da6ec27e5b03802 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 15 Mar 2024 10:42:21 -0400 Subject: [PATCH 32/50] change build --- packages/theme/json/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/json/theme.js b/packages/theme/json/theme.js index 447198306fb..d542bb26728 100644 --- a/packages/theme/json/theme.js +++ b/packages/theme/json/theme.js @@ -1,4 +1,4 @@ -export const json = { +export default { modes: ["$light", "$dark"], densities: ["$high", "$medium", "$low", "$touch"], palette: { From 4dac4f06378b309683269bc83b18b877c69b105c Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 15 Mar 2024 11:21:46 -0400 Subject: [PATCH 33/50] change build --- packages/theme/json/{theme.js => theme.mjs} | 0 packages/theme/package.json | 2 +- packages/theme/scripts/build.mjs | 3 ++- 3 files changed, 3 insertions(+), 2 deletions(-) rename packages/theme/json/{theme.js => theme.mjs} (100%) diff --git a/packages/theme/json/theme.js b/packages/theme/json/theme.mjs similarity index 100% rename from packages/theme/json/theme.js rename to packages/theme/json/theme.mjs diff --git a/packages/theme/package.json b/packages/theme/package.json index 18ff177f64a..655c69d44ea 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -9,7 +9,7 @@ }, "bugs": "https://github.com/jpmorganchase/salt-ds/issues", "style": "index.css", - "main": "json/theme.js", + "main": "json/theme.mjs", "files": [ "/index.css", "/css", diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index f442272da6e..b0b1045948e 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -17,7 +17,8 @@ esbuild "css/theme.css", "css/global.css", "css/theme-next.css", - "json/theme.js", + "json/theme.mjs", + // "json/theme.json", ], assetNames: "[dir]/[name]", outdir: buildFolder, From 2b297228aac46ee2a75678d85786a24235c5a8f9 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 15 Mar 2024 12:17:29 -0400 Subject: [PATCH 34/50] change build --- packages/theme/json/theme.mjs | 1888 ------------------------------ packages/theme/package.json | 1 - packages/theme/scripts/build.mjs | 19 +- 3 files changed, 17 insertions(+), 1891 deletions(-) delete mode 100644 packages/theme/json/theme.mjs diff --git a/packages/theme/json/theme.mjs b/packages/theme/json/theme.mjs deleted file mode 100644 index d542bb26728..00000000000 --- a/packages/theme/json/theme.mjs +++ /dev/null @@ -1,1888 +0,0 @@ -export default { - modes: ["$light", "$dark"], - densities: ["$high", "$medium", "$low", "$touch"], - palette: { - accent: { - "palette-accent-background": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - "palette-accent-border": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - "palette-accent-foreground": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - }, - error: { - "palette-error-background": { - $value: { - $dark: "{foundations.color.color-red-900}", - $light: "{foundations.color.color-red-10}", - }, - $type: "color", - }, - "palette-error-background-selected": { - $value: { - $dark: "{foundations.color.color-red-900}", - $light: "{foundations.color.color-red-20}", - }, - $type: "color", - }, - "palette-error-border": { - $value: { - $dark: "{foundations.color.color-red-500}", - $light: "{foundations.color.color-red-500}", - }, - $type: "color", - }, - "palette-error-foreground": { - $value: { - $dark: "{foundations.color.color-red-500}", - $light: "{foundations.color.color-red-500}", - }, - $type: "color", - }, - }, - info: { - "palette-info-background": { - $value: { - $dark: "{foundations.color.color-blue-900}", - $light: "{foundations.color.color-blue-10}", - }, - $type: "color", - }, - "palette-info-border": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - "palette-info-foreground": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - }, - interact: { - "palette-interact-background": { - $value: { - $dark: "transparent", - $light: "transparent", - }, - $type: "color", - }, - "palette-interact-background-blurSelected": { - $value: { - $dark: "{foundations.color.color-gray-600}", - $light: "{foundations.color.color-gray-30}", - }, - $type: "color", - }, - "palette-interact-background-hover": { - $value: { - $dark: "{foundations.color.color-blue-800}", - $light: "{foundations.color.color-blue-10}", - }, - $type: "color", - }, - "palette-interact-background-active": { - $value: { - $dark: "{foundations.color.color-blue-700}", - $light: "{foundations.color.color-blue-30}", - }, - $type: "color", - }, - "palette-interact-background-disabled": { - $value: { - $dark: "transparent", - $light: "transparent", - }, - $type: "color", - }, - "palette-interact-background-activeDisabled": { - $value: { - $dark: "{foundations.color.color-blue-700-fade-background}", - $light: "{foundations.color.color-blue-30-fade-background}", - }, - $type: "color", - }, - "palette-interact-border": { - $value: { - $dark: "{foundations.color.color-gray-90}", - $light: "{foundations.color.color-gray-200}", - }, - $type: "color", - }, - "palette-interact-border-active": { - $value: { - $dark: "{foundations.color.color-blue-100}", - $light: "{foundations.color.color-blue-600}", - }, - $type: "color", - }, - "palette-interact-border-activeDisabled": { - $value: { - $dark: "{foundations.color.color-blue-100-fade-fill}", - $light: "{foundations.color.color-blue-600-fade-fill}", - }, - $type: "color", - }, - "palette-interact-border-disabled": { - $value: { - $dark: "{foundations.color.color-gray-90-fade-border}", - $light: "{foundations.color.color-gray-200-fade-border}", - }, - $type: "color", - }, - "palette-interact-border-hover": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - "palette-interact-border-readonly": { - $value: { - $dark: "{foundations.color.color-gray-90-fade-border-readonly}", - $light: "{foundations.color.color-gray-200-fade-border-readonly}", - }, - $type: "color", - }, - "palette-interact-foreground": { - $value: { - $dark: "{foundations.color.color-gray-90}", - $light: "{foundations.color.color-gray-200}", - }, - $type: "color", - }, - "palette-interact-foreground-active": { - $value: { - $dark: "{foundations.color.color-blue-100}", - $light: "{foundations.color.color-blue-600}", - }, - $type: "color", - }, - "palette-interact-foreground-activeDisabled": { - $value: { - $dark: "{foundations.color.color-blue-100-fade-foreground}", - $light: "{foundations.color.color-blue-600-fade-foreground}", - }, - $type: "color", - }, - "palette-interact-foreground-disabled": { - $value: { - $dark: "{foundations.color.color-gray-90-fade-foreground}", - $light: "{foundations.color.color-gray-200-fade-foreground}", - }, - $type: "color", - }, - "palette-interact-foreground-hover": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - "palette-interact-outline": { - $value: { - $dark: "{foundations.color.color-blue-100}", - $light: "{foundations.color.color-blue-600}", - }, - $type: "color", - }, - "palette-interact-cta-background": { - $value: { - $dark: "{foundations.color.color-blue-600}", - $light: "{foundations.color.color-blue-600}", - }, - $type: "color", - }, - "palette-interact-cta-background-active": { - $value: { - $dark: "{foundations.color.color-blue-700}", - $light: "{foundations.color.color-blue-700}", - }, - $type: "color", - }, - "palette-interact-cta-background-disabled": { - $value: { - $dark: "{foundations.color.color-blue-600-fade-background}", - $light: "{foundations.color.color-blue-600-fade-background}", - }, - $type: "color", - }, - "palette-interact-cta-background-hover": { - $value: { - $dark: "{foundations.color.color-blue-500}", - $light: "{foundations.color.color-blue-500}", - }, - $type: "color", - }, - "palette-interact-cta-foreground": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - "palette-interact-cta-foreground-active": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - "palette-interact-cta-foreground-disabled": { - $value: { - $dark: "{foundations.color.color-white-fade-foreground}", - $light: "{foundations.color.color-white-fade-foreground}", - }, - $type: "color", - }, - "palette-interact-cta-foreground-hover": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - "palette-interact-primary-background": { - $value: { - $dark: "{foundations.color.color-gray-300}", - $light: "{foundations.color.color-gray-60}", - }, - $type: "color", - }, - "palette-interact-primary-background-active": { - $value: { - $dark: "{foundations.color.color-gray-70}", - $light: "{foundations.color.color-gray-200}", - }, - $type: "color", - }, - "palette-interact-primary-background-disabled": { - $value: { - $dark: "{foundations.color.color-gray-300-fade-background}", - $light: "{foundations.color.color-gray-60-fade-background}", - }, - $type: "color", - }, - "palette-interact-primary-background-hover": { - $value: { - $dark: "{foundations.color.color-gray-200}", - $light: "{foundations.color.color-gray-40}", - }, - $type: "color", - }, - "palette-interact-primary-foreground": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-gray-900}", - }, - $type: "color", - }, - "palette-interact-primary-foreground-active": { - $value: { - $dark: "{foundations.color.color-gray-900}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - "palette-interact-primary-foreground-disabled": { - $value: { - $dark: "{foundations.color.color-white-fade-foreground}", - $light: "{foundations.color.color-gray-900-fade-foreground}", - }, - $type: "color", - }, - "palette-interact-primary-foreground-hover": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-gray-900}", - }, - $type: "color", - }, - "palette-interact-secondary-background": { - $value: { - $dark: "transparent", - $light: "transparent", - }, - $type: "color", - }, - "palette-interact-secondary-background-active": { - $value: { - $dark: "{foundations.color.color-gray-70}", - $light: "{foundations.color.color-gray-200}", - }, - $type: "color", - }, - "palette-interact-secondary-background-disabled": { - $value: { - $dark: "transparent", - $light: "transparent", - }, - $type: "color", - }, - "palette-interact-secondary-background-hover": { - $value: { - $dark: "{foundations.color.color-gray-200}", - $light: "{foundations.color.color-gray-40}", - }, - $type: "color", - }, - "palette-interact-secondary-foreground": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-gray-900}", - }, - $type: "color", - }, - "palette-interact-secondary-foreground-active": { - $value: { - $dark: "{foundations.color.color-gray-900}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - "palette-interact-secondary-foreground-disabled": { - $value: { - $dark: "{foundations.color.color-white-fade-foreground}", - $light: "{foundations.color.color-gray-900-fade-foreground}", - }, - $type: "color", - }, - "palette-interact-secondary-foreground-hover": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-gray-900}", - }, - $type: "color", - }, - }, - navigate: { - "palette-navigate-background-hover": { - $value: { - $dark: "{foundations.color.color-white-fade-background-hover}", - $light: "{foundations.color.color-black-fade-background-hover}", - }, - $type: "color", - }, - "palette-navigate-foreground-hover": { - $value: { - $dark: "{foundations.color.color-blue-200}", - $light: "{foundations.color.color-blue-600}", - }, - $type: "color", - }, - "palette-navigate-foreground-active": { - $value: { - $dark: "{foundations.color.color-blue-300}", - $light: "{foundations.color.color-blue-700}", - }, - $type: "color", - }, - "palette-navigate-foreground-visited": { - $value: { - $dark: "{foundations.color.color-purple-100}", - $light: "{foundations.color.color-purple-800}", - }, - $type: "color", - }, - "palette-navigate-indicator-hover": { - $value: { - $dark: "{foundations.color.color-gray-90}", - $light: "{foundations.color.color-gray-90}", - }, - $type: "color", - }, - "palette-navigate-indicator-active": { - $value: { - $dark: "{foundations.color.color-orange-400}", - $light: "{foundations.color.color-orange-600}", - }, - $type: "color", - }, - }, - negative: { - "palette-negative-foreground": { - $value: { - $dark: "{foundations.color.color-red-300}", - $light: "{foundations.color.color-red-700}", - }, - $type: "color", - }, - }, - neutral: { - "palette-neutral-primary-background": { - $value: { - $dark: "{foundations.color.color-gray-800}", - $light: "{foundations.color.color-white}", - }, - $type: "color", - }, - "palette-neutral-primary-background-disabled": { - $value: { - $dark: "{foundations.color.color-gray-800-fade-background}", - $light: "{foundations.color.color-white-fade-background}", - }, - $type: "color", - }, - "palette-neutral-primary-background-readonly": { - $value: { - $dark: "{foundations.color.color-gray-800-fade-background-readonly}", - $light: "{foundations.color.color-white-fade-background-readonly}", - }, - $type: "color", - }, - "palette-neutral-primary-foreground": { - $value: { - $dark: "{foundations.color.color-white}", - $light: "{foundations.color.color-gray-900}", - }, - $type: "color", - }, - "palette-neutral-primary-foreground-disabled": { - $value: { - $dark: "{foundations.color.color-white-fade-foreground}", - $light: "{foundations.color.color-gray-900-fade-foreground}", - }, - $type: "color", - }, - "palette-neutral-primary-separator": { - $value: { - $dark: - "{foundations.color.color-white-fade-separatorOpacity-primary}", - $light: - "{foundations.color.color-black-fade-separatorOpacity-primary}", - }, - $type: "color", - }, - "palette-neutral-primary-border": { - $value: { - $dark: "{foundations.color.color-gray-300}", - $light: "{foundations.color.color-gray-50}", - }, - $type: "color", - }, - "palette-neutral-primary-border-disabled": { - $value: { - $dark: "{foundations.color.color-gray-300-fade-border}", - $light: "{foundations.color.color-gray-50-fade-border}", - }, - $type: "color", - }, - "palette-neutral-secondary-background": { - $value: { - $dark: "{foundations.color.color-gray-600}", - $light: "{foundations.color.color-gray-20}", - }, - $type: "color", - }, - "palette-neutral-secondary-background-disabled": { - $value: { - $dark: "{foundations.color.color-gray-600-fade-background}", - $light: "{foundations.color.color-gray-20-fade-background}", - }, - $type: "color", - }, - "palette-neutral-secondary-background-readonly": { - $value: { - $dark: "{foundations.color.color-gray-600-fade-background-readonly}", - $light: "{foundations.color.color-gray-20-fade-background-readonly}", - }, - $type: "color", - }, - "palette-neutral-secondary-border": { - $value: { - $dark: "{foundations.color.color-gray-300}", - $light: "{foundations.color.color-gray-50}", - }, - $type: "color", - }, - "palette-neutral-secondary-border-disabled": { - $value: { - $dark: "{foundations.color.color-gray-300-fade-border}", - $light: "{foundations.color.color-gray-50-fade-border}", - }, - $type: "color", - }, - "palette-neutral-secondary-foreground": { - $value: { - $dark: "{foundations.color.color-gray-70}", - $light: "{foundations.color.color-gray-200}", - }, - $type: "color", - }, - "palette-neutral-secondary-foreground-disabled": { - $value: { - $dark: "{foundations.color.color-gray-70-fade-foreground}", - $light: "{foundations.color.color-gray-200-fade-foreground}", - }, - $type: "color", - }, - "palette-neutral-backdrop": { - $value: { - $dark: "{foundations.color.color-black-fade-backdrop}", - $light: "{foundations.color.color-white-fade-backdrop}", - }, - $type: "color", - }, - "palette-neutral-secondary-separator": { - $value: { - $dark: - "{foundations.color.color-white-fade-separatorOpacity-secondary}", - $light: - "{foundations.color.color-black-fade-separatorOpacity-secondary}", - }, - $type: "color", - }, - "palette-neutral-tertiary-separator": { - $value: { - $dark: - "{foundations.color.color-white-fade-separatorOpacity-tertiary}", - $light: - "{foundations.color.color-black-fade-separatorOpacity-tertiary}", - }, - $type: "color", - }, - }, - positive: { - "palette-positive-foreground": { - $value: { - $dark: "{foundations.color.color-green-300}", - $light: "{foundations.color.color-green-700}", - }, - $type: "color", - }, - }, - success: { - "palette-success-background": { - $value: { - $dark: "{foundations.color.color-green-900}", - $light: "{foundations.color.color-green-10}", - }, - $type: "color", - }, - "palette-success-background-selected": { - $value: { - $dark: "{foundations.color.color-green-900}", - $light: "{foundations.color.color-green-20}", - }, - $type: "color", - }, - "palette-success-border": { - $value: { - $dark: "{foundations.color.color-green-400}", - $light: "{foundations.color.color-green-500}", - }, - $type: "color", - }, - "palette-success-foreground": { - $value: { - $dark: "{foundations.color.color-green-400}", - $light: "{foundations.color.color-green-500}", - }, - $type: "color", - }, - }, - warning: { - "palette-warning-background": { - $value: { - $dark: "{foundations.color.color-orange-900}", - $light: "{foundations.color.color-orange-10}", - }, - $type: "color", - }, - "palette-warning-background-selected": { - $value: { - $dark: "{foundations.color.color-orange-900}", - $light: "{foundations.color.color-orange-20}", - }, - $type: "color", - }, - "palette-warning-border": { - $value: { - $dark: "{foundations.color.color-orange-500}", - $light: "{foundations.color.color-orange-700}", - }, - $type: "color", - }, - "palette-warning-foreground": { - $value: { - $dark: "{foundations.color.color-orange-500}", - $light: "{foundations.color.color-orange-700}", - }, - $type: "color", - }, - }, - opacity: { - "palette-opacity-backdrop": { - $value: "{foundations.color.opacity-70}", - $type: "number", - }, - "palette-opacity-disabled": { - $value: "{foundations.color.opacity-40}", - $type: "number", - }, - "palette-opacity-background-readonly": { - $value: "{foundations.color.opacity-0}", - $type: "number", - }, - "palette-opacity-border-readonly": { - $value: "{foundations.color.opacity-15}", - $type: "number", - }, - "palette-opacity-primary-border": { - $value: "{foundations.color.opacity-40}", - $type: "number", - }, - "palette-opacity-secondary-border": { - $value: "{foundations.color.opacity-25}", - $type: "number", - }, - "palette-opacity-tertiary-border": { - $value: "{foundations.color.opacity-15}", - $type: "number", - }, - }, - }, - foundations: { - shadow: { - "shadow-100-color": { - $value: { - $dark: "#00000000", - $light: "#00000000", - }, - $type: "color", - }, - "shadow-200-color": { - $value: { - $dark: "#00000000", - $light: "#00000000", - }, - $type: "color", - }, - "shadow-300-color": { - $value: { - $dark: "#00000000", - $light: "#00000000", - }, - $type: "color", - }, - "shadow-400-color": { - $value: { - $dark: "#00000000", - $light: "#00000000", - }, - $type: "color", - }, - "shadow-500-color": { - $value: { - $dark: "#00000000", - $light: "#00000000", - }, - $type: "color", - }, - "shadow-100": { - $value: { - offsetX: "0", - offsetY: "1px", - blur: "3px", - spread: "0", - color: "{foundations.shadow.shadow-100-color}", - }, - $type: "shadow", - }, - "shadow-200": { - $value: { - offsetX: "0", - offsetY: "2px", - blur: "4px", - spread: "0", - color: "{foundations.shadow.shadow-200-color}", - }, - $type: "shadow", - }, - "shadow-300": { - $value: { - offsetX: "0", - offsetY: "4px", - blur: "8px", - spread: "0", - color: "{foundations.shadow.shadow-300-color}", - }, - $type: "shadow", - }, - "shadow-400": { - $value: { - offsetX: "0", - offsetY: "6px", - blur: "10px", - spread: "0", - color: "{foundations.shadow.shadow-400-color}", - }, - $type: "shadow", - }, - "shadow-500": { - $value: { - offsetX: "0", - offsetY: "12px", - blur: "40px", - spread: "0", - color: "{foundations.shadow.shadow-500-color}", - }, - $type: "shadow", - }, - }, - curve: { - "curve-0": { - $value: { - $low: "0", - $touch: "0", - $medium: "0", - $high: "0", - }, - $type: "dimension", - }, - "curve-50": { - $value: { - $low: "3px", - $touch: "4px", - $medium: "2px", - $high: "1px", - }, - $type: "dimension", - }, - "curve-100": { - $value: { - $low: "6px", - $touch: "8px", - $medium: "4px", - $high: "2px", - }, - $type: "dimension", - }, - "curve-150": { - $value: { - $low: "9px", - $touch: "12px", - $medium: "6px", - $high: "3px", - }, - $type: "dimension", - }, - "curve-999": { - $value: { - $low: "999px", - $touch: "999px", - $medium: "999px", - $high: "999px", - }, - $type: "dimension", - }, - }, - size: { - "size-adornment": { - $value: { - $low: "10px", - $touch: "12px", - $medium: "8px", - $high: "6px", - }, - $type: "dimension", - }, - "size-bar": { - $value: { - $low: "6px", - $touch: "8px", - $medium: "4px", - $high: "2px", - }, - $type: "dimension", - }, - "size-base": { - $value: { - $low: "36px", - $touch: "44px", - $medium: "28px", - $high: "20px", - }, - $type: "dimension", - }, - "size-border": { - $value: { - $low: "1px", - $touch: "1px", - $medium: "1px", - $high: "1px", - }, - $type: "dimension", - }, - "size-icon": { - $value: { - $low: "14px", - $touch: "16px", - $medium: "12px", - $high: "10px", - }, - $type: "dimension", - }, - "size-indicator": { - $value: { - $low: "3px", - $touch: "4px", - $medium: "2px", - $high: "1px", - }, - $type: "dimension", - }, - "size-selectable": { - $value: { - $low: "16px", - $touch: "18px", - $medium: "14px", - $high: "12px", - }, - $type: "dimension", - }, - "size-bar-strong": { - $value: { - $low: "12px", - $touch: "16px", - $medium: "8px", - $high: "4px", - }, - $type: "dimension", - }, - "size-bar-small": { - $value: { - $low: "2px", - $touch: "2px", - $medium: "2px", - $high: "2px", - }, - $type: "dimension", - }, - "size-border-strong": { - $value: { - $low: "2px", - $touch: "2px", - $medium: "2px", - $high: "2px", - }, - $type: "dimension", - }, - }, - spacing: { - "spacing-100": { - $value: { - $low: "12px", - $touch: "16px", - $medium: "8px", - $high: "4px", - }, - $type: "dimension", - }, - }, - zIndex: { - "zIndex-default": { - $value: { - $low: "1", - $touch: "1", - $medium: "1", - $high: "1", - }, - $type: "number", - }, - "zIndex-popout": { - $value: { - $low: "1000", - $touch: "1000", - $medium: "1000", - $high: "1000", - }, - $type: "number", - }, - "zIndex-appHeader": { - $value: { - $low: "1100", - $touch: "1100", - $medium: "1100", - $high: "1100", - }, - $type: "number", - }, - "zIndex-drawer": { - $value: { - $low: "1200", - $touch: "1200", - $medium: "1200", - $high: "1200", - }, - $type: "number", - }, - "zIndex-modal": { - $value: { - $low: "1300", - $touch: "1300", - $medium: "1300", - $high: "1300", - }, - $type: "number", - }, - "zIndex-notification": { - $value: { - $low: "1400", - $touch: "1400", - $medium: "1400", - $high: "1400", - }, - $type: "number", - }, - "zIndex-dragObject": { - $value: { - $low: "1420", - $touch: "1420", - $medium: "1420", - $high: "1420", - }, - $type: "number", - }, - "zIndex-contextMenu": { - $value: { - $low: "1450", - $touch: "1450", - $medium: "1450", - $high: "1450", - }, - $type: "number", - }, - "zIndex-flyover": { - $value: { - $low: "1500", - $touch: "1500", - $medium: "1500", - $high: "1500", - }, - $type: "number", - }, - }, - color: { - "color-white": { - $value: "#ffffff", - $type: "color", - }, - "color-black": { - $value: "#000000", - $type: "color", - }, - "color-red-10": { - $value: "#ffe3e0", - $type: "color", - }, - "color-red-20": { - $value: "#ffcfc9", - $type: "color", - }, - "color-red-30": { - $value: "#ffbbb2", - $type: "color", - }, - "color-red-40": { - $value: "#ffa79c", - $type: "color", - }, - "color-red-50": { - $value: "#ff9485", - $type: "color", - }, - "color-red-100": { - $value: "#ff806f", - $type: "color", - }, - "color-red-200": { - $value: "#ff6c58", - $type: "color", - }, - "color-red-300": { - $value: "#ff5942", - $type: "color", - }, - "color-red-400": { - $value: "#ed412a", - $type: "color", - }, - "color-red-500": { - $value: "#e32b16", - $type: "color", - }, - "color-red-600": { - $value: "#c42010", - $type: "color", - }, - "color-red-700": { - $value: "#a6150b", - $type: "color", - }, - "color-red-800": { - $value: "#880a05", - $type: "color", - }, - "color-red-900": { - $value: "#412522", - $type: "color", - }, - "color-orange-10": { - $value: "#ffe8bf", - $type: "color", - }, - "color-orange-20": { - $value: "#fedfa6", - $type: "color", - }, - "color-orange-30": { - $value: "#fed68e", - $type: "color", - }, - "color-orange-40": { - $value: "#fecd76", - $type: "color", - }, - "color-orange-50": { - $value: "#fec55e", - $type: "color", - }, - "color-orange-100": { - $value: "#fab551", - $type: "color", - }, - "color-orange-200": { - $value: "#f6a544", - $type: "color", - }, - "color-orange-300": { - $value: "#f29538", - $type: "color", - }, - "color-orange-400": { - $value: "#ee852b", - $type: "color", - }, - "color-orange-500": { - $value: "#ea7319", - $type: "color", - }, - "color-orange-600": { - $value: "#e06519", - $type: "color", - }, - "color-orange-700": { - $value: "#d65513", - $type: "color", - }, - "color-orange-800": { - $value: "#cc440d", - $type: "color", - }, - "color-orange-900": { - $value: "#362c24", - $type: "color", - }, - "color-green-10": { - $value: "#d1f4c9", - $type: "color", - }, - "color-green-20": { - $value: "#b8e8b6", - $type: "color", - }, - "color-green-30": { - $value: "#a0dda4", - $type: "color", - }, - "color-green-40": { - $value: "#88d291", - $type: "color", - }, - "color-green-50": { - $value: "#70c77f", - $type: "color", - }, - "color-green-100": { - $value: "#5dbd74", - $type: "color", - }, - "color-green-200": { - $value: "#4db469", - $type: "color", - }, - "color-green-300": { - $value: "#3cab60", - $type: "color", - }, - "color-green-400": { - $value: "#309c5a", - $type: "color", - }, - "color-green-500": { - $value: "#24874b", - $type: "color", - }, - "color-green-600": { - $value: "#18723d", - $type: "color", - }, - "color-green-700": { - $value: "#0c5d2e", - $type: "color", - }, - "color-green-800": { - $value: "#014920", - $type: "color", - }, - "color-green-900": { - $value: "#23342b", - $type: "color", - }, - "color-teal-10": { - $value: "#daf0f0", - $type: "color", - }, - "color-teal-20": { - $value: "#c7e8e8", - $type: "color", - }, - "color-teal-30": { - $value: "#b4e0e1", - $type: "color", - }, - "color-teal-40": { - $value: "#a2d9da", - $type: "color", - }, - "color-teal-50": { - $value: "#8dcdd1", - $type: "color", - }, - "color-teal-100": { - $value: "#7bc1c8", - $type: "color", - }, - "color-teal-200": { - $value: "#63b5c0", - $type: "color", - }, - "color-teal-300": { - $value: "#49a0ac", - $type: "color", - }, - "color-teal-400": { - $value: "#3095a6", - $type: "color", - }, - "color-teal-500": { - $value: "#008297", - $type: "color", - }, - "color-teal-600": { - $value: "#1b6b85", - $type: "color", - }, - "color-teal-700": { - $value: "#005571", - $type: "color", - }, - "color-teal-800": { - $value: "#014156", - $type: "color", - }, - "color-teal-900": { - $value: "#00314c", - $type: "color", - }, - "color-blue-10": { - $value: "#cbe7f9", - $type: "color", - }, - "color-blue-20": { - $value: "#b7def6", - $type: "color", - }, - "color-blue-30": { - $value: "#a4d5f4", - $type: "color", - }, - "color-blue-40": { - $value: "#90ccf2", - $type: "color", - }, - "color-blue-50": { - $value: "#7dc3f0", - $type: "color", - }, - "color-blue-100": { - $value: "#64b1e4", - $type: "color", - }, - "color-blue-200": { - $value: "#4b9fd8", - $type: "color", - }, - "color-blue-300": { - $value: "#338dcd", - $type: "color", - }, - "color-blue-400": { - $value: "#2e84c6", - $type: "color", - }, - "color-blue-500": { - $value: "#2670a9", - $type: "color", - }, - "color-blue-600": { - $value: "#155c93", - $type: "color", - }, - "color-blue-700": { - $value: "#00477b", - $type: "color", - }, - "color-blue-800": { - $value: "#273c4d", - $type: "color", - }, - "color-blue-900": { - $value: "#232f38", - $type: "color", - }, - "color-purple-10": { - $value: "#f9e0f7", - $type: "color", - }, - "color-purple-20": { - $value: "#f7d4f4", - $type: "color", - }, - "color-purple-30": { - $value: "#f5c9f1", - $type: "color", - }, - "color-purple-40": { - $value: "#f3bdee", - $type: "color", - }, - "color-purple-50": { - $value: "#f1b2eb", - $type: "color", - }, - "color-purple-100": { - $value: "#df9ce1", - $type: "color", - }, - "color-purple-200": { - $value: "#cd87d7", - $type: "color", - }, - "color-purple-300": { - $value: "#c074cb", - $type: "color", - }, - "color-purple-400": { - $value: "#a961b5", - $type: "color", - }, - "color-purple-500": { - $value: "#964ea2", - $type: "color", - }, - "color-purple-600": { - $value: "#813c8d", - $type: "color", - }, - "color-purple-700": { - $value: "#672e7a", - $type: "color", - }, - "color-purple-800": { - $value: "#53256d", - $type: "color", - }, - "color-purple-900": { - $value: "#3b1054", - $type: "color", - }, - "color-gray-10": { - $value: "#f2f4f6", - $type: "color", - }, - "color-gray-20": { - $value: "#eaedef", - $type: "color", - }, - "color-gray-30": { - $value: "#e0e4e9", - $type: "color", - }, - "color-gray-40": { - $value: "#d9dde3", - $type: "color", - }, - "color-gray-50": { - $value: "#ced2d9", - $type: "color", - }, - "color-gray-60": { - $value: "#c5c9d0", - $type: "color", - }, - "color-gray-70": { - $value: "#b4b7be", - $type: "color", - }, - "color-gray-80": { - $value: "#9fa3aa", - $type: "color", - }, - "color-gray-90": { - $value: "#84878e", - $type: "color", - }, - "color-gray-100": { - $value: "#74777f", - $type: "color", - }, - "color-gray-200": { - $value: "#61656e", - $type: "color", - }, - "color-gray-300": { - $value: "#4c505b", - $type: "color", - }, - "color-gray-400": { - $value: "#44484f", - $type: "color", - }, - "color-gray-500": { - $value: "#3b3f46", - $type: "color", - }, - "color-gray-600": { - $value: "#2f3136", - $type: "color", - }, - "color-gray-700": { - $value: "#2a2c2f", - $type: "color", - }, - "color-gray-800": { - $value: "#242526", - $type: "color", - }, - "color-gray-900": { - $value: "#161616", - $type: "color", - }, - "color-blue-100-fade-foreground": { - $value: { - color: "{foundations.color.color-blue-100}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-500-fade-foreground": { - $value: { - color: "{foundations.color.color-blue-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-600-fade-foreground": { - $value: { - color: "{foundations.color.color-blue-600}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-200-fade-foreground": { - $value: { - color: "{foundations.color.color-gray-200}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-70-fade-foreground": { - $value: { - color: "{foundations.color.color-gray-70}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-90-fade-foreground": { - $value: { - color: "{foundations.color.color-gray-90}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-900-fade-foreground": { - $value: { - color: "{foundations.color.color-gray-900}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-green-300-fade-foreground": { - $value: { - color: "{foundations.color.color-green-300}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-green-400-fade-foreground": { - $value: { - color: "{foundations.color.color-green-400}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-green-500-fade-foreground": { - $value: { - color: "{foundations.color.color-green-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-green-700-fade-foreground": { - $value: { - color: "{foundations.color.color-green-700}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-red-300-fade-foreground": { - $value: { - color: "{foundations.color.color-red-300}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-red-500-fade-foreground": { - $value: { - color: "{foundations.color.color-red-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-red-700-fade-foreground": { - $value: { - color: "{foundations.color.color-red-700}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-white-fade-foreground": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-500-fade-border": { - $value: { - color: "{foundations.color.color-blue-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-50-fade-border": { - $value: { - color: "{foundations.color.color-gray-50}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-60-fade-border": { - $value: { - color: "{foundations.color.color-gray-60}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-90-fade-border": { - $value: { - color: "{foundations.color.color-gray-90}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-200-fade-border": { - $value: { - color: "{foundations.color.color-gray-200}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-300-fade-border": { - $value: { - color: "{foundations.color.color-gray-300}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-green-400-fade-border": { - $value: { - color: "{foundations.color.color-green-400}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-green-500-fade-border": { - $value: { - color: "{foundations.color.color-green-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-orange-400-fade-border": { - $value: { - color: "{foundations.color.color-orange-400}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-orange-500-fade-border": { - $value: { - color: "{foundations.color.color-orange-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-orange-600-fade-border": { - $value: { - color: "{foundations.color.color-orange-600}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-orange-700-fade-border": { - $value: { - color: "{foundations.color.color-orange-700}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-red-500-fade-border": { - $value: { - color: "{foundations.color.color-red-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-90-fade-border-readonly": { - $value: { - color: "{foundations.color.color-gray-90}", - opacity: "{palette.opacity.palette-opacity-border-readonly}", - }, - $type: "color", - }, - "color-gray-200-fade-border-readonly": { - $value: { - color: "{foundations.color.color-gray-200}", - opacity: "{palette.opacity.palette-opacity-border-readonly}", - }, - $type: "color", - }, - "color-blue-30-fade-background": { - $value: { - color: "{foundations.color.color-blue-30}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-500-fade-background": { - $value: { - color: "{foundations.color.color-blue-500}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-600-fade-background": { - $value: { - color: "{foundations.color.color-blue-600}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-700-fade-background": { - $value: { - color: "{foundations.color.color-blue-700}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-20-fade-background": { - $value: { - color: "{foundations.color.color-gray-20}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-60-fade-background": { - $value: { - color: "{foundations.color.color-gray-60}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-70-fade-background": { - $value: { - color: "{foundations.color.color-gray-70}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-200-fade-background": { - $value: { - color: "{foundations.color.color-gray-200}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-300-fade-background": { - $value: { - color: "{foundations.color.color-gray-300}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-600-fade-background": { - $value: { - color: "{foundations.color.color-gray-600}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-gray-800-fade-background": { - $value: { - color: "{foundations.color.color-gray-800}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-white-fade-background": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-white-fade-background-readonly": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-background-readonly}", - }, - $type: "color", - }, - "color-gray-20-fade-background-readonly": { - $value: { - color: "{foundations.color.color-gray-20}", - opacity: "{palette.opacity.palette-opacity-background-readonly}", - }, - $type: "color", - }, - "color-gray-600-fade-background-readonly": { - $value: { - color: "{foundations.color.color-gray-600}", - opacity: "{palette.opacity.palette-opacity-background-readonly}", - }, - $type: "color", - }, - "color-gray-800-fade-background-readonly": { - $value: { - color: "{foundations.color.color-gray-800}", - opacity: "{palette.opacity.palette-opacity-background-readonly}", - }, - $type: "color", - }, - "color-white-fade-backdrop": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-backdrop}", - }, - $type: "color", - }, - "color-black-fade-backdrop": { - $value: { - color: "{foundations.color.color-black}", - opacity: "{palette.opacity.palette-opacity-backdrop}", - }, - $type: "color", - }, - "color-blue-100-fade-fill": { - $value: { - color: "{foundations.color.color-blue-100}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-blue-600-fade-fill": { - $value: { - color: "{foundations.color.color-blue-600}", - opacity: "{palette.opacity.palette-opacity-disabled}", - }, - $type: "color", - }, - "color-white-fade-separatorOpacity-primary": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-primary-border}", - }, - $type: "color", - }, - "color-white-fade-separatorOpacity-secondary": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-secondary-border}", - }, - $type: "color", - }, - "color-white-fade-separatorOpacity-tertiary": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{palette.opacity.palette-opacity-tertiary-border}", - }, - $type: "color", - }, - "color-black-fade-separatorOpacity-primary": { - $value: { - color: "{foundations.color.color-black}", - opacity: "{palette.opacity.palette-opacity-primary-border}", - }, - $type: "color", - }, - "color-black-fade-separatorOpacity-secondary": { - $value: { - color: "{foundations.color.color-black}", - opacity: "{palette.opacity.palette-opacity-secondary-border}", - }, - $type: "color", - }, - "color-black-fade-separatorOpacity-tertiary": { - $value: { - color: "{foundations.color.color-black}", - opacity: "{palette.opacity.palette-opacity-tertiary-border}", - }, - $type: "color", - }, - "color-black-fade-background-hover": { - $value: { - color: "{foundations.color.color-black}", - opacity: "{foundations.opacity.opacity-8}", - }, - $type: "color", - }, - "color-white-fade-background-hover": { - $value: { - color: "{foundations.color.color-white}", - opacity: "{foundations.opacity.opacity-8}", - }, - $type: "color", - }, - }, - duration: { - "duration-instant": { - $value: "0ms", - $type: "duration", - }, - "duration-perceptible": { - $value: "300ms", - $type: "duration", - }, - "duration-notable": { - $value: "1000ms", - $type: "duration", - }, - "duration-cutoff": { - $value: "10000ms", - $type: "duration", - }, - }, - opacity: { - "opacity-0": { - $value: "0", - $type: "number", - }, - "opacity-8": { - $value: "0.08", - $type: "number", - }, - "opacity-15": { - $value: "0.15", - $type: "number", - }, - "opacity-25": { - $value: "0.25", - $type: "number", - }, - "opacity-40": { - $value: "0.4", - $type: "number", - }, - "opacity-70": { - $value: "0.7", - $type: "number", - }, - }, - typography: { - "typography-fontFamily": { - $value: '"Open Sans"', - $type: "fontFamily", - }, - "typography-fontFamily-code": { - $value: '"PT Mono"', - $type: "fontFamily", - }, - "typography-fontWeight-light": { - $value: "300", - $type: "fontWeight", - }, - "typography-fontWeight-regular": { - $value: "400", - $type: "fontWeight", - }, - "typography-fontWeight-medium": { - $value: "500", - $type: "fontWeight", - }, - "typography-fontWeight-semiBold": { - $value: "600", - $type: "fontWeight", - }, - "typography-fontWeight-bold": { - $value: "700", - $type: "fontWeight", - }, - "typography-fontWeight-extraBold": { - $value: "800", - $type: "fontWeight", - }, - }, - }, -}; diff --git a/packages/theme/package.json b/packages/theme/package.json index 655c69d44ea..20e99cdd74f 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -9,7 +9,6 @@ }, "bugs": "https://github.com/jpmorganchase/salt-ds/issues", "style": "index.css", - "main": "json/theme.mjs", "files": [ "/index.css", "/css", diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index b0b1045948e..8406e8e1e0d 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -17,8 +17,6 @@ esbuild "css/theme.css", "css/global.css", "css/theme-next.css", - "json/theme.mjs", - // "json/theme.json", ], assetNames: "[dir]/[name]", outdir: buildFolder, @@ -30,6 +28,23 @@ esbuild logLevel: "info", }) .then(() => { + // copy json + fs.copyFile( + path.resolve(__dirname, "../json/theme.json"), + path.join(buildFolder, "theme.json"), + (err) => { + if (err) throw err; + console.log( + `${path.relative( + process.cwd(), + path.resolve(__dirname, "../json/theme.json") + )} copied to ${path.relative( + process.cwd(), + path.join(buildFolder, "theme.json") + )}` + ); + } + ); // File destination.txt will be created or overwritten by default. fs.copyFile( path.resolve(__dirname, "../package.json"), From 55d5fb84267f49e2077f660717b4f50808651471 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 15 Mar 2024 12:23:10 -0400 Subject: [PATCH 35/50] change build --- packages/theme/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/package.json b/packages/theme/package.json index 20e99cdd74f..da651970ed5 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -12,7 +12,7 @@ "files": [ "/index.css", "/css", - "/json" + "/theme.json" ], "scripts": { "build": "yarn node ./scripts/build.mjs" From 50f07db8b8a85cdc21142cea8c9c6fc0acb5fb89 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Mon, 18 Mar 2024 17:15:48 -0400 Subject: [PATCH 36/50] add characteristics --- .yarnrc.yml | 2 +- .../theme/css/characteristics/navigable.css | 1 + packages/theme/json/parsers/themeToJson.js | 209 +- packages/theme/json/parsers/toCss.js | 2 + packages/theme/json/theme.json | 1715 +++++++++++++---- 5 files changed, 1431 insertions(+), 498 deletions(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index c3fcd7e69fe..6cccee20b04 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -4,6 +4,6 @@ enableGlobalCache: false nodeLinker: node-modules -npmRegistryServer: "https://registry.yarnpkg.com" +npmRegistryServer: "https://artifacts-read.gkp.jpmchase.net/artifactory/api/npm/npm" yarnPath: .yarn/releases/yarn-4.2.2.cjs diff --git a/packages/theme/css/characteristics/navigable.css b/packages/theme/css/characteristics/navigable.css index 8b3e5658201..e0c2145eb7f 100644 --- a/packages/theme/css/characteristics/navigable.css +++ b/packages/theme/css/characteristics/navigable.css @@ -9,6 +9,7 @@ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold); --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular); + /* arguably should be -background- ? or how do we know this is a color */ --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover); --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active); diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index 28963c131cc..3712a5aecd0 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -18,6 +18,7 @@ const jsonTokens = { densities: ["$high", "$medium", "$low", "$touch"], palette: {}, foundations: {}, + characteristics: {}, }; /* * Adds token to JSON schema @@ -50,7 +51,7 @@ function addToJson(key, themeLevel, semantic, tokenName, type, tokenValue) { } /** - * Maps semantic of palette to corresponding semantic of foundation + * Maps semantic of palette to corresponding foundation reference **/ function formatFoundationValue(semantic, tokenValue) { const alias = removePrefix(stripVarFunc(tokenValue)); @@ -68,14 +69,48 @@ function formatFoundationValue(semantic, tokenValue) { return `{foundations.${foundationSemantic}.${alias}}`; } +/** + * Maps semantic of characteristic color token to corresponding palette or foundation reference + * Caveat: we have a shortcut in CSS for --salt-focused-outline that refs back to the individual parts + **/ +function formatCharacteristicValue(tokenValue) { + const alias = removePrefix(stripVarFunc(tokenValue)); + + if (alias.includes("palette")) { + const semantic = alias.split("-")[1]; + return `{palette.${semantic}.${alias}}`; + } + + if (alias.includes("outline")) { + const semantic = alias.split("-")[0]; + return `{characteristics.${semantic}.${alias}}`; + } + + const semantic = alias.split("-")[0]; + return `{foundations.${semantic}.${alias}}`; +} + +const foundations = [ + "color", + "curve", + "duration", + "opacity", + "shadow", + "size", + "spacing", + "typography", + "zIndex", +]; + function format(variables) { for (const key in variables) { for (const token of Object.entries(variables[key])) { var tokenName = removePrefix(token[0]); var tokenValue = token[1]; - let type; + var grouping = tokenName.split("-")[0]; + let type = undefined; - if (tokenName.startsWith("palette")) { + if (grouping === "palette") { const semantic = tokenName.split("-")[1]; switch (semantic) { case "corner": @@ -92,87 +127,113 @@ function format(variables) { ? formatFoundationValue(semantic, tokenValue) : tokenValue; addToJson(key, "palette", semantic, tokenName, type, tokenValue); - } else { + } else if (foundations.includes(grouping)) { const semantic = tokenName.split("-")[0]; switch (semantic) { - case "curve": - type = "dimension"; - break; - case "size": - type = "dimension"; - break; - case "spacing": + case "corner": type = "dimension"; - if (tokenValue.includes("calc")) { - let [multiplier, multipleToken] = tokenValue - .replace("calc(", "") - .replace(")", "") - .split(" * "); - multipleToken = variables["general"][ - stripVarFunc(multipleToken) - ].replace("px", ""); - tokenValue = removePrefix(stripVarFunc(tokenValue)) - .replace("spacing", `{spacing`) - .replace("100", "100}") - .replace("calc(", ""); - } break; case "opacity": type = "number"; break; - case "zIndex": - type = "number"; - break; - case "duration": - type = "duration"; - break; - case "typography": - const attribute = tokenName.split("-")[1]; - type = attribute; - break; - case "shadow": - if (tokenName.includes("color")) { - type = "color"; - tokenValue = colorFormatSwap("hex", tokenValue); - } else { - type = "shadow"; - const [offsetX, offsetY, blur, spread, color] = - tokenValue.split(" "); - tokenValue = { - offsetX: offsetX, - offsetY: offsetY, - blur: blur, - spread: spread, - color: `{foundations.shadow.${removePrefix( - stripVarFunc(color) - )}}`, - }; - } - break; - case "color": - if (tokenName.includes("fade")) { - type = "color"; - const colorToken = `${tokenName.split("-fade")[0]}`; - const opacityValue = stripVarFunc(tokenValue.split(",")[3]); - // the semantic check here is due to e.g. --salt-palette-opacity-disabled used in fade tokens (correct) vs - // e.g. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover (this is technically wrong) - tokenValue = { - color: `{foundations.color.${colorToken}}`, - opacity: `{${ - opacityValue.includes("palette") ? "palette" : "foundations" - }.opacity.${removePrefix(stripVarFunc(opacityValue))}}`, - }; - } else { - type = "color"; - tokenValue = colorFormatSwap("hex", tokenValue); - } - break; default: - type = "undefined"; + type = "color"; + } + tokenValue !== "transparent" + ? formatFoundationValue(semantic, tokenValue) + : tokenValue; + addToJson(key, "foundations", semantic, tokenName, type, tokenValue); + } else { + const semantic = tokenName.split("-")[0]; + const tokenParts = tokenName.split("-"); + if ( + tokenParts.find((part) => + [ + "borderColor", + "foreground", + "background", + "outlineColor", + "indicator", + ].includes(part) + ) + ) { + type = "color"; + tokenValue = formatCharacteristicValue(tokenValue); + } + if (tokenParts.find((part) => part === "cursor")) { + type = "cursor"; + } + if (tokenParts.find((part) => part === "borderStyle")) { + type = "borderStyle"; + } + if (tokenParts.find((part) => part === "borderWidth")) { + type = "borderWidth"; + } + if (tokenParts.find((part) => part === "outlineStyle")) { + type = "outlineStyle"; + } + if (tokenParts.find((part) => part === "outlineWidth")) { + type = "outlineWidth"; + } + if (tokenParts.find((part) => part === "outlineInset")) { + type = "outlineInset"; + } + if (tokenParts.find((part) => part === "outlineOffset")) { + type = "outlineOffset"; + } + if (tokenParts.find((part) => part === "outline")) { + const [outlineWidth, outlineStyle, outlineColor] = + tokenValue.split(" "); + tokenValue = { + $outlineWidth: formatCharacteristicValue(outlineWidth), + $outlineStyle: formatCharacteristicValue(outlineStyle), + $outlineColor: formatCharacteristicValue(outlineColor), + }; + type = "outline"; + } + if (tokenParts.find((part) => part === "letterSpacing")) { + type = "letterSpacing"; + } + if (tokenParts.find((part) => part === "textAlign")) { + type = "textAlign"; + } + if (tokenParts.find((part) => part === "textTransform")) { + type = "textTransform"; + } + if (tokenParts.find((part) => part === "fontStyle")) { + type = "fontStyle"; + } + if (tokenParts.find((part) => part === "fontWeight")) { + // Do we want to group text e.g. h1, h2? + type = "fontWeight"; + } + if (tokenParts.find((part) => part === "fontFamily")) { + type = "fontFamily"; + } + if (tokenParts.find((part) => part === "fontSize")) { + type = "fontSize"; + } + if (tokenParts.find((part) => part === "lineHeight")) { + type = "lineHeight"; + } + if (tokenParts.find((part) => part === "minHeight")) { + // Valid? + type = "minHeight"; + } + if (tokenParts.find((part) => part === "shadow")) { + type = "shadow"; + tokenValue = formatCharacteristicValue(tokenValue); } - if (type !== "undefined") { - addToJson(key, "foundations", semantic, tokenName, type, tokenValue); + if (type) { + addToJson( + key, + "characteristics", + semantic, + tokenName, + type, + tokenValue + ); } } } diff --git a/packages/theme/json/parsers/toCss.js b/packages/theme/json/parsers/toCss.js index 16769f218e3..501fec3ac9d 100644 --- a/packages/theme/json/parsers/toCss.js +++ b/packages/theme/json/parsers/toCss.js @@ -170,6 +170,8 @@ function toCSS(themeJson) { } } + // TODO: characteristics + let CSS = ""; for (const c of Object.entries(classes)) { diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index 4a36142e727..7f30b0ef685 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -667,88 +667,58 @@ "shadow": { "shadow-100-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "rgba(0, 0, 0, 0.5)", + "$light": "rgba(0, 0, 0, 0.1)" }, "$type": "color" }, "shadow-200-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "rgba(0, 0, 0, 0.5)", + "$light": "rgba(0, 0, 0, 0.1)" }, "$type": "color" }, "shadow-300-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "rgba(0, 0, 0, 0.55)", + "$light": "rgba(0, 0, 0, 0.15)" }, "$type": "color" }, "shadow-400-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "rgba(0, 0, 0, 0.55)", + "$light": "rgba(0, 0, 0, 0.2)" }, "$type": "color" }, "shadow-500-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "rgba(0, 0, 0, 0.65)", + "$light": "rgba(0, 0, 0, 0.3)" }, "$type": "color" }, "shadow-100": { - "$value": { - "offsetX": "0", - "offsetY": "1px", - "blur": "3px", - "spread": "0", - "color": "{foundations.shadow.shadow-100-color}" - }, - "$type": "shadow" + "$value": "0 1px 3px 0 var(--salt-shadow-100-color)", + "$type": "color" }, "shadow-200": { - "$value": { - "offsetX": "0", - "offsetY": "2px", - "blur": "4px", - "spread": "0", - "color": "{foundations.shadow.shadow-200-color}" - }, - "$type": "shadow" + "$value": "0 2px 4px 0 var(--salt-shadow-200-color)", + "$type": "color" }, "shadow-300": { - "$value": { - "offsetX": "0", - "offsetY": "4px", - "blur": "8px", - "spread": "0", - "color": "{foundations.shadow.shadow-300-color}" - }, - "$type": "shadow" + "$value": "0 4px 8px 0 var(--salt-shadow-300-color)", + "$type": "color" }, "shadow-400": { - "$value": { - "offsetX": "0", - "offsetY": "6px", - "blur": "10px", - "spread": "0", - "color": "{foundations.shadow.shadow-400-color}" - }, - "$type": "shadow" + "$value": "0 6px 10px 0 var(--salt-shadow-400-color)", + "$type": "color" }, "shadow-500": { - "$value": { - "offsetX": "0", - "offsetY": "12px", - "blur": "40px", - "spread": "0", - "color": "{foundations.shadow.shadow-500-color}" - }, - "$type": "shadow" + "$value": "0 12px 40px 0 var(--salt-shadow-500-color)", + "$type": "color" } }, "curve": { @@ -759,7 +729,7 @@ "$medium": "0", "$high": "0" }, - "$type": "dimension" + "$type": "color" }, "curve-50": { "$value": { @@ -768,7 +738,7 @@ "$medium": "2px", "$high": "1px" }, - "$type": "dimension" + "$type": "color" }, "curve-100": { "$value": { @@ -777,7 +747,7 @@ "$medium": "4px", "$high": "2px" }, - "$type": "dimension" + "$type": "color" }, "curve-150": { "$value": { @@ -786,7 +756,7 @@ "$medium": "6px", "$high": "3px" }, - "$type": "dimension" + "$type": "color" }, "curve-999": { "$value": { @@ -795,7 +765,7 @@ "$medium": "999px", "$high": "999px" }, - "$type": "dimension" + "$type": "color" } }, "size": { @@ -806,7 +776,7 @@ "$medium": "8px", "$high": "6px" }, - "$type": "dimension" + "$type": "color" }, "size-bar": { "$value": { @@ -815,7 +785,7 @@ "$medium": "4px", "$high": "2px" }, - "$type": "dimension" + "$type": "color" }, "size-base": { "$value": { @@ -824,7 +794,7 @@ "$medium": "28px", "$high": "20px" }, - "$type": "dimension" + "$type": "color" }, "size-border": { "$value": { @@ -833,7 +803,7 @@ "$medium": "1px", "$high": "1px" }, - "$type": "dimension" + "$type": "color" }, "size-icon": { "$value": { @@ -842,7 +812,7 @@ "$medium": "12px", "$high": "10px" }, - "$type": "dimension" + "$type": "color" }, "size-indicator": { "$value": { @@ -851,7 +821,7 @@ "$medium": "2px", "$high": "1px" }, - "$type": "dimension" + "$type": "color" }, "size-selectable": { "$value": { @@ -860,7 +830,7 @@ "$medium": "14px", "$high": "12px" }, - "$type": "dimension" + "$type": "color" }, "size-bar-strong": { "$value": { @@ -869,7 +839,7 @@ "$medium": "8px", "$high": "4px" }, - "$type": "dimension" + "$type": "color" }, "size-bar-small": { "$value": { @@ -878,7 +848,7 @@ "$medium": "2px", "$high": "2px" }, - "$type": "dimension" + "$type": "color" }, "size-border-strong": { "$value": { @@ -887,7 +857,7 @@ "$medium": "2px", "$high": "2px" }, - "$type": "dimension" + "$type": "color" } }, "spacing": { @@ -898,7 +868,7 @@ "$medium": "8px", "$high": "4px" }, - "$type": "dimension" + "$type": "color" } }, "zIndex": { @@ -909,7 +879,7 @@ "$medium": "1", "$high": "1" }, - "$type": "number" + "$type": "color" }, "zIndex-popout": { "$value": { @@ -918,7 +888,7 @@ "$medium": "1000", "$high": "1000" }, - "$type": "number" + "$type": "color" }, "zIndex-appHeader": { "$value": { @@ -927,7 +897,7 @@ "$medium": "1100", "$high": "1100" }, - "$type": "number" + "$type": "color" }, "zIndex-drawer": { "$value": { @@ -936,7 +906,7 @@ "$medium": "1200", "$high": "1200" }, - "$type": "number" + "$type": "color" }, "zIndex-modal": { "$value": { @@ -945,7 +915,7 @@ "$medium": "1300", "$high": "1300" }, - "$type": "number" + "$type": "color" }, "zIndex-notification": { "$value": { @@ -954,7 +924,7 @@ "$medium": "1400", "$high": "1400" }, - "$type": "number" + "$type": "color" }, "zIndex-dragObject": { "$value": { @@ -963,7 +933,7 @@ "$medium": "1420", "$high": "1420" }, - "$type": "number" + "$type": "color" }, "zIndex-contextMenu": { "$value": { @@ -972,7 +942,7 @@ "$medium": "1450", "$high": "1450" }, - "$type": "number" + "$type": "color" }, "zIndex-flyover": { "$value": { @@ -981,849 +951,675 @@ "$medium": "1500", "$high": "1500" }, - "$type": "number" + "$type": "color" } }, "color": { "color-white": { - "$value": "#ffffff", + "$value": "rgb(255, 255, 255)", "$type": "color" }, "color-black": { - "$value": "#000000", + "$value": "rgb(0, 0, 0)", "$type": "color" }, "color-red-10": { - "$value": "#ffe3e0", + "$value": "rgb(255, 227, 224)", "$type": "color" }, "color-red-20": { - "$value": "#ffcfc9", + "$value": "rgb(255, 207, 201)", "$type": "color" }, "color-red-30": { - "$value": "#ffbbb2", + "$value": "rgb(255, 187, 178)", "$type": "color" }, "color-red-40": { - "$value": "#ffa79c", + "$value": "rgb(255, 167, 156)", "$type": "color" }, "color-red-50": { - "$value": "#ff9485", + "$value": "rgb(255, 148, 133)", "$type": "color" }, "color-red-100": { - "$value": "#ff806f", + "$value": "rgb(255, 128, 111)", "$type": "color" }, "color-red-200": { - "$value": "#ff6c58", + "$value": "rgb(255, 108, 88)", "$type": "color" }, "color-red-300": { - "$value": "#ff5942", + "$value": "rgb(255, 89, 66)", "$type": "color" }, "color-red-400": { - "$value": "#ed412a", + "$value": "rgb(237, 65, 42)", "$type": "color" }, "color-red-500": { - "$value": "#e32b16", + "$value": "rgb(227, 43, 22)", "$type": "color" }, "color-red-600": { - "$value": "#c42010", + "$value": "rgb(196, 32, 16)", "$type": "color" }, "color-red-700": { - "$value": "#a6150b", + "$value": "rgb(166, 21, 11)", "$type": "color" }, "color-red-800": { - "$value": "#880a05", + "$value": "rgb(136, 10, 5)", "$type": "color" }, "color-red-900": { - "$value": "#412522", + "$value": "rgb(65, 37, 34)", "$type": "color" }, "color-orange-10": { - "$value": "#ffe8bf", + "$value": "rgb(255, 232, 191)", "$type": "color" }, "color-orange-20": { - "$value": "#fedfa6", + "$value": "rgb(254, 223, 166)", "$type": "color" }, "color-orange-30": { - "$value": "#fed68e", + "$value": "rgb(254, 214, 142)", "$type": "color" }, "color-orange-40": { - "$value": "#fecd76", + "$value": "rgb(254, 205, 118)", "$type": "color" }, "color-orange-50": { - "$value": "#fec55e", + "$value": "rgb(254, 197, 94)", "$type": "color" }, "color-orange-100": { - "$value": "#fab551", + "$value": "rgb(250, 181, 81)", "$type": "color" }, "color-orange-200": { - "$value": "#f6a544", + "$value": "rgb(246, 165, 68)", "$type": "color" }, "color-orange-300": { - "$value": "#f29538", + "$value": "rgb(242, 149, 56)", "$type": "color" }, "color-orange-400": { - "$value": "#ee852b", + "$value": "rgb(238, 133, 43)", "$type": "color" }, "color-orange-500": { - "$value": "#ea7319", + "$value": "rgb(234, 115, 25)", "$type": "color" }, "color-orange-600": { - "$value": "#e06519", + "$value": "rgb(224, 101, 25)", "$type": "color" }, "color-orange-700": { - "$value": "#d65513", + "$value": "rgb(214, 85, 19)", "$type": "color" }, "color-orange-800": { - "$value": "#cc440d", + "$value": "rgb(204, 68, 13)", "$type": "color" }, "color-orange-900": { - "$value": "#362c24", + "$value": "rgb(54, 44, 36)", "$type": "color" }, "color-green-10": { - "$value": "#d1f4c9", + "$value": "rgb(209, 244, 201)", "$type": "color" }, "color-green-20": { - "$value": "#b8e8b6", + "$value": "rgb(184, 232, 182)", "$type": "color" }, "color-green-30": { - "$value": "#a0dda4", + "$value": "rgb(160, 221, 164)", "$type": "color" }, "color-green-40": { - "$value": "#88d291", + "$value": "rgb(136, 210, 145)", "$type": "color" }, "color-green-50": { - "$value": "#70c77f", + "$value": "rgb(112, 199, 127)", "$type": "color" }, "color-green-100": { - "$value": "#5dbd74", + "$value": "rgb(93, 189, 116)", "$type": "color" }, "color-green-200": { - "$value": "#4db469", + "$value": "rgb(77, 180, 105)", "$type": "color" }, "color-green-300": { - "$value": "#3cab60", + "$value": "rgb(60, 171, 96)", "$type": "color" }, "color-green-400": { - "$value": "#309c5a", + "$value": "rgb(48, 156, 90)", "$type": "color" }, "color-green-500": { - "$value": "#24874b", + "$value": "rgb(36, 135, 75)", "$type": "color" }, "color-green-600": { - "$value": "#18723d", + "$value": "rgb(24, 114, 61)", "$type": "color" }, "color-green-700": { - "$value": "#0c5d2e", + "$value": "rgb(12, 93, 46)", "$type": "color" }, "color-green-800": { - "$value": "#014920", + "$value": "rgb(1, 73, 32)", "$type": "color" }, "color-green-900": { - "$value": "#23342b", + "$value": "rgb(35, 52, 43)", "$type": "color" }, "color-teal-10": { - "$value": "#daf0f0", + "$value": "rgb(218, 240, 240)", "$type": "color" }, "color-teal-20": { - "$value": "#c7e8e8", + "$value": "rgb(199, 232, 232)", "$type": "color" }, "color-teal-30": { - "$value": "#b4e0e1", + "$value": "rgb(180, 224, 225)", "$type": "color" }, "color-teal-40": { - "$value": "#a2d9da", + "$value": "rgb(162, 217, 218)", "$type": "color" }, "color-teal-50": { - "$value": "#8dcdd1", + "$value": "rgb(141, 205, 209)", "$type": "color" }, "color-teal-100": { - "$value": "#7bc1c8", + "$value": "rgb(123, 193, 200)", "$type": "color" }, "color-teal-200": { - "$value": "#63b5c0", + "$value": "rgb(99, 181, 192)", "$type": "color" }, "color-teal-300": { - "$value": "#49a0ac", + "$value": "rgb(73, 160, 172)", "$type": "color" }, "color-teal-400": { - "$value": "#3095a6", + "$value": "rgb(48, 149, 166)", "$type": "color" }, "color-teal-500": { - "$value": "#008297", + "$value": "rgb(0, 130, 151)", "$type": "color" }, "color-teal-600": { - "$value": "#1b6b85", + "$value": "rgb(27, 107, 133)", "$type": "color" }, "color-teal-700": { - "$value": "#005571", + "$value": "rgb(0, 85, 113)", "$type": "color" }, "color-teal-800": { - "$value": "#014156", + "$value": "rgb(1, 65, 86)", "$type": "color" }, "color-teal-900": { - "$value": "#00314c", + "$value": "rgb(0, 49, 76)", "$type": "color" }, "color-blue-10": { - "$value": "#cbe7f9", + "$value": "rgb(203, 231, 249)", "$type": "color" }, "color-blue-20": { - "$value": "#b7def6", + "$value": "rgb(183, 222, 246)", "$type": "color" }, "color-blue-30": { - "$value": "#a4d5f4", + "$value": "rgb(164, 213, 244)", "$type": "color" }, "color-blue-40": { - "$value": "#90ccf2", + "$value": "rgb(144, 204, 242)", "$type": "color" }, "color-blue-50": { - "$value": "#7dc3f0", + "$value": "rgb(125, 195, 240)", "$type": "color" }, "color-blue-100": { - "$value": "#64b1e4", + "$value": "rgb(100, 177, 228)", "$type": "color" }, "color-blue-200": { - "$value": "#4b9fd8", + "$value": "rgb(75, 159, 216)", "$type": "color" }, "color-blue-300": { - "$value": "#338dcd", + "$value": "rgb(51, 141, 205)", "$type": "color" }, "color-blue-400": { - "$value": "#2e84c6", + "$value": "rgb(46, 132, 198)", "$type": "color" }, "color-blue-500": { - "$value": "#2670a9", + "$value": "rgb(38, 112, 169)", "$type": "color" }, "color-blue-600": { - "$value": "#155c93", + "$value": "rgb(21, 92, 147)", "$type": "color" }, "color-blue-700": { - "$value": "#00477b", + "$value": "rgb(0, 71, 123)", "$type": "color" }, "color-blue-800": { - "$value": "#273c4d", + "$value": "rgb(39, 60, 77)", "$type": "color" }, "color-blue-900": { - "$value": "#232f38", + "$value": "rgb(35, 47, 56)", "$type": "color" }, "color-purple-10": { - "$value": "#f9e0f7", + "$value": "rgb(249, 224, 247)", "$type": "color" }, "color-purple-20": { - "$value": "#f7d4f4", + "$value": "rgb(247, 212, 244)", "$type": "color" }, "color-purple-30": { - "$value": "#f5c9f1", + "$value": "rgb(245, 201, 241)", "$type": "color" }, "color-purple-40": { - "$value": "#f3bdee", + "$value": "rgb(243, 189, 238)", "$type": "color" }, "color-purple-50": { - "$value": "#f1b2eb", + "$value": "rgb(241, 178, 235)", "$type": "color" }, "color-purple-100": { - "$value": "#df9ce1", + "$value": "rgb(223, 156, 225)", "$type": "color" }, "color-purple-200": { - "$value": "#cd87d7", + "$value": "rgb(205, 135, 215)", "$type": "color" }, "color-purple-300": { - "$value": "#c074cb", + "$value": "rgb(192, 116, 203)", "$type": "color" }, "color-purple-400": { - "$value": "#a961b5", + "$value": "rgb(169, 97, 181)", "$type": "color" }, "color-purple-500": { - "$value": "#964ea2", + "$value": "rgb(150, 78, 162)", "$type": "color" }, "color-purple-600": { - "$value": "#813c8d", + "$value": "rgb(129, 60, 141)", "$type": "color" }, "color-purple-700": { - "$value": "#672e7a", + "$value": "rgb(103, 46, 122)", "$type": "color" }, "color-purple-800": { - "$value": "#53256d", + "$value": "rgb(83, 37, 109)", "$type": "color" }, "color-purple-900": { - "$value": "#3b1054", + "$value": "rgb(59, 16, 84)", "$type": "color" }, "color-gray-10": { - "$value": "#f2f4f6", + "$value": "rgb(242, 244, 246)", "$type": "color" }, "color-gray-20": { - "$value": "#eaedef", + "$value": "rgb(234, 237, 239)", "$type": "color" }, "color-gray-30": { - "$value": "#e0e4e9", + "$value": "rgb(224, 228, 233)", "$type": "color" }, "color-gray-40": { - "$value": "#d9dde3", + "$value": "rgb(217, 221, 227)", "$type": "color" }, "color-gray-50": { - "$value": "#ced2d9", + "$value": "rgb(206, 210, 217)", "$type": "color" }, "color-gray-60": { - "$value": "#c5c9d0", + "$value": "rgb(197, 201, 208)", "$type": "color" }, "color-gray-70": { - "$value": "#b4b7be", + "$value": "rgb(180, 183, 190)", "$type": "color" }, "color-gray-80": { - "$value": "#9fa3aa", + "$value": "rgb(159, 163, 170)", "$type": "color" }, "color-gray-90": { - "$value": "#84878e", + "$value": "rgb(132, 135, 142)", "$type": "color" }, "color-gray-100": { - "$value": "#74777f", + "$value": "rgb(116, 119, 127)", "$type": "color" }, "color-gray-200": { - "$value": "#61656e", + "$value": "rgb(97, 101, 110)", "$type": "color" }, "color-gray-300": { - "$value": "#4c505b", + "$value": "rgb(76, 80, 91)", "$type": "color" }, "color-gray-400": { - "$value": "#44484f", + "$value": "rgb(68, 72, 79)", "$type": "color" }, "color-gray-500": { - "$value": "#3b3f46", + "$value": "rgb(59, 63, 70)", "$type": "color" }, "color-gray-600": { - "$value": "#2f3136", + "$value": "rgb(47, 49, 54)", "$type": "color" }, "color-gray-700": { - "$value": "#2a2c2f", + "$value": "rgb(42, 44, 47)", "$type": "color" }, "color-gray-800": { - "$value": "#242526", + "$value": "rgb(36, 37, 38)", "$type": "color" }, "color-gray-900": { - "$value": "#161616", + "$value": "rgb(22, 22, 22)", "$type": "color" }, "color-blue-100-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(100, 177, 228, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(38, 112, 169, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-600-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(21, 92, 147, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-200-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-70-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(180, 183, 190, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-90-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(132, 135, 142, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-900-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-900}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(22, 22, 22, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-green-300-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(60, 171, 96, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-green-400-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(48, 156, 90, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-green-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(36, 135, 75, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-green-700-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(12, 93, 46, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-red-300-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(255, 89, 66, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-red-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(227, 43, 22, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-red-700-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(166, 21, 11, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-white-fade-foreground": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-500-fade-border": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(38, 112, 169, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-50-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-50}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(206, 210, 217, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-60-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(197, 201, 208, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-90-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(132, 135, 142, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-200-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-300-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(76, 80, 91, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-green-400-fade-border": { - "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(48, 156, 90, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-green-500-fade-border": { - "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(36, 135, 75, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-orange-400-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-400}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(238, 133, 43, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-orange-500-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(234, 115, 25, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-orange-600-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(224, 101, 25, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-orange-700-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(214, 85, 19, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-red-500-fade-border": { - "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(227, 43, 22, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-90-fade-border-readonly": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{palette.opacity.palette-opacity-border-readonly}" - }, + "$value": "rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly))", "$type": "color" }, "color-gray-200-fade-border-readonly": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-border-readonly}" - }, + "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly))", "$type": "color" }, "color-blue-30-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-30}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(164, 213, 244, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-500-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(38, 112, 169, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-600-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(21, 92, 147, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-700-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(0, 71, 123, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-20-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(234, 237, 239, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-60-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(197, 201, 208, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-70-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(180, 183, 190, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-200-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-300-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(76, 80, 91, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-600-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(47, 49, 54, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-gray-800-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(36, 37, 38, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-white-fade-background": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-white-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly))", "$type": "color" }, "color-gray-20-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "$value": "rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly))", "$type": "color" }, "color-gray-600-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "$value": "rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly))", "$type": "color" }, "color-gray-800-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "$value": "rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly))", "$type": "color" }, "color-white-fade-backdrop": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-backdrop}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-backdrop))", "$type": "color" }, "color-black-fade-backdrop": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-backdrop}" - }, + "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-backdrop))", "$type": "color" }, "color-blue-100-fade-fill": { - "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(100, 177, 228, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-blue-600-fade-fill": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "$value": "rgba(21, 92, 147, var(--salt-palette-opacity-disabled))", "$type": "color" }, "color-white-fade-separatorOpacity-primary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-primary-border}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-primary-border))", "$type": "color" }, "color-white-fade-separatorOpacity-secondary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-secondary-border}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border))", "$type": "color" }, "color-white-fade-separatorOpacity-tertiary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-tertiary-border}" - }, + "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border))", "$type": "color" }, "color-black-fade-separatorOpacity-primary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-primary-border}" - }, + "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-primary-border))", "$type": "color" }, "color-black-fade-separatorOpacity-secondary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-secondary-border}" - }, + "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border))", "$type": "color" }, "color-black-fade-separatorOpacity-tertiary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-tertiary-border}" - }, + "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border))", "$type": "color" }, "color-black-fade-background-hover": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-8}" - }, + "$value": "rgba(0, 0, 0, var(--salt-opacity-8))", "$type": "color" }, "color-white-fade-background-hover": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-8}" - }, + "$value": "rgba(255, 255, 255, var(--salt-opacity-8))", "$type": "color" } }, "duration": { "duration-instant": { "$value": "0ms", - "$type": "duration" + "$type": "color" }, "duration-perceptible": { "$value": "300ms", - "$type": "duration" + "$type": "color" }, "duration-notable": { "$value": "1000ms", - "$type": "duration" + "$type": "color" }, "duration-cutoff": { "$value": "10000ms", - "$type": "duration" + "$type": "color" } }, "opacity": { @@ -1855,35 +1651,1108 @@ "typography": { "typography-fontFamily": { "$value": "\"Open Sans\"", - "$type": "fontFamily" + "$type": "color" }, "typography-fontFamily-code": { "$value": "\"PT Mono\"", - "$type": "fontFamily" + "$type": "color" }, "typography-fontWeight-light": { "$value": "300", - "$type": "fontWeight" + "$type": "color" }, "typography-fontWeight-regular": { "$value": "400", - "$type": "fontWeight" + "$type": "color" }, "typography-fontWeight-medium": { "$value": "500", - "$type": "fontWeight" + "$type": "color" }, "typography-fontWeight-semiBold": { "$value": "600", - "$type": "fontWeight" + "$type": "color" }, "typography-fontWeight-bold": { "$value": "700", - "$type": "fontWeight" + "$type": "color" }, "typography-fontWeight-extraBold": { "$value": "800", - "$type": "fontWeight" + "$type": "color" + } + } + }, + "characteristics": { + "text": { + "text-h1-fontSize": { + "$value": { + "$low": "32px", + "$touch": "42px", + "$medium": "24px", + "$high": "18px" + }, + "$type": "fontSize" + }, + "text-h1-lineHeight": { + "$value": { + "$low": "42px", + "$touch": "54px", + "$medium": "32px", + "$high": "24px" + }, + "$type": "lineHeight" + }, + "text-h2-fontSize": { + "$value": { + "$low": "24px", + "$touch": "32px", + "$medium": "18px", + "$high": "14px" + }, + "$type": "fontSize" + }, + "text-h2-lineHeight": { + "$value": { + "$low": "32px", + "$touch": "42px", + "$medium": "24px", + "$high": "18px" + }, + "$type": "lineHeight" + }, + "text-h3-fontSize": { + "$value": { + "$low": "18px", + "$touch": "24px", + "$medium": "14px", + "$high": "12px" + }, + "$type": "fontSize" + }, + "text-h3-lineHeight": { + "$value": { + "$low": "24px", + "$touch": "32px", + "$medium": "18px", + "$high": "16px" + }, + "$type": "lineHeight" + }, + "text-h4-fontSize": { + "$value": { + "$low": "14px", + "$touch": "16px", + "$medium": "12px", + "$high": "11px" + }, + "$type": "fontSize" + }, + "text-h4-lineHeight": { + "$value": { + "$low": "18px", + "$touch": "20px", + "$medium": "16px", + "$high": "14px" + }, + "$type": "lineHeight" + }, + "text-label-fontSize": { + "$value": { + "$low": "12px", + "$touch": "14px", + "$medium": "11px", + "$high": "10px" + }, + "$type": "fontSize" + }, + "text-label-lineHeight": { + "$value": { + "$low": "16px", + "$touch": "18px", + "$medium": "14px", + "$high": "13px" + }, + "$type": "lineHeight" + }, + "text-fontSize": { + "$value": { + "$low": "14px", + "$touch": "16px", + "$medium": "12px", + "$high": "11px" + }, + "$type": "fontSize" + }, + "text-lineHeight": { + "$value": { + "$low": "18px", + "$touch": "20px", + "$medium": "16px", + "$high": "14px" + }, + "$type": "lineHeight" + }, + "text-minHeight": { + "$value": { + "$low": "18px", + "$touch": "20px", + "$medium": "16px", + "$high": "14px" + }, + "$type": "minHeight" + }, + "text-display1-fontSize": { + "$value": { + "$low": "68px", + "$touch": "84px", + "$medium": "54px", + "$high": "42px" + }, + "$type": "fontSize" + }, + "text-display1-lineHeight": { + "$value": { + "$low": "88px", + "$touch": "109px", + "$medium": "70px", + "$high": "54px" + }, + "$type": "lineHeight" + }, + "text-display2-fontSize": { + "$value": { + "$low": "46px", + "$touch": "58px", + "$medium": "36px", + "$high": "28px" + }, + "$type": "fontSize" + }, + "text-display2-lineHeight": { + "$value": { + "$low": "60px", + "$touch": "76px", + "$medium": "47px", + "$high": "36px" + }, + "$type": "lineHeight" + }, + "text-display3-fontSize": { + "$value": { + "$low": "32px", + "$touch": "42px", + "$medium": "24px", + "$high": "18px" + }, + "$type": "fontSize" + }, + "text-display3-lineHeight": { + "$value": { + "$low": "42px", + "$touch": "54px", + "$medium": "32px", + "$high": "24px" + }, + "$type": "lineHeight" + }, + "text-notation-fontSize": { + "$value": { + "$low": "12px", + "$touch": "14px", + "$medium": "10px", + "$high": "8px" + }, + "$type": "fontSize" + }, + "text-notation-lineHeight": { + "$value": { + "$low": "16px", + "$touch": "18px", + "$medium": "13px", + "$high": "10px" + }, + "$type": "lineHeight" + }, + "text-letterSpacing": { + "$value": "0", + "$type": "letterSpacing" + }, + "text-textAlign": { + "$value": "left", + "$type": "textAlign" + }, + "text-textAlign-embedded": { + "$value": "center", + "$type": "textAlign" + }, + "text-textTransform": { + "$value": "none", + "$type": "textTransform" + }, + "text-action-letterSpacing": { + "$value": "0.6px", + "$type": "letterSpacing" + }, + "text-action-textTransform": { + "$value": "uppercase", + "$type": "textTransform" + }, + "text-action-textAlign": { + "$value": "center", + "$type": "textAlign" + }, + "text-action-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-fontWeight": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-light)", + "$type": "fontWeight" + }, + "text-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-notation-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-notation-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-notation-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-notation-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-h1-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-h1-fontWeight": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-h1-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-medium)", + "$type": "fontWeight" + }, + "text-h1-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-extraBold)", + "$type": "fontWeight" + }, + "text-h2-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-h2-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-h2-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-h2-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-h3-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-h3-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-h3-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-h3-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-h4-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-h4-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-h4-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-h4-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-label-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-label-fontWeight": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-label-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-light)", + "$type": "fontWeight" + }, + "text-label-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-display1-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-display1-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-display1-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-display1-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-display2-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-display2-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-display2-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-display2-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-display3-fontFamily": { + "$value": "var(--salt-typography-fontFamily)", + "$type": "fontFamily" + }, + "text-display3-fontWeight": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "text-display3-fontWeight-strong": { + "$value": "var(--salt-typography-fontWeight-bold)", + "$type": "fontWeight" + }, + "text-display3-fontWeight-small": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "text-code-fontFamily": { + "$value": "var(--salt-typography-fontFamily-code)", + "$type": "fontFamily" + } + }, + "accent": { + "accent-background": { + "$value": "{palette.accent.palette-accent-background}", + "$type": "color" + }, + "accent-borderColor": { + "$value": "{palette.accent.palette-accent-border}", + "$type": "color" + }, + "accent-foreground": { + "$value": "{palette.accent.palette-accent-foreground}", + "$type": "color" + } + }, + "actionable": { + "actionable-cursor-hover": { + "$value": "pointer", + "$type": "cursor" + }, + "actionable-cursor-active": { + "$value": "pointer", + "$type": "cursor" + }, + "actionable-cursor-disabled": { + "$value": "not-allowed", + "$type": "cursor" + }, + "actionable-primary-foreground": { + "$value": "{palette.interact.palette-interact-primary-foreground}", + "$type": "color" + }, + "actionable-primary-foreground-hover": { + "$value": "{palette.interact.palette-interact-primary-foreground-hover}", + "$type": "color" + }, + "actionable-primary-foreground-active": { + "$value": "{palette.interact.palette-interact-primary-foreground-active}", + "$type": "color" + }, + "actionable-primary-foreground-disabled": { + "$value": "{palette.interact.palette-interact-primary-foreground-disabled}", + "$type": "color" + }, + "actionable-primary-background": { + "$value": "{palette.interact.palette-interact-primary-background}", + "$type": "color" + }, + "actionable-primary-background-hover": { + "$value": "{palette.interact.palette-interact-primary-background-hover}", + "$type": "color" + }, + "actionable-primary-background-active": { + "$value": "{palette.interact.palette-interact-primary-background-active}", + "$type": "color" + }, + "actionable-primary-background-disabled": { + "$value": "{palette.interact.palette-interact-primary-background-disabled}", + "$type": "color" + }, + "actionable-cta-foreground": { + "$value": "{palette.interact.palette-interact-cta-foreground}", + "$type": "color" + }, + "actionable-cta-foreground-hover": { + "$value": "{palette.interact.palette-interact-cta-foreground-hover}", + "$type": "color" + }, + "actionable-cta-foreground-active": { + "$value": "{palette.interact.palette-interact-cta-foreground-active}", + "$type": "color" + }, + "actionable-cta-foreground-disabled": { + "$value": "{palette.interact.palette-interact-cta-foreground-disabled}", + "$type": "color" + }, + "actionable-cta-background": { + "$value": "{palette.interact.palette-interact-cta-background}", + "$type": "color" + }, + "actionable-cta-background-hover": { + "$value": "{palette.interact.palette-interact-cta-background-hover}", + "$type": "color" + }, + "actionable-cta-background-active": { + "$value": "{palette.interact.palette-interact-cta-background-active}", + "$type": "color" + }, + "actionable-cta-background-disabled": { + "$value": "{palette.interact.palette-interact-cta-background-disabled}", + "$type": "color" + }, + "actionable-secondary-foreground": { + "$value": "{palette.interact.palette-interact-secondary-foreground}", + "$type": "color" + }, + "actionable-secondary-foreground-hover": { + "$value": "{palette.interact.palette-interact-secondary-foreground-hover}", + "$type": "color" + }, + "actionable-secondary-foreground-active": { + "$value": "{palette.interact.palette-interact-secondary-foreground-active}", + "$type": "color" + }, + "actionable-secondary-foreground-disabled": { + "$value": "{palette.interact.palette-interact-secondary-foreground-disabled}", + "$type": "color" + }, + "actionable-secondary-background": { + "$value": "{palette.interact.palette-interact-secondary-background}", + "$type": "color" + }, + "actionable-secondary-background-hover": { + "$value": "{palette.interact.palette-interact-secondary-background-hover}", + "$type": "color" + }, + "actionable-secondary-background-active": { + "$value": "{palette.interact.palette-interact-secondary-background-active}", + "$type": "color" + }, + "actionable-secondary-background-disabled": { + "$value": "{palette.interact.palette-interact-secondary-background-disabled}", + "$type": "color" + } + }, + "container": { + "container-borderStyle": { + "$value": "solid", + "$type": "borderStyle" + }, + "container-primary-background": { + "$value": "{palette.neutral.palette-neutral-primary-background}", + "$type": "color" + }, + "container-primary-background-disabled": { + "$value": "{palette.neutral.palette-neutral-primary-background-disabled}", + "$type": "color" + }, + "container-primary-borderColor": { + "$value": "{palette.neutral.palette-neutral-primary-border}", + "$type": "color" + }, + "container-primary-borderColor-disabled": { + "$value": "{palette.neutral.palette-neutral-primary-border-disabled}", + "$type": "color" + }, + "container-secondary-background": { + "$value": "{palette.neutral.palette-neutral-secondary-background}", + "$type": "color" + }, + "container-secondary-background-disabled": { + "$value": "{palette.neutral.palette-neutral-secondary-background-disabled}", + "$type": "color" + }, + "container-secondary-borderColor": { + "$value": "{palette.neutral.palette-neutral-secondary-border}", + "$type": "color" + }, + "container-secondary-borderColor-disabled": { + "$value": "{palette.neutral.palette-neutral-secondary-border-disabled}", + "$type": "color" + } + }, + "content": { + "content-primary-foreground": { + "$value": "{palette.neutral.palette-neutral-primary-foreground}", + "$type": "color" + }, + "content-primary-foreground-disabled": { + "$value": "{palette.neutral.palette-neutral-primary-foreground-disabled}", + "$type": "color" + }, + "content-secondary-foreground": { + "$value": "{palette.neutral.palette-neutral-secondary-foreground}", + "$type": "color" + }, + "content-secondary-foreground-disabled": { + "$value": "{palette.neutral.palette-neutral-secondary-foreground-disabled}", + "$type": "color" + }, + "content-foreground-hover": { + "$value": "{palette.navigate.palette-navigate-foreground-hover}", + "$type": "color" + }, + "content-foreground-active": { + "$value": "{palette.navigate.palette-navigate-foreground-active}", + "$type": "color" + }, + "content-foreground-visited": { + "$value": "{palette.navigate.palette-navigate-foreground-visited}", + "$type": "color" + }, + "content-foreground-highlight": { + "$value": "{palette.interact.palette-interact-background-active}", + "$type": "color" + } + }, + "draggable": { + "draggable-horizontal-cursor-hover": { + "$value": "row-resize", + "$type": "cursor" + }, + "draggable-horizontal-cursor-active": { + "$value": "row-resize", + "$type": "cursor" + }, + "draggable-vertical-cursor-hover": { + "$value": "col-resize", + "$type": "cursor" + }, + "draggable-vertical-cursor-active": { + "$value": "col-resize", + "$type": "cursor" + }, + "draggable-grab-cursor-hover": { + "$value": "grab", + "$type": "cursor" + }, + "draggable-grab-cursor-active": { + "$value": "grabbing", + "$type": "cursor" + } + }, + "editable": { + "editable-cursor-hover": { + "$value": "text", + "$type": "cursor" + }, + "editable-cursor-active": { + "$value": "text", + "$type": "cursor" + }, + "editable-cursor-disabled": { + "$value": "not-allowed", + "$type": "cursor" + }, + "editable-cursor-readonly": { + "$value": "text", + "$type": "cursor" + }, + "editable-borderStyle": { + "$value": "solid", + "$type": "borderStyle" + }, + "editable-borderStyle-hover": { + "$value": "solid", + "$type": "borderStyle" + }, + "editable-borderStyle-active": { + "$value": "solid", + "$type": "borderStyle" + }, + "editable-borderStyle-disabled": { + "$value": "solid", + "$type": "borderStyle" + }, + "editable-borderStyle-readonly": { + "$value": "solid", + "$type": "borderStyle" + }, + "editable-borderWidth-active": { + "$value": "2px", + "$type": "borderWidth" + }, + "editable-borderColor": { + "$value": "{palette.interact.palette-interact-border}", + "$type": "color" + }, + "editable-borderColor-active": { + "$value": "{palette.interact.palette-interact-border-active}", + "$type": "color" + }, + "editable-borderColor-disabled": { + "$value": "{palette.interact.palette-interact-border-disabled}", + "$type": "color" + }, + "editable-borderColor-hover": { + "$value": "{palette.interact.palette-interact-border-hover}", + "$type": "color" + }, + "editable-borderColor-readonly": { + "$value": "{palette.interact.palette-interact-border-readonly}", + "$type": "color" + }, + "editable-primary-background": { + "$value": "{palette.neutral.palette-neutral-primary-background}", + "$type": "color" + }, + "editable-primary-background-active": { + "$value": "{palette.neutral.palette-neutral-primary-background}", + "$type": "color" + }, + "editable-primary-background-disabled": { + "$value": "{palette.neutral.palette-neutral-primary-background-disabled}", + "$type": "color" + }, + "editable-primary-background-hover": { + "$value": "{palette.neutral.palette-neutral-primary-background}", + "$type": "color" + }, + "editable-primary-background-readonly": { + "$value": "{palette.neutral.palette-neutral-primary-background-readonly}", + "$type": "color" + }, + "editable-secondary-background": { + "$value": "{palette.neutral.palette-neutral-secondary-background}", + "$type": "color" + }, + "editable-secondary-background-active": { + "$value": "{palette.neutral.palette-neutral-secondary-background}", + "$type": "color" + }, + "editable-secondary-background-disabled": { + "$value": "{palette.neutral.palette-neutral-secondary-background-disabled}", + "$type": "color" + }, + "editable-secondary-background-hover": { + "$value": "{palette.neutral.palette-neutral-secondary-background}", + "$type": "color" + }, + "editable-secondary-background-readonly": { + "$value": "{palette.neutral.palette-neutral-secondary-background-readonly}", + "$type": "color" + }, + "editable-help-fontStyle": { + "$value": "italic", + "$type": "fontStyle" + } + }, + "focused": { + "focused-outlineColor": { + "$value": "{palette.interact.palette-interact-outline}", + "$type": "color" + }, + "focused-outlineStyle": { + "$value": "dotted", + "$type": "outlineStyle" + }, + "focused-outlineWidth": { + "$value": "2px", + "$type": "outlineWidth" + }, + "focused-outlineInset": { + "$value": "0", + "$type": "outlineInset" + }, + "focused-outlineOffset": { + "$value": "0", + "$type": "outlineOffset" + }, + "focused-outline": { + "$value": { + "$outlineWidth": "{characteristics.focused.focused-outlineWidth}", + "$outlineStyle": "{characteristics.focused.focused-outlineStyle}", + "$outlineColor": "{characteristics.focused.focused-outlineColor}" + }, + "$type": "outline" + } + }, + "navigable": { + "navigable-cursor-active": { + "$value": "pointer", + "$type": "cursor" + }, + "navigable-cursor-hover": { + "$value": "pointer", + "$type": "cursor" + }, + "navigable-cursor-disabled": { + "$value": "not-allowed", + "$type": "cursor" + }, + "navigable-cursor-edit": { + "$value": "text", + "$type": "cursor" + }, + "navigable-fontWeight": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "navigable-fontWeight-hover": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "navigable-fontWeight-active": { + "$value": "var(--salt-typography-fontWeight-semiBold)", + "$type": "fontWeight" + }, + "navigable-fontWeight-edit": { + "$value": "var(--salt-typography-fontWeight-regular)", + "$type": "fontWeight" + }, + "navigable-indicator-hover": { + "$value": "{palette.navigate.palette-navigate-indicator-hover}", + "$type": "color" + }, + "navigable-indicator-active": { + "$value": "{palette.navigate.palette-navigate-indicator-active}", + "$type": "color" + }, + "navigable-background-hover": { + "$value": "{palette.navigate.palette-navigate-primary-background-hover}", + "$type": "color" + } + }, + "overlayable": { + "overlayable-shadow-scroll": { + "$value": "{foundations.shadow.shadow-100}", + "$type": "shadow" + }, + "overlayable-shadow-region": { + "$value": "{foundations.shadow.shadow-200}", + "$type": "shadow" + }, + "overlayable-shadow": { + "$value": "{foundations.shadow.shadow-200}", + "$type": "shadow" + }, + "overlayable-shadow-hover": { + "$value": "{foundations.shadow.shadow-300}", + "$type": "shadow" + }, + "overlayable-shadow-popout": { + "$value": "{foundations.shadow.shadow-400}", + "$type": "shadow" + }, + "overlayable-shadow-drag": { + "$value": "{foundations.shadow.shadow-400}", + "$type": "shadow" + }, + "overlayable-shadow-modal": { + "$value": "{foundations.shadow.shadow-500}", + "$type": "shadow" + }, + "overlayable-background": { + "$value": "{palette.neutral.palette-neutral-backdrop}", + "$type": "color" + } + }, + "selectable": { + "selectable-cursor-hover": { + "$value": "pointer", + "$type": "cursor" + }, + "selectable-cursor-selected": { + "$value": "pointer", + "$type": "cursor" + }, + "selectable-cursor-blurSelected": { + "$value": "pointer", + "$type": "cursor" + }, + "selectable-cursor-disabled": { + "$value": "not-allowed", + "$type": "cursor" + }, + "selectable-cursor-readonly": { + "$value": "not-allowed", + "$type": "cursor" + }, + "selectable-borderStyle": { + "$value": "solid", + "$type": "borderStyle" + }, + "selectable-borderStyle-hover": { + "$value": "solid", + "$type": "borderStyle" + }, + "selectable-borderStyle-selected": { + "$value": "solid", + "$type": "borderStyle" + }, + "selectable-borderStyle-blurSelected": { + "$value": "solid", + "$type": "borderStyle" + }, + "selectable-borderColor": { + "$value": "{palette.interact.palette-interact-border}", + "$type": "color" + }, + "selectable-borderColor-hover": { + "$value": "{palette.interact.palette-interact-border-hover}", + "$type": "color" + }, + "selectable-borderColor-selected": { + "$value": "{palette.interact.palette-interact-border-active}", + "$type": "color" + }, + "selectable-borderColor-selectedDisabled": { + "$value": "{palette.interact.palette-interact-border-activeDisabled}", + "$type": "color" + }, + "selectable-borderColor-disabled": { + "$value": "{palette.interact.palette-interact-border-disabled}", + "$type": "color" + }, + "selectable-borderColor-readonly": { + "$value": "{palette.interact.palette-interact-border-readonly}", + "$type": "color" + }, + "selectable-foreground": { + "$value": "{palette.interact.palette-interact-foreground}", + "$type": "color" + }, + "selectable-foreground-disabled": { + "$value": "{palette.interact.palette-interact-foreground-disabled}", + "$type": "color" + }, + "selectable-foreground-hover": { + "$value": "{palette.interact.palette-interact-foreground-hover}", + "$type": "color" + }, + "selectable-foreground-selected": { + "$value": "{palette.interact.palette-interact-foreground-active}", + "$type": "color" + }, + "selectable-foreground-selectedDisabled": { + "$value": "{palette.interact.palette-interact-foreground-activeDisabled}", + "$type": "color" + }, + "selectable-background": { + "$value": "{palette.interact.palette-interact-background}", + "$type": "color" + }, + "selectable-background-hover": { + "$value": "{palette.interact.palette-interact-background-hover}", + "$type": "color" + }, + "selectable-background-selected": { + "$value": "{palette.interact.palette-interact-background-active}", + "$type": "color" + }, + "selectable-background-blurSelected": { + "$value": "{palette.interact.palette-interact-background-blurSelected}", + "$type": "color" + }, + "selectable-background-disabled": { + "$value": "{palette.interact.palette-interact-background-disabled}", + "$type": "color" + }, + "selectable-background-selectedDisabled": { + "$value": "{palette.interact.palette-interact-background-activeDisabled}", + "$type": "color" + } + }, + "separable": { + "separable-borderStyle": { + "$value": "solid", + "$type": "borderStyle" + }, + "separable-primary-borderColor": { + "$value": "{palette.neutral.palette-neutral-primary-separator}", + "$type": "color" + }, + "separable-secondary-borderColor": { + "$value": "{palette.neutral.palette-neutral-secondary-separator}", + "$type": "color" + }, + "separable-tertiary-borderColor": { + "$value": "{palette.neutral.palette-neutral-tertiary-separator}", + "$type": "color" + } + }, + "status": { + "status-info-foreground": { + "$value": "{palette.info.palette-info-foreground}", + "$type": "color" + }, + "status-success-foreground": { + "$value": "{palette.success.palette-success-foreground}", + "$type": "color" + }, + "status-warning-foreground": { + "$value": "{palette.warning.palette-warning-foreground}", + "$type": "color" + }, + "status-error-foreground": { + "$value": "{palette.error.palette-error-foreground}", + "$type": "color" + }, + "status-static-foreground": { + "$value": "{palette.neutral.palette-neutral-secondary-foreground}", + "$type": "color" + }, + "status-negative-foreground": { + "$value": "{palette.negative.palette-negative-foreground}", + "$type": "color" + }, + "status-positive-foreground": { + "$value": "{palette.positive.palette-positive-foreground}", + "$type": "color" + }, + "status-info-borderColor": { + "$value": "{palette.info.palette-info-border}", + "$type": "color" + }, + "status-success-borderColor": { + "$value": "{palette.success.palette-success-border}", + "$type": "color" + }, + "status-warning-borderColor": { + "$value": "{palette.warning.palette-warning-border}", + "$type": "color" + }, + "status-error-borderColor": { + "$value": "{palette.error.palette-error-border}", + "$type": "color" + }, + "status-info-background": { + "$value": "{palette.info.palette-info-background}", + "$type": "color" + }, + "status-success-background": { + "$value": "{palette.success.palette-success-background}", + "$type": "color" + }, + "status-warning-background": { + "$value": "{palette.warning.palette-warning-background}", + "$type": "color" + }, + "status-error-background": { + "$value": "{palette.error.palette-error-background}", + "$type": "color" + }, + "status-success-background-selected": { + "$value": "{palette.success.palette-success-background-selected}", + "$type": "color" + }, + "status-warning-background-selected": { + "$value": "{palette.warning.palette-warning-background-selected}", + "$type": "color" + }, + "status-error-background-selected": { + "$value": "{palette.error.palette-error-background-selected}", + "$type": "color" + } + }, + "target": { + "target-background-hover": { + "$value": "{palette.interact.palette-interact-background-hover}", + "$type": "color" + }, + "target-borderColor-hover": { + "$value": "{palette.interact.palette-interact-border-hover}", + "$type": "color" + }, + "target-borderStyle": { + "$value": "dashed", + "$type": "borderStyle" + }, + "target-borderStyle-hover": { + "$value": "solid", + "$type": "borderStyle" + }, + "target-borderStyle-disabled": { + "$value": "dashed", + "$type": "borderStyle" + }, + "target-cursor-disabled": { + "$value": "not-allowed", + "$type": "cursor" + } + }, + "track": { + "track-borderStyle": { + "$value": "solid", + "$type": "borderStyle" + }, + "track-borderStyle-active": { + "$value": "solid", + "$type": "borderStyle" + }, + "track-borderStyle-complete": { + "$value": "solid", + "$type": "borderStyle" + }, + "track-borderStyle-incomplete": { + "$value": "dotted", + "$type": "borderStyle" + }, + "track-borderColor": { + "$value": "{palette.neutral.palette-neutral-secondary-border}", + "$type": "color" } } } From c6fbfeba34cf3c7c1cac50bf2b2b4929ce4219fb Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 19 Mar 2024 12:11:58 -0400 Subject: [PATCH 37/50] fix glitches --- packages/theme/json/parsers/themeToJson.js | 2 ++ packages/theme/json/theme.json | 16 ++++++++-------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index 3712a5aecd0..17da99ac3fd 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -60,8 +60,10 @@ function formatFoundationValue(semantic, tokenValue) { switch (semantic) { case "corner": foundationSemantic = "curve"; + break; case "opacity": foundationSemantic = "opacity"; + break; default: foundationSemantic = "color"; } diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index 7f30b0ef685..4298883386a 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -634,31 +634,31 @@ }, "opacity": { "palette-opacity-backdrop": { - "$value": "{foundations.color.opacity-70}", + "$value": "{foundations.opacity.opacity-70}", "$type": "number" }, "palette-opacity-disabled": { - "$value": "{foundations.color.opacity-40}", + "$value": "{foundations.opacity.opacity-40}", "$type": "number" }, "palette-opacity-background-readonly": { - "$value": "{foundations.color.opacity-0}", + "$value": "{foundations.opacity.opacity-0}", "$type": "number" }, "palette-opacity-border-readonly": { - "$value": "{foundations.color.opacity-15}", + "$value": "{foundations.opacity.opacity-15}", "$type": "number" }, "palette-opacity-primary-border": { - "$value": "{foundations.color.opacity-40}", + "$value": "{foundations.opacity.opacity-40}", "$type": "number" }, "palette-opacity-secondary-border": { - "$value": "{foundations.color.opacity-25}", + "$value": "{foundations.opacity.opacity-25}", "$type": "number" }, "palette-opacity-tertiary-border": { - "$value": "{foundations.color.opacity-15}", + "$value": "{foundations.opacity.opacity-15}", "$type": "number" } } @@ -2471,7 +2471,7 @@ "$type": "color" }, "navigable-background-hover": { - "$value": "{palette.navigate.palette-navigate-primary-background-hover}", + "$value": "{palette.navigate.palette-navigate-background-hover}", "$type": "color" } }, From a1726b79cf29c17bbc8913f8e4804aef9f17de90 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 19 Mar 2024 14:58:15 -0400 Subject: [PATCH 38/50] fix foundations --- packages/theme/json/parsers/themeToJson.js | 73 ++- packages/theme/json/theme.json | 642 ++++++++++++++------- 2 files changed, 491 insertions(+), 224 deletions(-) diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index 17da99ac3fd..3eea8fe04b6 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -132,18 +132,81 @@ function format(variables) { } else if (foundations.includes(grouping)) { const semantic = tokenName.split("-")[0]; switch (semantic) { - case "corner": + case "curve": + type = "dimension"; + break; + case "size": type = "dimension"; break; + case "spacing": + type = "dimension"; + if (tokenValue.includes("calc")) { + let [multiplier, multipleToken] = tokenValue + .replace("calc(", "") + .replace(")", "") + .split(" * "); + multipleToken = variables["general"][ + stripVarFunc(multipleToken) + ].replace("px", ""); + tokenValue = removePrefix(stripVarFunc(tokenValue)) + .replace("spacing", `{spacing`) + .replace("100", "100}") + .replace("calc(", ""); + } + break; case "opacity": type = "number"; break; + case "zIndex": + type = "number"; + break; + case "duration": + type = "duration"; + break; + case "typography": + const attribute = tokenName.split("-")[1]; + type = attribute; + break; + case "shadow": + if (tokenName.includes("color")) { + type = "color"; + tokenValue = colorFormatSwap("hex", tokenValue); + } else { + type = "shadow"; + const [offsetX, offsetY, blur, spread, color] = + tokenValue.split(" "); + tokenValue = { + offsetX: offsetX, + offsetY: offsetY, + blur: blur, + spread: spread, + color: `{foundations.shadow.${removePrefix( + stripVarFunc(color) + )}}`, + }; + } + break; + case "color": + if (tokenName.includes("fade")) { + type = "color"; + const colorToken = `${tokenName.split("-fade")[0]}`; + const opacityValue = stripVarFunc(tokenValue.split(",")[3]); + // the semantic check here is due to e.g. --salt-palette-opacity-disabled used in fade tokens (correct) vs + // e.g. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover (this is technically wrong) + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{${ + opacityValue.includes("palette") ? "palette" : "foundations" + }.opacity.${removePrefix(stripVarFunc(opacityValue))}}`, + }; + } else { + type = "color"; + tokenValue = colorFormatSwap("hex", tokenValue); + } + break; default: - type = "color"; + type = undefined; } - tokenValue !== "transparent" - ? formatFoundationValue(semantic, tokenValue) - : tokenValue; addToJson(key, "foundations", semantic, tokenName, type, tokenValue); } else { const semantic = tokenName.split("-")[0]; diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index 4298883386a..bb313896f08 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -667,58 +667,88 @@ "shadow": { "shadow-100-color": { "$value": { - "$dark": "rgba(0, 0, 0, 0.5)", - "$light": "rgba(0, 0, 0, 0.1)" + "$dark": "#00000000", + "$light": "#00000000" }, "$type": "color" }, "shadow-200-color": { "$value": { - "$dark": "rgba(0, 0, 0, 0.5)", - "$light": "rgba(0, 0, 0, 0.1)" + "$dark": "#00000000", + "$light": "#00000000" }, "$type": "color" }, "shadow-300-color": { "$value": { - "$dark": "rgba(0, 0, 0, 0.55)", - "$light": "rgba(0, 0, 0, 0.15)" + "$dark": "#00000000", + "$light": "#00000000" }, "$type": "color" }, "shadow-400-color": { "$value": { - "$dark": "rgba(0, 0, 0, 0.55)", - "$light": "rgba(0, 0, 0, 0.2)" + "$dark": "#00000000", + "$light": "#00000000" }, "$type": "color" }, "shadow-500-color": { "$value": { - "$dark": "rgba(0, 0, 0, 0.65)", - "$light": "rgba(0, 0, 0, 0.3)" + "$dark": "#00000000", + "$light": "#00000000" }, "$type": "color" }, "shadow-100": { - "$value": "0 1px 3px 0 var(--salt-shadow-100-color)", - "$type": "color" + "$value": { + "offsetX": "0", + "offsetY": "1px", + "blur": "3px", + "spread": "0", + "color": "{foundations.shadow.shadow-100-color}" + }, + "$type": "shadow" }, "shadow-200": { - "$value": "0 2px 4px 0 var(--salt-shadow-200-color)", - "$type": "color" + "$value": { + "offsetX": "0", + "offsetY": "2px", + "blur": "4px", + "spread": "0", + "color": "{foundations.shadow.shadow-200-color}" + }, + "$type": "shadow" }, "shadow-300": { - "$value": "0 4px 8px 0 var(--salt-shadow-300-color)", - "$type": "color" + "$value": { + "offsetX": "0", + "offsetY": "4px", + "blur": "8px", + "spread": "0", + "color": "{foundations.shadow.shadow-300-color}" + }, + "$type": "shadow" }, "shadow-400": { - "$value": "0 6px 10px 0 var(--salt-shadow-400-color)", - "$type": "color" + "$value": { + "offsetX": "0", + "offsetY": "6px", + "blur": "10px", + "spread": "0", + "color": "{foundations.shadow.shadow-400-color}" + }, + "$type": "shadow" }, "shadow-500": { - "$value": "0 12px 40px 0 var(--salt-shadow-500-color)", - "$type": "color" + "$value": { + "offsetX": "0", + "offsetY": "12px", + "blur": "40px", + "spread": "0", + "color": "{foundations.shadow.shadow-500-color}" + }, + "$type": "shadow" } }, "curve": { @@ -729,7 +759,7 @@ "$medium": "0", "$high": "0" }, - "$type": "color" + "$type": "dimension" }, "curve-50": { "$value": { @@ -738,7 +768,7 @@ "$medium": "2px", "$high": "1px" }, - "$type": "color" + "$type": "dimension" }, "curve-100": { "$value": { @@ -747,7 +777,7 @@ "$medium": "4px", "$high": "2px" }, - "$type": "color" + "$type": "dimension" }, "curve-150": { "$value": { @@ -756,7 +786,7 @@ "$medium": "6px", "$high": "3px" }, - "$type": "color" + "$type": "dimension" }, "curve-999": { "$value": { @@ -765,7 +795,7 @@ "$medium": "999px", "$high": "999px" }, - "$type": "color" + "$type": "dimension" } }, "size": { @@ -776,7 +806,7 @@ "$medium": "8px", "$high": "6px" }, - "$type": "color" + "$type": "dimension" }, "size-bar": { "$value": { @@ -785,7 +815,7 @@ "$medium": "4px", "$high": "2px" }, - "$type": "color" + "$type": "dimension" }, "size-base": { "$value": { @@ -794,7 +824,7 @@ "$medium": "28px", "$high": "20px" }, - "$type": "color" + "$type": "dimension" }, "size-border": { "$value": { @@ -803,7 +833,7 @@ "$medium": "1px", "$high": "1px" }, - "$type": "color" + "$type": "dimension" }, "size-icon": { "$value": { @@ -812,7 +842,7 @@ "$medium": "12px", "$high": "10px" }, - "$type": "color" + "$type": "dimension" }, "size-indicator": { "$value": { @@ -821,7 +851,7 @@ "$medium": "2px", "$high": "1px" }, - "$type": "color" + "$type": "dimension" }, "size-selectable": { "$value": { @@ -830,7 +860,7 @@ "$medium": "14px", "$high": "12px" }, - "$type": "color" + "$type": "dimension" }, "size-bar-strong": { "$value": { @@ -839,7 +869,7 @@ "$medium": "8px", "$high": "4px" }, - "$type": "color" + "$type": "dimension" }, "size-bar-small": { "$value": { @@ -848,7 +878,7 @@ "$medium": "2px", "$high": "2px" }, - "$type": "color" + "$type": "dimension" }, "size-border-strong": { "$value": { @@ -857,7 +887,7 @@ "$medium": "2px", "$high": "2px" }, - "$type": "color" + "$type": "dimension" } }, "spacing": { @@ -868,7 +898,7 @@ "$medium": "8px", "$high": "4px" }, - "$type": "color" + "$type": "dimension" } }, "zIndex": { @@ -879,7 +909,7 @@ "$medium": "1", "$high": "1" }, - "$type": "color" + "$type": "number" }, "zIndex-popout": { "$value": { @@ -888,7 +918,7 @@ "$medium": "1000", "$high": "1000" }, - "$type": "color" + "$type": "number" }, "zIndex-appHeader": { "$value": { @@ -897,7 +927,7 @@ "$medium": "1100", "$high": "1100" }, - "$type": "color" + "$type": "number" }, "zIndex-drawer": { "$value": { @@ -906,7 +936,7 @@ "$medium": "1200", "$high": "1200" }, - "$type": "color" + "$type": "number" }, "zIndex-modal": { "$value": { @@ -915,7 +945,7 @@ "$medium": "1300", "$high": "1300" }, - "$type": "color" + "$type": "number" }, "zIndex-notification": { "$value": { @@ -924,7 +954,7 @@ "$medium": "1400", "$high": "1400" }, - "$type": "color" + "$type": "number" }, "zIndex-dragObject": { "$value": { @@ -933,7 +963,7 @@ "$medium": "1420", "$high": "1420" }, - "$type": "color" + "$type": "number" }, "zIndex-contextMenu": { "$value": { @@ -942,7 +972,7 @@ "$medium": "1450", "$high": "1450" }, - "$type": "color" + "$type": "number" }, "zIndex-flyover": { "$value": { @@ -951,675 +981,849 @@ "$medium": "1500", "$high": "1500" }, - "$type": "color" + "$type": "number" } }, "color": { "color-white": { - "$value": "rgb(255, 255, 255)", + "$value": "#ffffff", "$type": "color" }, "color-black": { - "$value": "rgb(0, 0, 0)", + "$value": "#000000", "$type": "color" }, "color-red-10": { - "$value": "rgb(255, 227, 224)", + "$value": "#ffe3e0", "$type": "color" }, "color-red-20": { - "$value": "rgb(255, 207, 201)", + "$value": "#ffcfc9", "$type": "color" }, "color-red-30": { - "$value": "rgb(255, 187, 178)", + "$value": "#ffbbb2", "$type": "color" }, "color-red-40": { - "$value": "rgb(255, 167, 156)", + "$value": "#ffa79c", "$type": "color" }, "color-red-50": { - "$value": "rgb(255, 148, 133)", + "$value": "#ff9485", "$type": "color" }, "color-red-100": { - "$value": "rgb(255, 128, 111)", + "$value": "#ff806f", "$type": "color" }, "color-red-200": { - "$value": "rgb(255, 108, 88)", + "$value": "#ff6c58", "$type": "color" }, "color-red-300": { - "$value": "rgb(255, 89, 66)", + "$value": "#ff5942", "$type": "color" }, "color-red-400": { - "$value": "rgb(237, 65, 42)", + "$value": "#ed412a", "$type": "color" }, "color-red-500": { - "$value": "rgb(227, 43, 22)", + "$value": "#e32b16", "$type": "color" }, "color-red-600": { - "$value": "rgb(196, 32, 16)", + "$value": "#c42010", "$type": "color" }, "color-red-700": { - "$value": "rgb(166, 21, 11)", + "$value": "#a6150b", "$type": "color" }, "color-red-800": { - "$value": "rgb(136, 10, 5)", + "$value": "#880a05", "$type": "color" }, "color-red-900": { - "$value": "rgb(65, 37, 34)", + "$value": "#412522", "$type": "color" }, "color-orange-10": { - "$value": "rgb(255, 232, 191)", + "$value": "#ffe8bf", "$type": "color" }, "color-orange-20": { - "$value": "rgb(254, 223, 166)", + "$value": "#fedfa6", "$type": "color" }, "color-orange-30": { - "$value": "rgb(254, 214, 142)", + "$value": "#fed68e", "$type": "color" }, "color-orange-40": { - "$value": "rgb(254, 205, 118)", + "$value": "#fecd76", "$type": "color" }, "color-orange-50": { - "$value": "rgb(254, 197, 94)", + "$value": "#fec55e", "$type": "color" }, "color-orange-100": { - "$value": "rgb(250, 181, 81)", + "$value": "#fab551", "$type": "color" }, "color-orange-200": { - "$value": "rgb(246, 165, 68)", + "$value": "#f6a544", "$type": "color" }, "color-orange-300": { - "$value": "rgb(242, 149, 56)", + "$value": "#f29538", "$type": "color" }, "color-orange-400": { - "$value": "rgb(238, 133, 43)", + "$value": "#ee852b", "$type": "color" }, "color-orange-500": { - "$value": "rgb(234, 115, 25)", + "$value": "#ea7319", "$type": "color" }, "color-orange-600": { - "$value": "rgb(224, 101, 25)", + "$value": "#e06519", "$type": "color" }, "color-orange-700": { - "$value": "rgb(214, 85, 19)", + "$value": "#d65513", "$type": "color" }, "color-orange-800": { - "$value": "rgb(204, 68, 13)", + "$value": "#cc440d", "$type": "color" }, "color-orange-900": { - "$value": "rgb(54, 44, 36)", + "$value": "#362c24", "$type": "color" }, "color-green-10": { - "$value": "rgb(209, 244, 201)", + "$value": "#d1f4c9", "$type": "color" }, "color-green-20": { - "$value": "rgb(184, 232, 182)", + "$value": "#b8e8b6", "$type": "color" }, "color-green-30": { - "$value": "rgb(160, 221, 164)", + "$value": "#a0dda4", "$type": "color" }, "color-green-40": { - "$value": "rgb(136, 210, 145)", + "$value": "#88d291", "$type": "color" }, "color-green-50": { - "$value": "rgb(112, 199, 127)", + "$value": "#70c77f", "$type": "color" }, "color-green-100": { - "$value": "rgb(93, 189, 116)", + "$value": "#5dbd74", "$type": "color" }, "color-green-200": { - "$value": "rgb(77, 180, 105)", + "$value": "#4db469", "$type": "color" }, "color-green-300": { - "$value": "rgb(60, 171, 96)", + "$value": "#3cab60", "$type": "color" }, "color-green-400": { - "$value": "rgb(48, 156, 90)", + "$value": "#309c5a", "$type": "color" }, "color-green-500": { - "$value": "rgb(36, 135, 75)", + "$value": "#24874b", "$type": "color" }, "color-green-600": { - "$value": "rgb(24, 114, 61)", + "$value": "#18723d", "$type": "color" }, "color-green-700": { - "$value": "rgb(12, 93, 46)", + "$value": "#0c5d2e", "$type": "color" }, "color-green-800": { - "$value": "rgb(1, 73, 32)", + "$value": "#014920", "$type": "color" }, "color-green-900": { - "$value": "rgb(35, 52, 43)", + "$value": "#23342b", "$type": "color" }, "color-teal-10": { - "$value": "rgb(218, 240, 240)", + "$value": "#daf0f0", "$type": "color" }, "color-teal-20": { - "$value": "rgb(199, 232, 232)", + "$value": "#c7e8e8", "$type": "color" }, "color-teal-30": { - "$value": "rgb(180, 224, 225)", + "$value": "#b4e0e1", "$type": "color" }, "color-teal-40": { - "$value": "rgb(162, 217, 218)", + "$value": "#a2d9da", "$type": "color" }, "color-teal-50": { - "$value": "rgb(141, 205, 209)", + "$value": "#8dcdd1", "$type": "color" }, "color-teal-100": { - "$value": "rgb(123, 193, 200)", + "$value": "#7bc1c8", "$type": "color" }, "color-teal-200": { - "$value": "rgb(99, 181, 192)", + "$value": "#63b5c0", "$type": "color" }, "color-teal-300": { - "$value": "rgb(73, 160, 172)", + "$value": "#49a0ac", "$type": "color" }, "color-teal-400": { - "$value": "rgb(48, 149, 166)", + "$value": "#3095a6", "$type": "color" }, "color-teal-500": { - "$value": "rgb(0, 130, 151)", + "$value": "#008297", "$type": "color" }, "color-teal-600": { - "$value": "rgb(27, 107, 133)", + "$value": "#1b6b85", "$type": "color" }, "color-teal-700": { - "$value": "rgb(0, 85, 113)", + "$value": "#005571", "$type": "color" }, "color-teal-800": { - "$value": "rgb(1, 65, 86)", + "$value": "#014156", "$type": "color" }, "color-teal-900": { - "$value": "rgb(0, 49, 76)", + "$value": "#00314c", "$type": "color" }, "color-blue-10": { - "$value": "rgb(203, 231, 249)", + "$value": "#cbe7f9", "$type": "color" }, "color-blue-20": { - "$value": "rgb(183, 222, 246)", + "$value": "#b7def6", "$type": "color" }, "color-blue-30": { - "$value": "rgb(164, 213, 244)", + "$value": "#a4d5f4", "$type": "color" }, "color-blue-40": { - "$value": "rgb(144, 204, 242)", + "$value": "#90ccf2", "$type": "color" }, "color-blue-50": { - "$value": "rgb(125, 195, 240)", + "$value": "#7dc3f0", "$type": "color" }, "color-blue-100": { - "$value": "rgb(100, 177, 228)", + "$value": "#64b1e4", "$type": "color" }, "color-blue-200": { - "$value": "rgb(75, 159, 216)", + "$value": "#4b9fd8", "$type": "color" }, "color-blue-300": { - "$value": "rgb(51, 141, 205)", + "$value": "#338dcd", "$type": "color" }, "color-blue-400": { - "$value": "rgb(46, 132, 198)", + "$value": "#2e84c6", "$type": "color" }, "color-blue-500": { - "$value": "rgb(38, 112, 169)", + "$value": "#2670a9", "$type": "color" }, "color-blue-600": { - "$value": "rgb(21, 92, 147)", + "$value": "#155c93", "$type": "color" }, "color-blue-700": { - "$value": "rgb(0, 71, 123)", + "$value": "#00477b", "$type": "color" }, "color-blue-800": { - "$value": "rgb(39, 60, 77)", + "$value": "#273c4d", "$type": "color" }, "color-blue-900": { - "$value": "rgb(35, 47, 56)", + "$value": "#232f38", "$type": "color" }, "color-purple-10": { - "$value": "rgb(249, 224, 247)", + "$value": "#f9e0f7", "$type": "color" }, "color-purple-20": { - "$value": "rgb(247, 212, 244)", + "$value": "#f7d4f4", "$type": "color" }, "color-purple-30": { - "$value": "rgb(245, 201, 241)", + "$value": "#f5c9f1", "$type": "color" }, "color-purple-40": { - "$value": "rgb(243, 189, 238)", + "$value": "#f3bdee", "$type": "color" }, "color-purple-50": { - "$value": "rgb(241, 178, 235)", + "$value": "#f1b2eb", "$type": "color" }, "color-purple-100": { - "$value": "rgb(223, 156, 225)", + "$value": "#df9ce1", "$type": "color" }, "color-purple-200": { - "$value": "rgb(205, 135, 215)", + "$value": "#cd87d7", "$type": "color" }, "color-purple-300": { - "$value": "rgb(192, 116, 203)", + "$value": "#c074cb", "$type": "color" }, "color-purple-400": { - "$value": "rgb(169, 97, 181)", + "$value": "#a961b5", "$type": "color" }, "color-purple-500": { - "$value": "rgb(150, 78, 162)", + "$value": "#964ea2", "$type": "color" }, "color-purple-600": { - "$value": "rgb(129, 60, 141)", + "$value": "#813c8d", "$type": "color" }, "color-purple-700": { - "$value": "rgb(103, 46, 122)", + "$value": "#672e7a", "$type": "color" }, "color-purple-800": { - "$value": "rgb(83, 37, 109)", + "$value": "#53256d", "$type": "color" }, "color-purple-900": { - "$value": "rgb(59, 16, 84)", + "$value": "#3b1054", "$type": "color" }, "color-gray-10": { - "$value": "rgb(242, 244, 246)", + "$value": "#f2f4f6", "$type": "color" }, "color-gray-20": { - "$value": "rgb(234, 237, 239)", + "$value": "#eaedef", "$type": "color" }, "color-gray-30": { - "$value": "rgb(224, 228, 233)", + "$value": "#e0e4e9", "$type": "color" }, "color-gray-40": { - "$value": "rgb(217, 221, 227)", + "$value": "#d9dde3", "$type": "color" }, "color-gray-50": { - "$value": "rgb(206, 210, 217)", + "$value": "#ced2d9", "$type": "color" }, "color-gray-60": { - "$value": "rgb(197, 201, 208)", + "$value": "#c5c9d0", "$type": "color" }, "color-gray-70": { - "$value": "rgb(180, 183, 190)", + "$value": "#b4b7be", "$type": "color" }, "color-gray-80": { - "$value": "rgb(159, 163, 170)", + "$value": "#9fa3aa", "$type": "color" }, "color-gray-90": { - "$value": "rgb(132, 135, 142)", + "$value": "#84878e", "$type": "color" }, "color-gray-100": { - "$value": "rgb(116, 119, 127)", + "$value": "#74777f", "$type": "color" }, "color-gray-200": { - "$value": "rgb(97, 101, 110)", + "$value": "#61656e", "$type": "color" }, "color-gray-300": { - "$value": "rgb(76, 80, 91)", + "$value": "#4c505b", "$type": "color" }, "color-gray-400": { - "$value": "rgb(68, 72, 79)", + "$value": "#44484f", "$type": "color" }, "color-gray-500": { - "$value": "rgb(59, 63, 70)", + "$value": "#3b3f46", "$type": "color" }, "color-gray-600": { - "$value": "rgb(47, 49, 54)", + "$value": "#2f3136", "$type": "color" }, "color-gray-700": { - "$value": "rgb(42, 44, 47)", + "$value": "#2a2c2f", "$type": "color" }, "color-gray-800": { - "$value": "rgb(36, 37, 38)", + "$value": "#242526", "$type": "color" }, "color-gray-900": { - "$value": "rgb(22, 22, 22)", + "$value": "#161616", "$type": "color" }, "color-blue-100-fade-foreground": { - "$value": "rgba(100, 177, 228, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-100}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-500-fade-foreground": { - "$value": "rgba(38, 112, 169, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-600-fade-foreground": { - "$value": "rgba(21, 92, 147, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-200-fade-foreground": { - "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-70-fade-foreground": { - "$value": "rgba(180, 183, 190, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-70}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-90-fade-foreground": { - "$value": "rgba(132, 135, 142, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-900-fade-foreground": { - "$value": "rgba(22, 22, 22, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-900}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-green-300-fade-foreground": { - "$value": "rgba(60, 171, 96, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-green-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-green-400-fade-foreground": { - "$value": "rgba(48, 156, 90, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-green-400}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-green-500-fade-foreground": { - "$value": "rgba(36, 135, 75, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-green-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-green-700-fade-foreground": { - "$value": "rgba(12, 93, 46, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-green-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-red-300-fade-foreground": { - "$value": "rgba(255, 89, 66, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-red-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-red-500-fade-foreground": { - "$value": "rgba(227, 43, 22, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-red-700-fade-foreground": { - "$value": "rgba(166, 21, 11, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-red-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-white-fade-foreground": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-500-fade-border": { - "$value": "rgba(38, 112, 169, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-50-fade-border": { - "$value": "rgba(206, 210, 217, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-50}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-60-fade-border": { - "$value": "rgba(197, 201, 208, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-90-fade-border": { - "$value": "rgba(132, 135, 142, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-200-fade-border": { - "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-300-fade-border": { - "$value": "rgba(76, 80, 91, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-green-400-fade-border": { - "$value": "rgba(48, 156, 90, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-green-400}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-green-500-fade-border": { - "$value": "rgba(36, 135, 75, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-green-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-orange-400-fade-border": { - "$value": "rgba(238, 133, 43, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-orange-400}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-orange-500-fade-border": { - "$value": "rgba(234, 115, 25, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-orange-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-orange-600-fade-border": { - "$value": "rgba(224, 101, 25, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-orange-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-orange-700-fade-border": { - "$value": "rgba(214, 85, 19, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-orange-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-red-500-fade-border": { - "$value": "rgba(227, 43, 22, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-red-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-90-fade-border-readonly": { - "$value": "rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly))", + "$value": { + "color": "{foundations.color.color-gray-90}", + "opacity": "{palette.opacity.palette-opacity-border-readonly}" + }, "$type": "color" }, "color-gray-200-fade-border-readonly": { - "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly))", + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-border-readonly}" + }, "$type": "color" }, "color-blue-30-fade-background": { - "$value": "rgba(164, 213, 244, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-30}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-500-fade-background": { - "$value": "rgba(38, 112, 169, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-500}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-600-fade-background": { - "$value": "rgba(21, 92, 147, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-700-fade-background": { - "$value": "rgba(0, 71, 123, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-700}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-20-fade-background": { - "$value": "rgba(234, 237, 239, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-60-fade-background": { - "$value": "rgba(197, 201, 208, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-60}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-70-fade-background": { - "$value": "rgba(180, 183, 190, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-70}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-200-fade-background": { - "$value": "rgba(97, 101, 110, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-200}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-300-fade-background": { - "$value": "rgba(76, 80, 91, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-300}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-600-fade-background": { - "$value": "rgba(47, 49, 54, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-gray-800-fade-background": { - "$value": "rgba(36, 37, 38, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-white-fade-background": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-white-fade-background-readonly": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, "$type": "color" }, "color-gray-20-fade-background-readonly": { - "$value": "rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly))", + "$value": { + "color": "{foundations.color.color-gray-20}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, "$type": "color" }, "color-gray-600-fade-background-readonly": { - "$value": "rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly))", + "$value": { + "color": "{foundations.color.color-gray-600}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, "$type": "color" }, "color-gray-800-fade-background-readonly": { - "$value": "rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly))", + "$value": { + "color": "{foundations.color.color-gray-800}", + "opacity": "{palette.opacity.palette-opacity-background-readonly}" + }, "$type": "color" }, "color-white-fade-backdrop": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-backdrop))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-backdrop}" + }, "$type": "color" }, "color-black-fade-backdrop": { - "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-backdrop))", + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-backdrop}" + }, "$type": "color" }, "color-blue-100-fade-fill": { - "$value": "rgba(100, 177, 228, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-100}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-blue-600-fade-fill": { - "$value": "rgba(21, 92, 147, var(--salt-palette-opacity-disabled))", + "$value": { + "color": "{foundations.color.color-blue-600}", + "opacity": "{palette.opacity.palette-opacity-disabled}" + }, "$type": "color" }, "color-white-fade-separatorOpacity-primary": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-primary-border))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-primary-border}" + }, "$type": "color" }, "color-white-fade-separatorOpacity-secondary": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-secondary-border}" + }, "$type": "color" }, "color-white-fade-separatorOpacity-tertiary": { - "$value": "rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{palette.opacity.palette-opacity-tertiary-border}" + }, "$type": "color" }, "color-black-fade-separatorOpacity-primary": { - "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-primary-border))", + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-primary-border}" + }, "$type": "color" }, "color-black-fade-separatorOpacity-secondary": { - "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border))", + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-secondary-border}" + }, "$type": "color" }, "color-black-fade-separatorOpacity-tertiary": { - "$value": "rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border))", + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{palette.opacity.palette-opacity-tertiary-border}" + }, "$type": "color" }, "color-black-fade-background-hover": { - "$value": "rgba(0, 0, 0, var(--salt-opacity-8))", + "$value": { + "color": "{foundations.color.color-black}", + "opacity": "{foundations.opacity.opacity-8}" + }, "$type": "color" }, "color-white-fade-background-hover": { - "$value": "rgba(255, 255, 255, var(--salt-opacity-8))", + "$value": { + "color": "{foundations.color.color-white}", + "opacity": "{foundations.opacity.opacity-8}" + }, "$type": "color" } }, "duration": { "duration-instant": { "$value": "0ms", - "$type": "color" + "$type": "duration" }, "duration-perceptible": { "$value": "300ms", - "$type": "color" + "$type": "duration" }, "duration-notable": { "$value": "1000ms", - "$type": "color" + "$type": "duration" }, "duration-cutoff": { "$value": "10000ms", - "$type": "color" + "$type": "duration" } }, "opacity": { @@ -1651,35 +1855,35 @@ "typography": { "typography-fontFamily": { "$value": "\"Open Sans\"", - "$type": "color" + "$type": "fontFamily" }, "typography-fontFamily-code": { "$value": "\"PT Mono\"", - "$type": "color" + "$type": "fontFamily" }, "typography-fontWeight-light": { "$value": "300", - "$type": "color" + "$type": "fontWeight" }, "typography-fontWeight-regular": { "$value": "400", - "$type": "color" + "$type": "fontWeight" }, "typography-fontWeight-medium": { "$value": "500", - "$type": "color" + "$type": "fontWeight" }, "typography-fontWeight-semiBold": { "$value": "600", - "$type": "color" + "$type": "fontWeight" }, "typography-fontWeight-bold": { "$value": "700", - "$type": "color" + "$type": "fontWeight" }, "typography-fontWeight-extraBold": { "$value": "800", - "$type": "color" + "$type": "fontWeight" } } }, From 6fa2a036bd9c3521cf13aa70a795deedc2c546da Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 20 Mar 2024 10:47:38 -0400 Subject: [PATCH 39/50] rm --- .yarnrc.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.yarnrc.yml b/.yarnrc.yml index 6cccee20b04..c3fcd7e69fe 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -4,6 +4,6 @@ enableGlobalCache: false nodeLinker: node-modules -npmRegistryServer: "https://artifacts-read.gkp.jpmchase.net/artifactory/api/npm/npm" +npmRegistryServer: "https://registry.yarnpkg.com" yarnPath: .yarn/releases/yarn-4.2.2.cjs From 5fe0e70e1b9f63d894e983faa482ac8f688f670f Mon Sep 17 00:00:00 2001 From: libertymayc Date: Wed, 20 Mar 2024 10:50:21 -0400 Subject: [PATCH 40/50] fix typography --- packages/theme/json/parsers/themeToJson.js | 2 + packages/theme/json/theme.json | 92 +++++++++++----------- 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index 3eea8fe04b6..577bc9e8682 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -271,9 +271,11 @@ function format(variables) { if (tokenParts.find((part) => part === "fontWeight")) { // Do we want to group text e.g. h1, h2? type = "fontWeight"; + tokenValue = formatCharacteristicValue(tokenValue); } if (tokenParts.find((part) => part === "fontFamily")) { type = "fontFamily"; + tokenValue = formatCharacteristicValue(tokenValue); } if (tokenParts.find((part) => part === "fontSize")) { type = "fontSize"; diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index bb313896f08..2a26dd69259 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -2107,171 +2107,171 @@ "$type": "textAlign" }, "text-action-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-fontWeight": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-light)", + "$value": "{foundations.typography.typography-fontWeight-light}", "$type": "fontWeight" }, "text-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-notation-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-notation-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-notation-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-notation-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-h1-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h1-fontWeight": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-h1-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-medium)", + "$value": "{foundations.typography.typography-fontWeight-medium}", "$type": "fontWeight" }, "text-h1-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-extraBold)", + "$value": "{foundations.typography.typography-fontWeight-extraBold}", "$type": "fontWeight" }, "text-h2-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h2-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-h2-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-h2-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-h3-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h3-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-h3-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-h3-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-h4-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h4-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-h4-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-h4-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-label-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-label-fontWeight": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-label-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-light)", + "$value": "{foundations.typography.typography-fontWeight-light}", "$type": "fontWeight" }, "text-label-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-display1-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-display1-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-display1-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-display1-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-display2-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-display2-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-display2-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-display2-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-display3-fontFamily": { - "$value": "var(--salt-typography-fontFamily)", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-display3-fontWeight": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "text-display3-fontWeight-strong": { - "$value": "var(--salt-typography-fontWeight-bold)", + "$value": "{foundations.typography.typography-fontWeight-bold}", "$type": "fontWeight" }, "text-display3-fontWeight-small": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "text-code-fontFamily": { - "$value": "var(--salt-typography-fontFamily-code)", + "$value": "{foundations.typography.typography-fontFamily-code}", "$type": "fontFamily" } }, @@ -2651,19 +2651,19 @@ "$type": "cursor" }, "navigable-fontWeight": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "navigable-fontWeight-hover": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "navigable-fontWeight-active": { - "$value": "var(--salt-typography-fontWeight-semiBold)", + "$value": "{foundations.typography.typography-fontWeight-semiBold}", "$type": "fontWeight" }, "navigable-fontWeight-edit": { - "$value": "var(--salt-typography-fontWeight-regular)", + "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" }, "navigable-indicator-hover": { From db67871b089cb7c10cc8f84cc7cc392951ba4d0c Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 19 Mar 2024 11:24:54 -0400 Subject: [PATCH 41/50] Pull theme from color-palette-next branch --- .../characteristics/characteristics-next.css | 109 +++++++++++ .../theme/css/characteristics/navigable.css | 1 - packages/theme/css/foundations/fade.css | 2 - packages/theme/css/foundations/shadow.css | 1 - packages/theme/css/palette/palette-next.css | 181 ++++++++++++++++++ packages/theme/scripts/build.mjs | 17 -- .../index.js | 8 +- 7 files changed, 291 insertions(+), 28 deletions(-) create mode 100644 packages/theme/css/characteristics/characteristics-next.css create mode 100644 packages/theme/css/palette/palette-next.css diff --git a/packages/theme/css/characteristics/characteristics-next.css b/packages/theme/css/characteristics/characteristics-next.css new file mode 100644 index 00000000000..9be8ce5efc5 --- /dev/null +++ b/packages/theme/css/characteristics/characteristics-next.css @@ -0,0 +1,109 @@ +/* NOTE: all CSS is auto generated using https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/29 */ + +.salt-theme.salt-theme-next { + --salt-status-info-borderColor: var(--salt-palette-info); + --salt-status-info-background: var(--salt-palette-info-weak); + --salt-status-info-foreground: var(--salt-palette-info); + --salt-status-static-foreground: var(--salt-palette-foreground-secondary); + --salt-status-warning-foreground: var(--salt-palette-warning); + --salt-status-warning-background-selected: var(--salt-palette-warning-weak); + --salt-status-warning-background: var(--salt-palette-warning-weak); + --salt-status-warning-borderColor: var(--salt-palette-warning); + --salt-status-success-background: var(--salt-palette-positive-weak); + --salt-status-success-background-selected: var(--salt-palette-positive-weak); + --salt-status-success-foreground: var(--salt-palette-positive); + --salt-status-success-borderColor: var(--salt-palette-positive); + --salt-status-error-background-selected: var(--salt-palette-negative-weak); + --salt-status-error-background: var(--salt-palette-negative-weak); + --salt-status-error-borderColor: var(--salt-palette-negative); + --salt-status-error-foreground: var(--salt-palette-negative); + --salt-status-negative-foreground: var(--salt-palette-negative); + --salt-status-positive-foreground: var(--salt-palette-positive); + --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-disabled); + --salt-container-secondary-borderColor: var(--salt-palette-neutral); + --salt-container-secondary-background: var(--salt-palette-background-secondary); + --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled); + --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled); + --salt-container-primary-borderColor: var(--salt-palette-neutral-weaker); + --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled); + --salt-container-primary-background: var(--salt-palette-background-primary); + --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); + --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); + --salt-actionable-secondary-background: var(--salt-palette-background-transparent); + --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); + --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert); + --salt-actionable-secondary-background-disabled: var(--salt-palette-background-transparent); + --salt-actionable-secondary-background-active: var(--salt-palette-neutral-strong); + --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary); + --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); + --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary); + --salt-actionable-primary-background: var(--salt-palette-neutral-weaker); + --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-weaker-disabled); + --salt-actionable-primary-background-active: var(--salt-palette-neutral-strong); + --salt-actionable-primary-background-readonly: var(--salt-palette-neutral-weaker-readonly); + --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); + --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert); + --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary); + --salt-actionable-cta-foreground: var(--salt-palette-foreground-invert); + --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-invert); + --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-invert); + --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-invert-disabled); + --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); + --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled); + --salt-actionable-cta-background: var(--salt-palette-accent); + --salt-actionable-cta-background-active: var(--salt-palette-accent-strong); + --salt-selectable-background: var(--salt-palette-background-transparent); + --salt-selectable-background-disabled: var(--salt-palette-background-transparent); + --salt-selectable-borderColor: var(--salt-palette-neutral); + --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly); + --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest); + --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled); + --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled); + --salt-selectable-foreground: var(--salt-palette-neutral-strong); + --salt-selectable-background-selected: var(--salt-palette-accent-weaker); + --salt-selectable-background-hover: var(--salt-palette-accent-weakest); + --salt-selectable-borderColor-selected: var(--salt-palette-accent-stronger); + --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-strong-disabled); + --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-stronger-disabled); + --salt-selectable-borderColor-hover: var(--salt-palette-accent); + --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled); + --salt-selectable-foreground-hover: var(--salt-palette-accent); + --salt-selectable-foreground-selected: var(--salt-palette-accent-strong); + --salt-track-borderColor: var(--salt-palette-neutral); + --salt-navigable-background-hover: var(--salt-palette-background-hover); + --salt-navigable-indicator-active: var(--salt-palette-accent); + --salt-navigable-indicator-hover: var(--salt-palette-neutral); + --salt-accent-foreground: var(--salt-palette-foreground-invert); + --salt-accent-background: var(--salt-palette-accent); + --salt-accent-borderColor: var(--salt-palette-accent); + --salt-editable-secondary-background-readonly: var(--salt-palette-background-transparent); + --salt-editable-secondary-background: var(--salt-palette-background-secondary); + --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled); + --salt-editable-secondary-background-active: var(--salt-palette-background-secondary); + --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary); + --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly); + --salt-editable-borderColor: var(--salt-palette-neutral); + --salt-editable-primary-background-readonly: var(--salt-palette-background-transparent); + --salt-editable-primary-background-hover: var(--salt-palette-background-primary); + --salt-editable-primary-background: var(--salt-palette-background-primary); + --salt-editable-primary-background-active: var(--salt-palette-background-primary); + --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled); + --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled); + --salt-editable-borderColor-active: var(--salt-palette-accent-stronger); + --salt-editable-borderColor-hover: var(--salt-palette-accent); + --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled); + --salt-content-primary-foreground: var(--salt-palette-foreground-primary); + --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary); + --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); + --salt-content-foreground-visited: var(--salt-palette-foreground-visited); + --salt-content-foreground-active: var(--salt-palette-foreground-active); + --salt-content-foreground-hover: var(--salt-palette-foreground-hover); + --salt-content-foreground-highlight: var(--salt-palette-accent-weaker); + --salt-overlayable-background: var(--salt-palette-background-backdrop); + --salt-target-background-hover: var(--salt-palette-accent-weakest); + --salt-target-borderColor-hover: var(--salt-palette-accent); + --salt-focused-outlineColor: var(--salt-palette-accent-stronger); + --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-stronger-tertiary); + --salt-separable-primary-borderColor: var(--salt-palette-neutral-stronger-primary); + --salt-separable-secondary-borderColor: var(--salt-palette-neutral-stronger-secondary); +} diff --git a/packages/theme/css/characteristics/navigable.css b/packages/theme/css/characteristics/navigable.css index e0c2145eb7f..8b3e5658201 100644 --- a/packages/theme/css/characteristics/navigable.css +++ b/packages/theme/css/characteristics/navigable.css @@ -9,7 +9,6 @@ --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold); --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular); - /* arguably should be -background- ? or how do we know this is a color */ --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover); --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active); diff --git a/packages/theme/css/foundations/fade.css b/packages/theme/css/foundations/fade.css index bcb4de547ae..ed2797dffad 100644 --- a/packages/theme/css/foundations/fade.css +++ b/packages/theme/css/foundations/fade.css @@ -56,7 +56,6 @@ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled)); --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled)); - /* -separatorOpacity would be better off within -border collection ? */ --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border)); --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border)); --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border)); @@ -64,7 +63,6 @@ --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border)); --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border)); - /* These are the only tokens directly using opacity rather than through palette */ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8)); --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8)); } diff --git a/packages/theme/css/foundations/shadow.css b/packages/theme/css/foundations/shadow.css index 666c19af5e3..7fa72c06894 100644 --- a/packages/theme/css/foundations/shadow.css +++ b/packages/theme/css/foundations/shadow.css @@ -1,5 +1,4 @@ .salt-theme[data-mode="light"] { - /* these should probably be related to fade tokens with black value? */ --salt-shadow-100-color: rgba(0, 0, 0, 0.1); --salt-shadow-200-color: rgba(0, 0, 0, 0.1); --salt-shadow-300-color: rgba(0, 0, 0, 0.15); diff --git a/packages/theme/css/palette/palette-next.css b/packages/theme/css/palette/palette-next.css new file mode 100644 index 00000000000..136e3fa77ac --- /dev/null +++ b/packages/theme/css/palette/palette-next.css @@ -0,0 +1,181 @@ +/* NOTE: all CSS is auto generated using https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/29 */ + +.salt-theme.salt-theme-next[data-mode="light"] { + --salt-palette-accent: var(--salt-color-blue-500); + --salt-palette-accent-disabled: var(--salt-color-blue-500-40a); + --salt-palette-accent-strong: var(--salt-color-blue-600); + --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a); + --salt-palette-accent-stronger: var(--salt-color-blue-700); + --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a); + --salt-palette-accent-weak: var(--salt-color-blue-400); + --salt-palette-accent-weaker: var(--salt-color-blue-200); + --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); + --salt-palette-accent-weakest: var(--salt-color-blue-100); + --salt-palette-background-backdrop: var(--salt-color-white-70a); + --salt-palette-background-hover: var(--salt-color-black-8a); + --salt-palette-background-primary: var(--salt-color-snow); + --salt-palette-background-primary-disabled: var(--salt-color-snow-40a); + --salt-palette-background-secondary: var(--salt-color-mist); + --salt-palette-background-secondary-disabled: var(--salt-color-mist-40a); + --salt-palette-background-transparent: var(--salt-color-transparent); + --salt-palette-category-cat-1: var(--salt-color-cobalt-500); + --salt-palette-category-cat-1-strong: var(--salt-color-cobalt-600); + --salt-palette-category-cat-10: var(--salt-color-jade-500); + --salt-palette-category-cat-10-strong: var(--salt-color-jade-600); + --salt-palette-category-cat-11: var(--salt-color-citrine-500); + --salt-palette-category-cat-11-strong: var(--salt-color-citrine-600); + --salt-palette-category-cat-12: var(--salt-color-autumn-500); + --salt-palette-category-cat-12-strong: var(--salt-color-autumn-600); + --salt-palette-category-cat-13: var(--salt-color-lavender-500); + --salt-palette-category-cat-13-strong: var(--salt-color-lavender-600); + --salt-palette-category-cat-14: var(--salt-color-ocean-500); + --salt-palette-category-cat-14-strong: var(--salt-color-ocean-600); + --salt-palette-category-cat-15: var(--salt-color-smoke-500); + --salt-palette-category-cat-15-strong: var(--salt-color-smoke-600); + --salt-palette-category-cat-16: var(--salt-color-fuchsia-500); + --salt-palette-category-cat-16-strong: var(--salt-color-fuchsia-600); + --salt-palette-category-cat-17: var(--salt-color-lime-500); + --salt-palette-category-cat-17-strong: var(--salt-color-lime-600); + --salt-palette-category-cat-18: var(--salt-color-fur-500); + --salt-palette-category-cat-18-strong: var(--salt-color-fur-600); + --salt-palette-category-cat-19: var(--salt-color-violet-500); + --salt-palette-category-cat-19-strong: var(--salt-color-violet-600); + --salt-palette-category-cat-2: var(--salt-color-cider-500); + --salt-palette-category-cat-2-strong: var(--salt-color-cider-600); + --salt-palette-category-cat-20: var(--salt-color-forest-500); + --salt-palette-category-cat-20-strong: var(--salt-color-forest-600); + --salt-palette-category-cat-3: var(--salt-color-plum-500); + --salt-palette-category-cat-3-strong: var(--salt-color-plum-600); + --salt-palette-category-cat-4: var(--salt-color-aqua-500); + --salt-palette-category-cat-4-strong: var(--salt-color-aqua-600); + --salt-palette-category-cat-5: var(--salt-color-slate-500); + --salt-palette-category-cat-5-strong: var(--salt-color-slate-600); + --salt-palette-category-cat-6: var(--salt-color-rose-500); + --salt-palette-category-cat-6-strong: var(--salt-color-rose-600); + --salt-palette-category-cat-7: var(--salt-color-olive-500); + --salt-palette-category-cat-7-strong: var(--salt-color-olive-600); + --salt-palette-category-cat-8: var(--salt-color-salmon-500); + --salt-palette-category-cat-8-strong: var(--salt-color-salmon-600); + --salt-palette-category-cat-9: var(--salt-color-indigo-500); + --salt-palette-category-cat-9-strong: var(--salt-color-indigo-600); + --salt-palette-foreground-active: var(--salt-color-blue-700); + --salt-palette-foreground-hover: var(--salt-color-blue-600); + --salt-palette-foreground-invert: var(--salt-color-white); + --salt-palette-foreground-invert-disabled: var(--salt-color-white-40a); + --salt-palette-foreground-primary: var(--salt-color-black); + --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a); + --salt-palette-foreground-secondary: var(--salt-color-gray-700); + --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a); + --salt-palette-foreground-visited: var(--salt-color-purple-800); + --salt-palette-info: var(--salt-color-blue-600); + --salt-palette-info-weak: var(--salt-color-blue-100); + --salt-palette-negative: var(--salt-color-red-600); + --salt-palette-negative-weak: var(--salt-color-red-100); + --salt-palette-neutral: var(--salt-color-gray-500); + --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a); + --salt-palette-neutral-readonly: var(--salt-color-gray-500-15a); + --salt-palette-neutral-strong: var(--salt-color-gray-600); + --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a); + --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a); + --salt-palette-neutral-stronger-secondary: var(--salt-color-black-25a); + --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-15a); + --salt-palette-neutral-weak: var(--salt-color-gray-400); + --salt-palette-neutral-weaker: var(--salt-color-gray-300); + --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); + --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-15a); + --salt-palette-neutral-weakest: var(--salt-color-gray-200); + --salt-palette-positive: var(--salt-color-green-600); + --salt-palette-positive-weak: var(--salt-color-green-100); + --salt-palette-warning: var(--salt-color-orange-600); + --salt-palette-warning-weak: var(--salt-color-orange-100); +} + +.salt-theme.salt-theme-next[data-mode="dark"] { + --salt-palette-accent: var(--salt-color-blue-500); + --salt-palette-accent-disabled: var(--salt-color-blue-500-40a); + --salt-palette-accent-strong: var(--salt-color-blue-400); + --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a); + --salt-palette-accent-stronger: var(--salt-color-blue-300); + --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a); + --salt-palette-accent-weak: var(--salt-color-blue-600); + --salt-palette-accent-weaker: var(--salt-color-blue-800); + --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); + --salt-palette-accent-weakest: var(--salt-color-blue-900); + --salt-palette-background-backdrop: var(--salt-color-black-70a); + --salt-palette-background-hover: var(--salt-color-white-8a); + --salt-palette-background-primary: var(--salt-color-asphalt); + --salt-palette-background-primary-disabled: var(--salt-color-asphalt-40a); + --salt-palette-background-secondary: var(--salt-color-oil); + --salt-palette-background-secondary-disabled: var(--salt-color-oil-40a); + --salt-palette-background-transparent: var(--salt-color-transparent); + --salt-palette-category-cat-1: var(--salt-color-cobalt-500); + --salt-palette-category-cat-1-strong: var(--salt-color-cobalt-400); + --salt-palette-category-cat-10: var(--salt-color-jade-500); + --salt-palette-category-cat-10-strong: var(--salt-color-jade-400); + --salt-palette-category-cat-11: var(--salt-color-citrine-500); + --salt-palette-category-cat-11-strong: var(--salt-color-citrine-400); + --salt-palette-category-cat-12: var(--salt-color-autumn-500); + --salt-palette-category-cat-12-strong: var(--salt-color-autumn-400); + --salt-palette-category-cat-13: var(--salt-color-lavender-500); + --salt-palette-category-cat-13-strong: var(--salt-color-lavender-400); + --salt-palette-category-cat-14: var(--salt-color-ocean-500); + --salt-palette-category-cat-14-strong: var(--salt-color-ocean-400); + --salt-palette-category-cat-15: var(--salt-color-smoke-500); + --salt-palette-category-cat-15-strong: var(--salt-color-smoke-400); + --salt-palette-category-cat-16: var(--salt-color-fuchsia-500); + --salt-palette-category-cat-16-strong: var(--salt-color-fuchsia-400); + --salt-palette-category-cat-17: var(--salt-color-lime-500); + --salt-palette-category-cat-17-strong: var(--salt-color-lime-400); + --salt-palette-category-cat-18: var(--salt-color-fur-500); + --salt-palette-category-cat-18-strong: var(--salt-color-fur-400); + --salt-palette-category-cat-19: var(--salt-color-violet-500); + --salt-palette-category-cat-19-strong: var(--salt-color-violet-400); + --salt-palette-category-cat-2: var(--salt-color-cider-500); + --salt-palette-category-cat-2-strong: var(--salt-color-cider-400); + --salt-palette-category-cat-20: var(--salt-color-forest-500); + --salt-palette-category-cat-20-strong: var(--salt-color-forest-400); + --salt-palette-category-cat-3: var(--salt-color-plum-500); + --salt-palette-category-cat-3-strong: var(--salt-color-plum-400); + --salt-palette-category-cat-4: var(--salt-color-aqua-500); + --salt-palette-category-cat-4-strong: var(--salt-color-aqua-400); + --salt-palette-category-cat-5: var(--salt-color-slate-500); + --salt-palette-category-cat-5-strong: var(--salt-color-slate-400); + --salt-palette-category-cat-6: var(--salt-color-rose-500); + --salt-palette-category-cat-6-strong: var(--salt-color-rose-400); + --salt-palette-category-cat-7: var(--salt-color-olive-500); + --salt-palette-category-cat-7-strong: var(--salt-color-olive-400); + --salt-palette-category-cat-8: var(--salt-color-salmon-500); + --salt-palette-category-cat-8-strong: var(--salt-color-salmon-400); + --salt-palette-category-cat-9: var(--salt-color-indigo-500); + --salt-palette-category-cat-9-strong: var(--salt-color-indigo-400); + --salt-palette-foreground-active: var(--salt-color-blue-300); + --salt-palette-foreground-hover: var(--salt-color-blue-400); + --salt-palette-foreground-invert: var(--salt-color-black); + --salt-palette-foreground-invert-disabled: var(--salt-color-black-40a); + --salt-palette-foreground-primary: var(--salt-color-white); + --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a); + --salt-palette-foreground-secondary: var(--salt-color-gray-300); + --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a); + --salt-palette-foreground-visited: var(--salt-color-purple-200); + --salt-palette-info: var(--salt-color-blue-400); + --salt-palette-info-weak: var(--salt-color-blue-900); + --salt-palette-negative: var(--salt-color-red-400); + --salt-palette-negative-weak: var(--salt-color-red-900); + --salt-palette-neutral: var(--salt-color-gray-500); + --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a); + --salt-palette-neutral-readonly: var(--salt-color-gray-500-15a); + --salt-palette-neutral-strong: var(--salt-color-gray-400); + --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a); + --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a); + --salt-palette-neutral-stronger-secondary: var(--salt-color-white-25a); + --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-15a); + --salt-palette-neutral-weak: var(--salt-color-gray-600); + --salt-palette-neutral-weaker: var(--salt-color-gray-700); + --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a); + --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-15a); + --salt-palette-neutral-weakest: var(--salt-color-gray-800); + --salt-palette-positive: var(--salt-color-green-400); + --salt-palette-positive-weak: var(--salt-color-green-900); + --salt-palette-warning: var(--salt-color-orange-400); + --salt-palette-warning-weak: var(--salt-color-orange-900); +} diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index 8406e8e1e0d..e848df40db2 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -28,23 +28,6 @@ esbuild logLevel: "info", }) .then(() => { - // copy json - fs.copyFile( - path.resolve(__dirname, "../json/theme.json"), - path.join(buildFolder, "theme.json"), - (err) => { - if (err) throw err; - console.log( - `${path.relative( - process.cwd(), - path.resolve(__dirname, "../json/theme.json") - )} copied to ${path.relative( - process.cwd(), - path.join(buildFolder, "theme.json") - )}` - ); - } - ); // File destination.txt will be created or overwritten by default. fs.copyFile( path.resolve(__dirname, "../package.json"), diff --git a/tooling/stylelint/custom-property-attributes-kebab-case/index.js b/tooling/stylelint/custom-property-attributes-kebab-case/index.js index 54097502237..0dcc7ea8c12 100644 --- a/tooling/stylelint/custom-property-attributes-kebab-case/index.js +++ b/tooling/stylelint/custom-property-attributes-kebab-case/index.js @@ -1,12 +1,6 @@ "use strict"; -const allProperties = require("known-css-properties").all; - -/* excluding `accent-color` property so `--card-accent-color` is allowed */ -const properties = allProperties.filter( - (property) => property !== "accent-color" -); - +const properties = require("known-css-properties").all; const stylelint = require("stylelint"); const valueParser = require("postcss-value-parser"); From 36a57b569e6ce36774a63a03bcf41415ff0c4ea8 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 19 Mar 2024 11:58:49 -0400 Subject: [PATCH 42/50] file --- .../json/parsers/getCssVariablesFromDir.js | 166 ++++++++++-------- 1 file changed, 89 insertions(+), 77 deletions(-) diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js index d966d85d9ac..258fad086dd 100644 --- a/packages/theme/json/parsers/getCssVariablesFromDir.js +++ b/packages/theme/json/parsers/getCssVariablesFromDir.js @@ -1,25 +1,97 @@ const fs = require("fs"); const path = require("path"); -module.exports = function getCssVariablesFromDir(dirPath) { - const cssVariableRegex = /([a-zA-Z0-9_-]+)\s*:\s*([^;]+)/g; +const cssVariableRegex = /([a-zA-Z0-9_-]+)\s*:\s*([^;]+)/g; + +const lightModeRegex = /\.salt-theme\[data-mode="light"\].*?\{(.*?)\}.*?/s; +const darkModeRegex = /\.salt-theme\[data-mode="dark"\].*?\{(.*?)\}.*?/s; +const highDensityRegex = /\.salt-density-high.*?\{(.*?)\}.*?/s; +const mediumDensityRegex = /\.salt-density-medium.*?\{(.*?)\}.*?/s; +const lowDensityRegex = /\.salt-density-low.*?\{(.*?)\}.*?/s; +const touchDensityRegex = /\.salt-density-touch.*?\{(.*?)\}.*?/s; +const generalThemeRegex = /\.salt-theme.\{(.*?)\}.*?/s; + +const cssVariables = {}; +const lightModeVariables = {}; +const darkModeVariables = {}; +const hdVariables = {}; +const mdVariables = {}; +const ldVariables = {}; +const tdVariables = {}; + +function processFile(filePath) { + // Process CSS files + const cssContent = fs.readFileSync(filePath, "utf8"); - const lightModeRegex = /\.salt-theme\[data-mode="light"\].*?\{(.*?)\}.*?/s; - const darkModeRegex = /\.salt-theme\[data-mode="dark"\].*?\{(.*?)\}.*?/s; - const highDensityRegex = /\.salt-density-high.*?\{(.*?)\}.*?/s; - const mediumDensityRegex = /\.salt-density-medium.*?\{(.*?)\}.*?/s; - const lowDensityRegex = /\.salt-density-low.*?\{(.*?)\}.*?/s; - const touchDensityRegex = /\.salt-density-touch.*?\{(.*?)\}.*?/s; - const generalThemeRegex = /\.salt-theme.\{(.*?)\}.*?/s; + let match; + let lightContent = cssContent.match(lightModeRegex); + let darkContent = cssContent.match(darkModeRegex); + let generalContent = cssContent.match(generalThemeRegex); + let hdContent = cssContent.match(highDensityRegex); + let mdContent = cssContent.match(mediumDensityRegex); + let ldContent = cssContent.match(lowDensityRegex); + let tdContent = cssContent.match(touchDensityRegex); + + if (lightContent) { + while ((match = cssVariableRegex.exec(lightContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + lightModeVariables[variableName] = variableValue; + } + } + if (darkContent) { + while ((match = cssVariableRegex.exec(darkContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + darkModeVariables[variableName] = variableValue; + } + } + if (hdContent) { + while ((match = cssVariableRegex.exec(hdContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + hdVariables[variableName] = variableValue; + } + } + if (mdContent) { + while ((match = cssVariableRegex.exec(mdContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + mdVariables[variableName] = variableValue; + } + } + if (ldContent) { + while ((match = cssVariableRegex.exec(ldContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + ldVariables[variableName] = variableValue; + } + } + if (tdContent) { + while ((match = cssVariableRegex.exec(tdContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + tdVariables[variableName] = variableValue; + } + } + if (generalContent) { + while ((match = cssVariableRegex.exec(generalContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + cssVariables[variableName] = variableValue; + } + } +} - const cssVariables = {}; - const lightModeVariables = {}; - const darkModeVariables = {}; - const hdVariables = {}; - const mdVariables = {}; - const ldVariables = {}; - const tdVariables = {}; +module.exports = function getCssVariablesFromFile(filePath) { + const filePath = path.join("", file); + const stats = fs.statSync(filePath); + if (stats.isFile() && path.extname(file) === ".css") { + processFile(filePath); + } +}; +module.exports = function getCssVariablesFromDir(dirPath) { const files = fs.readdirSync(dirPath); files.forEach((file) => { @@ -34,67 +106,7 @@ module.exports = function getCssVariablesFromDir(dirPath) { path.extname(file) === ".css" && !filePath.includes("animation") ) { - // Process CSS files - const cssContent = fs.readFileSync(filePath, "utf8"); - - let match; - let lightContent = cssContent.match(lightModeRegex); - let darkContent = cssContent.match(darkModeRegex); - let generalContent = cssContent.match(generalThemeRegex); - let hdContent = cssContent.match(highDensityRegex); - let mdContent = cssContent.match(mediumDensityRegex); - let ldContent = cssContent.match(lowDensityRegex); - let tdContent = cssContent.match(touchDensityRegex); - - if (lightContent) { - while ((match = cssVariableRegex.exec(lightContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - lightModeVariables[variableName] = variableValue; - } - } - if (darkContent) { - while ((match = cssVariableRegex.exec(darkContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - darkModeVariables[variableName] = variableValue; - } - } - if (hdContent) { - while ((match = cssVariableRegex.exec(hdContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - hdVariables[variableName] = variableValue; - } - } - if (mdContent) { - while ((match = cssVariableRegex.exec(mdContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - mdVariables[variableName] = variableValue; - } - } - if (ldContent) { - while ((match = cssVariableRegex.exec(ldContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - ldVariables[variableName] = variableValue; - } - } - if (tdContent) { - while ((match = cssVariableRegex.exec(tdContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - tdVariables[variableName] = variableValue; - } - } - if (generalContent) { - while ((match = cssVariableRegex.exec(generalContent[0])) !== null) { - const variableName = match[1]; - const variableValue = match[2].trim(); - cssVariables[variableName] = variableValue; - } - } + processFile(filePath); } }); From f3ab07166962732c6fc6ff3ef7732ea40458315b Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 19 Mar 2024 14:51:32 -0400 Subject: [PATCH 43/50] pause --- .../json/parsers/getCssVariablesFromDir.js | 101 ++++++++++++------ packages/theme/json/parsers/themeToJson.js | 17 +-- packages/theme/json/theme.json | 14 +-- 3 files changed, 79 insertions(+), 53 deletions(-) diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js index 258fad086dd..5a1bcf81f16 100644 --- a/packages/theme/json/parsers/getCssVariablesFromDir.js +++ b/packages/theme/json/parsers/getCssVariablesFromDir.js @@ -11,6 +11,12 @@ const lowDensityRegex = /\.salt-density-low.*?\{(.*?)\}.*?/s; const touchDensityRegex = /\.salt-density-touch.*?\{(.*?)\}.*?/s; const generalThemeRegex = /\.salt-theme.\{(.*?)\}.*?/s; +const lightModeNextRegex = + /\.salt-theme-next\[data-mode="light"\].*?\{(.*?)\}.*?/s; +const darkModeNextRegex = + /\.salt-theme-next\[data-mode="dark"\].*?\{(.*?)\}.*?/s; +const generalThemeNextRegex = /\.salt-theme-next.\{(.*?)\}.*?/s; + const cssVariables = {}; const lightModeVariables = {}; const darkModeVariables = {}; @@ -24,13 +30,26 @@ function processFile(filePath) { const cssContent = fs.readFileSync(filePath, "utf8"); let match; - let lightContent = cssContent.match(lightModeRegex); - let darkContent = cssContent.match(darkModeRegex); - let generalContent = cssContent.match(generalThemeRegex); let hdContent = cssContent.match(highDensityRegex); let mdContent = cssContent.match(mediumDensityRegex); let ldContent = cssContent.match(lowDensityRegex); let tdContent = cssContent.match(touchDensityRegex); + let lightContent; + let darkContent; + let generalContent; + + if ( + filePath.includes("palette-next") || + filePath.includes("characteristics-next") + ) { + lightContent = cssContent.match(lightModeNextRegex); + darkContent = cssContent.match(darkModeNextRegex); + generalContent = cssContent.match(generalThemeNextRegex); + } else { + lightContent = cssContent.match(lightModeRegex); + darkContent = cssContent.match(darkModeRegex); + generalContent = cssContent.match(generalThemeRegex); + } if (lightContent) { while ((match = cssVariableRegex.exec(lightContent[0])) !== null) { @@ -83,40 +102,52 @@ function processFile(filePath) { } } -module.exports = function getCssVariablesFromFile(filePath) { - const filePath = path.join("", file); - const stats = fs.statSync(filePath); - if (stats.isFile() && path.extname(file) === ".css") { - processFile(filePath); - } -}; - -module.exports = function getCssVariablesFromDir(dirPath) { - const files = fs.readdirSync(dirPath); - - files.forEach((file) => { - const filePath = path.join(dirPath, file); +module.exports = { + fromFile: function getCssVariablesFromFile(filePath) { const stats = fs.statSync(filePath); - - if (stats.isDirectory()) { - // Recursively process subdirectories - Object.assign(cssVariables, getCssVariablesFromDir(filePath)); - } else if ( - stats.isFile() && - path.extname(file) === ".css" && - !filePath.includes("animation") - ) { + if (stats.isFile() && path.extname(filePath) === ".css") { processFile(filePath); } - }); - return { - light: lightModeVariables, - dark: darkModeVariables, - high: hdVariables, - medium: mdVariables, - low: ldVariables, - touch: tdVariables, - general: cssVariables, - }; + return { + light: lightModeVariables, + dark: darkModeVariables, + high: hdVariables, + medium: mdVariables, + low: ldVariables, + touch: tdVariables, + general: cssVariables, + }; + }, + fromDir: function getCssVariablesFromDir(dirPath) { + const files = fs.readdirSync(dirPath); + const foundations = files.map((file) => file.replace(".css", "")); + files.forEach((file) => { + const filePath = path.join(dirPath, file); + const fileName = file.replace(".css", ""); + const stats = fs.statSync(filePath); + + if (stats.isDirectory()) { + // Recursively process subdirectories + Object.assign(cssVariables, getCssVariablesFromDir(filePath)); + } else if ( + stats.isFile() && + path.extname(file) === ".css" && + !foundations.includes(`${fileName}-next`) && + fileName !== "fade" + ) { + processFile(filePath); + } + }); + + return { + light: lightModeVariables, + dark: darkModeVariables, + high: hdVariables, + medium: mdVariables, + low: ldVariables, + touch: tdVariables, + general: cssVariables, + }; + }, }; diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index 577bc9e8682..cd97e34e13c 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -1,6 +1,6 @@ const path = require("path"); const fs = require("fs"); -const getCssVariablesFromDir = require("./getCssVariablesFromDir"); +const { fromDir, fromFile } = require("./getCssVariablesFromDir"); const colorFormatSwap = require("./colorFormatSwap"); /* Removes surrounding CSS var('...') function from a token */ @@ -55,7 +55,7 @@ function addToJson(key, themeLevel, semantic, tokenName, type, tokenValue) { **/ function formatFoundationValue(semantic, tokenValue) { const alias = removePrefix(stripVarFunc(tokenValue)); - + console.log(semantic, alias); let foundationSemantic; switch (semantic) { case "corner": @@ -308,14 +308,17 @@ function format(variables) { } function themeToJson() { - const paletteVariables = getCssVariablesFromDir( - path.resolve(__dirname, "../../css/palette") + const paletteVariables = fromFile( + path.resolve(__dirname, "../../css/palette/palette-next.css") ); - const foundationVariables = getCssVariablesFromDir( + const foundationVariables = fromDir( path.resolve(__dirname, "../../css/foundations") ); - const characteristicVariables = getCssVariablesFromDir( - path.resolve(__dirname, "../../css/characteristics") + const characteristicVariables = fromFile( + path.resolve( + __dirname, + "../../css/characteristics/characteristics-next.css" + ) ); format({ $light: { diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index 2a26dd69259..ce26e0f839d 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -1,14 +1,6 @@ { - "modes": [ - "$light", - "$dark" - ], - "densities": [ - "$high", - "$medium", - "$low", - "$touch" - ], + "modes": ["$light", "$dark"], + "densities": ["$high", "$medium", "$low", "$touch"], "palette": { "accent": { "palette-accent-background": { @@ -2960,4 +2952,4 @@ } } } -} \ No newline at end of file +} From c562047d8eea8fa498e455b8ddb69cb5906538cb Mon Sep 17 00:00:00 2001 From: libertymayc Date: Tue, 19 Mar 2024 15:29:59 -0400 Subject: [PATCH 44/50] theme 2.0 --- .../theme/json/parsers/colorFormatSwap.js | 2 +- .../json/parsers/getCssVariablesFromDir.js | 152 +- packages/theme/json/parsers/themeToJson.js | 14 +- packages/theme/json/parsers/validate.js | 40 + packages/theme/json/theme.json | 1887 ++++++----------- packages/theme/scripts/build.mjs | 17 + .../index.js | 8 +- 7 files changed, 819 insertions(+), 1301 deletions(-) create mode 100644 packages/theme/json/parsers/validate.js diff --git a/packages/theme/json/parsers/colorFormatSwap.js b/packages/theme/json/parsers/colorFormatSwap.js index cc4ec3b3c6a..588fe764c3b 100644 --- a/packages/theme/json/parsers/colorFormatSwap.js +++ b/packages/theme/json/parsers/colorFormatSwap.js @@ -25,7 +25,7 @@ module.exports = function colorFormatSwap(swapTo, color) { .replace("rgba(", "") .replace(")", "") .split(",") - .map((x) => parseInt(x.trim())); + .map((x) => parseFloat(x.trim())); a = ((a * 255) | (1 << 8)).toString(16).slice(1).trim(); return rgbToHex(r, g, b) + a; } else { diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js index 5a1bcf81f16..8b794fe0576 100644 --- a/packages/theme/json/parsers/getCssVariablesFromDir.js +++ b/packages/theme/json/parsers/getCssVariablesFromDir.js @@ -17,15 +17,33 @@ const darkModeNextRegex = /\.salt-theme-next\[data-mode="dark"\].*?\{(.*?)\}.*?/s; const generalThemeNextRegex = /\.salt-theme-next.\{(.*?)\}.*?/s; -const cssVariables = {}; -const lightModeVariables = {}; -const darkModeVariables = {}; -const hdVariables = {}; -const mdVariables = {}; -const ldVariables = {}; -const tdVariables = {}; +function isNonColor(token) { + const tokenParts = token.split("-"); + const isColor = tokenParts.find((part) => + [ + "borderColor", + "foreground", + "background", + "outlineColor", + "indicator", + ].includes(part) + ); + return !isColor; +} -function processFile(filePath) { +function processFile( + filePath, + { + cssVariables, + lightModeVariables, + darkModeVariables, + hdVariables, + mdVariables, + ldVariables, + tdVariables, + }, + nonColors +) { // Process CSS files const cssContent = fs.readFileSync(filePath, "utf8"); @@ -54,59 +72,124 @@ function processFile(filePath) { if (lightContent) { while ((match = cssVariableRegex.exec(lightContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - lightModeVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + lightModeVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + lightModeVariables[variableName] = variableValue; + } } } if (darkContent) { while ((match = cssVariableRegex.exec(darkContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - darkModeVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + darkModeVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + darkModeVariables[variableName] = variableValue; + } } } if (hdContent) { while ((match = cssVariableRegex.exec(hdContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - hdVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + hdVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + hdVariables[variableName] = variableValue; + } } } if (mdContent) { while ((match = cssVariableRegex.exec(mdContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - mdVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + mdVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + mdVariables[variableName] = variableValue; + } } } if (ldContent) { while ((match = cssVariableRegex.exec(ldContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - ldVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + ldVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + ldVariables[variableName] = variableValue; + } } } if (tdContent) { while ((match = cssVariableRegex.exec(tdContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - tdVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + tdVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + tdVariables[variableName] = variableValue; + } } } if (generalContent) { while ((match = cssVariableRegex.exec(generalContent[0])) !== null) { const variableName = match[1]; - const variableValue = match[2].trim(); - cssVariables[variableName] = variableValue; + if (nonColors) { + if (isNonColor(variableName)) { + const variableValue = match[2].trim(); + cssVariables[variableName] = variableValue; + } + } else { + const variableValue = match[2].trim(); + cssVariables[variableName] = variableValue; + } } } } module.exports = { fromFile: function getCssVariablesFromFile(filePath) { + const cssVariables = {}; + const lightModeVariables = {}; + const darkModeVariables = {}; + const hdVariables = {}; + const mdVariables = {}; + const ldVariables = {}; + const tdVariables = {}; + const stats = fs.statSync(filePath); if (stats.isFile() && path.extname(filePath) === ".css") { - processFile(filePath); + processFile(filePath, { + cssVariables, + lightModeVariables, + darkModeVariables, + hdVariables, + mdVariables, + ldVariables, + tdVariables, + }); } return { @@ -119,7 +202,14 @@ module.exports = { general: cssVariables, }; }, - fromDir: function getCssVariablesFromDir(dirPath) { + fromDir: function getCssVariablesFromDir(dirPath, nonColors) { + const cssVariables = {}; + const lightModeVariables = {}; + const darkModeVariables = {}; + const hdVariables = {}; + const mdVariables = {}; + const ldVariables = {}; + const tdVariables = {}; const files = fs.readdirSync(dirPath); const foundations = files.map((file) => file.replace(".css", "")); files.forEach((file) => { @@ -136,7 +226,19 @@ module.exports = { !foundations.includes(`${fileName}-next`) && fileName !== "fade" ) { - processFile(filePath); + processFile( + filePath, + { + cssVariables, + lightModeVariables, + darkModeVariables, + hdVariables, + mdVariables, + ldVariables, + tdVariables, + }, + nonColors + ); } }); diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index cd97e34e13c..cf73084f078 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -55,7 +55,6 @@ function addToJson(key, themeLevel, semantic, tokenName, type, tokenValue) { **/ function formatFoundationValue(semantic, tokenValue) { const alias = removePrefix(stripVarFunc(tokenValue)); - console.log(semantic, alias); let foundationSemantic; switch (semantic) { case "corner": @@ -265,9 +264,6 @@ function format(variables) { if (tokenParts.find((part) => part === "textTransform")) { type = "textTransform"; } - if (tokenParts.find((part) => part === "fontStyle")) { - type = "fontStyle"; - } if (tokenParts.find((part) => part === "fontWeight")) { // Do we want to group text e.g. h1, h2? type = "fontWeight"; @@ -314,12 +310,20 @@ function themeToJson() { const foundationVariables = fromDir( path.resolve(__dirname, "../../css/foundations") ); - const characteristicVariables = fromFile( + let characteristicVariables = fromFile( path.resolve( __dirname, "../../css/characteristics/characteristics-next.css" ) ); + let characteristicsNonColors = fromDir( + path.resolve(__dirname, "../../css/characteristics"), + true + ); + characteristicVariables = { + ...characteristicVariables, + ...characteristicsNonColors, + }; format({ $light: { ...paletteVariables.light, diff --git a/packages/theme/json/parsers/validate.js b/packages/theme/json/parsers/validate.js new file mode 100644 index 00000000000..25ff10ee573 --- /dev/null +++ b/packages/theme/json/parsers/validate.js @@ -0,0 +1,40 @@ +const getJson = require("./themeToJson"); + +const themeJson = getJson(); + +function check(jsonPath) { + for (const token of Object.entries(jsonPath[1])) { + if ( + typeof token[1]["$value"] === "string" && + token[1]["$value"].startsWith("{") && + token[1]["$value"].endsWith("}") + ) { + const jsonPathReference = token[1]["$value"].slice(1, -1).split("."); + let findValue = themeJson; + for (var p of jsonPathReference) { + findValue = findValue[p]; + if (!findValue) { + console.log(`Cannot find path ${jsonPathReference.join(".")}`); + break; + } + } + if (findValue && !findValue["$value"]) { + console.log(`Path found ${findValue} but no value defined`); + } + } + } +} + +function validate() { + for (const entry of Object.entries(themeJson.palette)) { + check(entry); + } + for (const entry of Object.entries(themeJson.foundations)) { + check(entry); + } + for (const entry of Object.entries(themeJson.characteristics)) { + check(entry); + } +} + +validate(); diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index ce26e0f839d..a7b96570a4a 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -3,692 +3,667 @@ "densities": ["$high", "$medium", "$low", "$touch"], "palette": { "accent": { - "palette-accent-background": { + "palette-accent": { "$value": { "$dark": "{foundations.color.color-blue-500}", "$light": "{foundations.color.color-blue-500}" }, "$type": "color" }, - "palette-accent-border": { + "palette-accent-disabled": { "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" + "$dark": "{foundations.color.color-blue-500-40a}", + "$light": "{foundations.color.color-blue-500-40a}" }, "$type": "color" }, - "palette-accent-foreground": { + "palette-accent-strong": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-blue-400}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" - } - }, - "error": { - "palette-error-background": { + }, + "palette-accent-strong-disabled": { "$value": { - "$dark": "{foundations.color.color-red-900}", - "$light": "{foundations.color.color-red-10}" + "$dark": "{foundations.color.color-blue-400-40a}", + "$light": "{foundations.color.color-blue-600-40a}" }, "$type": "color" }, - "palette-error-background-selected": { + "palette-accent-stronger": { "$value": { - "$dark": "{foundations.color.color-red-900}", - "$light": "{foundations.color.color-red-20}" + "$dark": "{foundations.color.color-blue-300}", + "$light": "{foundations.color.color-blue-700}" }, "$type": "color" }, - "palette-error-border": { + "palette-accent-stronger-disabled": { "$value": { - "$dark": "{foundations.color.color-red-500}", - "$light": "{foundations.color.color-red-500}" + "$dark": "{foundations.color.color-blue-300-40a}", + "$light": "{foundations.color.color-blue-700-40a}" }, "$type": "color" }, - "palette-error-foreground": { + "palette-accent-weak": { "$value": { - "$dark": "{foundations.color.color-red-500}", - "$light": "{foundations.color.color-red-500}" + "$dark": "{foundations.color.color-blue-600}", + "$light": "{foundations.color.color-blue-400}" }, "$type": "color" - } - }, - "info": { - "palette-info-background": { + }, + "palette-accent-weaker": { "$value": { - "$dark": "{foundations.color.color-blue-900}", - "$light": "{foundations.color.color-blue-10}" + "$dark": "{foundations.color.color-blue-800}", + "$light": "{foundations.color.color-blue-200}" }, "$type": "color" }, - "palette-info-border": { + "palette-accent-weaker-disabled": { "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" + "$dark": "{foundations.color.color-blue-800-40a}", + "$light": "{foundations.color.color-blue-200-40a}" }, "$type": "color" }, - "palette-info-foreground": { + "palette-accent-weakest": { "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" + "$dark": "{foundations.color.color-blue-900}", + "$light": "{foundations.color.color-blue-100}" }, "$type": "color" } }, - "interact": { - "palette-interact-background": { + "background": { + "palette-background-backdrop": { "$value": { - "$dark": "transparent", - "$light": "transparent" + "$dark": "{foundations.color.color-black-70a}", + "$light": "{foundations.color.color-white-70a}" }, "$type": "color" }, - "palette-interact-background-blurSelected": { + "palette-background-hover": { "$value": { - "$dark": "{foundations.color.color-gray-600}", - "$light": "{foundations.color.color-gray-30}" + "$dark": "{foundations.color.color-white-8a}", + "$light": "{foundations.color.color-black-8a}" }, "$type": "color" }, - "palette-interact-background-hover": { + "palette-background-primary": { "$value": { - "$dark": "{foundations.color.color-blue-800}", - "$light": "{foundations.color.color-blue-10}" + "$dark": "{foundations.color.color-asphalt}", + "$light": "{foundations.color.color-snow}" }, "$type": "color" }, - "palette-interact-background-active": { + "palette-background-primary-disabled": { "$value": { - "$dark": "{foundations.color.color-blue-700}", - "$light": "{foundations.color.color-blue-30}" + "$dark": "{foundations.color.color-asphalt-40a}", + "$light": "{foundations.color.color-snow-40a}" }, "$type": "color" }, - "palette-interact-background-disabled": { + "palette-background-secondary": { "$value": { - "$dark": "transparent", - "$light": "transparent" + "$dark": "{foundations.color.color-oil}", + "$light": "{foundations.color.color-mist}" }, "$type": "color" }, - "palette-interact-background-activeDisabled": { + "palette-background-secondary-disabled": { "$value": { - "$dark": "{foundations.color.color-blue-700-fade-background}", - "$light": "{foundations.color.color-blue-30-fade-background}" + "$dark": "{foundations.color.color-oil-40a}", + "$light": "{foundations.color.color-mist-40a}" }, "$type": "color" }, - "palette-interact-border": { + "palette-background-transparent": { "$value": { - "$dark": "{foundations.color.color-gray-90}", - "$light": "{foundations.color.color-gray-200}" + "$dark": "{foundations.color.color-transparent}", + "$light": "{foundations.color.color-transparent}" }, "$type": "color" - }, - "palette-interact-border-active": { + } + }, + "category": { + "palette-category-cat-1": { "$value": { - "$dark": "{foundations.color.color-blue-100}", - "$light": "{foundations.color.color-blue-600}" + "$dark": "{foundations.color.color-cobalt-500}", + "$light": "{foundations.color.color-cobalt-500}" }, "$type": "color" }, - "palette-interact-border-activeDisabled": { + "palette-category-cat-1-strong": { "$value": { - "$dark": "{foundations.color.color-blue-100-fade-fill}", - "$light": "{foundations.color.color-blue-600-fade-fill}" + "$dark": "{foundations.color.color-cobalt-400}", + "$light": "{foundations.color.color-cobalt-600}" }, "$type": "color" }, - "palette-interact-border-disabled": { + "palette-category-cat-10": { "$value": { - "$dark": "{foundations.color.color-gray-90-fade-border}", - "$light": "{foundations.color.color-gray-200-fade-border}" + "$dark": "{foundations.color.color-jade-500}", + "$light": "{foundations.color.color-jade-500}" }, "$type": "color" }, - "palette-interact-border-hover": { + "palette-category-cat-10-strong": { "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" + "$dark": "{foundations.color.color-jade-400}", + "$light": "{foundations.color.color-jade-600}" }, "$type": "color" }, - "palette-interact-border-readonly": { + "palette-category-cat-11": { "$value": { - "$dark": "{foundations.color.color-gray-90-fade-border-readonly}", - "$light": "{foundations.color.color-gray-200-fade-border-readonly}" + "$dark": "{foundations.color.color-citrine-500}", + "$light": "{foundations.color.color-citrine-500}" }, "$type": "color" }, - "palette-interact-foreground": { + "palette-category-cat-11-strong": { "$value": { - "$dark": "{foundations.color.color-gray-90}", - "$light": "{foundations.color.color-gray-200}" + "$dark": "{foundations.color.color-citrine-400}", + "$light": "{foundations.color.color-citrine-600}" }, "$type": "color" }, - "palette-interact-foreground-active": { + "palette-category-cat-12": { "$value": { - "$dark": "{foundations.color.color-blue-100}", - "$light": "{foundations.color.color-blue-600}" + "$dark": "{foundations.color.color-autumn-500}", + "$light": "{foundations.color.color-autumn-500}" }, "$type": "color" }, - "palette-interact-foreground-activeDisabled": { + "palette-category-cat-12-strong": { "$value": { - "$dark": "{foundations.color.color-blue-100-fade-foreground}", - "$light": "{foundations.color.color-blue-600-fade-foreground}" + "$dark": "{foundations.color.color-autumn-400}", + "$light": "{foundations.color.color-autumn-600}" }, "$type": "color" }, - "palette-interact-foreground-disabled": { + "palette-category-cat-13": { "$value": { - "$dark": "{foundations.color.color-gray-90-fade-foreground}", - "$light": "{foundations.color.color-gray-200-fade-foreground}" + "$dark": "{foundations.color.color-lavender-500}", + "$light": "{foundations.color.color-lavender-500}" }, "$type": "color" }, - "palette-interact-foreground-hover": { + "palette-category-cat-13-strong": { "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" + "$dark": "{foundations.color.color-lavender-400}", + "$light": "{foundations.color.color-lavender-600}" }, "$type": "color" }, - "palette-interact-outline": { + "palette-category-cat-14": { "$value": { - "$dark": "{foundations.color.color-blue-100}", - "$light": "{foundations.color.color-blue-600}" + "$dark": "{foundations.color.color-ocean-500}", + "$light": "{foundations.color.color-ocean-500}" }, "$type": "color" }, - "palette-interact-cta-background": { + "palette-category-cat-14-strong": { "$value": { - "$dark": "{foundations.color.color-blue-600}", - "$light": "{foundations.color.color-blue-600}" + "$dark": "{foundations.color.color-ocean-400}", + "$light": "{foundations.color.color-ocean-600}" }, "$type": "color" }, - "palette-interact-cta-background-active": { + "palette-category-cat-15": { "$value": { - "$dark": "{foundations.color.color-blue-700}", - "$light": "{foundations.color.color-blue-700}" + "$dark": "{foundations.color.color-smoke-500}", + "$light": "{foundations.color.color-smoke-500}" }, "$type": "color" }, - "palette-interact-cta-background-disabled": { + "palette-category-cat-15-strong": { "$value": { - "$dark": "{foundations.color.color-blue-600-fade-background}", - "$light": "{foundations.color.color-blue-600-fade-background}" + "$dark": "{foundations.color.color-smoke-400}", + "$light": "{foundations.color.color-smoke-600}" }, "$type": "color" }, - "palette-interact-cta-background-hover": { + "palette-category-cat-16": { "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" + "$dark": "{foundations.color.color-fuchsia-500}", + "$light": "{foundations.color.color-fuchsia-500}" }, "$type": "color" }, - "palette-interact-cta-foreground": { + "palette-category-cat-16-strong": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-fuchsia-400}", + "$light": "{foundations.color.color-fuchsia-600}" }, "$type": "color" }, - "palette-interact-cta-foreground-active": { + "palette-category-cat-17": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-lime-500}", + "$light": "{foundations.color.color-lime-500}" }, "$type": "color" }, - "palette-interact-cta-foreground-disabled": { + "palette-category-cat-17-strong": { "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-white-fade-foreground}" + "$dark": "{foundations.color.color-lime-400}", + "$light": "{foundations.color.color-lime-600}" }, "$type": "color" }, - "palette-interact-cta-foreground-hover": { + "palette-category-cat-18": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-fur-500}", + "$light": "{foundations.color.color-fur-500}" }, "$type": "color" }, - "palette-interact-primary-background": { + "palette-category-cat-18-strong": { "$value": { - "$dark": "{foundations.color.color-gray-300}", - "$light": "{foundations.color.color-gray-60}" + "$dark": "{foundations.color.color-fur-400}", + "$light": "{foundations.color.color-fur-600}" }, "$type": "color" }, - "palette-interact-primary-background-active": { + "palette-category-cat-19": { "$value": { - "$dark": "{foundations.color.color-gray-70}", - "$light": "{foundations.color.color-gray-200}" + "$dark": "{foundations.color.color-violet-500}", + "$light": "{foundations.color.color-violet-500}" }, "$type": "color" }, - "palette-interact-primary-background-disabled": { + "palette-category-cat-19-strong": { "$value": { - "$dark": "{foundations.color.color-gray-300-fade-background}", - "$light": "{foundations.color.color-gray-60-fade-background}" + "$dark": "{foundations.color.color-violet-400}", + "$light": "{foundations.color.color-violet-600}" }, "$type": "color" }, - "palette-interact-primary-background-hover": { + "palette-category-cat-2": { "$value": { - "$dark": "{foundations.color.color-gray-200}", - "$light": "{foundations.color.color-gray-40}" + "$dark": "{foundations.color.color-cider-500}", + "$light": "{foundations.color.color-cider-500}" }, "$type": "color" }, - "palette-interact-primary-foreground": { + "palette-category-cat-2-strong": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" + "$dark": "{foundations.color.color-cider-400}", + "$light": "{foundations.color.color-cider-600}" }, "$type": "color" }, - "palette-interact-primary-foreground-active": { + "palette-category-cat-20": { "$value": { - "$dark": "{foundations.color.color-gray-900}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-forest-500}", + "$light": "{foundations.color.color-forest-500}" }, "$type": "color" }, - "palette-interact-primary-foreground-disabled": { + "palette-category-cat-20-strong": { "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-gray-900-fade-foreground}" + "$dark": "{foundations.color.color-forest-400}", + "$light": "{foundations.color.color-forest-600}" }, "$type": "color" }, - "palette-interact-primary-foreground-hover": { + "palette-category-cat-3": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" + "$dark": "{foundations.color.color-plum-500}", + "$light": "{foundations.color.color-plum-500}" }, "$type": "color" }, - "palette-interact-secondary-background": { + "palette-category-cat-3-strong": { "$value": { - "$dark": "transparent", - "$light": "transparent" + "$dark": "{foundations.color.color-plum-400}", + "$light": "{foundations.color.color-plum-600}" }, "$type": "color" }, - "palette-interact-secondary-background-active": { + "palette-category-cat-4": { "$value": { - "$dark": "{foundations.color.color-gray-70}", - "$light": "{foundations.color.color-gray-200}" + "$dark": "{foundations.color.color-aqua-500}", + "$light": "{foundations.color.color-aqua-500}" }, "$type": "color" }, - "palette-interact-secondary-background-disabled": { + "palette-category-cat-4-strong": { "$value": { - "$dark": "transparent", - "$light": "transparent" + "$dark": "{foundations.color.color-aqua-400}", + "$light": "{foundations.color.color-aqua-600}" }, "$type": "color" }, - "palette-interact-secondary-background-hover": { + "palette-category-cat-5": { "$value": { - "$dark": "{foundations.color.color-gray-200}", - "$light": "{foundations.color.color-gray-40}" + "$dark": "{foundations.color.color-slate-500}", + "$light": "{foundations.color.color-slate-500}" }, "$type": "color" }, - "palette-interact-secondary-foreground": { + "palette-category-cat-5-strong": { "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" + "$dark": "{foundations.color.color-slate-400}", + "$light": "{foundations.color.color-slate-600}" }, "$type": "color" }, - "palette-interact-secondary-foreground-active": { + "palette-category-cat-6": { "$value": { - "$dark": "{foundations.color.color-gray-900}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-rose-500}", + "$light": "{foundations.color.color-rose-500}" }, "$type": "color" }, - "palette-interact-secondary-foreground-disabled": { + "palette-category-cat-6-strong": { "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-gray-900-fade-foreground}" + "$dark": "{foundations.color.color-rose-400}", + "$light": "{foundations.color.color-rose-600}" }, "$type": "color" }, - "palette-interact-secondary-foreground-hover": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - } - }, - "navigate": { - "palette-navigate-background-hover": { + "palette-category-cat-7": { "$value": { - "$dark": "{foundations.color.color-white-fade-background-hover}", - "$light": "{foundations.color.color-black-fade-background-hover}" + "$dark": "{foundations.color.color-olive-500}", + "$light": "{foundations.color.color-olive-500}" }, "$type": "color" }, - "palette-navigate-foreground-hover": { + "palette-category-cat-7-strong": { "$value": { - "$dark": "{foundations.color.color-blue-200}", - "$light": "{foundations.color.color-blue-600}" + "$dark": "{foundations.color.color-olive-400}", + "$light": "{foundations.color.color-olive-600}" }, "$type": "color" }, - "palette-navigate-foreground-active": { + "palette-category-cat-8": { "$value": { - "$dark": "{foundations.color.color-blue-300}", - "$light": "{foundations.color.color-blue-700}" + "$dark": "{foundations.color.color-salmon-500}", + "$light": "{foundations.color.color-salmon-500}" }, "$type": "color" }, - "palette-navigate-foreground-visited": { + "palette-category-cat-8-strong": { "$value": { - "$dark": "{foundations.color.color-purple-100}", - "$light": "{foundations.color.color-purple-800}" + "$dark": "{foundations.color.color-salmon-400}", + "$light": "{foundations.color.color-salmon-600}" }, "$type": "color" }, - "palette-navigate-indicator-hover": { + "palette-category-cat-9": { "$value": { - "$dark": "{foundations.color.color-gray-90}", - "$light": "{foundations.color.color-gray-90}" + "$dark": "{foundations.color.color-indigo-500}", + "$light": "{foundations.color.color-indigo-500}" }, "$type": "color" }, - "palette-navigate-indicator-active": { + "palette-category-cat-9-strong": { "$value": { - "$dark": "{foundations.color.color-orange-400}", - "$light": "{foundations.color.color-orange-600}" + "$dark": "{foundations.color.color-indigo-400}", + "$light": "{foundations.color.color-indigo-600}" }, "$type": "color" } }, - "negative": { - "palette-negative-foreground": { + "foreground": { + "palette-foreground-active": { "$value": { - "$dark": "{foundations.color.color-red-300}", - "$light": "{foundations.color.color-red-700}" + "$dark": "{foundations.color.color-blue-300}", + "$light": "{foundations.color.color-blue-700}" }, "$type": "color" - } - }, - "neutral": { - "palette-neutral-primary-background": { + }, + "palette-foreground-hover": { "$value": { - "$dark": "{foundations.color.color-gray-800}", - "$light": "{foundations.color.color-white}" + "$dark": "{foundations.color.color-blue-400}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-neutral-primary-background-disabled": { + "palette-foreground-invert": { "$value": { - "$dark": "{foundations.color.color-gray-800-fade-background}", - "$light": "{foundations.color.color-white-fade-background}" + "$dark": "{foundations.color.color-black}", + "$light": "{foundations.color.color-white}" }, "$type": "color" }, - "palette-neutral-primary-background-readonly": { + "palette-foreground-invert-disabled": { "$value": { - "$dark": "{foundations.color.color-gray-800-fade-background-readonly}", - "$light": "{foundations.color.color-white-fade-background-readonly}" + "$dark": "{foundations.color.color-black-40a}", + "$light": "{foundations.color.color-white-40a}" }, "$type": "color" }, - "palette-neutral-primary-foreground": { + "palette-foreground-primary": { "$value": { "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" + "$light": "{foundations.color.color-black}" }, "$type": "color" }, - "palette-neutral-primary-foreground-disabled": { + "palette-foreground-primary-disabled": { "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-gray-900-fade-foreground}" + "$dark": "{foundations.color.color-white-40a}", + "$light": "{foundations.color.color-black-40a}" }, "$type": "color" }, - "palette-neutral-primary-separator": { + "palette-foreground-secondary": { "$value": { - "$dark": "{foundations.color.color-white-fade-separatorOpacity-primary}", - "$light": "{foundations.color.color-black-fade-separatorOpacity-primary}" + "$dark": "{foundations.color.color-gray-300}", + "$light": "{foundations.color.color-gray-700}" }, "$type": "color" }, - "palette-neutral-primary-border": { + "palette-foreground-secondary-disabled": { "$value": { - "$dark": "{foundations.color.color-gray-300}", - "$light": "{foundations.color.color-gray-50}" + "$dark": "{foundations.color.color-gray-300-40a}", + "$light": "{foundations.color.color-gray-700-40a}" }, "$type": "color" }, - "palette-neutral-primary-border-disabled": { + "palette-foreground-visited": { "$value": { - "$dark": "{foundations.color.color-gray-300-fade-border}", - "$light": "{foundations.color.color-gray-50-fade-border}" + "$dark": "{foundations.color.color-purple-200}", + "$light": "{foundations.color.color-purple-800}" }, "$type": "color" - }, - "palette-neutral-secondary-background": { + } + }, + "info": { + "palette-info": { "$value": { - "$dark": "{foundations.color.color-gray-600}", - "$light": "{foundations.color.color-gray-20}" + "$dark": "{foundations.color.color-blue-400}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-neutral-secondary-background-disabled": { + "palette-info-weak": { + "$value": { + "$dark": "{foundations.color.color-blue-900}", + "$light": "{foundations.color.color-blue-100}" + }, + "$type": "color" + } + }, + "negative": { + "palette-negative": { "$value": { - "$dark": "{foundations.color.color-gray-600-fade-background}", - "$light": "{foundations.color.color-gray-20-fade-background}" + "$dark": "{foundations.color.color-red-400}", + "$light": "{foundations.color.color-red-600}" }, "$type": "color" }, - "palette-neutral-secondary-background-readonly": { + "palette-negative-weak": { "$value": { - "$dark": "{foundations.color.color-gray-600-fade-background-readonly}", - "$light": "{foundations.color.color-gray-20-fade-background-readonly}" + "$dark": "{foundations.color.color-red-900}", + "$light": "{foundations.color.color-red-100}" + }, + "$type": "color" + } + }, + "neutral": { + "palette-neutral": { + "$value": { + "$dark": "{foundations.color.color-gray-500}", + "$light": "{foundations.color.color-gray-500}" }, "$type": "color" }, - "palette-neutral-secondary-border": { + "palette-neutral-disabled": { "$value": { - "$dark": "{foundations.color.color-gray-300}", - "$light": "{foundations.color.color-gray-50}" + "$dark": "{foundations.color.color-gray-500-40a}", + "$light": "{foundations.color.color-gray-500-40a}" }, "$type": "color" }, - "palette-neutral-secondary-border-disabled": { + "palette-neutral-readonly": { "$value": { - "$dark": "{foundations.color.color-gray-300-fade-border}", - "$light": "{foundations.color.color-gray-50-fade-border}" + "$dark": "{foundations.color.color-gray-500-15a}", + "$light": "{foundations.color.color-gray-500-15a}" }, "$type": "color" }, - "palette-neutral-secondary-foreground": { + "palette-neutral-strong": { "$value": { - "$dark": "{foundations.color.color-gray-70}", - "$light": "{foundations.color.color-gray-200}" + "$dark": "{foundations.color.color-gray-400}", + "$light": "{foundations.color.color-gray-600}" }, "$type": "color" }, - "palette-neutral-secondary-foreground-disabled": { + "palette-neutral-strong-disabled": { "$value": { - "$dark": "{foundations.color.color-gray-70-fade-foreground}", - "$light": "{foundations.color.color-gray-200-fade-foreground}" + "$dark": "{foundations.color.color-gray-400-40a}", + "$light": "{foundations.color.color-gray-600-40a}" }, "$type": "color" }, - "palette-neutral-backdrop": { + "palette-neutral-stronger-primary": { "$value": { - "$dark": "{foundations.color.color-black-fade-backdrop}", - "$light": "{foundations.color.color-white-fade-backdrop}" + "$dark": "{foundations.color.color-white-40a}", + "$light": "{foundations.color.color-black-40a}" }, "$type": "color" }, - "palette-neutral-secondary-separator": { + "palette-neutral-stronger-secondary": { "$value": { - "$dark": "{foundations.color.color-white-fade-separatorOpacity-secondary}", - "$light": "{foundations.color.color-black-fade-separatorOpacity-secondary}" + "$dark": "{foundations.color.color-white-25a}", + "$light": "{foundations.color.color-black-25a}" }, "$type": "color" }, - "palette-neutral-tertiary-separator": { + "palette-neutral-stronger-tertiary": { "$value": { - "$dark": "{foundations.color.color-white-fade-separatorOpacity-tertiary}", - "$light": "{foundations.color.color-black-fade-separatorOpacity-tertiary}" + "$dark": "{foundations.color.color-white-15a}", + "$light": "{foundations.color.color-black-15a}" }, "$type": "color" - } - }, - "positive": { - "palette-positive-foreground": { + }, + "palette-neutral-weak": { "$value": { - "$dark": "{foundations.color.color-green-300}", - "$light": "{foundations.color.color-green-700}" + "$dark": "{foundations.color.color-gray-600}", + "$light": "{foundations.color.color-gray-400}" }, "$type": "color" - } - }, - "success": { - "palette-success-background": { + }, + "palette-neutral-weaker": { "$value": { - "$dark": "{foundations.color.color-green-900}", - "$light": "{foundations.color.color-green-10}" + "$dark": "{foundations.color.color-gray-700}", + "$light": "{foundations.color.color-gray-300}" }, "$type": "color" }, - "palette-success-background-selected": { + "palette-neutral-weaker-disabled": { "$value": { - "$dark": "{foundations.color.color-green-900}", - "$light": "{foundations.color.color-green-20}" + "$dark": "{foundations.color.color-gray-700-40a}", + "$light": "{foundations.color.color-gray-300-40a}" }, "$type": "color" }, - "palette-success-border": { + "palette-neutral-weaker-readonly": { "$value": { - "$dark": "{foundations.color.color-green-400}", - "$light": "{foundations.color.color-green-500}" + "$dark": "{foundations.color.color-gray-700-15a}", + "$light": "{foundations.color.color-gray-300-15a}" }, "$type": "color" }, - "palette-success-foreground": { + "palette-neutral-weakest": { "$value": { - "$dark": "{foundations.color.color-green-400}", - "$light": "{foundations.color.color-green-500}" + "$dark": "{foundations.color.color-gray-800}", + "$light": "{foundations.color.color-gray-200}" }, "$type": "color" } }, - "warning": { - "palette-warning-background": { + "positive": { + "palette-positive": { "$value": { - "$dark": "{foundations.color.color-orange-900}", - "$light": "{foundations.color.color-orange-10}" + "$dark": "{foundations.color.color-green-400}", + "$light": "{foundations.color.color-green-600}" }, "$type": "color" }, - "palette-warning-background-selected": { + "palette-positive-weak": { "$value": { - "$dark": "{foundations.color.color-orange-900}", - "$light": "{foundations.color.color-orange-20}" + "$dark": "{foundations.color.color-green-900}", + "$light": "{foundations.color.color-green-100}" }, "$type": "color" - }, - "palette-warning-border": { + } + }, + "warning": { + "palette-warning": { "$value": { - "$dark": "{foundations.color.color-orange-500}", - "$light": "{foundations.color.color-orange-700}" + "$dark": "{foundations.color.color-orange-400}", + "$light": "{foundations.color.color-orange-600}" }, "$type": "color" }, - "palette-warning-foreground": { + "palette-warning-weak": { "$value": { - "$dark": "{foundations.color.color-orange-500}", - "$light": "{foundations.color.color-orange-700}" + "$dark": "{foundations.color.color-orange-900}", + "$light": "{foundations.color.color-orange-100}" }, "$type": "color" } - }, - "opacity": { - "palette-opacity-backdrop": { - "$value": "{foundations.opacity.opacity-70}", - "$type": "number" - }, - "palette-opacity-disabled": { - "$value": "{foundations.opacity.opacity-40}", - "$type": "number" - }, - "palette-opacity-background-readonly": { - "$value": "{foundations.opacity.opacity-0}", - "$type": "number" - }, - "palette-opacity-border-readonly": { - "$value": "{foundations.opacity.opacity-15}", - "$type": "number" - }, - "palette-opacity-primary-border": { - "$value": "{foundations.opacity.opacity-40}", - "$type": "number" - }, - "palette-opacity-secondary-border": { - "$value": "{foundations.opacity.opacity-25}", - "$type": "number" - }, - "palette-opacity-tertiary-border": { - "$value": "{foundations.opacity.opacity-15}", - "$type": "number" - } } }, "foundations": { "shadow": { "shadow-100-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "#0000007f", + "$light": "#00000019" }, "$type": "color" }, "shadow-200-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "#0000007f", + "$light": "#00000019" }, "$type": "color" }, "shadow-300-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "#0000008c", + "$light": "#00000026" }, "$type": "color" }, "shadow-400-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "#0000008c", + "$light": "#00000033" }, "$type": "color" }, "shadow-500-color": { "$value": { - "$dark": "#00000000", - "$light": "#00000000" + "$dark": "#000000a5", + "$light": "#0000004c" }, "$type": "color" }, @@ -838,10 +813,10 @@ }, "size-indicator": { "$value": { - "$low": "3px", - "$touch": "4px", - "$medium": "2px", - "$high": "1px" + "$low": "4px", + "$touch": "5px", + "$medium": "3px", + "$high": "2px" }, "$type": "dimension" }, @@ -977,826 +952,640 @@ } }, "color": { - "color-white": { - "$value": "#ffffff", + "color-aqua-400": { + "$value": "#6fdbde", "$type": "color" }, - "color-black": { - "$value": "#000000", + "color-aqua-500": { + "$value": "#2a8285", "$type": "color" }, - "color-red-10": { - "$value": "#ffe3e0", + "color-aqua-600": { + "$value": "#155c5e", "$type": "color" }, - "color-red-20": { - "$value": "#ffcfc9", + "color-asphalt": { + "$value": "#18191a", "$type": "color" }, - "color-red-30": { - "$value": "#ffbbb2", + "color-asphalt-40a": { + "$value": "#18191a66", "$type": "color" }, - "color-red-40": { - "$value": "#ffa79c", + "color-autumn-400": { + "$value": "#f29f63", "$type": "color" }, - "color-red-50": { - "$value": "#ff9485", + "color-autumn-500": { + "$value": "#bd5b15", "$type": "color" }, - "color-red-100": { - "$value": "#ff806f", + "color-autumn-600": { + "$value": "#803a08", "$type": "color" }, - "color-red-200": { - "$value": "#ff6c58", + "color-black": { + "$value": "#000000", "$type": "color" }, - "color-red-300": { - "$value": "#ff5942", + "color-black-15a": { + "$value": "#00000026", "$type": "color" }, - "color-red-400": { - "$value": "#ed412a", + "color-black-25a": { + "$value": "#0000003f", "$type": "color" }, - "color-red-500": { - "$value": "#e32b16", + "color-black-40a": { + "$value": "#00000066", "$type": "color" }, - "color-red-600": { - "$value": "#c42010", + "color-black-70a": { + "$value": "#000000b2", "$type": "color" }, - "color-red-700": { - "$value": "#a6150b", + "color-black-8a": { + "$value": "#00000014", "$type": "color" }, - "color-red-800": { - "$value": "#880a05", + "color-blue-100": { + "$value": "#cae7fc", "$type": "color" }, - "color-red-900": { - "$value": "#412522", + "color-blue-200": { + "$value": "#a7cbea", "$type": "color" }, - "color-orange-10": { - "$value": "#ffe8bf", + "color-blue-200-40a": { + "$value": "#a7cbea66", "$type": "color" }, - "color-orange-20": { - "$value": "#fedfa6", + "color-blue-300": { + "$value": "#83b0d8", "$type": "color" }, - "color-orange-30": { - "$value": "#fed68e", + "color-blue-300-40a": { + "$value": "#83b0d866", "$type": "color" }, - "color-orange-40": { - "$value": "#fecd76", + "color-blue-400": { + "$value": "#5c95c7", "$type": "color" }, - "color-orange-50": { - "$value": "#fec55e", + "color-blue-400-40a": { + "$value": "#5c95c766", "$type": "color" }, - "color-orange-100": { - "$value": "#fab551", + "color-blue-500": { + "$value": "#2b7cb5", "$type": "color" }, - "color-orange-200": { - "$value": "#f6a544", + "color-blue-500-40a": { + "$value": "#2b7cb566", "$type": "color" }, - "color-orange-300": { - "$value": "#f29538", + "color-blue-600": { + "$value": "#1f6494", "$type": "color" }, - "color-orange-400": { - "$value": "#ee852b", + "color-blue-600-40a": { + "$value": "#1f649466", "$type": "color" }, - "color-orange-500": { - "$value": "#ea7319", + "color-blue-700": { + "$value": "#134d75", "$type": "color" }, - "color-orange-600": { - "$value": "#e06519", + "color-blue-700-40a": { + "$value": "#134d7566", "$type": "color" }, - "color-orange-700": { - "$value": "#d65513", + "color-blue-800": { + "$value": "#073757", "$type": "color" }, - "color-orange-800": { - "$value": "#cc440d", + "color-blue-800-40a": { + "$value": "#07375766", "$type": "color" }, - "color-orange-900": { - "$value": "#362c24", + "color-blue-900": { + "$value": "#00223b", "$type": "color" }, - "color-green-10": { - "$value": "#d1f4c9", + "color-cider-400": { + "$value": "#f2af74", "$type": "color" }, - "color-green-20": { - "$value": "#b8e8b6", + "color-cider-500": { + "$value": "#ab6528", "$type": "color" }, - "color-green-30": { - "$value": "#a0dda4", + "color-cider-600": { + "$value": "#854814", "$type": "color" }, - "color-green-40": { - "$value": "#88d291", + "color-citrine-400": { + "$value": "#ccba62", "$type": "color" }, - "color-green-50": { - "$value": "#70c77f", + "color-citrine-500": { + "$value": "#877410", "$type": "color" }, - "color-green-100": { - "$value": "#5dbd74", + "color-citrine-600": { + "$value": "#635303", "$type": "color" }, - "color-green-200": { - "$value": "#4db469", + "color-cobalt-400": { + "$value": "#7eacf2", "$type": "color" }, - "color-green-300": { - "$value": "#3cab60", + "color-cobalt-500": { + "$value": "#4676bf", "$type": "color" }, - "color-green-400": { - "$value": "#309c5a", + "color-cobalt-600": { + "$value": "#234d8c", "$type": "color" }, - "color-green-500": { - "$value": "#24874b", + "color-forest-400": { + "$value": "#60d1a4", "$type": "color" }, - "color-green-600": { - "$value": "#18723d", + "color-forest-500": { + "$value": "#23855e", "$type": "color" }, - "color-green-700": { - "$value": "#0c5d2e", + "color-forest-600": { + "$value": "#196145", "$type": "color" }, - "color-green-800": { - "$value": "#014920", + "color-fuchsia-400": { + "$value": "#e879bf", "$type": "color" }, - "color-green-900": { - "$value": "#23342b", + "color-fuchsia-500": { + "$value": "#c24795", "$type": "color" }, - "color-teal-10": { - "$value": "#daf0f0", + "color-fuchsia-600": { + "$value": "#822a62", "$type": "color" }, - "color-teal-20": { - "$value": "#c7e8e8", + "color-fur-400": { + "$value": "#cc966c", "$type": "color" }, - "color-teal-30": { - "$value": "#b4e0e1", + "color-fur-500": { + "$value": "#996a45", "$type": "color" }, - "color-teal-40": { - "$value": "#a2d9da", + "color-fur-600": { + "$value": "#664022", "$type": "color" }, - "color-teal-50": { - "$value": "#8dcdd1", + "color-gray-100": { + "$value": "#ebebed", "$type": "color" }, - "color-teal-100": { - "$value": "#7bc1c8", + "color-gray-200": { + "$value": "#cbccd0", "$type": "color" }, - "color-teal-200": { - "$value": "#63b5c0", + "color-gray-300": { + "$value": "#adaeb3", "$type": "color" }, - "color-teal-300": { - "$value": "#49a0ac", + "color-gray-300-15a": { + "$value": "#adaeb326", "$type": "color" }, - "color-teal-400": { - "$value": "#3095a6", + "color-gray-300-40a": { + "$value": "#adaeb366", "$type": "color" }, - "color-teal-500": { - "$value": "#008297", + "color-gray-400": { + "$value": "#8f9198", "$type": "color" }, - "color-teal-600": { - "$value": "#1b6b85", + "color-gray-400-40a": { + "$value": "#8f919866", "$type": "color" }, - "color-teal-700": { - "$value": "#005571", + "color-gray-500": { + "$value": "#72757d", "$type": "color" }, - "color-teal-800": { - "$value": "#014156", + "color-gray-500-15a": { + "$value": "#72757d26", "$type": "color" }, - "color-teal-900": { - "$value": "#00314c", + "color-gray-500-40a": { + "$value": "#72757d66", "$type": "color" }, - "color-blue-10": { - "$value": "#cbe7f9", + "color-gray-600": { + "$value": "#5b5d64", "$type": "color" }, - "color-blue-20": { - "$value": "#b7def6", + "color-gray-600-40a": { + "$value": "#5b5d6466", "$type": "color" }, - "color-blue-30": { - "$value": "#a4d5f4", + "color-gray-700": { + "$value": "#45474d", "$type": "color" }, - "color-blue-40": { - "$value": "#90ccf2", + "color-gray-700-15a": { + "$value": "#45474d26", "$type": "color" }, - "color-blue-50": { - "$value": "#7dc3f0", + "color-gray-700-40a": { + "$value": "#45474d66", "$type": "color" }, - "color-blue-100": { - "$value": "#64b1e4", + "color-gray-800": { + "$value": "#303136", "$type": "color" }, - "color-blue-200": { - "$value": "#4b9fd8", + "color-gray-900": { + "$value": "#1c1d21", "$type": "color" }, - "color-blue-300": { - "$value": "#338dcd", + "color-green-100": { + "$value": "#c7edd6", "$type": "color" }, - "color-blue-400": { - "$value": "#2e84c6", + "color-green-200": { + "$value": "#a1d3b2", "$type": "color" }, - "color-blue-500": { - "$value": "#2670a9", + "color-green-300": { + "$value": "#7bb98f", "$type": "color" }, - "color-blue-600": { - "$value": "#155c93", + "color-green-400": { + "$value": "#54a06d", "$type": "color" }, - "color-blue-700": { - "$value": "#00477b", + "color-green-500": { + "$value": "#26874c", "$type": "color" }, - "color-blue-800": { - "$value": "#273c4d", + "color-green-600": { + "$value": "#1c723d", "$type": "color" }, - "color-blue-900": { - "$value": "#232f38", + "color-green-700": { + "$value": "#115d2f", "$type": "color" }, - "color-purple-10": { - "$value": "#f9e0f7", + "color-green-800": { + "$value": "#074922", "$type": "color" }, - "color-purple-20": { - "$value": "#f7d4f4", + "color-green-900": { + "$value": "#003615", "$type": "color" }, - "color-purple-30": { - "$value": "#f5c9f1", + "color-indigo-400": { + "$value": "#9887f5", "$type": "color" }, - "color-purple-40": { - "$value": "#f3bdee", + "color-indigo-500": { + "$value": "#7868ce", "$type": "color" }, - "color-purple-50": { - "$value": "#f1b2eb", + "color-indigo-600": { + "$value": "#463b82", "$type": "color" }, - "color-purple-100": { - "$value": "#df9ce1", + "color-jade-400": { + "$value": "#52ba6c", "$type": "color" }, - "color-purple-200": { - "$value": "#cd87d7", + "color-jade-500": { + "$value": "#2d8543", "$type": "color" }, - "color-purple-300": { - "$value": "#c074cb", + "color-jade-600": { + "$value": "#185427", "$type": "color" }, - "color-purple-400": { - "$value": "#a961b5", + "color-lavender-400": { + "$value": "#d492d4", "$type": "color" }, - "color-purple-500": { - "$value": "#964ea2", + "color-lavender-500": { + "$value": "#946694", "$type": "color" }, - "color-purple-600": { - "$value": "#813c8d", + "color-lavender-600": { + "$value": "#613461", "$type": "color" }, - "color-purple-700": { - "$value": "#672e7a", + "color-lime-400": { + "$value": "#b1cc56", "$type": "color" }, - "color-purple-800": { - "$value": "#53256d", + "color-lime-500": { + "$value": "#667d15", "$type": "color" }, - "color-purple-900": { - "$value": "#3b1054", + "color-lime-600": { + "$value": "#3a470e", "$type": "color" }, - "color-gray-10": { + "color-mist": { "$value": "#f2f4f6", "$type": "color" }, - "color-gray-20": { - "$value": "#eaedef", + "color-mist-40a": { + "$value": "#f2f4f666", "$type": "color" }, - "color-gray-30": { - "$value": "#e0e4e9", + "color-ocean-400": { + "$value": "#5fc4d4", "$type": "color" }, - "color-gray-40": { - "$value": "#d9dde3", + "color-ocean-500": { + "$value": "#008094", "$type": "color" }, - "color-gray-50": { - "$value": "#ced2d9", + "color-ocean-600": { + "$value": "#005461", "$type": "color" }, - "color-gray-60": { - "$value": "#c5c9d0", + "color-oil": { + "$value": "#272829", "$type": "color" }, - "color-gray-70": { - "$value": "#b4b7be", + "color-oil-40a": { + "$value": "#27282966", "$type": "color" }, - "color-gray-80": { - "$value": "#9fa3aa", + "color-olive-400": { + "$value": "#9bb06d", "$type": "color" }, - "color-gray-90": { - "$value": "#84878e", + "color-olive-500": { + "$value": "#6d7c4d", "$type": "color" }, - "color-gray-100": { - "$value": "#74777f", + "color-olive-600": { + "$value": "#535e3a", "$type": "color" }, - "color-gray-200": { - "$value": "#61656e", + "color-orange-100": { + "$value": "#f7dac6", "$type": "color" }, - "color-gray-300": { - "$value": "#4c505b", + "color-orange-200": { + "$value": "#f0b896", "$type": "color" }, - "color-gray-400": { - "$value": "#44484f", + "color-orange-300": { + "$value": "#e49768", "$type": "color" }, - "color-gray-500": { - "$value": "#3b3f46", + "color-orange-400": { + "$value": "#d6773b", "$type": "color" }, - "color-gray-600": { - "$value": "#2f3136", + "color-orange-500": { + "$value": "#c45500", "$type": "color" }, - "color-gray-700": { - "$value": "#2a2c2f", + "color-orange-600": { + "$value": "#9b4406", "$type": "color" }, - "color-gray-800": { - "$value": "#242526", + "color-orange-700": { + "$value": "#743309", "$type": "color" }, - "color-gray-900": { - "$value": "#161616", - "$type": "color" - }, - "color-blue-100-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-orange-800": { + "$value": "#4f2307", "$type": "color" }, - "color-blue-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-orange-900": { + "$value": "#2e1400", "$type": "color" }, - "color-blue-600-fade-foreground": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-plum-400": { + "$value": "#d184f5", "$type": "color" }, - "color-gray-200-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-plum-500": { + "$value": "#9f55c2", "$type": "color" }, - "color-gray-70-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-plum-600": { + "$value": "#611f80", "$type": "color" }, - "color-gray-90-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-100": { + "$value": "#f4d2fa", "$type": "color" }, - "color-gray-900-fade-foreground": { - "$value": { - "color": "{foundations.color.color-gray-900}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-200": { + "$value": "#e1b3e8", "$type": "color" }, - "color-green-300-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-300": { + "$value": "#cd94d6", "$type": "color" }, - "color-green-400-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-400": { + "$value": "#b975c4", "$type": "color" }, - "color-green-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-500": { + "$value": "#a556b2", "$type": "color" }, - "color-green-700-fade-foreground": { - "$value": { - "color": "{foundations.color.color-green-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-600": { + "$value": "#884094", "$type": "color" }, - "color-red-300-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-700": { + "$value": "#6d2b78", "$type": "color" }, - "color-red-500-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-800": { + "$value": "#52155c", "$type": "color" }, - "color-red-700-fade-foreground": { - "$value": { - "color": "{foundations.color.color-red-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-purple-900": { + "$value": "#390042", "$type": "color" }, - "color-white-fade-foreground": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-100": { + "$value": "#ffdad6", "$type": "color" }, - "color-blue-500-fade-border": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-200": { + "$value": "#ffb4a5", "$type": "color" }, - "color-gray-50-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-50}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-300": { + "$value": "#f98c76", "$type": "color" }, - "color-gray-60-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-400": { + "$value": "#ee6349", "$type": "color" }, - "color-gray-90-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-500": { + "$value": "#e02f1b", "$type": "color" }, - "color-gray-200-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-600": { + "$value": "#b42417", "$type": "color" }, - "color-gray-300-fade-border": { - "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-700": { + "$value": "#8a1912", "$type": "color" }, - "color-green-400-fade-border": { - "$value": { - "color": "{foundations.color.color-green-400}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-800": { + "$value": "#620f0c", "$type": "color" }, - "color-green-500-fade-border": { - "$value": { - "color": "{foundations.color.color-green-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-red-900": { + "$value": "#3d0600", "$type": "color" }, - "color-orange-400-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-400}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-rose-400": { + "$value": "#f59de3", "$type": "color" }, - "color-orange-500-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-rose-500": { + "$value": "#b0569e", "$type": "color" }, - "color-orange-600-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-rose-600": { + "$value": "#8a2f77", "$type": "color" }, - "color-orange-700-fade-border": { - "$value": { - "color": "{foundations.color.color-orange-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-salmon-400": { + "$value": "#fc8b8f", "$type": "color" }, - "color-red-500-fade-border": { - "$value": { - "color": "{foundations.color.color-red-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-salmon-500": { + "$value": "#bd5558", "$type": "color" }, - "color-gray-90-fade-border-readonly": { - "$value": { - "color": "{foundations.color.color-gray-90}", - "opacity": "{palette.opacity.palette-opacity-border-readonly}" - }, + "color-salmon-600": { + "$value": "#8a373a", "$type": "color" }, - "color-gray-200-fade-border-readonly": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-border-readonly}" - }, + "color-slate-400": { + "$value": "#9da9c7", "$type": "color" }, - "color-blue-30-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-30}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-slate-500": { + "$value": "#697694", "$type": "color" }, - "color-blue-500-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-500}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-slate-600": { + "$value": "#3b4661", "$type": "color" }, - "color-blue-600-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-smoke-400": { + "$value": "#bbc0c9", "$type": "color" }, - "color-blue-700-fade-background": { - "$value": { - "color": "{foundations.color.color-blue-700}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-smoke-500": { + "$value": "#72757a", "$type": "color" }, - "color-gray-20-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-smoke-600": { + "$value": "#4c5057", "$type": "color" }, - "color-gray-60-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-60}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, - "$type": "color" - }, - "color-gray-70-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-70}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, - "$type": "color" - }, - "color-gray-200-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-200}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-snow": { + "$value": "#ffffff", "$type": "color" }, - "color-gray-300-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-300}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-snow-40a": { + "$value": "#ffffff66", "$type": "color" }, - "color-gray-600-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-teal-100": { + "$value": "#c4eef5", "$type": "color" }, - "color-gray-800-fade-background": { - "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-teal-200": { + "$value": "#a0d2db", "$type": "color" }, - "color-white-fade-background": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-teal-300": { + "$value": "#7bb6c1", "$type": "color" }, - "color-white-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "color-teal-400": { + "$value": "#569ba8", "$type": "color" }, - "color-gray-20-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-20}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "color-teal-500": { + "$value": "#2b818f", "$type": "color" }, - "color-gray-600-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-600}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "color-teal-600": { + "$value": "#206d79", "$type": "color" }, - "color-gray-800-fade-background-readonly": { - "$value": { - "color": "{foundations.color.color-gray-800}", - "opacity": "{palette.opacity.palette-opacity-background-readonly}" - }, + "color-teal-700": { + "$value": "#145a65", "$type": "color" }, - "color-white-fade-backdrop": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-backdrop}" - }, + "color-teal-800": { + "$value": "#094750", "$type": "color" }, - "color-black-fade-backdrop": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-backdrop}" - }, + "color-teal-900": { + "$value": "#00353d", "$type": "color" }, - "color-blue-100-fade-fill": { - "$value": { - "color": "{foundations.color.color-blue-100}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-transparent": { + "$value": "#ffffff00", "$type": "color" }, - "color-blue-600-fade-fill": { - "$value": { - "color": "{foundations.color.color-blue-600}", - "opacity": "{palette.opacity.palette-opacity-disabled}" - }, + "color-violet-400": { + "$value": "#8a96f2", "$type": "color" }, - "color-white-fade-separatorOpacity-primary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-primary-border}" - }, + "color-violet-500": { + "$value": "#636ebf", "$type": "color" }, - "color-white-fade-separatorOpacity-secondary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-secondary-border}" - }, + "color-violet-600": { + "$value": "#454fa1", "$type": "color" }, - "color-white-fade-separatorOpacity-tertiary": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{palette.opacity.palette-opacity-tertiary-border}" - }, + "color-white": { + "$value": "#ffffff", "$type": "color" }, - "color-black-fade-separatorOpacity-primary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-primary-border}" - }, + "color-white-15a": { + "$value": "#ffffff26", "$type": "color" }, - "color-black-fade-separatorOpacity-secondary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-secondary-border}" - }, + "color-white-25a": { + "$value": "#ffffff3f", "$type": "color" }, - "color-black-fade-separatorOpacity-tertiary": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{palette.opacity.palette-opacity-tertiary-border}" - }, + "color-white-40a": { + "$value": "#ffffff66", "$type": "color" }, - "color-black-fade-background-hover": { - "$value": { - "color": "{foundations.color.color-black}", - "opacity": "{foundations.opacity.opacity-8}" - }, + "color-white-70a": { + "$value": "#ffffffb2", "$type": "color" }, - "color-white-fade-background-hover": { - "$value": { - "color": "{foundations.color.color-white}", - "opacity": "{foundations.opacity.opacity-8}" - }, + "color-white-8a": { + "$value": "#ffffff14", "$type": "color" } }, @@ -2267,200 +2056,10 @@ "$type": "fontFamily" } }, - "accent": { - "accent-background": { - "$value": "{palette.accent.palette-accent-background}", - "$type": "color" - }, - "accent-borderColor": { - "$value": "{palette.accent.palette-accent-border}", - "$type": "color" - }, - "accent-foreground": { - "$value": "{palette.accent.palette-accent-foreground}", - "$type": "color" - } - }, - "actionable": { - "actionable-cursor-hover": { - "$value": "pointer", - "$type": "cursor" - }, - "actionable-cursor-active": { - "$value": "pointer", - "$type": "cursor" - }, - "actionable-cursor-disabled": { - "$value": "not-allowed", - "$type": "cursor" - }, - "actionable-primary-foreground": { - "$value": "{palette.interact.palette-interact-primary-foreground}", - "$type": "color" - }, - "actionable-primary-foreground-hover": { - "$value": "{palette.interact.palette-interact-primary-foreground-hover}", - "$type": "color" - }, - "actionable-primary-foreground-active": { - "$value": "{palette.interact.palette-interact-primary-foreground-active}", - "$type": "color" - }, - "actionable-primary-foreground-disabled": { - "$value": "{palette.interact.palette-interact-primary-foreground-disabled}", - "$type": "color" - }, - "actionable-primary-background": { - "$value": "{palette.interact.palette-interact-primary-background}", - "$type": "color" - }, - "actionable-primary-background-hover": { - "$value": "{palette.interact.palette-interact-primary-background-hover}", - "$type": "color" - }, - "actionable-primary-background-active": { - "$value": "{palette.interact.palette-interact-primary-background-active}", - "$type": "color" - }, - "actionable-primary-background-disabled": { - "$value": "{palette.interact.palette-interact-primary-background-disabled}", - "$type": "color" - }, - "actionable-cta-foreground": { - "$value": "{palette.interact.palette-interact-cta-foreground}", - "$type": "color" - }, - "actionable-cta-foreground-hover": { - "$value": "{palette.interact.palette-interact-cta-foreground-hover}", - "$type": "color" - }, - "actionable-cta-foreground-active": { - "$value": "{palette.interact.palette-interact-cta-foreground-active}", - "$type": "color" - }, - "actionable-cta-foreground-disabled": { - "$value": "{palette.interact.palette-interact-cta-foreground-disabled}", - "$type": "color" - }, - "actionable-cta-background": { - "$value": "{palette.interact.palette-interact-cta-background}", - "$type": "color" - }, - "actionable-cta-background-hover": { - "$value": "{palette.interact.palette-interact-cta-background-hover}", - "$type": "color" - }, - "actionable-cta-background-active": { - "$value": "{palette.interact.palette-interact-cta-background-active}", - "$type": "color" - }, - "actionable-cta-background-disabled": { - "$value": "{palette.interact.palette-interact-cta-background-disabled}", - "$type": "color" - }, - "actionable-secondary-foreground": { - "$value": "{palette.interact.palette-interact-secondary-foreground}", - "$type": "color" - }, - "actionable-secondary-foreground-hover": { - "$value": "{palette.interact.palette-interact-secondary-foreground-hover}", - "$type": "color" - }, - "actionable-secondary-foreground-active": { - "$value": "{palette.interact.palette-interact-secondary-foreground-active}", - "$type": "color" - }, - "actionable-secondary-foreground-disabled": { - "$value": "{palette.interact.palette-interact-secondary-foreground-disabled}", - "$type": "color" - }, - "actionable-secondary-background": { - "$value": "{palette.interact.palette-interact-secondary-background}", - "$type": "color" - }, - "actionable-secondary-background-hover": { - "$value": "{palette.interact.palette-interact-secondary-background-hover}", - "$type": "color" - }, - "actionable-secondary-background-active": { - "$value": "{palette.interact.palette-interact-secondary-background-active}", - "$type": "color" - }, - "actionable-secondary-background-disabled": { - "$value": "{palette.interact.palette-interact-secondary-background-disabled}", - "$type": "color" - } - }, "container": { "container-borderStyle": { "$value": "solid", "$type": "borderStyle" - }, - "container-primary-background": { - "$value": "{palette.neutral.palette-neutral-primary-background}", - "$type": "color" - }, - "container-primary-background-disabled": { - "$value": "{palette.neutral.palette-neutral-primary-background-disabled}", - "$type": "color" - }, - "container-primary-borderColor": { - "$value": "{palette.neutral.palette-neutral-primary-border}", - "$type": "color" - }, - "container-primary-borderColor-disabled": { - "$value": "{palette.neutral.palette-neutral-primary-border-disabled}", - "$type": "color" - }, - "container-secondary-background": { - "$value": "{palette.neutral.palette-neutral-secondary-background}", - "$type": "color" - }, - "container-secondary-background-disabled": { - "$value": "{palette.neutral.palette-neutral-secondary-background-disabled}", - "$type": "color" - }, - "container-secondary-borderColor": { - "$value": "{palette.neutral.palette-neutral-secondary-border}", - "$type": "color" - }, - "container-secondary-borderColor-disabled": { - "$value": "{palette.neutral.palette-neutral-secondary-border-disabled}", - "$type": "color" - } - }, - "content": { - "content-primary-foreground": { - "$value": "{palette.neutral.palette-neutral-primary-foreground}", - "$type": "color" - }, - "content-primary-foreground-disabled": { - "$value": "{palette.neutral.palette-neutral-primary-foreground-disabled}", - "$type": "color" - }, - "content-secondary-foreground": { - "$value": "{palette.neutral.palette-neutral-secondary-foreground}", - "$type": "color" - }, - "content-secondary-foreground-disabled": { - "$value": "{palette.neutral.palette-neutral-secondary-foreground-disabled}", - "$type": "color" - }, - "content-foreground-hover": { - "$value": "{palette.navigate.palette-navigate-foreground-hover}", - "$type": "color" - }, - "content-foreground-active": { - "$value": "{palette.navigate.palette-navigate-foreground-active}", - "$type": "color" - }, - "content-foreground-visited": { - "$value": "{palette.navigate.palette-navigate-foreground-visited}", - "$type": "color" - }, - "content-foreground-highlight": { - "$value": "{palette.interact.palette-interact-background-active}", - "$type": "color" } }, "draggable": { @@ -2529,77 +2128,9 @@ "editable-borderWidth-active": { "$value": "2px", "$type": "borderWidth" - }, - "editable-borderColor": { - "$value": "{palette.interact.palette-interact-border}", - "$type": "color" - }, - "editable-borderColor-active": { - "$value": "{palette.interact.palette-interact-border-active}", - "$type": "color" - }, - "editable-borderColor-disabled": { - "$value": "{palette.interact.palette-interact-border-disabled}", - "$type": "color" - }, - "editable-borderColor-hover": { - "$value": "{palette.interact.palette-interact-border-hover}", - "$type": "color" - }, - "editable-borderColor-readonly": { - "$value": "{palette.interact.palette-interact-border-readonly}", - "$type": "color" - }, - "editable-primary-background": { - "$value": "{palette.neutral.palette-neutral-primary-background}", - "$type": "color" - }, - "editable-primary-background-active": { - "$value": "{palette.neutral.palette-neutral-primary-background}", - "$type": "color" - }, - "editable-primary-background-disabled": { - "$value": "{palette.neutral.palette-neutral-primary-background-disabled}", - "$type": "color" - }, - "editable-primary-background-hover": { - "$value": "{palette.neutral.palette-neutral-primary-background}", - "$type": "color" - }, - "editable-primary-background-readonly": { - "$value": "{palette.neutral.palette-neutral-primary-background-readonly}", - "$type": "color" - }, - "editable-secondary-background": { - "$value": "{palette.neutral.palette-neutral-secondary-background}", - "$type": "color" - }, - "editable-secondary-background-active": { - "$value": "{palette.neutral.palette-neutral-secondary-background}", - "$type": "color" - }, - "editable-secondary-background-disabled": { - "$value": "{palette.neutral.palette-neutral-secondary-background-disabled}", - "$type": "color" - }, - "editable-secondary-background-hover": { - "$value": "{palette.neutral.palette-neutral-secondary-background}", - "$type": "color" - }, - "editable-secondary-background-readonly": { - "$value": "{palette.neutral.palette-neutral-secondary-background-readonly}", - "$type": "color" - }, - "editable-help-fontStyle": { - "$value": "italic", - "$type": "fontStyle" } }, "focused": { - "focused-outlineColor": { - "$value": "{palette.interact.palette-interact-outline}", - "$type": "color" - }, "focused-outlineStyle": { "$value": "dotted", "$type": "outlineStyle" @@ -2657,18 +2188,6 @@ "navigable-fontWeight-edit": { "$value": "{foundations.typography.typography-fontWeight-regular}", "$type": "fontWeight" - }, - "navigable-indicator-hover": { - "$value": "{palette.navigate.palette-navigate-indicator-hover}", - "$type": "color" - }, - "navigable-indicator-active": { - "$value": "{palette.navigate.palette-navigate-indicator-active}", - "$type": "color" - }, - "navigable-background-hover": { - "$value": "{palette.navigate.palette-navigate-background-hover}", - "$type": "color" } }, "overlayable": { @@ -2699,10 +2218,6 @@ "overlayable-shadow-modal": { "$value": "{foundations.shadow.shadow-500}", "$type": "shadow" - }, - "overlayable-background": { - "$value": "{palette.neutral.palette-neutral-backdrop}", - "$type": "color" } }, "selectable": { @@ -2741,177 +2256,15 @@ "selectable-borderStyle-blurSelected": { "$value": "solid", "$type": "borderStyle" - }, - "selectable-borderColor": { - "$value": "{palette.interact.palette-interact-border}", - "$type": "color" - }, - "selectable-borderColor-hover": { - "$value": "{palette.interact.palette-interact-border-hover}", - "$type": "color" - }, - "selectable-borderColor-selected": { - "$value": "{palette.interact.palette-interact-border-active}", - "$type": "color" - }, - "selectable-borderColor-selectedDisabled": { - "$value": "{palette.interact.palette-interact-border-activeDisabled}", - "$type": "color" - }, - "selectable-borderColor-disabled": { - "$value": "{palette.interact.palette-interact-border-disabled}", - "$type": "color" - }, - "selectable-borderColor-readonly": { - "$value": "{palette.interact.palette-interact-border-readonly}", - "$type": "color" - }, - "selectable-foreground": { - "$value": "{palette.interact.palette-interact-foreground}", - "$type": "color" - }, - "selectable-foreground-disabled": { - "$value": "{palette.interact.palette-interact-foreground-disabled}", - "$type": "color" - }, - "selectable-foreground-hover": { - "$value": "{palette.interact.palette-interact-foreground-hover}", - "$type": "color" - }, - "selectable-foreground-selected": { - "$value": "{palette.interact.palette-interact-foreground-active}", - "$type": "color" - }, - "selectable-foreground-selectedDisabled": { - "$value": "{palette.interact.palette-interact-foreground-activeDisabled}", - "$type": "color" - }, - "selectable-background": { - "$value": "{palette.interact.palette-interact-background}", - "$type": "color" - }, - "selectable-background-hover": { - "$value": "{palette.interact.palette-interact-background-hover}", - "$type": "color" - }, - "selectable-background-selected": { - "$value": "{palette.interact.palette-interact-background-active}", - "$type": "color" - }, - "selectable-background-blurSelected": { - "$value": "{palette.interact.palette-interact-background-blurSelected}", - "$type": "color" - }, - "selectable-background-disabled": { - "$value": "{palette.interact.palette-interact-background-disabled}", - "$type": "color" - }, - "selectable-background-selectedDisabled": { - "$value": "{palette.interact.palette-interact-background-activeDisabled}", - "$type": "color" } }, "separable": { "separable-borderStyle": { "$value": "solid", "$type": "borderStyle" - }, - "separable-primary-borderColor": { - "$value": "{palette.neutral.palette-neutral-primary-separator}", - "$type": "color" - }, - "separable-secondary-borderColor": { - "$value": "{palette.neutral.palette-neutral-secondary-separator}", - "$type": "color" - }, - "separable-tertiary-borderColor": { - "$value": "{palette.neutral.palette-neutral-tertiary-separator}", - "$type": "color" - } - }, - "status": { - "status-info-foreground": { - "$value": "{palette.info.palette-info-foreground}", - "$type": "color" - }, - "status-success-foreground": { - "$value": "{palette.success.palette-success-foreground}", - "$type": "color" - }, - "status-warning-foreground": { - "$value": "{palette.warning.palette-warning-foreground}", - "$type": "color" - }, - "status-error-foreground": { - "$value": "{palette.error.palette-error-foreground}", - "$type": "color" - }, - "status-static-foreground": { - "$value": "{palette.neutral.palette-neutral-secondary-foreground}", - "$type": "color" - }, - "status-negative-foreground": { - "$value": "{palette.negative.palette-negative-foreground}", - "$type": "color" - }, - "status-positive-foreground": { - "$value": "{palette.positive.palette-positive-foreground}", - "$type": "color" - }, - "status-info-borderColor": { - "$value": "{palette.info.palette-info-border}", - "$type": "color" - }, - "status-success-borderColor": { - "$value": "{palette.success.palette-success-border}", - "$type": "color" - }, - "status-warning-borderColor": { - "$value": "{palette.warning.palette-warning-border}", - "$type": "color" - }, - "status-error-borderColor": { - "$value": "{palette.error.palette-error-border}", - "$type": "color" - }, - "status-info-background": { - "$value": "{palette.info.palette-info-background}", - "$type": "color" - }, - "status-success-background": { - "$value": "{palette.success.palette-success-background}", - "$type": "color" - }, - "status-warning-background": { - "$value": "{palette.warning.palette-warning-background}", - "$type": "color" - }, - "status-error-background": { - "$value": "{palette.error.palette-error-background}", - "$type": "color" - }, - "status-success-background-selected": { - "$value": "{palette.success.palette-success-background-selected}", - "$type": "color" - }, - "status-warning-background-selected": { - "$value": "{palette.warning.palette-warning-background-selected}", - "$type": "color" - }, - "status-error-background-selected": { - "$value": "{palette.error.palette-error-background-selected}", - "$type": "color" } }, "target": { - "target-background-hover": { - "$value": "{palette.interact.palette-interact-background-hover}", - "$type": "color" - }, - "target-borderColor-hover": { - "$value": "{palette.interact.palette-interact-border-hover}", - "$type": "color" - }, "target-borderStyle": { "$value": "dashed", "$type": "borderStyle" @@ -2945,10 +2298,6 @@ "track-borderStyle-incomplete": { "$value": "dotted", "$type": "borderStyle" - }, - "track-borderColor": { - "$value": "{palette.neutral.palette-neutral-secondary-border}", - "$type": "color" } } } diff --git a/packages/theme/scripts/build.mjs b/packages/theme/scripts/build.mjs index e848df40db2..8406e8e1e0d 100644 --- a/packages/theme/scripts/build.mjs +++ b/packages/theme/scripts/build.mjs @@ -28,6 +28,23 @@ esbuild logLevel: "info", }) .then(() => { + // copy json + fs.copyFile( + path.resolve(__dirname, "../json/theme.json"), + path.join(buildFolder, "theme.json"), + (err) => { + if (err) throw err; + console.log( + `${path.relative( + process.cwd(), + path.resolve(__dirname, "../json/theme.json") + )} copied to ${path.relative( + process.cwd(), + path.join(buildFolder, "theme.json") + )}` + ); + } + ); // File destination.txt will be created or overwritten by default. fs.copyFile( path.resolve(__dirname, "../package.json"), diff --git a/tooling/stylelint/custom-property-attributes-kebab-case/index.js b/tooling/stylelint/custom-property-attributes-kebab-case/index.js index 0dcc7ea8c12..54097502237 100644 --- a/tooling/stylelint/custom-property-attributes-kebab-case/index.js +++ b/tooling/stylelint/custom-property-attributes-kebab-case/index.js @@ -1,6 +1,12 @@ "use strict"; -const properties = require("known-css-properties").all; +const allProperties = require("known-css-properties").all; + +/* excluding `accent-color` property so `--card-accent-color` is allowed */ +const properties = allProperties.filter( + (property) => property !== "accent-color" +); + const stylelint = require("stylelint"); const valueParser = require("postcss-value-parser"); From 95122e297dcafe2278331b6d540a9a3f2846d56c Mon Sep 17 00:00:00 2001 From: libertymayc Date: Thu, 16 May 2024 15:25:09 -0400 Subject: [PATCH 45/50] updates based on unified-color-palette branch --- .../characteristics/characteristics-next.css | 109 -- packages/theme/css/palette/palette-next.css | 181 -- .../theme/json/parsers/colorFormatSwap.js | 3 + .../json/parsers/getCssVariablesFromDir.js | 41 +- packages/theme/json/parsers/themeToJson.js | 78 +- packages/theme/json/theme.json | 1558 +++++++++-------- 6 files changed, 875 insertions(+), 1095 deletions(-) delete mode 100644 packages/theme/css/characteristics/characteristics-next.css delete mode 100644 packages/theme/css/palette/palette-next.css diff --git a/packages/theme/css/characteristics/characteristics-next.css b/packages/theme/css/characteristics/characteristics-next.css deleted file mode 100644 index 9be8ce5efc5..00000000000 --- a/packages/theme/css/characteristics/characteristics-next.css +++ /dev/null @@ -1,109 +0,0 @@ -/* NOTE: all CSS is auto generated using https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/29 */ - -.salt-theme.salt-theme-next { - --salt-status-info-borderColor: var(--salt-palette-info); - --salt-status-info-background: var(--salt-palette-info-weak); - --salt-status-info-foreground: var(--salt-palette-info); - --salt-status-static-foreground: var(--salt-palette-foreground-secondary); - --salt-status-warning-foreground: var(--salt-palette-warning); - --salt-status-warning-background-selected: var(--salt-palette-warning-weak); - --salt-status-warning-background: var(--salt-palette-warning-weak); - --salt-status-warning-borderColor: var(--salt-palette-warning); - --salt-status-success-background: var(--salt-palette-positive-weak); - --salt-status-success-background-selected: var(--salt-palette-positive-weak); - --salt-status-success-foreground: var(--salt-palette-positive); - --salt-status-success-borderColor: var(--salt-palette-positive); - --salt-status-error-background-selected: var(--salt-palette-negative-weak); - --salt-status-error-background: var(--salt-palette-negative-weak); - --salt-status-error-borderColor: var(--salt-palette-negative); - --salt-status-error-foreground: var(--salt-palette-negative); - --salt-status-negative-foreground: var(--salt-palette-negative); - --salt-status-positive-foreground: var(--salt-palette-positive); - --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-disabled); - --salt-container-secondary-borderColor: var(--salt-palette-neutral); - --salt-container-secondary-background: var(--salt-palette-background-secondary); - --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled); - --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled); - --salt-container-primary-borderColor: var(--salt-palette-neutral-weaker); - --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled); - --salt-container-primary-background: var(--salt-palette-background-primary); - --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); - --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary); - --salt-actionable-secondary-background: var(--salt-palette-background-transparent); - --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-weak); - --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert); - --salt-actionable-secondary-background-disabled: var(--salt-palette-background-transparent); - --salt-actionable-secondary-background-active: var(--salt-palette-neutral-strong); - --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary); - --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); - --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary); - --salt-actionable-primary-background: var(--salt-palette-neutral-weaker); - --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-weaker-disabled); - --salt-actionable-primary-background-active: var(--salt-palette-neutral-strong); - --salt-actionable-primary-background-readonly: var(--salt-palette-neutral-weaker-readonly); - --salt-actionable-primary-background-hover: var(--salt-palette-neutral-weak); - --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert); - --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary); - --salt-actionable-cta-foreground: var(--salt-palette-foreground-invert); - --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-invert); - --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-invert); - --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-invert-disabled); - --salt-actionable-cta-background-hover: var(--salt-palette-accent-weak); - --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled); - --salt-actionable-cta-background: var(--salt-palette-accent); - --salt-actionable-cta-background-active: var(--salt-palette-accent-strong); - --salt-selectable-background: var(--salt-palette-background-transparent); - --salt-selectable-background-disabled: var(--salt-palette-background-transparent); - --salt-selectable-borderColor: var(--salt-palette-neutral); - --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly); - --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest); - --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled); - --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled); - --salt-selectable-foreground: var(--salt-palette-neutral-strong); - --salt-selectable-background-selected: var(--salt-palette-accent-weaker); - --salt-selectable-background-hover: var(--salt-palette-accent-weakest); - --salt-selectable-borderColor-selected: var(--salt-palette-accent-stronger); - --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-strong-disabled); - --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-stronger-disabled); - --salt-selectable-borderColor-hover: var(--salt-palette-accent); - --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled); - --salt-selectable-foreground-hover: var(--salt-palette-accent); - --salt-selectable-foreground-selected: var(--salt-palette-accent-strong); - --salt-track-borderColor: var(--salt-palette-neutral); - --salt-navigable-background-hover: var(--salt-palette-background-hover); - --salt-navigable-indicator-active: var(--salt-palette-accent); - --salt-navigable-indicator-hover: var(--salt-palette-neutral); - --salt-accent-foreground: var(--salt-palette-foreground-invert); - --salt-accent-background: var(--salt-palette-accent); - --salt-accent-borderColor: var(--salt-palette-accent); - --salt-editable-secondary-background-readonly: var(--salt-palette-background-transparent); - --salt-editable-secondary-background: var(--salt-palette-background-secondary); - --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled); - --salt-editable-secondary-background-active: var(--salt-palette-background-secondary); - --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary); - --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly); - --salt-editable-borderColor: var(--salt-palette-neutral); - --salt-editable-primary-background-readonly: var(--salt-palette-background-transparent); - --salt-editable-primary-background-hover: var(--salt-palette-background-primary); - --salt-editable-primary-background: var(--salt-palette-background-primary); - --salt-editable-primary-background-active: var(--salt-palette-background-primary); - --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled); - --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled); - --salt-editable-borderColor-active: var(--salt-palette-accent-stronger); - --salt-editable-borderColor-hover: var(--salt-palette-accent); - --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled); - --salt-content-primary-foreground: var(--salt-palette-foreground-primary); - --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary); - --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled); - --salt-content-foreground-visited: var(--salt-palette-foreground-visited); - --salt-content-foreground-active: var(--salt-palette-foreground-active); - --salt-content-foreground-hover: var(--salt-palette-foreground-hover); - --salt-content-foreground-highlight: var(--salt-palette-accent-weaker); - --salt-overlayable-background: var(--salt-palette-background-backdrop); - --salt-target-background-hover: var(--salt-palette-accent-weakest); - --salt-target-borderColor-hover: var(--salt-palette-accent); - --salt-focused-outlineColor: var(--salt-palette-accent-stronger); - --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-stronger-tertiary); - --salt-separable-primary-borderColor: var(--salt-palette-neutral-stronger-primary); - --salt-separable-secondary-borderColor: var(--salt-palette-neutral-stronger-secondary); -} diff --git a/packages/theme/css/palette/palette-next.css b/packages/theme/css/palette/palette-next.css deleted file mode 100644 index 136e3fa77ac..00000000000 --- a/packages/theme/css/palette/palette-next.css +++ /dev/null @@ -1,181 +0,0 @@ -/* NOTE: all CSS is auto generated using https://github.com/jpmorganchase/Figma-Plugins-and-Widgets/pull/29 */ - -.salt-theme.salt-theme-next[data-mode="light"] { - --salt-palette-accent: var(--salt-color-blue-500); - --salt-palette-accent-disabled: var(--salt-color-blue-500-40a); - --salt-palette-accent-strong: var(--salt-color-blue-600); - --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a); - --salt-palette-accent-stronger: var(--salt-color-blue-700); - --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a); - --salt-palette-accent-weak: var(--salt-color-blue-400); - --salt-palette-accent-weaker: var(--salt-color-blue-200); - --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a); - --salt-palette-accent-weakest: var(--salt-color-blue-100); - --salt-palette-background-backdrop: var(--salt-color-white-70a); - --salt-palette-background-hover: var(--salt-color-black-8a); - --salt-palette-background-primary: var(--salt-color-snow); - --salt-palette-background-primary-disabled: var(--salt-color-snow-40a); - --salt-palette-background-secondary: var(--salt-color-mist); - --salt-palette-background-secondary-disabled: var(--salt-color-mist-40a); - --salt-palette-background-transparent: var(--salt-color-transparent); - --salt-palette-category-cat-1: var(--salt-color-cobalt-500); - --salt-palette-category-cat-1-strong: var(--salt-color-cobalt-600); - --salt-palette-category-cat-10: var(--salt-color-jade-500); - --salt-palette-category-cat-10-strong: var(--salt-color-jade-600); - --salt-palette-category-cat-11: var(--salt-color-citrine-500); - --salt-palette-category-cat-11-strong: var(--salt-color-citrine-600); - --salt-palette-category-cat-12: var(--salt-color-autumn-500); - --salt-palette-category-cat-12-strong: var(--salt-color-autumn-600); - --salt-palette-category-cat-13: var(--salt-color-lavender-500); - --salt-palette-category-cat-13-strong: var(--salt-color-lavender-600); - --salt-palette-category-cat-14: var(--salt-color-ocean-500); - --salt-palette-category-cat-14-strong: var(--salt-color-ocean-600); - --salt-palette-category-cat-15: var(--salt-color-smoke-500); - --salt-palette-category-cat-15-strong: var(--salt-color-smoke-600); - --salt-palette-category-cat-16: var(--salt-color-fuchsia-500); - --salt-palette-category-cat-16-strong: var(--salt-color-fuchsia-600); - --salt-palette-category-cat-17: var(--salt-color-lime-500); - --salt-palette-category-cat-17-strong: var(--salt-color-lime-600); - --salt-palette-category-cat-18: var(--salt-color-fur-500); - --salt-palette-category-cat-18-strong: var(--salt-color-fur-600); - --salt-palette-category-cat-19: var(--salt-color-violet-500); - --salt-palette-category-cat-19-strong: var(--salt-color-violet-600); - --salt-palette-category-cat-2: var(--salt-color-cider-500); - --salt-palette-category-cat-2-strong: var(--salt-color-cider-600); - --salt-palette-category-cat-20: var(--salt-color-forest-500); - --salt-palette-category-cat-20-strong: var(--salt-color-forest-600); - --salt-palette-category-cat-3: var(--salt-color-plum-500); - --salt-palette-category-cat-3-strong: var(--salt-color-plum-600); - --salt-palette-category-cat-4: var(--salt-color-aqua-500); - --salt-palette-category-cat-4-strong: var(--salt-color-aqua-600); - --salt-palette-category-cat-5: var(--salt-color-slate-500); - --salt-palette-category-cat-5-strong: var(--salt-color-slate-600); - --salt-palette-category-cat-6: var(--salt-color-rose-500); - --salt-palette-category-cat-6-strong: var(--salt-color-rose-600); - --salt-palette-category-cat-7: var(--salt-color-olive-500); - --salt-palette-category-cat-7-strong: var(--salt-color-olive-600); - --salt-palette-category-cat-8: var(--salt-color-salmon-500); - --salt-palette-category-cat-8-strong: var(--salt-color-salmon-600); - --salt-palette-category-cat-9: var(--salt-color-indigo-500); - --salt-palette-category-cat-9-strong: var(--salt-color-indigo-600); - --salt-palette-foreground-active: var(--salt-color-blue-700); - --salt-palette-foreground-hover: var(--salt-color-blue-600); - --salt-palette-foreground-invert: var(--salt-color-white); - --salt-palette-foreground-invert-disabled: var(--salt-color-white-40a); - --salt-palette-foreground-primary: var(--salt-color-black); - --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a); - --salt-palette-foreground-secondary: var(--salt-color-gray-700); - --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a); - --salt-palette-foreground-visited: var(--salt-color-purple-800); - --salt-palette-info: var(--salt-color-blue-600); - --salt-palette-info-weak: var(--salt-color-blue-100); - --salt-palette-negative: var(--salt-color-red-600); - --salt-palette-negative-weak: var(--salt-color-red-100); - --salt-palette-neutral: var(--salt-color-gray-500); - --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a); - --salt-palette-neutral-readonly: var(--salt-color-gray-500-15a); - --salt-palette-neutral-strong: var(--salt-color-gray-600); - --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a); - --salt-palette-neutral-stronger-primary: var(--salt-color-black-40a); - --salt-palette-neutral-stronger-secondary: var(--salt-color-black-25a); - --salt-palette-neutral-stronger-tertiary: var(--salt-color-black-15a); - --salt-palette-neutral-weak: var(--salt-color-gray-400); - --salt-palette-neutral-weaker: var(--salt-color-gray-300); - --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a); - --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-15a); - --salt-palette-neutral-weakest: var(--salt-color-gray-200); - --salt-palette-positive: var(--salt-color-green-600); - --salt-palette-positive-weak: var(--salt-color-green-100); - --salt-palette-warning: var(--salt-color-orange-600); - --salt-palette-warning-weak: var(--salt-color-orange-100); -} - -.salt-theme.salt-theme-next[data-mode="dark"] { - --salt-palette-accent: var(--salt-color-blue-500); - --salt-palette-accent-disabled: var(--salt-color-blue-500-40a); - --salt-palette-accent-strong: var(--salt-color-blue-400); - --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a); - --salt-palette-accent-stronger: var(--salt-color-blue-300); - --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a); - --salt-palette-accent-weak: var(--salt-color-blue-600); - --salt-palette-accent-weaker: var(--salt-color-blue-800); - --salt-palette-accent-weaker-disabled: var(--salt-color-blue-800-40a); - --salt-palette-accent-weakest: var(--salt-color-blue-900); - --salt-palette-background-backdrop: var(--salt-color-black-70a); - --salt-palette-background-hover: var(--salt-color-white-8a); - --salt-palette-background-primary: var(--salt-color-asphalt); - --salt-palette-background-primary-disabled: var(--salt-color-asphalt-40a); - --salt-palette-background-secondary: var(--salt-color-oil); - --salt-palette-background-secondary-disabled: var(--salt-color-oil-40a); - --salt-palette-background-transparent: var(--salt-color-transparent); - --salt-palette-category-cat-1: var(--salt-color-cobalt-500); - --salt-palette-category-cat-1-strong: var(--salt-color-cobalt-400); - --salt-palette-category-cat-10: var(--salt-color-jade-500); - --salt-palette-category-cat-10-strong: var(--salt-color-jade-400); - --salt-palette-category-cat-11: var(--salt-color-citrine-500); - --salt-palette-category-cat-11-strong: var(--salt-color-citrine-400); - --salt-palette-category-cat-12: var(--salt-color-autumn-500); - --salt-palette-category-cat-12-strong: var(--salt-color-autumn-400); - --salt-palette-category-cat-13: var(--salt-color-lavender-500); - --salt-palette-category-cat-13-strong: var(--salt-color-lavender-400); - --salt-palette-category-cat-14: var(--salt-color-ocean-500); - --salt-palette-category-cat-14-strong: var(--salt-color-ocean-400); - --salt-palette-category-cat-15: var(--salt-color-smoke-500); - --salt-palette-category-cat-15-strong: var(--salt-color-smoke-400); - --salt-palette-category-cat-16: var(--salt-color-fuchsia-500); - --salt-palette-category-cat-16-strong: var(--salt-color-fuchsia-400); - --salt-palette-category-cat-17: var(--salt-color-lime-500); - --salt-palette-category-cat-17-strong: var(--salt-color-lime-400); - --salt-palette-category-cat-18: var(--salt-color-fur-500); - --salt-palette-category-cat-18-strong: var(--salt-color-fur-400); - --salt-palette-category-cat-19: var(--salt-color-violet-500); - --salt-palette-category-cat-19-strong: var(--salt-color-violet-400); - --salt-palette-category-cat-2: var(--salt-color-cider-500); - --salt-palette-category-cat-2-strong: var(--salt-color-cider-400); - --salt-palette-category-cat-20: var(--salt-color-forest-500); - --salt-palette-category-cat-20-strong: var(--salt-color-forest-400); - --salt-palette-category-cat-3: var(--salt-color-plum-500); - --salt-palette-category-cat-3-strong: var(--salt-color-plum-400); - --salt-palette-category-cat-4: var(--salt-color-aqua-500); - --salt-palette-category-cat-4-strong: var(--salt-color-aqua-400); - --salt-palette-category-cat-5: var(--salt-color-slate-500); - --salt-palette-category-cat-5-strong: var(--salt-color-slate-400); - --salt-palette-category-cat-6: var(--salt-color-rose-500); - --salt-palette-category-cat-6-strong: var(--salt-color-rose-400); - --salt-palette-category-cat-7: var(--salt-color-olive-500); - --salt-palette-category-cat-7-strong: var(--salt-color-olive-400); - --salt-palette-category-cat-8: var(--salt-color-salmon-500); - --salt-palette-category-cat-8-strong: var(--salt-color-salmon-400); - --salt-palette-category-cat-9: var(--salt-color-indigo-500); - --salt-palette-category-cat-9-strong: var(--salt-color-indigo-400); - --salt-palette-foreground-active: var(--salt-color-blue-300); - --salt-palette-foreground-hover: var(--salt-color-blue-400); - --salt-palette-foreground-invert: var(--salt-color-black); - --salt-palette-foreground-invert-disabled: var(--salt-color-black-40a); - --salt-palette-foreground-primary: var(--salt-color-white); - --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a); - --salt-palette-foreground-secondary: var(--salt-color-gray-300); - --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a); - --salt-palette-foreground-visited: var(--salt-color-purple-200); - --salt-palette-info: var(--salt-color-blue-400); - --salt-palette-info-weak: var(--salt-color-blue-900); - --salt-palette-negative: var(--salt-color-red-400); - --salt-palette-negative-weak: var(--salt-color-red-900); - --salt-palette-neutral: var(--salt-color-gray-500); - --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a); - --salt-palette-neutral-readonly: var(--salt-color-gray-500-15a); - --salt-palette-neutral-strong: var(--salt-color-gray-400); - --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a); - --salt-palette-neutral-stronger-primary: var(--salt-color-white-40a); - --salt-palette-neutral-stronger-secondary: var(--salt-color-white-25a); - --salt-palette-neutral-stronger-tertiary: var(--salt-color-white-15a); - --salt-palette-neutral-weak: var(--salt-color-gray-600); - --salt-palette-neutral-weaker: var(--salt-color-gray-700); - --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a); - --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-15a); - --salt-palette-neutral-weakest: var(--salt-color-gray-800); - --salt-palette-positive: var(--salt-color-green-400); - --salt-palette-positive-weak: var(--salt-color-green-900); - --salt-palette-warning: var(--salt-color-orange-400); - --salt-palette-warning-weak: var(--salt-color-orange-900); -} diff --git a/packages/theme/json/parsers/colorFormatSwap.js b/packages/theme/json/parsers/colorFormatSwap.js index 588fe764c3b..bed209e5d0f 100644 --- a/packages/theme/json/parsers/colorFormatSwap.js +++ b/packages/theme/json/parsers/colorFormatSwap.js @@ -29,6 +29,9 @@ module.exports = function colorFormatSwap(swapTo, color) { a = ((a * 255) | (1 << 8)).toString(16).slice(1).trim(); return rgbToHex(r, g, b) + a; } else { + if (color.includes("var(")) { + const cssVar = extractVar(color); + } const [r, g, b] = color .replace("rgb(", "") .replace(")", "") diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js index 8b794fe0576..dd52a0086b1 100644 --- a/packages/theme/json/parsers/getCssVariablesFromDir.js +++ b/packages/theme/json/parsers/getCssVariablesFromDir.js @@ -56,10 +56,7 @@ function processFile( let darkContent; let generalContent; - if ( - filePath.includes("palette-next") || - filePath.includes("characteristics-next") - ) { + if (filePath.includes("next")) { lightContent = cssContent.match(lightModeNextRegex); darkContent = cssContent.match(darkModeNextRegex); generalContent = cssContent.match(generalThemeNextRegex); @@ -170,38 +167,6 @@ function processFile( } module.exports = { - fromFile: function getCssVariablesFromFile(filePath) { - const cssVariables = {}; - const lightModeVariables = {}; - const darkModeVariables = {}; - const hdVariables = {}; - const mdVariables = {}; - const ldVariables = {}; - const tdVariables = {}; - - const stats = fs.statSync(filePath); - if (stats.isFile() && path.extname(filePath) === ".css") { - processFile(filePath, { - cssVariables, - lightModeVariables, - darkModeVariables, - hdVariables, - mdVariables, - ldVariables, - tdVariables, - }); - } - - return { - light: lightModeVariables, - dark: darkModeVariables, - high: hdVariables, - medium: mdVariables, - low: ldVariables, - touch: tdVariables, - general: cssVariables, - }; - }, fromDir: function getCssVariablesFromDir(dirPath, nonColors) { const cssVariables = {}; const lightModeVariables = {}; @@ -211,7 +176,7 @@ module.exports = { const ldVariables = {}; const tdVariables = {}; const files = fs.readdirSync(dirPath); - const foundations = files.map((file) => file.replace(".css", "")); + const dirFiles = files.map((file) => file.replace(".css", "")); files.forEach((file) => { const filePath = path.join(dirPath, file); const fileName = file.replace(".css", ""); @@ -223,7 +188,7 @@ module.exports = { } else if ( stats.isFile() && path.extname(file) === ".css" && - !foundations.includes(`${fileName}-next`) && + !dirFiles.includes(`${fileName}-next`) && fileName !== "fade" ) { processFile( diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index cf73084f078..0411e622180 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -13,6 +13,23 @@ function removePrefix(cssVar) { return cssVar.replace("--salt-", ""); } +const cssVarRegex = /var\(([a-z-0-9,\s]+)\)/; +function extractVar(color) { + let cssVar = cssVarRegex.exec(color)[1]; + if (cssVar.includes(",")) { + // shouldn't, but safety check + cssVar = cssVar.split(",")[0]; + } + return cssVar; +} + +// TODO: If opacity could be a var, need to fix this +function extractOpacity(color) { + let opacity = color.split(",")[-1]; + opacity.replaceAll(")", "").trim(""); + return opacity; +} + const jsonTokens = { modes: ["$light", "$dark"], densities: ["$high", "$medium", "$low", "$touch"], @@ -63,6 +80,9 @@ function formatFoundationValue(semantic, tokenValue) { case "opacity": foundationSemantic = "opacity"; break; + case "text": + foundationSemantic = "typography"; + break; default: foundationSemantic = "color"; } @@ -120,6 +140,9 @@ function format(variables) { case "opacity": type = "number"; break; + case "text": + type = "fontFamily"; + break; default: type = "color"; } @@ -186,21 +209,34 @@ function format(variables) { } break; case "color": + type = "color"; if (tokenName.includes("fade")) { - type = "color"; - const colorToken = `${tokenName.split("-fade")[0]}`; - const opacityValue = stripVarFunc(tokenValue.split(",")[3]); - // the semantic check here is due to e.g. --salt-palette-opacity-disabled used in fade tokens (correct) vs - // e.g. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover (this is technically wrong) - tokenValue = { - color: `{foundations.color.${colorToken}}`, - opacity: `{${ - opacityValue.includes("palette") ? "palette" : "foundations" - }.opacity.${removePrefix(stripVarFunc(opacityValue))}}`, - }; + if (tokenValue.includes("var(")) { + const rgbToken = extractVar(tokenValue); + const opacity = extractOpacity(tokenValue); + tokenValue = { + color: `${formatFoundationValue("color", rgbToken)}`, + opacity: opacity, + }; + } else { + const colorToken = `${tokenName.split("-fade")[0]}`; + const opacityValue = stripVarFunc(tokenValue.split(",")[3]); + // the semantic check here is due to e.g. --salt-palette-opacity-disabled used in fade tokens (correct) vs + // e.g. --salt-opacity-8 directly used in --salt-color-black-fade-background-hover (this is technically wrong) + tokenValue = { + color: `{foundations.color.${colorToken}}`, + opacity: `{${ + opacityValue.includes("palette") ? "palette" : "foundations" + }.opacity.${removePrefix(stripVarFunc(opacityValue))}}`, + }; + } } else { - type = "color"; - tokenValue = colorFormatSwap("hex", tokenValue); + if (tokenValue.includes("var(")) { + const rgbToken = extractVar(tokenValue); + tokenValue = `${formatFoundationValue("color", rgbToken)}`; + } else { + tokenValue = colorFormatSwap("hex", tokenValue); + } } break; default: @@ -304,26 +340,16 @@ function format(variables) { } function themeToJson() { - const paletteVariables = fromFile( - path.resolve(__dirname, "../../css/palette/palette-next.css") + const paletteVariables = fromDir( + path.resolve(__dirname, "../../css/palette") ); const foundationVariables = fromDir( path.resolve(__dirname, "../../css/foundations") ); - let characteristicVariables = fromFile( - path.resolve( - __dirname, - "../../css/characteristics/characteristics-next.css" - ) - ); - let characteristicsNonColors = fromDir( + const characteristicVariables = fromDir( path.resolve(__dirname, "../../css/characteristics"), true ); - characteristicVariables = { - ...characteristicVariables, - ...characteristicsNonColors, - }; format({ $light: { ...paletteVariables.light, diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index a7b96570a4a..19e202faa64 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -1,6 +1,14 @@ { - "modes": ["$light", "$dark"], - "densities": ["$high", "$medium", "$low", "$touch"], + "modes": [ + "$light", + "$dark" + ], + "densities": [ + "$high", + "$medium", + "$low", + "$touch" + ], "palette": { "accent": { "palette-accent": { @@ -45,6 +53,13 @@ }, "$type": "color" }, + "palette-accent-strongest": { + "$value": { + "$dark": "{foundations.color.color-blue-200}", + "$light": "{foundations.color.color-blue-800}" + }, + "$type": "color" + }, "palette-accent-weak": { "$value": { "$dark": "{foundations.color.color-blue-600}", @@ -82,408 +97,517 @@ }, "$type": "color" }, - "palette-background-hover": { - "$value": { - "$dark": "{foundations.color.color-white-8a}", - "$light": "{foundations.color.color-black-8a}" - }, - "$type": "color" - }, "palette-background-primary": { "$value": { - "$dark": "{foundations.color.color-asphalt}", - "$light": "{foundations.color.color-snow}" + "$dark": "{foundations.color.color-background-jet}", + "$light": "{foundations.color.color-background-snow}" }, "$type": "color" }, "palette-background-primary-disabled": { "$value": { - "$dark": "{foundations.color.color-asphalt-40a}", - "$light": "{foundations.color.color-snow-40a}" + "$dark": "{foundations.color.color-background-jet-40a}", + "$light": "{foundations.color.color-background-snow-40a}" }, "$type": "color" }, "palette-background-secondary": { "$value": { - "$dark": "{foundations.color.color-oil}", - "$light": "{foundations.color.color-mist}" + "$dark": "{foundations.color.color-background-granite}", + "$light": "{foundations.color.color-background-marble}" }, "$type": "color" }, "palette-background-secondary-disabled": { "$value": { - "$dark": "{foundations.color.color-oil-40a}", - "$light": "{foundations.color.color-mist-40a}" + "$dark": "{foundations.color.color-background-granite-40a}", + "$light": "{foundations.color.color-background-marble-40a}" }, "$type": "color" }, - "palette-background-transparent": { + "palette-background-tertiary": { "$value": { - "$dark": "{foundations.color.color-transparent}", - "$light": "{foundations.color.color-transparent}" + "$dark": "{foundations.color.color-background-leather}", + "$light": "{foundations.color.color-background-limestone}" + }, + "$type": "color" + }, + "palette-background-tertiary-disabled": { + "$value": { + "$dark": "{foundations.color.color-background-leather-40a}", + "$light": "{foundations.color.color-background-limestone-40a}" + }, + "$type": "color" + }, + "palette-background-none": { + "$value": { + "$dark": "transparent", + "$light": "transparent" }, "$type": "color" } }, - "category": { - "palette-category-cat-1": { + "error": { + "palette-error-background": { "$value": { - "$dark": "{foundations.color.color-cobalt-500}", - "$light": "{foundations.color.color-cobalt-500}" + "$dark": "{foundations.color.color-red-900}", + "$light": "{foundations.color.color-red-10}" }, "$type": "color" }, - "palette-category-cat-1-strong": { + "palette-error-background-selected": { "$value": { - "$dark": "{foundations.color.color-cobalt-400}", - "$light": "{foundations.color.color-cobalt-600}" + "$dark": "{foundations.color.color-red-900}", + "$light": "{foundations.color.color-red-20}" }, "$type": "color" }, - "palette-category-cat-10": { + "palette-error-border": { "$value": { - "$dark": "{foundations.color.color-jade-500}", - "$light": "{foundations.color.color-jade-500}" + "$dark": "{foundations.color.color-red-400}", + "$light": "{foundations.color.color-red-500}" }, "$type": "color" }, - "palette-category-cat-10-strong": { + "palette-error-foreground-decorative": { "$value": { - "$dark": "{foundations.color.color-jade-400}", - "$light": "{foundations.color.color-jade-600}" + "$dark": "{foundations.color.color-red-400}", + "$light": "{foundations.color.color-red-500}" }, "$type": "color" }, - "palette-category-cat-11": { + "palette-error-foreground-informative": { + "$value": { + "$dark": "{foundations.color.color-red-200}", + "$light": "{foundations.color.color-red-600}" + }, + "$type": "color" + } + }, + "foreground": { + "palette-foreground-active": { "$value": { - "$dark": "{foundations.color.color-citrine-500}", - "$light": "{foundations.color.color-citrine-500}" + "$dark": "{foundations.color.color-blue-300}", + "$light": "{foundations.color.color-blue-700}" }, "$type": "color" }, - "palette-category-cat-11-strong": { + "palette-foreground-hover": { "$value": { - "$dark": "{foundations.color.color-citrine-400}", - "$light": "{foundations.color.color-citrine-600}" + "$dark": "{foundations.color.color-blue-400}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-category-cat-12": { + "palette-foreground-primary": { "$value": { - "$dark": "{foundations.color.color-autumn-500}", - "$light": "{foundations.color.color-autumn-500}" + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-black}" }, "$type": "color" }, - "palette-category-cat-12-strong": { + "palette-foreground-primary-disabled": { "$value": { - "$dark": "{foundations.color.color-autumn-400}", - "$light": "{foundations.color.color-autumn-600}" + "$dark": "{foundations.color.color-white-40a}", + "$light": "{foundations.color.color-black-40a}" }, "$type": "color" }, - "palette-category-cat-13": { + "palette-foreground-primary-alt": { "$value": { - "$dark": "{foundations.color.color-lavender-500}", - "$light": "{foundations.color.color-lavender-500}" + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" }, "$type": "color" }, - "palette-category-cat-13-strong": { + "palette-foreground-primary-alt-disabled": { "$value": { - "$dark": "{foundations.color.color-lavender-400}", - "$light": "{foundations.color.color-lavender-600}" + "$dark": "{foundations.color.color-white-40a}", + "$light": "{foundations.color.color-white-40a}" }, "$type": "color" }, - "palette-category-cat-14": { + "palette-foreground-secondary": { "$value": { - "$dark": "{foundations.color.color-ocean-500}", - "$light": "{foundations.color.color-ocean-500}" + "$dark": "{foundations.color.color-gray-400}", + "$light": "{foundations.color.color-gray-600}" }, "$type": "color" }, - "palette-category-cat-14-strong": { + "palette-foreground-secondary-disabled": { "$value": { - "$dark": "{foundations.color.color-ocean-400}", - "$light": "{foundations.color.color-ocean-600}" + "$dark": "{foundations.color.color-gray-400-40a}", + "$light": "{foundations.color.color-gray-600-40a}" }, "$type": "color" }, - "palette-category-cat-15": { + "palette-foreground-visited": { "$value": { - "$dark": "{foundations.color.color-smoke-500}", - "$light": "{foundations.color.color-smoke-500}" + "$dark": "{foundations.color.color-purple-200}", + "$light": "{foundations.color.color-purple-800}" }, "$type": "color" }, - "palette-category-cat-15-strong": { + "palette-foreground-invert": { + "$value": { + "$dark": "{foundations.color.color-black}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + } + }, + "info": { + "palette-info": { "$value": { - "$dark": "{foundations.color.color-smoke-400}", - "$light": "{foundations.color.color-smoke-600}" + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" }, "$type": "color" }, - "palette-category-cat-16": { + "palette-info-weak": { "$value": { - "$dark": "{foundations.color.color-fuchsia-500}", - "$light": "{foundations.color.color-fuchsia-500}" + "$dark": "{foundations.color.color-blue-900}", + "$light": "{foundations.color.color-blue-100}" + }, + "$type": "color" + } + }, + "interact": { + "palette-interact-background": { + "$value": { + "$dark": "transparent", + "$light": "transparent" }, "$type": "color" }, - "palette-category-cat-16-strong": { + "palette-interact-background-blurSelected": { "$value": { - "$dark": "{foundations.color.color-fuchsia-400}", - "$light": "{foundations.color.color-fuchsia-600}" + "$dark": "{foundations.color.color-gray-600}", + "$light": "{foundations.color.color-gray-30}" }, "$type": "color" }, - "palette-category-cat-17": { + "palette-interact-background-hover": { "$value": { - "$dark": "{foundations.color.color-lime-500}", - "$light": "{foundations.color.color-lime-500}" + "$dark": "{foundations.color.color-blue-800}", + "$light": "{foundations.color.color-blue-10}" }, "$type": "color" }, - "palette-category-cat-17-strong": { + "palette-interact-background-active": { "$value": { - "$dark": "{foundations.color.color-lime-400}", - "$light": "{foundations.color.color-lime-600}" + "$dark": "{foundations.color.color-blue-700}", + "$light": "{foundations.color.color-blue-30}" }, "$type": "color" }, - "palette-category-cat-18": { + "palette-interact-background-disabled": { "$value": { - "$dark": "{foundations.color.color-fur-500}", - "$light": "{foundations.color.color-fur-500}" + "$dark": "transparent", + "$light": "transparent" }, "$type": "color" }, - "palette-category-cat-18-strong": { + "palette-interact-background-activeDisabled": { "$value": { - "$dark": "{foundations.color.color-fur-400}", - "$light": "{foundations.color.color-fur-600}" + "$dark": "{foundations.color.color-blue-700-fade-background}", + "$light": "{foundations.color.color-blue-30-fade-background}" }, "$type": "color" }, - "palette-category-cat-19": { + "palette-interact-border": { "$value": { - "$dark": "{foundations.color.color-violet-500}", - "$light": "{foundations.color.color-violet-500}" + "$dark": "{foundations.color.color-gray-90}", + "$light": "{foundations.color.color-gray-200}" }, "$type": "color" }, - "palette-category-cat-19-strong": { + "palette-interact-border-active": { "$value": { - "$dark": "{foundations.color.color-violet-400}", - "$light": "{foundations.color.color-violet-600}" + "$dark": "{foundations.color.color-blue-100}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-category-cat-2": { + "palette-interact-border-activeDisabled": { "$value": { - "$dark": "{foundations.color.color-cider-500}", - "$light": "{foundations.color.color-cider-500}" + "$dark": "{foundations.color.color-blue-100-fade-fill}", + "$light": "{foundations.color.color-blue-600-fade-fill}" }, "$type": "color" }, - "palette-category-cat-2-strong": { + "palette-interact-border-disabled": { "$value": { - "$dark": "{foundations.color.color-cider-400}", - "$light": "{foundations.color.color-cider-600}" + "$dark": "{foundations.color.color-gray-90-fade-border}", + "$light": "{foundations.color.color-gray-200-fade-border}" }, "$type": "color" }, - "palette-category-cat-20": { + "palette-interact-border-hover": { "$value": { - "$dark": "{foundations.color.color-forest-500}", - "$light": "{foundations.color.color-forest-500}" + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" }, "$type": "color" }, - "palette-category-cat-20-strong": { + "palette-interact-border-readonly": { "$value": { - "$dark": "{foundations.color.color-forest-400}", - "$light": "{foundations.color.color-forest-600}" + "$dark": "{foundations.color.color-gray-90-fade-border-readonly}", + "$light": "{foundations.color.color-gray-200-fade-border-readonly}" }, "$type": "color" }, - "palette-category-cat-3": { + "palette-interact-foreground": { "$value": { - "$dark": "{foundations.color.color-plum-500}", - "$light": "{foundations.color.color-plum-500}" + "$dark": "{foundations.color.color-gray-90}", + "$light": "{foundations.color.color-gray-200}" }, "$type": "color" }, - "palette-category-cat-3-strong": { + "palette-interact-foreground-active": { "$value": { - "$dark": "{foundations.color.color-plum-400}", - "$light": "{foundations.color.color-plum-600}" + "$dark": "{foundations.color.color-blue-100}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-category-cat-4": { + "palette-interact-foreground-activeDisabled": { "$value": { - "$dark": "{foundations.color.color-aqua-500}", - "$light": "{foundations.color.color-aqua-500}" + "$dark": "{foundations.color.color-blue-100-fade-foreground}", + "$light": "{foundations.color.color-blue-600-fade-foreground}" }, "$type": "color" }, - "palette-category-cat-4-strong": { + "palette-interact-foreground-disabled": { "$value": { - "$dark": "{foundations.color.color-aqua-400}", - "$light": "{foundations.color.color-aqua-600}" + "$dark": "{foundations.color.color-gray-90-fade-foreground}", + "$light": "{foundations.color.color-gray-200-fade-foreground}" }, "$type": "color" }, - "palette-category-cat-5": { + "palette-interact-foreground-hover": { "$value": { - "$dark": "{foundations.color.color-slate-500}", - "$light": "{foundations.color.color-slate-500}" + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" }, "$type": "color" }, - "palette-category-cat-5-strong": { + "palette-interact-outline": { "$value": { - "$dark": "{foundations.color.color-slate-400}", - "$light": "{foundations.color.color-slate-600}" + "$dark": "{foundations.color.color-blue-100}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-category-cat-6": { + "palette-interact-cta-background": { "$value": { - "$dark": "{foundations.color.color-rose-500}", - "$light": "{foundations.color.color-rose-500}" + "$dark": "{foundations.color.color-blue-600}", + "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-category-cat-6-strong": { + "palette-interact-cta-background-active": { "$value": { - "$dark": "{foundations.color.color-rose-400}", - "$light": "{foundations.color.color-rose-600}" + "$dark": "{foundations.color.color-blue-700}", + "$light": "{foundations.color.color-blue-700}" }, "$type": "color" }, - "palette-category-cat-7": { + "palette-interact-cta-background-disabled": { "$value": { - "$dark": "{foundations.color.color-olive-500}", - "$light": "{foundations.color.color-olive-500}" + "$dark": "{foundations.color.color-blue-600-fade-background}", + "$light": "{foundations.color.color-blue-600-fade-background}" }, "$type": "color" }, - "palette-category-cat-7-strong": { + "palette-interact-cta-background-hover": { "$value": { - "$dark": "{foundations.color.color-olive-400}", - "$light": "{foundations.color.color-olive-600}" + "$dark": "{foundations.color.color-blue-500}", + "$light": "{foundations.color.color-blue-500}" }, "$type": "color" }, - "palette-category-cat-8": { + "palette-interact-cta-foreground": { "$value": { - "$dark": "{foundations.color.color-salmon-500}", - "$light": "{foundations.color.color-salmon-500}" + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" }, "$type": "color" }, - "palette-category-cat-8-strong": { + "palette-interact-cta-foreground-active": { "$value": { - "$dark": "{foundations.color.color-salmon-400}", - "$light": "{foundations.color.color-salmon-600}" + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" }, "$type": "color" }, - "palette-category-cat-9": { + "palette-interact-cta-foreground-disabled": { "$value": { - "$dark": "{foundations.color.color-indigo-500}", - "$light": "{foundations.color.color-indigo-500}" + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-white-fade-foreground}" }, "$type": "color" }, - "palette-category-cat-9-strong": { + "palette-interact-cta-foreground-hover": { "$value": { - "$dark": "{foundations.color.color-indigo-400}", - "$light": "{foundations.color.color-indigo-600}" + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-white}" }, "$type": "color" - } - }, - "foreground": { - "palette-foreground-active": { + }, + "palette-interact-primary-background": { "$value": { - "$dark": "{foundations.color.color-blue-300}", - "$light": "{foundations.color.color-blue-700}" + "$dark": "{foundations.color.color-gray-300}", + "$light": "{foundations.color.color-gray-60}" }, "$type": "color" }, - "palette-foreground-hover": { + "palette-interact-primary-background-active": { "$value": { - "$dark": "{foundations.color.color-blue-400}", - "$light": "{foundations.color.color-blue-600}" + "$dark": "{foundations.color.color-gray-70}", + "$light": "{foundations.color.color-gray-200}" }, "$type": "color" }, - "palette-foreground-invert": { + "palette-interact-primary-background-disabled": { "$value": { - "$dark": "{foundations.color.color-black}", + "$dark": "{foundations.color.color-gray-300-fade-background}", + "$light": "{foundations.color.color-gray-60-fade-background}" + }, + "$type": "color" + }, + "palette-interact-primary-background-hover": { + "$value": { + "$dark": "{foundations.color.color-gray-200}", + "$light": "{foundations.color.color-gray-40}" + }, + "$type": "color" + }, + "palette-interact-primary-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + }, + "palette-interact-primary-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-gray-900}", "$light": "{foundations.color.color-white}" }, "$type": "color" }, - "palette-foreground-invert-disabled": { + "palette-interact-primary-foreground-disabled": { "$value": { - "$dark": "{foundations.color.color-black-40a}", - "$light": "{foundations.color.color-white-40a}" + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-gray-900-fade-foreground}" }, "$type": "color" }, - "palette-foreground-primary": { + "palette-interact-primary-foreground-hover": { "$value": { "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-black}" + "$light": "{foundations.color.color-gray-900}" }, "$type": "color" }, - "palette-foreground-primary-disabled": { + "palette-interact-secondary-background": { "$value": { - "$dark": "{foundations.color.color-white-40a}", - "$light": "{foundations.color.color-black-40a}" + "$dark": "transparent", + "$light": "transparent" }, "$type": "color" }, - "palette-foreground-secondary": { + "palette-interact-secondary-background-active": { "$value": { - "$dark": "{foundations.color.color-gray-300}", - "$light": "{foundations.color.color-gray-700}" + "$dark": "{foundations.color.color-gray-70}", + "$light": "{foundations.color.color-gray-200}" }, "$type": "color" }, - "palette-foreground-secondary-disabled": { + "palette-interact-secondary-background-disabled": { "$value": { - "$dark": "{foundations.color.color-gray-300-40a}", - "$light": "{foundations.color.color-gray-700-40a}" + "$dark": "transparent", + "$light": "transparent" }, "$type": "color" }, - "palette-foreground-visited": { + "palette-interact-secondary-background-hover": { "$value": { - "$dark": "{foundations.color.color-purple-200}", - "$light": "{foundations.color.color-purple-800}" + "$dark": "{foundations.color.color-gray-200}", + "$light": "{foundations.color.color-gray-40}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-active": { + "$value": { + "$dark": "{foundations.color.color-gray-900}", + "$light": "{foundations.color.color-white}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-disabled": { + "$value": { + "$dark": "{foundations.color.color-white-fade-foreground}", + "$light": "{foundations.color.color-gray-900-fade-foreground}" + }, + "$type": "color" + }, + "palette-interact-secondary-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-white}", + "$light": "{foundations.color.color-gray-900}" }, "$type": "color" } }, - "info": { - "palette-info": { + "navigate": { + "palette-navigate-background-hover": { "$value": { - "$dark": "{foundations.color.color-blue-400}", + "$dark": "{foundations.color.color-white-fade-background-hover}", + "$light": "{foundations.color.color-black-fade-background-hover}" + }, + "$type": "color" + }, + "palette-navigate-foreground-hover": { + "$value": { + "$dark": "{foundations.color.color-blue-200}", "$light": "{foundations.color.color-blue-600}" }, "$type": "color" }, - "palette-info-weak": { + "palette-navigate-foreground-active": { "$value": { - "$dark": "{foundations.color.color-blue-900}", - "$light": "{foundations.color.color-blue-100}" + "$dark": "{foundations.color.color-blue-300}", + "$light": "{foundations.color.color-blue-700}" + }, + "$type": "color" + }, + "palette-navigate-foreground-visited": { + "$value": { + "$dark": "{foundations.color.color-purple-100}", + "$light": "{foundations.color.color-purple-800}" + }, + "$type": "color" + }, + "palette-navigate-indicator-hover": { + "$value": { + "$dark": "{foundations.color.color-gray-90}", + "$light": "{foundations.color.color-gray-90}" + }, + "$type": "color" + }, + "palette-navigate-indicator-active": { + "$value": { + "$dark": "{foundations.color.color-orange-400}", + "$light": "{foundations.color.color-orange-600}" }, "$type": "color" } @@ -491,8 +615,8 @@ "negative": { "palette-negative": { "$value": { - "$dark": "{foundations.color.color-red-400}", - "$light": "{foundations.color.color-red-600}" + "$dark": "{foundations.color.color-red-500}", + "$light": "{foundations.color.color-red-500}" }, "$type": "color" }, @@ -521,8 +645,8 @@ }, "palette-neutral-readonly": { "$value": { - "$dark": "{foundations.color.color-gray-500-15a}", - "$light": "{foundations.color.color-gray-500-15a}" + "$dark": "{foundations.color.color-gray-500-10a}", + "$light": "{foundations.color.color-gray-500-10a}" }, "$type": "color" }, @@ -540,6 +664,13 @@ }, "$type": "color" }, + "palette-neutral-stronger": { + "$value": { + "$dark": "{foundations.color.color-gray-300}", + "$light": "{foundations.color.color-gray-700}" + }, + "$type": "color" + }, "palette-neutral-stronger-primary": { "$value": { "$dark": "{foundations.color.color-white-40a}", @@ -549,15 +680,22 @@ }, "palette-neutral-stronger-secondary": { "$value": { - "$dark": "{foundations.color.color-white-25a}", - "$light": "{foundations.color.color-black-25a}" + "$dark": "{foundations.color.color-white-30a}", + "$light": "{foundations.color.color-black-30a}" }, "$type": "color" }, "palette-neutral-stronger-tertiary": { "$value": { - "$dark": "{foundations.color.color-white-15a}", - "$light": "{foundations.color.color-black-15a}" + "$dark": "{foundations.color.color-white-20a}", + "$light": "{foundations.color.color-black-20a}" + }, + "$type": "color" + }, + "palette-neutral-strongest": { + "$value": { + "$dark": "{foundations.color.color-gray-200}", + "$light": "{foundations.color.color-gray-800}" }, "$type": "color" }, @@ -568,6 +706,13 @@ }, "$type": "color" }, + "palette-neutral-weak-disabled": { + "$value": { + "$dark": "{foundations.color.color-gray-600-40a}", + "$light": "{foundations.color.color-gray-400-40a}" + }, + "$type": "color" + }, "palette-neutral-weaker": { "$value": { "$dark": "{foundations.color.color-gray-700}", @@ -584,8 +729,8 @@ }, "palette-neutral-weaker-readonly": { "$value": { - "$dark": "{foundations.color.color-gray-700-15a}", - "$light": "{foundations.color.color-gray-300-15a}" + "$dark": "{foundations.color.color-gray-700-10a}", + "$light": "{foundations.color.color-gray-300-10a}" }, "$type": "color" }, @@ -600,8 +745,8 @@ "positive": { "palette-positive": { "$value": { - "$dark": "{foundations.color.color-green-400}", - "$light": "{foundations.color.color-green-600}" + "$dark": "{foundations.color.color-green-500}", + "$light": "{foundations.color.color-green-500}" }, "$type": "color" }, @@ -613,11 +758,48 @@ "$type": "color" } }, + "success": { + "palette-success-background": { + "$value": { + "$dark": "{foundations.color.color-green-900}", + "$light": "{foundations.color.color-green-10}" + }, + "$type": "color" + }, + "palette-success-background-selected": { + "$value": { + "$dark": "{foundations.color.color-green-900}", + "$light": "{foundations.color.color-green-20}" + }, + "$type": "color" + }, + "palette-success-border": { + "$value": { + "$dark": "{foundations.color.color-green-400}", + "$light": "{foundations.color.color-green-500}" + }, + "$type": "color" + }, + "palette-success-foreground-decorative": { + "$value": { + "$dark": "{foundations.color.color-green-400}", + "$light": "{foundations.color.color-green-500}" + }, + "$type": "color" + }, + "palette-success-foreground-informative": { + "$value": { + "$dark": "{foundations.color.color-green-200}", + "$light": "{foundations.color.color-green-600}" + }, + "$type": "color" + } + }, "warning": { "palette-warning": { "$value": { - "$dark": "{foundations.color.color-orange-400}", - "$light": "{foundations.color.color-orange-600}" + "$dark": "{foundations.color.color-orange-500}", + "$light": "{foundations.color.color-orange-500}" }, "$type": "color" }, @@ -628,6 +810,50 @@ }, "$type": "color" } + }, + "opacity": { + "palette-opacity-backdrop": { + "$value": "{foundations.opacity.opacity-70}", + "$type": "number" + }, + "palette-opacity-disabled": { + "$value": "{foundations.opacity.opacity-40}", + "$type": "number" + }, + "palette-opacity-background-readonly": { + "$value": "{foundations.opacity.opacity-0}", + "$type": "number" + }, + "palette-opacity-border-readonly": { + "$value": "{foundations.opacity.opacity-15}", + "$type": "number" + }, + "palette-opacity-primary-border": { + "$value": "{foundations.opacity.opacity-40}", + "$type": "number" + }, + "palette-opacity-secondary-border": { + "$value": "{foundations.opacity.opacity-25}", + "$type": "number" + }, + "palette-opacity-tertiary-border": { + "$value": "{foundations.opacity.opacity-15}", + "$type": "number" + } + }, + "text": { + "palette-text-fontFamily": { + "$value": "{foundations.typography.typography-fontFamily-openSans}", + "$type": "fontFamily" + }, + "palette-text-fontFamily-heading": { + "$value": "{foundations.typography.typography-fontFamily-openSans}", + "$type": "fontFamily" + }, + "palette-text-fontFamily-code": { + "$value": "{foundations.typography.typography-fontFamily-ptMono}", + "$type": "fontFamily" + } } }, "foundations": { @@ -941,651 +1167,715 @@ }, "$type": "number" }, - "zIndex-flyover": { - "$value": { - "$low": "1500", - "$touch": "1500", - "$medium": "1500", - "$high": "1500" - }, - "$type": "number" - } - }, - "color": { - "color-aqua-400": { - "$value": "#6fdbde", + "zIndex-flyover": { + "$value": { + "$low": "1500", + "$touch": "1500", + "$medium": "1500", + "$high": "1500" + }, + "$type": "number" + } + }, + "color": { + "color-white-rgb": { + "$value": "#ffffff", + "$type": "color" + }, + "color-gray-100-rgb": { + "$value": "#f5f7f8", + "$type": "color" + }, + "color-gray-200-rgb": { + "$value": "#d3d5d8", + "$type": "color" + }, + "color-gray-300-rgb": { + "$value": "#b1b5b9", + "$type": "color" + }, + "color-gray-400-rgb": { + "$value": "#91959a", + "$type": "color" + }, + "color-gray-500-rgb": { + "$value": "#72777d", + "$type": "color" + }, + "color-gray-600-rgb": { + "$value": "#5f646a", + "$type": "color" + }, + "color-gray-700-rgb": { + "$value": "#4c5157", + "$type": "color" + }, + "color-gray-800-rgb": { + "$value": "#3a3f44", + "$type": "color" + }, + "color-gray-900-rgb": { + "$value": "#292e33", + "$type": "color" + }, + "color-black-rgb": { + "$value": "#000000", + "$type": "color" + }, + "color-blue-100-rgb": { + "$value": "#eaf6ff", + "$type": "color" + }, + "color-blue-200-rgb": { + "$value": "#c0d5f3", + "$type": "color" + }, + "color-blue-300-rgb": { + "$value": "#94b4e8", "$type": "color" }, - "color-aqua-500": { - "$value": "#2a8285", + "color-blue-400-rgb": { + "$value": "#6395db", "$type": "color" }, - "color-aqua-600": { - "$value": "#155c5e", + "color-blue-500-rgb": { + "$value": "#0078cf", "$type": "color" }, - "color-asphalt": { - "$value": "#18191a", + "color-blue-600-rgb": { + "$value": "#0161ad", "$type": "color" }, - "color-asphalt-40a": { - "$value": "#18191a66", + "color-blue-700-rgb": { + "$value": "#014b8c", "$type": "color" }, - "color-autumn-400": { - "$value": "#f29f63", + "color-blue-800-rgb": { + "$value": "#01366d", "$type": "color" }, - "color-autumn-500": { - "$value": "#bd5b15", + "color-blue-900-rgb": { + "$value": "#00224f", "$type": "color" }, - "color-autumn-600": { - "$value": "#803a08", + "color-green-100-rgb": { + "$value": "#eaf5f2", "$type": "color" }, - "color-black": { - "$value": "#000000", + "color-green-200-rgb": { + "$value": "#b9d9cb", "$type": "color" }, - "color-black-15a": { - "$value": "#00000026", + "color-green-300-rgb": { + "$value": "#88bea5", "$type": "color" }, - "color-black-25a": { - "$value": "#0000003f", + "color-green-400-rgb": { + "$value": "#54a280", "$type": "color" }, - "color-black-40a": { - "$value": "#00000066", + "color-green-500-rgb": { + "$value": "#00875d", "$type": "color" }, - "color-black-70a": { - "$value": "#000000b2", + "color-green-600-rgb": { + "$value": "#00714b", "$type": "color" }, - "color-black-8a": { - "$value": "#00000014", + "color-green-700-rgb": { + "$value": "#005b3a", "$type": "color" }, - "color-blue-100": { - "$value": "#cae7fc", + "color-green-800-rgb": { + "$value": "#00472a", "$type": "color" }, - "color-blue-200": { - "$value": "#a7cbea", + "color-green-900-rgb": { + "$value": "#00331a", "$type": "color" }, - "color-blue-200-40a": { - "$value": "#a7cbea66", + "color-teal-100-rgb": { + "$value": "#dbf5f7", "$type": "color" }, - "color-blue-300": { - "$value": "#83b0d8", + "color-teal-200-rgb": { + "$value": "#b1d6e0", "$type": "color" }, - "color-blue-300-40a": { - "$value": "#83b0d866", + "color-teal-300-rgb": { + "$value": "#86b8ca", "$type": "color" }, - "color-blue-400": { - "$value": "#5c95c7", + "color-teal-400-rgb": { + "$value": "#599bb4", "$type": "color" }, - "color-blue-400-40a": { - "$value": "#5c95c766", + "color-teal-500-rgb": { + "$value": "#1b7f9e", "$type": "color" }, - "color-blue-500": { - "$value": "#2b7cb5", + "color-teal-600-rgb": { + "$value": "#126681", "$type": "color" }, - "color-blue-500-40a": { - "$value": "#2b7cb566", + "color-teal-700-rgb": { + "$value": "#0a4e66", "$type": "color" }, - "color-blue-600": { - "$value": "#1f6494", + "color-teal-800-rgb": { + "$value": "#03374c", "$type": "color" }, - "color-blue-600-40a": { - "$value": "#1f649466", + "color-teal-900-rgb": { + "$value": "#002233", "$type": "color" }, - "color-blue-700": { - "$value": "#134d75", + "color-orange-100-rgb": { + "$value": "#ffecd9", "$type": "color" }, - "color-blue-700-40a": { - "$value": "#134d7566", + "color-orange-200-rgb": { + "$value": "#f4c7a4", "$type": "color" }, - "color-blue-800": { - "$value": "#073757", + "color-orange-300-rgb": { + "$value": "#e5a271", "$type": "color" }, - "color-blue-800-40a": { - "$value": "#07375766", + "color-orange-400-rgb": { + "$value": "#d37f40", "$type": "color" }, - "color-blue-900": { - "$value": "#00223b", + "color-orange-500-rgb": { + "$value": "#bd5b00", "$type": "color" }, - "color-cider-400": { - "$value": "#f2af74", + "color-orange-600-rgb": { + "$value": "#9c4b04", "$type": "color" }, - "color-cider-500": { - "$value": "#ab6528", + "color-orange-700-rgb": { + "$value": "#7d3c05", "$type": "color" }, - "color-cider-600": { - "$value": "#854814", + "color-orange-800-rgb": { + "$value": "#5e2e05", "$type": "color" }, - "color-citrine-400": { - "$value": "#ccba62", + "color-orange-900-rgb": { + "$value": "#422000", "$type": "color" }, - "color-citrine-500": { - "$value": "#877410", + "color-red-100-rgb": { + "$value": "#ffecea", "$type": "color" }, - "color-citrine-600": { - "$value": "#635303", + "color-red-200-rgb": { + "$value": "#ffc1ba", "$type": "color" }, - "color-cobalt-400": { - "$value": "#7eacf2", + "color-red-300-rgb": { + "$value": "#fd948b", "$type": "color" }, - "color-cobalt-500": { - "$value": "#4676bf", + "color-red-400-rgb": { + "$value": "#f3645e", "$type": "color" }, - "color-cobalt-600": { - "$value": "#234d8c", + "color-red-500-rgb": { + "$value": "#e52135", "$type": "color" }, - "color-forest-400": { - "$value": "#60d1a4", + "color-red-600-rgb": { + "$value": "#c11729", "$type": "color" }, - "color-forest-500": { - "$value": "#23855e", + "color-red-700-rgb": { + "$value": "#9f0e1d", "$type": "color" }, - "color-forest-600": { - "$value": "#196145", + "color-red-800-rgb": { + "$value": "#7d0512", "$type": "color" }, - "color-fuchsia-400": { - "$value": "#e879bf", + "color-red-900-rgb": { + "$value": "#5e0003", "$type": "color" }, - "color-fuchsia-500": { - "$value": "#c24795", + "color-purple-100-rgb": { + "$value": "#f6f0fa", "$type": "color" }, - "color-fuchsia-600": { - "$value": "#822a62", + "color-purple-200-rgb": { + "$value": "#e2cae7", "$type": "color" }, - "color-fur-400": { - "$value": "#cc966c", + "color-purple-300-rgb": { + "$value": "#cda5d3", "$type": "color" }, - "color-fur-500": { - "$value": "#996a45", + "color-purple-400-rgb": { + "$value": "#b880c0", "$type": "color" }, - "color-fur-600": { - "$value": "#664022", + "color-purple-500-rgb": { + "$value": "#a25bad", "$type": "color" }, - "color-gray-100": { - "$value": "#ebebed", + "color-purple-600-rgb": { + "$value": "#894b92", "$type": "color" }, - "color-gray-200": { - "$value": "#cbccd0", + "color-purple-700-rgb": { + "$value": "#703c78", "$type": "color" }, - "color-gray-300": { - "$value": "#adaeb3", + "color-purple-800-rgb": { + "$value": "#592d5f", "$type": "color" }, - "color-gray-300-15a": { - "$value": "#adaeb326", + "color-purple-900-rgb": { + "$value": "#421f47", "$type": "color" }, - "color-gray-300-40a": { - "$value": "#adaeb366", + "color-background-snow-rgb": { + "$value": "#ffffff", "$type": "color" }, - "color-gray-400": { - "$value": "#8f9198", + "color-background-marble-rgb": { + "$value": "#f5f7f8", "$type": "color" }, - "color-gray-400-40a": { - "$value": "#8f919866", + "color-background-limestone-rgb": { + "$value": "#faf8f2", "$type": "color" }, - "color-gray-500": { - "$value": "#72757d", + "color-background-gradientlight-rgb": { + "$value": "#e2e4e5", "$type": "color" }, - "color-gray-500-15a": { - "$value": "#72757d26", + "color-background-jet-rgb": { + "$value": "#101820", "$type": "color" }, - "color-gray-500-40a": { - "$value": "#72757d66", + "color-background-granite-rgb": { + "$value": "#1a2229", "$type": "color" }, - "color-gray-600": { - "$value": "#5b5d64", + "color-background-leather-rgb": { + "$value": "#26292b", "$type": "color" }, - "color-gray-600-40a": { - "$value": "#5b5d6466", + "color-logo-brown-rgb": { + "$value": "#3a2206", "$type": "color" }, - "color-gray-700": { - "$value": "#45474d", + "color-white": { + "$value": "{foundations.color.color-white-rgb}", "$type": "color" }, - "color-gray-700-15a": { - "$value": "#45474d26", + "color-gray-100": { + "$value": "{foundations.color.color-gray-100-rgb}", "$type": "color" }, - "color-gray-700-40a": { - "$value": "#45474d66", + "color-gray-200": { + "$value": "{foundations.color.color-gray-200-rgb}", "$type": "color" }, - "color-gray-800": { - "$value": "#303136", + "color-gray-300": { + "$value": "{foundations.color.color-gray-300-rgb}", "$type": "color" }, - "color-gray-900": { - "$value": "#1c1d21", + "color-gray-400": { + "$value": "{foundations.color.color-gray-400-rgb}", "$type": "color" }, - "color-green-100": { - "$value": "#c7edd6", + "color-gray-500": { + "$value": "{foundations.color.color-gray-500-rgb}", "$type": "color" }, - "color-green-200": { - "$value": "#a1d3b2", + "color-gray-600": { + "$value": "{foundations.color.color-gray-600-rgb}", "$type": "color" }, - "color-green-300": { - "$value": "#7bb98f", + "color-gray-700": { + "$value": "{foundations.color.color-gray-700-rgb}", "$type": "color" }, - "color-green-400": { - "$value": "#54a06d", + "color-gray-800": { + "$value": "{foundations.color.color-gray-800-rgb}", "$type": "color" }, - "color-green-500": { - "$value": "#26874c", + "color-gray-900": { + "$value": "{foundations.color.color-gray-900-rgb}", "$type": "color" }, - "color-green-600": { - "$value": "#1c723d", + "color-black": { + "$value": "{foundations.color.color-black-rgb}", "$type": "color" }, - "color-green-700": { - "$value": "#115d2f", + "color-blue-100": { + "$value": "{foundations.color.color-blue-100-rgb}", "$type": "color" }, - "color-green-800": { - "$value": "#074922", + "color-blue-200": { + "$value": "{foundations.color.color-blue-200-rgb}", "$type": "color" }, - "color-green-900": { - "$value": "#003615", + "color-blue-300": { + "$value": "{foundations.color.color-blue-300-rgb}", + "$type": "color" + }, + "color-blue-400": { + "$value": "{foundations.color.color-blue-400-rgb}", + "$type": "color" + }, + "color-blue-500": { + "$value": "{foundations.color.color-blue-500-rgb}", "$type": "color" }, - "color-indigo-400": { - "$value": "#9887f5", + "color-blue-600": { + "$value": "{foundations.color.color-blue-600-rgb}", "$type": "color" }, - "color-indigo-500": { - "$value": "#7868ce", + "color-blue-700": { + "$value": "{foundations.color.color-blue-700-rgb}", "$type": "color" }, - "color-indigo-600": { - "$value": "#463b82", + "color-blue-800": { + "$value": "{foundations.color.color-blue-800-rgb}", "$type": "color" }, - "color-jade-400": { - "$value": "#52ba6c", + "color-blue-900": { + "$value": "{foundations.color.color-blue-900-rgb}", "$type": "color" }, - "color-jade-500": { - "$value": "#2d8543", + "color-green-100": { + "$value": "{foundations.color.color-green-100-rgb}", "$type": "color" }, - "color-jade-600": { - "$value": "#185427", + "color-green-200": { + "$value": "{foundations.color.color-green-200-rgb}", "$type": "color" }, - "color-lavender-400": { - "$value": "#d492d4", + "color-green-300": { + "$value": "{foundations.color.color-green-300-rgb}", "$type": "color" }, - "color-lavender-500": { - "$value": "#946694", + "color-green-400": { + "$value": "{foundations.color.color-green-400-rgb}", "$type": "color" }, - "color-lavender-600": { - "$value": "#613461", + "color-green-500": { + "$value": "{foundations.color.color-green-500-rgb}", "$type": "color" }, - "color-lime-400": { - "$value": "#b1cc56", + "color-green-600": { + "$value": "{foundations.color.color-green-600-rgb}", "$type": "color" }, - "color-lime-500": { - "$value": "#667d15", + "color-green-700": { + "$value": "{foundations.color.color-green-700-rgb}", "$type": "color" }, - "color-lime-600": { - "$value": "#3a470e", + "color-green-800": { + "$value": "{foundations.color.color-green-800-rgb}", "$type": "color" }, - "color-mist": { - "$value": "#f2f4f6", + "color-green-900": { + "$value": "{foundations.color.color-green-900-rgb}", "$type": "color" }, - "color-mist-40a": { - "$value": "#f2f4f666", + "color-teal-100": { + "$value": "{foundations.color.color-teal-100-rgb}", "$type": "color" }, - "color-ocean-400": { - "$value": "#5fc4d4", + "color-teal-200": { + "$value": "{foundations.color.color-teal-200-rgb}", "$type": "color" }, - "color-ocean-500": { - "$value": "#008094", + "color-teal-300": { + "$value": "{foundations.color.color-teal-300-rgb}", "$type": "color" }, - "color-ocean-600": { - "$value": "#005461", + "color-teal-400": { + "$value": "{foundations.color.color-teal-400-rgb}", "$type": "color" }, - "color-oil": { - "$value": "#272829", + "color-teal-500": { + "$value": "{foundations.color.color-teal-500-rgb}", "$type": "color" }, - "color-oil-40a": { - "$value": "#27282966", + "color-teal-600": { + "$value": "{foundations.color.color-teal-600-rgb}", "$type": "color" }, - "color-olive-400": { - "$value": "#9bb06d", + "color-teal-700": { + "$value": "{foundations.color.color-teal-700-rgb}", "$type": "color" }, - "color-olive-500": { - "$value": "#6d7c4d", + "color-teal-800": { + "$value": "{foundations.color.color-teal-800-rgb}", "$type": "color" }, - "color-olive-600": { - "$value": "#535e3a", + "color-teal-900": { + "$value": "{foundations.color.color-teal-900-rgb}", "$type": "color" }, "color-orange-100": { - "$value": "#f7dac6", + "$value": "{foundations.color.color-orange-100-rgb}", "$type": "color" }, "color-orange-200": { - "$value": "#f0b896", + "$value": "{foundations.color.color-orange-200-rgb}", "$type": "color" }, "color-orange-300": { - "$value": "#e49768", + "$value": "{foundations.color.color-orange-300-rgb}", "$type": "color" }, "color-orange-400": { - "$value": "#d6773b", + "$value": "{foundations.color.color-orange-400-rgb}", "$type": "color" }, "color-orange-500": { - "$value": "#c45500", + "$value": "{foundations.color.color-orange-500-rgb}", "$type": "color" }, "color-orange-600": { - "$value": "#9b4406", + "$value": "{foundations.color.color-orange-600-rgb}", "$type": "color" }, "color-orange-700": { - "$value": "#743309", + "$value": "{foundations.color.color-orange-700-rgb}", "$type": "color" }, "color-orange-800": { - "$value": "#4f2307", + "$value": "{foundations.color.color-orange-800-rgb}", "$type": "color" }, "color-orange-900": { - "$value": "#2e1400", + "$value": "{foundations.color.color-orange-900-rgb}", "$type": "color" }, - "color-plum-400": { - "$value": "#d184f5", + "color-red-100": { + "$value": "{foundations.color.color-red-100-rgb}", "$type": "color" }, - "color-plum-500": { - "$value": "#9f55c2", + "color-red-200": { + "$value": "{foundations.color.color-red-200-rgb}", "$type": "color" }, - "color-plum-600": { - "$value": "#611f80", + "color-red-300": { + "$value": "{foundations.color.color-red-300-rgb}", "$type": "color" }, - "color-purple-100": { - "$value": "#f4d2fa", + "color-red-400": { + "$value": "{foundations.color.color-red-400-rgb}", "$type": "color" }, - "color-purple-200": { - "$value": "#e1b3e8", + "color-red-500": { + "$value": "{foundations.color.color-red-500-rgb}", "$type": "color" }, - "color-purple-300": { - "$value": "#cd94d6", + "color-red-600": { + "$value": "{foundations.color.color-red-600-rgb}", "$type": "color" }, - "color-purple-400": { - "$value": "#b975c4", + "color-red-700": { + "$value": "{foundations.color.color-red-700-rgb}", "$type": "color" }, - "color-purple-500": { - "$value": "#a556b2", + "color-red-800": { + "$value": "{foundations.color.color-red-800-rgb}", "$type": "color" }, - "color-purple-600": { - "$value": "#884094", + "color-red-900": { + "$value": "{foundations.color.color-red-900-rgb}", "$type": "color" }, - "color-purple-700": { - "$value": "#6d2b78", + "color-purple-100": { + "$value": "{foundations.color.color-purple-100-rgb}", "$type": "color" }, - "color-purple-800": { - "$value": "#52155c", + "color-purple-200": { + "$value": "{foundations.color.color-purple-200-rgb}", "$type": "color" }, - "color-purple-900": { - "$value": "#390042", + "color-purple-300": { + "$value": "{foundations.color.color-purple-300-rgb}", "$type": "color" }, - "color-red-100": { - "$value": "#ffdad6", + "color-purple-400": { + "$value": "{foundations.color.color-purple-400-rgb}", "$type": "color" }, - "color-red-200": { - "$value": "#ffb4a5", + "color-purple-500": { + "$value": "{foundations.color.color-purple-500-rgb}", "$type": "color" }, - "color-red-300": { - "$value": "#f98c76", + "color-purple-600": { + "$value": "{foundations.color.color-purple-600-rgb}", "$type": "color" }, - "color-red-400": { - "$value": "#ee6349", + "color-purple-700": { + "$value": "{foundations.color.color-purple-700-rgb}", "$type": "color" }, - "color-red-500": { - "$value": "#e02f1b", + "color-purple-800": { + "$value": "{foundations.color.color-purple-800-rgb}", "$type": "color" }, - "color-red-600": { - "$value": "#b42417", + "color-purple-900": { + "$value": "{foundations.color.color-purple-900-rgb}", "$type": "color" }, - "color-red-700": { - "$value": "#8a1912", + "color-background-snow": { + "$value": "{foundations.color.color-background-snow-rgb}", "$type": "color" }, - "color-red-800": { - "$value": "#620f0c", + "color-background-marble": { + "$value": "{foundations.color.color-background-marble-rgb}", "$type": "color" }, - "color-red-900": { - "$value": "#3d0600", + "color-background-limestone": { + "$value": "{foundations.color.color-background-limestone-rgb}", "$type": "color" }, - "color-rose-400": { - "$value": "#f59de3", + "color-background-gradientlight": { + "$value": "{foundations.color.color-background-gradientlight-rgb}", "$type": "color" }, - "color-rose-500": { - "$value": "#b0569e", + "color-background-jet": { + "$value": "{foundations.color.color-background-jet-rgb}", "$type": "color" }, - "color-rose-600": { - "$value": "#8a2f77", + "color-background-granite": { + "$value": "{foundations.color.color-background-granite-rgb}", "$type": "color" }, - "color-salmon-400": { - "$value": "#fc8b8f", + "color-background-leather": { + "$value": "{foundations.color.color-background-leather-rgb}", "$type": "color" }, - "color-salmon-500": { - "$value": "#bd5558", + "color-logo-brown": { + "$value": "{foundations.color.color-logo-brown-rgb}", "$type": "color" }, - "color-salmon-600": { - "$value": "#8a373a", + "color-white-20a": { + "$value": "{foundations.color.color-white-rgb}", "$type": "color" }, - "color-slate-400": { - "$value": "#9da9c7", + "color-white-30a": { + "$value": "{foundations.color.color-white-rgb}", "$type": "color" }, - "color-slate-500": { - "$value": "#697694", + "color-white-40a": { + "$value": "{foundations.color.color-white-rgb}", "$type": "color" }, - "color-slate-600": { - "$value": "#3b4661", + "color-white-70a": { + "$value": "{foundations.color.color-white-rgb}", "$type": "color" }, - "color-smoke-400": { - "$value": "#bbc0c9", + "color-black-20a": { + "$value": "{foundations.color.color-black-rgb}", "$type": "color" }, - "color-smoke-500": { - "$value": "#72757a", + "color-black-30a": { + "$value": "{foundations.color.color-black-rgb}", "$type": "color" }, - "color-smoke-600": { - "$value": "#4c5057", + "color-black-40a": { + "$value": "{foundations.color.color-black-rgb}", "$type": "color" }, - "color-snow": { - "$value": "#ffffff", + "color-black-70a": { + "$value": "{foundations.color.color-black-rgb}", "$type": "color" }, - "color-snow-40a": { - "$value": "#ffffff66", + "color-gray-300-10a": { + "$value": "{foundations.color.color-gray-300-rgb}", "$type": "color" }, - "color-teal-100": { - "$value": "#c4eef5", + "color-gray-300-40a": { + "$value": "{foundations.color.color-gray-300-rgb}", "$type": "color" }, - "color-teal-200": { - "$value": "#a0d2db", + "color-gray-400-40a": { + "$value": "{foundations.color.color-gray-400-rgb}", "$type": "color" }, - "color-teal-300": { - "$value": "#7bb6c1", + "color-gray-500-10a": { + "$value": "{foundations.color.color-gray-500-rgb}", "$type": "color" }, - "color-teal-400": { - "$value": "#569ba8", + "color-gray-500-40a": { + "$value": "{foundations.color.color-gray-500-rgb}", "$type": "color" }, - "color-teal-500": { - "$value": "#2b818f", + "color-gray-600-40a": { + "$value": "{foundations.color.color-gray-600-rgb}", "$type": "color" }, - "color-teal-600": { - "$value": "#206d79", + "color-gray-700-10a": { + "$value": "{foundations.color.color-gray-700-rgb}", "$type": "color" }, - "color-teal-700": { - "$value": "#145a65", + "color-gray-700-40a": { + "$value": "{foundations.color.color-gray-700-rgb}", "$type": "color" }, - "color-teal-800": { - "$value": "#094750", + "color-blue-200-40a": { + "$value": "{foundations.color.color-blue-200-rgb}", "$type": "color" }, - "color-teal-900": { - "$value": "#00353d", + "color-blue-300-40a": { + "$value": "{foundations.color.color-blue-300-rgb}", "$type": "color" }, - "color-transparent": { - "$value": "#ffffff00", + "color-blue-400-40a": { + "$value": "{foundations.color.color-blue-400-rgb}", "$type": "color" }, - "color-violet-400": { - "$value": "#8a96f2", + "color-blue-500-40a": { + "$value": "{foundations.color.color-blue-500-rgb}", "$type": "color" }, - "color-violet-500": { - "$value": "#636ebf", + "color-blue-600-40a": { + "$value": "{foundations.color.color-blue-600-rgb}", "$type": "color" }, - "color-violet-600": { - "$value": "#454fa1", + "color-blue-700-40a": { + "$value": "{foundations.color.color-blue-700-rgb}", "$type": "color" }, - "color-white": { - "$value": "#ffffff", + "color-blue-800-40a": { + "$value": "{foundations.color.color-blue-800-rgb}", "$type": "color" }, - "color-white-15a": { - "$value": "#ffffff26", + "color-background-snow-40a": { + "$value": "{foundations.color.color-background-snow-rgb}", "$type": "color" }, - "color-white-25a": { - "$value": "#ffffff3f", + "color-background-marble-40a": { + "$value": "{foundations.color.color-background-marble-rgb}", "$type": "color" }, - "color-white-40a": { - "$value": "#ffffff66", + "color-background-limestone-40a": { + "$value": "{foundations.color.color-background-limestone-rgb}", "$type": "color" }, - "color-white-70a": { - "$value": "#ffffffb2", + "color-background-granite-40a": { + "$value": "{foundations.color.color-background-granite-rgb}", "$type": "color" }, - "color-white-8a": { - "$value": "#ffffff14", + "color-background-jet-40a": { + "$value": "{foundations.color.color-background-jet-rgb}", + "$type": "color" + }, + "color-background-leather-40a": { + "$value": "{foundations.color.color-background-leather-rgb}", "$type": "color" } }, @@ -1634,11 +1924,15 @@ } }, "typography": { - "typography-fontFamily": { + "typography-fontFamily-openSans": { "$value": "\"Open Sans\"", "$type": "fontFamily" }, - "typography-fontFamily-code": { + "typography-fontFamily-amplitude": { + "$value": "\"Amplitude\"", + "$type": "fontFamily" + }, + "typography-fontFamily-ptMono": { "$value": "\"PT Mono\"", "$type": "fontFamily" }, @@ -1892,7 +2186,7 @@ "$type": "fontWeight" }, "text-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily}", "$type": "fontFamily" }, "text-fontWeight": { @@ -1908,7 +2202,7 @@ "$type": "fontWeight" }, "text-notation-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily}", "$type": "fontFamily" }, "text-notation-fontWeight": { @@ -1924,7 +2218,7 @@ "$type": "fontWeight" }, "text-h1-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h1-fontWeight": { @@ -1940,7 +2234,7 @@ "$type": "fontWeight" }, "text-h2-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h2-fontWeight": { @@ -1956,7 +2250,7 @@ "$type": "fontWeight" }, "text-h3-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h3-fontWeight": { @@ -1972,7 +2266,7 @@ "$type": "fontWeight" }, "text-h4-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h4-fontWeight": { @@ -1988,7 +2282,7 @@ "$type": "fontWeight" }, "text-label-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily}", "$type": "fontFamily" }, "text-label-fontWeight": { @@ -2004,7 +2298,7 @@ "$type": "fontWeight" }, "text-display1-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-display1-fontWeight": { @@ -2020,7 +2314,7 @@ "$type": "fontWeight" }, "text-display2-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-display2-fontWeight": { @@ -2036,7 +2330,7 @@ "$type": "fontWeight" }, "text-display3-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-display3-fontWeight": { @@ -2052,16 +2346,10 @@ "$type": "fontWeight" }, "text-code-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily-code}", + "$value": "{palette.text.palette-text-fontFamily-code}", "$type": "fontFamily" } }, - "container": { - "container-borderStyle": { - "$value": "solid", - "$type": "borderStyle" - } - }, "draggable": { "draggable-horizontal-cursor-hover": { "$value": "row-resize", @@ -2087,218 +2375,6 @@ "$value": "grabbing", "$type": "cursor" } - }, - "editable": { - "editable-cursor-hover": { - "$value": "text", - "$type": "cursor" - }, - "editable-cursor-active": { - "$value": "text", - "$type": "cursor" - }, - "editable-cursor-disabled": { - "$value": "not-allowed", - "$type": "cursor" - }, - "editable-cursor-readonly": { - "$value": "text", - "$type": "cursor" - }, - "editable-borderStyle": { - "$value": "solid", - "$type": "borderStyle" - }, - "editable-borderStyle-hover": { - "$value": "solid", - "$type": "borderStyle" - }, - "editable-borderStyle-active": { - "$value": "solid", - "$type": "borderStyle" - }, - "editable-borderStyle-disabled": { - "$value": "solid", - "$type": "borderStyle" - }, - "editable-borderStyle-readonly": { - "$value": "solid", - "$type": "borderStyle" - }, - "editable-borderWidth-active": { - "$value": "2px", - "$type": "borderWidth" - } - }, - "focused": { - "focused-outlineStyle": { - "$value": "dotted", - "$type": "outlineStyle" - }, - "focused-outlineWidth": { - "$value": "2px", - "$type": "outlineWidth" - }, - "focused-outlineInset": { - "$value": "0", - "$type": "outlineInset" - }, - "focused-outlineOffset": { - "$value": "0", - "$type": "outlineOffset" - }, - "focused-outline": { - "$value": { - "$outlineWidth": "{characteristics.focused.focused-outlineWidth}", - "$outlineStyle": "{characteristics.focused.focused-outlineStyle}", - "$outlineColor": "{characteristics.focused.focused-outlineColor}" - }, - "$type": "outline" - } - }, - "navigable": { - "navigable-cursor-active": { - "$value": "pointer", - "$type": "cursor" - }, - "navigable-cursor-hover": { - "$value": "pointer", - "$type": "cursor" - }, - "navigable-cursor-disabled": { - "$value": "not-allowed", - "$type": "cursor" - }, - "navigable-cursor-edit": { - "$value": "text", - "$type": "cursor" - }, - "navigable-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "navigable-fontWeight-hover": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "navigable-fontWeight-active": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "navigable-fontWeight-edit": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - } - }, - "overlayable": { - "overlayable-shadow-scroll": { - "$value": "{foundations.shadow.shadow-100}", - "$type": "shadow" - }, - "overlayable-shadow-region": { - "$value": "{foundations.shadow.shadow-200}", - "$type": "shadow" - }, - "overlayable-shadow": { - "$value": "{foundations.shadow.shadow-200}", - "$type": "shadow" - }, - "overlayable-shadow-hover": { - "$value": "{foundations.shadow.shadow-300}", - "$type": "shadow" - }, - "overlayable-shadow-popout": { - "$value": "{foundations.shadow.shadow-400}", - "$type": "shadow" - }, - "overlayable-shadow-drag": { - "$value": "{foundations.shadow.shadow-400}", - "$type": "shadow" - }, - "overlayable-shadow-modal": { - "$value": "{foundations.shadow.shadow-500}", - "$type": "shadow" - } - }, - "selectable": { - "selectable-cursor-hover": { - "$value": "pointer", - "$type": "cursor" - }, - "selectable-cursor-selected": { - "$value": "pointer", - "$type": "cursor" - }, - "selectable-cursor-blurSelected": { - "$value": "pointer", - "$type": "cursor" - }, - "selectable-cursor-disabled": { - "$value": "not-allowed", - "$type": "cursor" - }, - "selectable-cursor-readonly": { - "$value": "not-allowed", - "$type": "cursor" - }, - "selectable-borderStyle": { - "$value": "solid", - "$type": "borderStyle" - }, - "selectable-borderStyle-hover": { - "$value": "solid", - "$type": "borderStyle" - }, - "selectable-borderStyle-selected": { - "$value": "solid", - "$type": "borderStyle" - }, - "selectable-borderStyle-blurSelected": { - "$value": "solid", - "$type": "borderStyle" - } - }, - "separable": { - "separable-borderStyle": { - "$value": "solid", - "$type": "borderStyle" - } - }, - "target": { - "target-borderStyle": { - "$value": "dashed", - "$type": "borderStyle" - }, - "target-borderStyle-hover": { - "$value": "solid", - "$type": "borderStyle" - }, - "target-borderStyle-disabled": { - "$value": "dashed", - "$type": "borderStyle" - }, - "target-cursor-disabled": { - "$value": "not-allowed", - "$type": "cursor" - } - }, - "track": { - "track-borderStyle": { - "$value": "solid", - "$type": "borderStyle" - }, - "track-borderStyle-active": { - "$value": "solid", - "$type": "borderStyle" - }, - "track-borderStyle-complete": { - "$value": "solid", - "$type": "borderStyle" - }, - "track-borderStyle-incomplete": { - "$value": "dotted", - "$type": "borderStyle" - } } } -} +} \ No newline at end of file From 14590b080d80c866ecc588a497d27cbfe85988b2 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 17 May 2024 10:46:52 -0400 Subject: [PATCH 46/50] fix --- .../theme/json/parsers/colorFormatSwap.js | 3 - packages/theme/json/theme.json | 66 +++++-------------- 2 files changed, 17 insertions(+), 52 deletions(-) diff --git a/packages/theme/json/parsers/colorFormatSwap.js b/packages/theme/json/parsers/colorFormatSwap.js index bed209e5d0f..588fe764c3b 100644 --- a/packages/theme/json/parsers/colorFormatSwap.js +++ b/packages/theme/json/parsers/colorFormatSwap.js @@ -29,9 +29,6 @@ module.exports = function colorFormatSwap(swapTo, color) { a = ((a * 255) | (1 << 8)).toString(16).slice(1).trim(); return rgbToHex(r, g, b) + a; } else { - if (color.includes("var(")) { - const cssVar = extractVar(color); - } const [r, g, b] = color .replace("rgb(", "") .replace(")", "") diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index 19e202faa64..5b319762161 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -164,24 +164,17 @@ }, "palette-error-border": { "$value": { - "$dark": "{foundations.color.color-red-400}", + "$dark": "{foundations.color.color-red-500}", "$light": "{foundations.color.color-red-500}" }, "$type": "color" }, - "palette-error-foreground-decorative": { + "palette-error-foreground": { "$value": { - "$dark": "{foundations.color.color-red-400}", + "$dark": "{foundations.color.color-red-500}", "$light": "{foundations.color.color-red-500}" }, "$type": "color" - }, - "palette-error-foreground-informative": { - "$value": { - "$dark": "{foundations.color.color-red-200}", - "$light": "{foundations.color.color-red-600}" - }, - "$type": "color" } }, "foreground": { @@ -780,19 +773,12 @@ }, "$type": "color" }, - "palette-success-foreground-decorative": { + "palette-success-foreground": { "$value": { "$dark": "{foundations.color.color-green-400}", "$light": "{foundations.color.color-green-500}" }, "$type": "color" - }, - "palette-success-foreground-informative": { - "$value": { - "$dark": "{foundations.color.color-green-200}", - "$light": "{foundations.color.color-green-600}" - }, - "$type": "color" } }, "warning": { @@ -840,20 +826,6 @@ "$value": "{foundations.opacity.opacity-15}", "$type": "number" } - }, - "text": { - "palette-text-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily-openSans}", - "$type": "fontFamily" - }, - "palette-text-fontFamily-heading": { - "$value": "{foundations.typography.typography-fontFamily-openSans}", - "$type": "fontFamily" - }, - "palette-text-fontFamily-code": { - "$value": "{foundations.typography.typography-fontFamily-ptMono}", - "$type": "fontFamily" - } } }, "foundations": { @@ -1924,15 +1896,11 @@ } }, "typography": { - "typography-fontFamily-openSans": { + "typography-fontFamily": { "$value": "\"Open Sans\"", "$type": "fontFamily" }, - "typography-fontFamily-amplitude": { - "$value": "\"Amplitude\"", - "$type": "fontFamily" - }, - "typography-fontFamily-ptMono": { + "typography-fontFamily-code": { "$value": "\"PT Mono\"", "$type": "fontFamily" }, @@ -2186,7 +2154,7 @@ "$type": "fontWeight" }, "text-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-fontWeight": { @@ -2202,7 +2170,7 @@ "$type": "fontWeight" }, "text-notation-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-notation-fontWeight": { @@ -2218,7 +2186,7 @@ "$type": "fontWeight" }, "text-h1-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h1-fontWeight": { @@ -2234,7 +2202,7 @@ "$type": "fontWeight" }, "text-h2-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h2-fontWeight": { @@ -2250,7 +2218,7 @@ "$type": "fontWeight" }, "text-h3-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h3-fontWeight": { @@ -2266,7 +2234,7 @@ "$type": "fontWeight" }, "text-h4-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-h4-fontWeight": { @@ -2282,7 +2250,7 @@ "$type": "fontWeight" }, "text-label-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-label-fontWeight": { @@ -2298,7 +2266,7 @@ "$type": "fontWeight" }, "text-display1-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-display1-fontWeight": { @@ -2314,7 +2282,7 @@ "$type": "fontWeight" }, "text-display2-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-display2-fontWeight": { @@ -2330,7 +2298,7 @@ "$type": "fontWeight" }, "text-display3-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", + "$value": "{foundations.typography.typography-fontFamily}", "$type": "fontFamily" }, "text-display3-fontWeight": { @@ -2346,7 +2314,7 @@ "$type": "fontWeight" }, "text-code-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-code}", + "$value": "{foundations.typography.typography-fontFamily-code}", "$type": "fontFamily" } }, From 8fd8f1ca3f4a59b926689ddc321600a5a0c4e0dd Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 17 May 2024 11:34:17 -0400 Subject: [PATCH 47/50] include fonts and corners from new theme --- .../theme/css/characteristics/target-next.css | 2 +- packages/theme/css/palette/text-next.css | 10 +- .../json/parsers/getCssVariablesFromDir.js | 167 +++--- packages/theme/json/parsers/themeToJson.js | 28 +- packages/theme/json/parsers/toCss.js | 2 + packages/theme/json/theme.json | 557 +++++++++++++++++- 6 files changed, 662 insertions(+), 104 deletions(-) diff --git a/packages/theme/css/characteristics/target-next.css b/packages/theme/css/characteristics/target-next.css index 496ca8f0c22..29155a8e696 100644 --- a/packages/theme/css/characteristics/target-next.css +++ b/packages/theme/css/characteristics/target-next.css @@ -1,4 +1,4 @@ .salt-theme.salt-theme-next { - --salt-target-background-hover: var(--salt-palette-accent-default); + --salt-target-background-hover: var(--salt-palette-accent); --salt-target-borderColor-hover: var(--salt-palette-accent-weakest); } diff --git a/packages/theme/css/palette/text-next.css b/packages/theme/css/palette/text-next.css index d9af79d984a..17d4a242d20 100644 --- a/packages/theme/css/palette/text-next.css +++ b/packages/theme/css/palette/text-next.css @@ -1,7 +1,13 @@ -.salt-theme-next.salt-theme[data-heading-font="Open Sans"] { +.salt-theme-next { + /* these get missed by parser if not included */ + --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans); + --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono); +} + +.salt-theme.salt-theme-next[data-heading-font="Open Sans"] { --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans); } -.salt-theme-next.salt-theme[data-heading-font="Amplitude"] { +.salt-theme.salt-theme-next[data-heading-font="Amplitude"] { --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude); } diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js index dd52a0086b1..d77b833b654 100644 --- a/packages/theme/json/parsers/getCssVariablesFromDir.js +++ b/packages/theme/json/parsers/getCssVariablesFromDir.js @@ -16,6 +16,14 @@ const lightModeNextRegex = const darkModeNextRegex = /\.salt-theme-next\[data-mode="dark"\].*?\{(.*?)\}.*?/s; const generalThemeNextRegex = /\.salt-theme-next.\{(.*?)\}.*?/s; +const openSansFontRegex = + /\.salt-theme-next\[data-heading-font="Open Sans"\].\{(.*?)\}.*?/s; +const amplitudeFontRegex = + /\.salt-theme-next\[data-heading-font="Amplitude"\].\{(.*?)\}.*?/s; +const roundedCornerRegex = + /\.salt-theme-next\[data-corner="rounded"].\{(.*?)\}.*?/s; +const sharpCornerRegex = + /\.salt-theme-next\[data-corner="sharp"].\{(.*?)\}.*?/s; function isNonColor(token) { const tokenParts = token.split("-"); @@ -41,8 +49,11 @@ function processFile( mdVariables, ldVariables, tdVariables, - }, - nonColors + openSansVariables, + amplitudeVariables, + roundedCornerVariables, + sharpCornerVariables, + } ) { // Process CSS files const cssContent = fs.readFileSync(filePath, "utf8"); @@ -55,11 +66,19 @@ function processFile( let lightContent; let darkContent; let generalContent; + let amplitudeContent; + let openSansContent; + let roundedCornerContent; + let sharpCornerContent; if (filePath.includes("next")) { lightContent = cssContent.match(lightModeNextRegex); darkContent = cssContent.match(darkModeNextRegex); generalContent = cssContent.match(generalThemeNextRegex); + amplitudeContent = cssContent.match(amplitudeFontRegex); + openSansContent = cssContent.match(openSansFontRegex); + roundedCornerContent = cssContent.match(roundedCornerRegex); + sharpCornerContent = cssContent.match(sharpCornerRegex); } else { lightContent = cssContent.match(lightModeRegex); darkContent = cssContent.match(darkModeRegex); @@ -69,105 +88,84 @@ function processFile( if (lightContent) { while ((match = cssVariableRegex.exec(lightContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - lightModeVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - lightModeVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + lightModeVariables[variableName] = variableValue; } } if (darkContent) { while ((match = cssVariableRegex.exec(darkContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - darkModeVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - darkModeVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + darkModeVariables[variableName] = variableValue; } } if (hdContent) { while ((match = cssVariableRegex.exec(hdContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - hdVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - hdVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + hdVariables[variableName] = variableValue; } } if (mdContent) { while ((match = cssVariableRegex.exec(mdContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - mdVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - mdVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + mdVariables[variableName] = variableValue; } } if (ldContent) { while ((match = cssVariableRegex.exec(ldContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - ldVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - ldVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + ldVariables[variableName] = variableValue; } } if (tdContent) { while ((match = cssVariableRegex.exec(tdContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - tdVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - tdVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + tdVariables[variableName] = variableValue; } } if (generalContent) { while ((match = cssVariableRegex.exec(generalContent[0])) !== null) { const variableName = match[1]; - if (nonColors) { - if (isNonColor(variableName)) { - const variableValue = match[2].trim(); - cssVariables[variableName] = variableValue; - } - } else { - const variableValue = match[2].trim(); - cssVariables[variableName] = variableValue; - } + const variableValue = match[2].trim(); + cssVariables[variableName] = variableValue; + } + } + if (amplitudeContent) { + while ((match = cssVariableRegex.exec(amplitudeContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + amplitudeVariables[variableName] = variableValue; + } + } + if (openSansContent) { + while ((match = cssVariableRegex.exec(openSansContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + openSansVariables[variableName] = variableValue; + } + } + if (roundedCornerContent) { + while ((match = cssVariableRegex.exec(roundedCornerContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + roundedCornerVariables[variableName] = variableValue; + } + } + if (sharpCornerContent) { + while ((match = cssVariableRegex.exec(sharpCornerContent[0])) !== null) { + const variableName = match[1]; + const variableValue = match[2].trim(); + sharpCornerVariables[variableName] = variableValue; } } } module.exports = { - fromDir: function getCssVariablesFromDir(dirPath, nonColors) { + fromDir: function getCssVariablesFromDir(dirPath) { const cssVariables = {}; const lightModeVariables = {}; const darkModeVariables = {}; @@ -175,6 +173,10 @@ module.exports = { const mdVariables = {}; const ldVariables = {}; const tdVariables = {}; + const openSansVariables = {}; + const amplitudeVariables = {}; + const roundedCornerVariables = {}; + const sharpCornerVariables = {}; const files = fs.readdirSync(dirPath); const dirFiles = files.map((file) => file.replace(".css", "")); files.forEach((file) => { @@ -189,24 +191,23 @@ module.exports = { stats.isFile() && path.extname(file) === ".css" && !dirFiles.includes(`${fileName}-next`) && - fileName !== "fade" + fileName !== "fade" // TODO: consider ) { - processFile( - filePath, - { - cssVariables, - lightModeVariables, - darkModeVariables, - hdVariables, - mdVariables, - ldVariables, - tdVariables, - }, - nonColors - ); + processFile(filePath, { + cssVariables, + lightModeVariables, + darkModeVariables, + hdVariables, + mdVariables, + ldVariables, + tdVariables, + openSansVariables, + amplitudeVariables, + roundedCornerVariables, + sharpCornerVariables, + }); } }); - return { light: lightModeVariables, dark: darkModeVariables, @@ -215,6 +216,10 @@ module.exports = { low: ldVariables, touch: tdVariables, general: cssVariables, + openSans: openSansVariables, + amplitude: amplitudeVariables, + rounded: roundedCornerVariables, + sharp: sharpCornerVariables, }; }, }; diff --git a/packages/theme/json/parsers/themeToJson.js b/packages/theme/json/parsers/themeToJson.js index 0411e622180..1587a93799f 100644 --- a/packages/theme/json/parsers/themeToJson.js +++ b/packages/theme/json/parsers/themeToJson.js @@ -1,6 +1,6 @@ const path = require("path"); const fs = require("fs"); -const { fromDir, fromFile } = require("./getCssVariablesFromDir"); +const { fromDir } = require("./getCssVariablesFromDir"); const colorFormatSwap = require("./colorFormatSwap"); /* Removes surrounding CSS var('...') function from a token */ @@ -33,6 +33,8 @@ function extractOpacity(color) { const jsonTokens = { modes: ["$light", "$dark"], densities: ["$high", "$medium", "$low", "$touch"], + fonts: ["$amplitude", "$openSans"], + corners: ["$rounded", "$sharp"], palette: {}, foundations: {}, characteristics: {}, @@ -347,10 +349,30 @@ function themeToJson() { path.resolve(__dirname, "../../css/foundations") ); const characteristicVariables = fromDir( - path.resolve(__dirname, "../../css/characteristics"), - true + path.resolve(__dirname, "../../css/characteristics") ); format({ + $rounded: { + ...paletteVariables.rounded, + /* corners are only palette, but adding for safety */ + ...foundationVariables.rounded, + ...characteristicVariables.rounded, + }, + $sharp: { + ...paletteVariables.sharp, + ...foundationVariables.sharp, + ...characteristicVariables.sharp, + }, + $amplitude: { + ...paletteVariables.amplitude, + ...foundationVariables.amplitude, + ...characteristicVariables.amplitude, + }, + $openSans: { + ...paletteVariables.openSans, + ...foundationVariables.openSans, + ...characteristicVariables.openSans, + }, $light: { ...paletteVariables.light, ...foundationVariables.light, diff --git a/packages/theme/json/parsers/toCss.js b/packages/theme/json/parsers/toCss.js index 501fec3ac9d..4d28388cd7d 100644 --- a/packages/theme/json/parsers/toCss.js +++ b/packages/theme/json/parsers/toCss.js @@ -172,6 +172,8 @@ function toCSS(themeJson) { // TODO: characteristics + // TODO: fonts and corners + let CSS = ""; for (const c of Object.entries(classes)) { diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index 5b319762161..ee2643052a6 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -9,7 +9,62 @@ "$low", "$touch" ], + "fonts": [ + "$amplitude", + "$openSans" + ], + "corners": [ + "$rounded", + "$sharp" + ], "palette": { + "corner": { + "palette-corner-weaker": { + "$value": { + "$sharp": "{foundations.curve.curve-0}", + "$rounded": "{foundations.curve.curve-50}" + }, + "$type": "dimension" + }, + "palette-corner-weak": { + "$value": { + "$sharp": "{foundations.curve.curve-0}", + "$rounded": "{foundations.curve.curve-100}" + }, + "$type": "dimension" + }, + "palette-corner": { + "$value": { + "$sharp": "{foundations.curve.curve-0}", + "$rounded": "{foundations.curve.curve-150}" + }, + "$type": "dimension" + }, + "palette-corner-strongest": { + "$value": { + "$sharp": "{foundations.curve.curve-999}", + "$rounded": "{foundations.curve.curve-999}" + }, + "$type": "dimension" + } + }, + "text": { + "palette-text-fontFamily-heading": { + "$value": { + "$openSans": "{foundations.typography.typography-fontFamily-openSans}", + "$amplitude": "{foundations.typography.typography-fontFamily-amplitude}" + }, + "$type": "fontFamily" + }, + "palette-text-fontFamily": { + "$value": "{foundations.typography.typography-fontFamily-openSans}", + "$type": "fontFamily" + }, + "palette-text-fontFamily-code": { + "$value": "{foundations.typography.typography-fontFamily-ptMono}", + "$type": "fontFamily" + } + }, "accent": { "palette-accent": { "$value": { @@ -164,17 +219,24 @@ }, "palette-error-border": { "$value": { - "$dark": "{foundations.color.color-red-500}", + "$dark": "{foundations.color.color-red-400}", "$light": "{foundations.color.color-red-500}" }, "$type": "color" }, - "palette-error-foreground": { + "palette-error-foreground-decorative": { "$value": { - "$dark": "{foundations.color.color-red-500}", + "$dark": "{foundations.color.color-red-400}", "$light": "{foundations.color.color-red-500}" }, "$type": "color" + }, + "palette-error-foreground-informative": { + "$value": { + "$dark": "{foundations.color.color-red-200}", + "$light": "{foundations.color.color-red-600}" + }, + "$type": "color" } }, "foreground": { @@ -773,12 +835,19 @@ }, "$type": "color" }, - "palette-success-foreground": { + "palette-success-foreground-decorative": { "$value": { "$dark": "{foundations.color.color-green-400}", "$light": "{foundations.color.color-green-500}" }, "$type": "color" + }, + "palette-success-foreground-informative": { + "$value": { + "$dark": "{foundations.color.color-green-200}", + "$light": "{foundations.color.color-green-600}" + }, + "$type": "color" } }, "warning": { @@ -1896,11 +1965,15 @@ } }, "typography": { - "typography-fontFamily": { + "typography-fontFamily-openSans": { "$value": "\"Open Sans\"", "$type": "fontFamily" }, - "typography-fontFamily-code": { + "typography-fontFamily-amplitude": { + "$value": "\"Amplitude\"", + "$type": "fontFamily" + }, + "typography-fontFamily-ptMono": { "$value": "\"PT Mono\"", "$type": "fontFamily" }, @@ -2154,7 +2227,7 @@ "$type": "fontWeight" }, "text-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily}", "$type": "fontFamily" }, "text-fontWeight": { @@ -2170,7 +2243,7 @@ "$type": "fontWeight" }, "text-notation-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily}", "$type": "fontFamily" }, "text-notation-fontWeight": { @@ -2186,7 +2259,7 @@ "$type": "fontWeight" }, "text-h1-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h1-fontWeight": { @@ -2202,7 +2275,7 @@ "$type": "fontWeight" }, "text-h2-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h2-fontWeight": { @@ -2218,7 +2291,7 @@ "$type": "fontWeight" }, "text-h3-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h3-fontWeight": { @@ -2234,7 +2307,7 @@ "$type": "fontWeight" }, "text-h4-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-h4-fontWeight": { @@ -2250,7 +2323,7 @@ "$type": "fontWeight" }, "text-label-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily}", "$type": "fontFamily" }, "text-label-fontWeight": { @@ -2266,7 +2339,7 @@ "$type": "fontWeight" }, "text-display1-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-display1-fontWeight": { @@ -2282,7 +2355,7 @@ "$type": "fontWeight" }, "text-display2-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-display2-fontWeight": { @@ -2298,7 +2371,7 @@ "$type": "fontWeight" }, "text-display3-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily}", + "$value": "{palette.text.palette-text-fontFamily-heading}", "$type": "fontFamily" }, "text-display3-fontWeight": { @@ -2314,10 +2387,198 @@ "$type": "fontWeight" }, "text-code-fontFamily": { - "$value": "{foundations.typography.typography-fontFamily-code}", + "$value": "{palette.text.palette-text-fontFamily-code}", "$type": "fontFamily" } }, + "accent": { + "accent-background": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "accent-borderColor": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "accent-foreground": { + "$value": "{palette.foreground.palette-foreground-primary-alt}", + "$type": "color" + } + }, + "actionable": { + "actionable-cta-foreground": { + "$value": "{palette.foreground.palette-foreground-primary-alt}", + "$type": "color" + }, + "actionable-cta-foreground-hover": { + "$value": "{palette.foreground.palette-foreground-invert}", + "$type": "color" + }, + "actionable-cta-foreground-active": { + "$value": "{palette.foreground.palette-foreground-invert}", + "$type": "color" + }, + "actionable-cta-foreground-disabled": { + "$value": "{palette.foreground.palette-foreground-primary-alt-disabled}", + "$type": "color" + }, + "actionable-cta-background": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "actionable-cta-background-hover": { + "$value": "{palette.accent.palette-accent-strong}", + "$type": "color" + }, + "actionable-cta-background-active": { + "$value": "{palette.accent.palette-accent-stronger}", + "$type": "color" + }, + "actionable-cta-background-disabled": { + "$value": "{palette.accent.palette-accent-disabled}", + "$type": "color" + }, + "actionable-primary-foreground": { + "$value": "{palette.foreground.palette-foreground-primary-alt}", + "$type": "color" + }, + "actionable-primary-foreground-hover": { + "$value": "{palette.foreground.palette-foreground-invert}", + "$type": "color" + }, + "actionable-primary-foreground-active": { + "$value": "{palette.foreground.palette-foreground-invert}", + "$type": "color" + }, + "actionable-primary-foreground-disabled": { + "$value": "{palette.foreground.palette-foreground-primary-alt-disabled}", + "$type": "color" + }, + "actionable-primary-background": { + "$value": "{palette.neutral.palette-neutral}", + "$type": "color" + }, + "actionable-primary-background-hover": { + "$value": "{palette.neutral.palette-neutral-strong}", + "$type": "color" + }, + "actionable-primary-background-active": { + "$value": "{palette.neutral.palette-neutral-stronger}", + "$type": "color" + }, + "actionable-primary-background-disabled": { + "$value": "{palette.neutral.palette-neutral-strong-disabled}", + "$type": "color" + }, + "actionable-secondary-foreground": { + "$value": "{palette.foreground.palette-foreground-primary}", + "$type": "color" + }, + "actionable-secondary-foreground-hover": { + "$value": "{palette.foreground.palette-foreground-invert}", + "$type": "color" + }, + "actionable-secondary-foreground-active": { + "$value": "{palette.foreground.palette-foreground-invert}", + "$type": "color" + }, + "actionable-secondary-foreground-disabled": { + "$value": "{palette.foreground.palette-foreground-primary-disabled}", + "$type": "color" + }, + "actionable-secondary-background": { + "$value": "{palette.background.palette-background-none}", + "$type": "color" + }, + "actionable-secondary-background-hover": { + "$value": "{palette.neutral.palette-neutral-strong}", + "$type": "color" + }, + "actionable-secondary-background-active": { + "$value": "{palette.neutral.palette-neutral-stronger}", + "$type": "color" + }, + "actionable-secondary-background-disabled": { + "$value": "{palette.background.palette-background-none}", + "$type": "color" + } + }, + "container": { + "container-primary-background": { + "$value": "{palette.background.palette-background-primary}", + "$type": "color" + }, + "container-primary-background-disabled": { + "$value": "{palette.background.palette-background-primary-disabled}", + "$type": "color" + }, + "container-primary-borderColor": { + "$value": "{palette.neutral.palette-neutral-weaker}", + "$type": "color" + }, + "container-primary-borderColor-disabled": { + "$value": "{palette.neutral.palette-neutral-weaker-disabled}", + "$type": "color" + }, + "container-secondary-background": { + "$value": "{palette.background.palette-background-secondary}", + "$type": "color" + }, + "container-secondary-background-disabled": { + "$value": "{palette.background.palette-background-secondary-disabled}", + "$type": "color" + }, + "container-secondary-borderColor": { + "$value": "{palette.neutral.palette-neutral-weaker}", + "$type": "color" + }, + "container-secondary-borderColor-disabled": { + "$value": "{palette.neutral.palette-neutral-weaker-disabled}", + "$type": "color" + }, + "container-tertiary-background": { + "$value": "{palette.background.palette-background-tertiary}", + "$type": "color" + }, + "container-tertiary-background-disabled": { + "$value": "{palette.background.palette-background-tertiary-disabled}", + "$type": "color" + } + }, + "content": { + "content-primary-foreground": { + "$value": "{palette.foreground.palette-foreground-primary}", + "$type": "color" + }, + "content-primary-foreground-disabled": { + "$value": "{palette.foreground.palette-foreground-primary-disabled}", + "$type": "color" + }, + "content-secondary-foreground": { + "$value": "{palette.foreground.palette-foreground-secondary}", + "$type": "color" + }, + "content-secondary-foreground-disabled": { + "$value": "{palette.foreground.palette-foreground-secondary-disabled}", + "$type": "color" + }, + "content-foreground-hover": { + "$value": "{palette.foreground.palette-foreground-hover}", + "$type": "color" + }, + "content-foreground-active": { + "$value": "{palette.foreground.palette-foreground-active}", + "$type": "color" + }, + "content-foreground-visited": { + "$value": "{palette.foreground.palette-foreground-visited}", + "$type": "color" + }, + "content-foreground-highlight": { + "$value": "{palette.accent.palette-accent-weaker}", + "$type": "color" + } + }, "draggable": { "draggable-horizontal-cursor-hover": { "$value": "row-resize", @@ -2343,6 +2604,268 @@ "$value": "grabbing", "$type": "cursor" } + }, + "editable": { + "editable-borderColor": { + "$value": "{palette.neutral.palette-neutral}", + "$type": "color" + }, + "editable-borderColor-active": { + "$value": "{palette.accent.palette-accent-stronger}", + "$type": "color" + }, + "editable-borderColor-disabled": { + "$value": "{palette.neutral.palette-neutral-disabled}", + "$type": "color" + }, + "editable-borderColor-hover": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "editable-borderColor-readonly": { + "$value": "{palette.neutral.palette-neutral-readonly}", + "$type": "color" + }, + "editable-primary-background": { + "$value": "{palette.background.palette-background-primary}", + "$type": "color" + }, + "editable-primary-background-active": { + "$value": "{palette.background.palette-background-primary}", + "$type": "color" + }, + "editable-primary-background-disabled": { + "$value": "{palette.background.palette-background-primary-disabled}", + "$type": "color" + }, + "editable-primary-background-hover": { + "$value": "{palette.background.palette-background-primary}", + "$type": "color" + }, + "editable-primary-background-readonly": { + "$value": "{palette.background.palette-background-none}", + "$type": "color" + }, + "editable-secondary-background": { + "$value": "{palette.background.palette-background-secondary}", + "$type": "color" + }, + "editable-secondary-background-active": { + "$value": "{palette.background.palette-background-secondary}", + "$type": "color" + }, + "editable-secondary-background-disabled": { + "$value": "{palette.background.palette-background-secondary-disabled}", + "$type": "color" + }, + "editable-secondary-background-hover": { + "$value": "{palette.background.palette-background-secondary}", + "$type": "color" + }, + "editable-secondary-background-readonly": { + "$value": "{palette.background.palette-background-none}", + "$type": "color" + } + }, + "focused": { + "focused-outlineColor": { + "$value": "{palette.accent.palette-accent-stronger}", + "$type": "color" + } + }, + "navigable": { + "navigable-indicator-hover": { + "$value": "{palette.neutral.palette-neutral}", + "$type": "color" + }, + "navigable-indicator-active": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "navigable-background-hover": { + "$value": "{palette.navigate.palette-navigate-background-hover}", + "$type": "color" + } + }, + "overlayable": { + "overlayable-background": { + "$value": "{palette.background.palette-background-backdrop}", + "$type": "color" + } + }, + "selectable": { + "selectable-borderColor": { + "$value": "{palette.neutral.palette-neutral}", + "$type": "color" + }, + "selectable-borderColor-hover": { + "$value": "{palette.accent.palette-accent-weak}", + "$type": "color" + }, + "selectable-borderColor-selected": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "selectable-borderColor-selectedDisabled": { + "$value": "{palette.accent.palette-accent-disabled}", + "$type": "color" + }, + "selectable-borderColor-disabled": { + "$value": "{palette.neutral.palette-neutral-disabled}", + "$type": "color" + }, + "selectable-borderColor-readonly": { + "$value": "{palette.neutral.palette-neutral-readonly}", + "$type": "color" + }, + "selectable-foreground": { + "$value": "{palette.neutral.palette-neutral-strong}", + "$type": "color" + }, + "selectable-foreground-disabled": { + "$value": "{palette.neutral.palette-neutral-strong-disabled}", + "$type": "color" + }, + "selectable-foreground-hover": { + "$value": "{palette.accent.palette-accent-weak}", + "$type": "color" + }, + "selectable-foreground-selected": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "selectable-foreground-selectedDisabled": { + "$value": "{palette.accent.palette-accent-disabled}", + "$type": "color" + }, + "selectable-background": { + "$value": "{palette.background.palette-background-none}", + "$type": "color" + }, + "selectable-background-hover": { + "$value": "{palette.accent.palette-accent-weakest}", + "$type": "color" + }, + "selectable-background-selected": { + "$value": "{palette.accent.palette-accent-weaker}", + "$type": "color" + }, + "selectable-background-blurSelected": { + "$value": "{palette.neutral.palette-neutral-weakest}", + "$type": "color" + }, + "selectable-background-disabled": { + "$value": "{palette.background.palette-background-none}", + "$type": "color" + }, + "selectable-background-selectedDisabled": { + "$value": "{palette.accent.palette-accent-weaker-disabled}", + "$type": "color" + } + }, + "separable": { + "separable-primary-borderColor": { + "$value": "{palette.neutral.palette-neutral-stronger-primary}", + "$type": "color" + }, + "separable-secondary-borderColor": { + "$value": "{palette.neutral.palette-neutral-stronger-secondary}", + "$type": "color" + }, + "separable-tertiary-borderColor": { + "$value": "{palette.neutral.palette-neutral-stronger-tertiary}", + "$type": "color" + } + }, + "status": { + "status-info-foreground": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "status-success-foreground": { + "$value": "{palette.positive.palette-positive}", + "$type": "color" + }, + "status-warning-foreground": { + "$value": "{palette.warning.palette-warning}", + "$type": "color" + }, + "status-error-foreground": { + "$value": "{palette.negative.palette-negative}", + "$type": "color" + }, + "status-static-foreground": { + "$value": "{palette.foreground.palette-foreground-secondary}", + "$type": "color" + }, + "status-negative-foreground": { + "$value": "{palette.negative.palette-negative}", + "$type": "color" + }, + "status-positive-foreground": { + "$value": "{palette.positive.palette-positive}", + "$type": "color" + }, + "status-info-borderColor": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "status-success-borderColor": { + "$value": "{palette.positive.palette-positive}", + "$type": "color" + }, + "status-warning-borderColor": { + "$value": "{palette.warning.palette-warning}", + "$type": "color" + }, + "status-error-borderColor": { + "$value": "{palette.negative.palette-negative}", + "$type": "color" + }, + "status-info-background": { + "$value": "{palette.accent.palette-accent-weakest}", + "$type": "color" + }, + "status-success-background": { + "$value": "{palette.positive.palette-positive-weak}", + "$type": "color" + }, + "status-warning-background": { + "$value": "{palette.warning.palette-warning-weak}", + "$type": "color" + }, + "status-error-background": { + "$value": "{palette.negative.palette-negative-weak}", + "$type": "color" + }, + "status-success-background-selected": { + "$value": "{palette.positive.palette-positive-weak}", + "$type": "color" + }, + "status-warning-background-selected": { + "$value": "{palette.warning.palette-warning-weak}", + "$type": "color" + }, + "status-error-background-selected": { + "$value": "{palette.negative.palette-negative-weak}", + "$type": "color" + } + }, + "target": { + "target-background-hover": { + "$value": "{palette.accent.palette-accent}", + "$type": "color" + }, + "target-borderColor-hover": { + "$value": "{palette.accent.palette-accent-weakest}", + "$type": "color" + } + }, + "track": { + "track-borderColor": { + "$value": "{palette.neutral.palette-neutral}", + "$type": "color" + } } } } \ No newline at end of file From 8f6bd3c01039ccdadde952ca2f78650b043ae639 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 17 May 2024 11:35:45 -0400 Subject: [PATCH 48/50] undo gitignore --- .gitignore | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index f16ac430281..0ba110ed599 100644 --- a/.gitignore +++ b/.gitignore @@ -47,5 +47,4 @@ yarn-error.log* /packages/ag-grid-theme/uitk-ag-theme.css /packages/ag-grid-theme/salt-ag-theme.css /docs/css/salt-core.css -/docs/css/salt-lab.css - +/docs/css/salt-lab.css \ No newline at end of file From d93d47cceaccdef17c48359b66eba072e472d6ad Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 17 May 2024 11:37:00 -0400 Subject: [PATCH 49/50] undo delete theme-next.css --- packages/theme/css/theme-next.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/theme/css/theme-next.css b/packages/theme/css/theme-next.css index 6defb2615eb..f8bb7e675eb 100644 --- a/packages/theme/css/theme-next.css +++ b/packages/theme/css/theme-next.css @@ -5,3 +5,24 @@ @import url(palette/accent-next.css); @import url(palette/background-next.css); @import url(palette/corner-next.css); +@import url(palette/foreground-next.css); +@import url(palette/info-next.css); +@import url(palette/negative-next.css); +@import url(palette/neutral-next.css); +@import url(palette/positive-next.css); +@import url(palette/text-next.css); +@import url(palette/warning-next.css); + +@import url(characteristics/accent-next.css); +@import url(characteristics/actionable-next.css); +@import url(characteristics/container-next.css); +@import url(characteristics/content-next.css); +@import url(characteristics/editable-next.css); +@import url(characteristics/focused-next.css); +@import url(characteristics/navigable-next.css); +@import url(characteristics/overlayable-next.css); +@import url(characteristics/selectable-next.css); +@import url(characteristics/separable-next.css); +@import url(characteristics/status-next.css); +@import url(characteristics/target-next.css); +@import url(characteristics/track-next.css); From 2bb83c343c21f510a0d2191ed1e44b2059b7c832 Mon Sep 17 00:00:00 2001 From: libertymayc Date: Fri, 17 May 2024 11:50:31 -0400 Subject: [PATCH 50/50] change to only include -next files from characteristics and palette dirs. foundations only override if -next file is provided --- .../css/characteristics/navigable-next.css | 2 - .../json/parsers/getCssVariablesFromDir.js | 7 +- packages/theme/json/theme.json | 861 ------------------ 3 files changed, 4 insertions(+), 866 deletions(-) diff --git a/packages/theme/css/characteristics/navigable-next.css b/packages/theme/css/characteristics/navigable-next.css index 6ff6b78da7f..0c82c511a2e 100644 --- a/packages/theme/css/characteristics/navigable-next.css +++ b/packages/theme/css/characteristics/navigable-next.css @@ -1,6 +1,4 @@ .salt-theme.salt-theme-next { --salt-navigable-indicator-hover: var(--salt-palette-neutral); --salt-navigable-indicator-active: var(--salt-palette-accent); - - /* --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover); */ } diff --git a/packages/theme/json/parsers/getCssVariablesFromDir.js b/packages/theme/json/parsers/getCssVariablesFromDir.js index d77b833b654..27dc97ca526 100644 --- a/packages/theme/json/parsers/getCssVariablesFromDir.js +++ b/packages/theme/json/parsers/getCssVariablesFromDir.js @@ -179,19 +179,20 @@ module.exports = { const sharpCornerVariables = {}; const files = fs.readdirSync(dirPath); const dirFiles = files.map((file) => file.replace(".css", "")); + const isFoundationsDir = dirPath.includes("foundations"); files.forEach((file) => { const filePath = path.join(dirPath, file); const fileName = file.replace(".css", ""); - const stats = fs.statSync(filePath); + const stats = fs.statSync(filePath); if (stats.isDirectory()) { // Recursively process subdirectories Object.assign(cssVariables, getCssVariablesFromDir(filePath)); } else if ( stats.isFile() && path.extname(file) === ".css" && - !dirFiles.includes(`${fileName}-next`) && - fileName !== "fade" // TODO: consider + ((isFoundationsDir && !dirFiles.includes(`${fileName}-next`)) || + (!isFoundationsDir && fileName.includes("-next"))) ) { processFile(filePath, { cssVariables, diff --git a/packages/theme/json/theme.json b/packages/theme/json/theme.json index ee2643052a6..763e15b43af 100644 --- a/packages/theme/json/theme.json +++ b/packages/theme/json/theme.json @@ -202,43 +202,6 @@ "$type": "color" } }, - "error": { - "palette-error-background": { - "$value": { - "$dark": "{foundations.color.color-red-900}", - "$light": "{foundations.color.color-red-10}" - }, - "$type": "color" - }, - "palette-error-background-selected": { - "$value": { - "$dark": "{foundations.color.color-red-900}", - "$light": "{foundations.color.color-red-20}" - }, - "$type": "color" - }, - "palette-error-border": { - "$value": { - "$dark": "{foundations.color.color-red-400}", - "$light": "{foundations.color.color-red-500}" - }, - "$type": "color" - }, - "palette-error-foreground-decorative": { - "$value": { - "$dark": "{foundations.color.color-red-400}", - "$light": "{foundations.color.color-red-500}" - }, - "$type": "color" - }, - "palette-error-foreground-informative": { - "$value": { - "$dark": "{foundations.color.color-red-200}", - "$light": "{foundations.color.color-red-600}" - }, - "$type": "color" - } - }, "foreground": { "palette-foreground-active": { "$value": { @@ -327,346 +290,6 @@ "$type": "color" } }, - "interact": { - "palette-interact-background": { - "$value": { - "$dark": "transparent", - "$light": "transparent" - }, - "$type": "color" - }, - "palette-interact-background-blurSelected": { - "$value": { - "$dark": "{foundations.color.color-gray-600}", - "$light": "{foundations.color.color-gray-30}" - }, - "$type": "color" - }, - "palette-interact-background-hover": { - "$value": { - "$dark": "{foundations.color.color-blue-800}", - "$light": "{foundations.color.color-blue-10}" - }, - "$type": "color" - }, - "palette-interact-background-active": { - "$value": { - "$dark": "{foundations.color.color-blue-700}", - "$light": "{foundations.color.color-blue-30}" - }, - "$type": "color" - }, - "palette-interact-background-disabled": { - "$value": { - "$dark": "transparent", - "$light": "transparent" - }, - "$type": "color" - }, - "palette-interact-background-activeDisabled": { - "$value": { - "$dark": "{foundations.color.color-blue-700-fade-background}", - "$light": "{foundations.color.color-blue-30-fade-background}" - }, - "$type": "color" - }, - "palette-interact-border": { - "$value": { - "$dark": "{foundations.color.color-gray-90}", - "$light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-border-active": { - "$value": { - "$dark": "{foundations.color.color-blue-100}", - "$light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-border-activeDisabled": { - "$value": { - "$dark": "{foundations.color.color-blue-100-fade-fill}", - "$light": "{foundations.color.color-blue-600-fade-fill}" - }, - "$type": "color" - }, - "palette-interact-border-disabled": { - "$value": { - "$dark": "{foundations.color.color-gray-90-fade-border}", - "$light": "{foundations.color.color-gray-200-fade-border}" - }, - "$type": "color" - }, - "palette-interact-border-hover": { - "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-interact-border-readonly": { - "$value": { - "$dark": "{foundations.color.color-gray-90-fade-border-readonly}", - "$light": "{foundations.color.color-gray-200-fade-border-readonly}" - }, - "$type": "color" - }, - "palette-interact-foreground": { - "$value": { - "$dark": "{foundations.color.color-gray-90}", - "$light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-foreground-active": { - "$value": { - "$dark": "{foundations.color.color-blue-100}", - "$light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-foreground-activeDisabled": { - "$value": { - "$dark": "{foundations.color.color-blue-100-fade-foreground}", - "$light": "{foundations.color.color-blue-600-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-foreground-disabled": { - "$value": { - "$dark": "{foundations.color.color-gray-90-fade-foreground}", - "$light": "{foundations.color.color-gray-200-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-foreground-hover": { - "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-interact-outline": { - "$value": { - "$dark": "{foundations.color.color-blue-100}", - "$light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-cta-background": { - "$value": { - "$dark": "{foundations.color.color-blue-600}", - "$light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-interact-cta-background-active": { - "$value": { - "$dark": "{foundations.color.color-blue-700}", - "$light": "{foundations.color.color-blue-700}" - }, - "$type": "color" - }, - "palette-interact-cta-background-disabled": { - "$value": { - "$dark": "{foundations.color.color-blue-600-fade-background}", - "$light": "{foundations.color.color-blue-600-fade-background}" - }, - "$type": "color" - }, - "palette-interact-cta-background-hover": { - "$value": { - "$dark": "{foundations.color.color-blue-500}", - "$light": "{foundations.color.color-blue-500}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground-active": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground-disabled": { - "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-white-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-cta-foreground-hover": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-primary-background": { - "$value": { - "$dark": "{foundations.color.color-gray-300}", - "$light": "{foundations.color.color-gray-60}" - }, - "$type": "color" - }, - "palette-interact-primary-background-active": { - "$value": { - "$dark": "{foundations.color.color-gray-70}", - "$light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-primary-background-disabled": { - "$value": { - "$dark": "{foundations.color.color-gray-300-fade-background}", - "$light": "{foundations.color.color-gray-60-fade-background}" - }, - "$type": "color" - }, - "palette-interact-primary-background-hover": { - "$value": { - "$dark": "{foundations.color.color-gray-200}", - "$light": "{foundations.color.color-gray-40}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground-active": { - "$value": { - "$dark": "{foundations.color.color-gray-900}", - "$light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground-disabled": { - "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-gray-900-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-primary-foreground-hover": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-interact-secondary-background": { - "$value": { - "$dark": "transparent", - "$light": "transparent" - }, - "$type": "color" - }, - "palette-interact-secondary-background-active": { - "$value": { - "$dark": "{foundations.color.color-gray-70}", - "$light": "{foundations.color.color-gray-200}" - }, - "$type": "color" - }, - "palette-interact-secondary-background-disabled": { - "$value": { - "$dark": "transparent", - "$light": "transparent" - }, - "$type": "color" - }, - "palette-interact-secondary-background-hover": { - "$value": { - "$dark": "{foundations.color.color-gray-200}", - "$light": "{foundations.color.color-gray-40}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground-active": { - "$value": { - "$dark": "{foundations.color.color-gray-900}", - "$light": "{foundations.color.color-white}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground-disabled": { - "$value": { - "$dark": "{foundations.color.color-white-fade-foreground}", - "$light": "{foundations.color.color-gray-900-fade-foreground}" - }, - "$type": "color" - }, - "palette-interact-secondary-foreground-hover": { - "$value": { - "$dark": "{foundations.color.color-white}", - "$light": "{foundations.color.color-gray-900}" - }, - "$type": "color" - } - }, - "navigate": { - "palette-navigate-background-hover": { - "$value": { - "$dark": "{foundations.color.color-white-fade-background-hover}", - "$light": "{foundations.color.color-black-fade-background-hover}" - }, - "$type": "color" - }, - "palette-navigate-foreground-hover": { - "$value": { - "$dark": "{foundations.color.color-blue-200}", - "$light": "{foundations.color.color-blue-600}" - }, - "$type": "color" - }, - "palette-navigate-foreground-active": { - "$value": { - "$dark": "{foundations.color.color-blue-300}", - "$light": "{foundations.color.color-blue-700}" - }, - "$type": "color" - }, - "palette-navigate-foreground-visited": { - "$value": { - "$dark": "{foundations.color.color-purple-100}", - "$light": "{foundations.color.color-purple-800}" - }, - "$type": "color" - }, - "palette-navigate-indicator-hover": { - "$value": { - "$dark": "{foundations.color.color-gray-90}", - "$light": "{foundations.color.color-gray-90}" - }, - "$type": "color" - }, - "palette-navigate-indicator-active": { - "$value": { - "$dark": "{foundations.color.color-orange-400}", - "$light": "{foundations.color.color-orange-600}" - }, - "$type": "color" - } - }, "negative": { "palette-negative": { "$value": { @@ -813,43 +436,6 @@ "$type": "color" } }, - "success": { - "palette-success-background": { - "$value": { - "$dark": "{foundations.color.color-green-900}", - "$light": "{foundations.color.color-green-10}" - }, - "$type": "color" - }, - "palette-success-background-selected": { - "$value": { - "$dark": "{foundations.color.color-green-900}", - "$light": "{foundations.color.color-green-20}" - }, - "$type": "color" - }, - "palette-success-border": { - "$value": { - "$dark": "{foundations.color.color-green-400}", - "$light": "{foundations.color.color-green-500}" - }, - "$type": "color" - }, - "palette-success-foreground-decorative": { - "$value": { - "$dark": "{foundations.color.color-green-400}", - "$light": "{foundations.color.color-green-500}" - }, - "$type": "color" - }, - "palette-success-foreground-informative": { - "$value": { - "$dark": "{foundations.color.color-green-200}", - "$light": "{foundations.color.color-green-600}" - }, - "$type": "color" - } - }, "warning": { "palette-warning": { "$value": { @@ -865,36 +451,6 @@ }, "$type": "color" } - }, - "opacity": { - "palette-opacity-backdrop": { - "$value": "{foundations.opacity.opacity-70}", - "$type": "number" - }, - "palette-opacity-disabled": { - "$value": "{foundations.opacity.opacity-40}", - "$type": "number" - }, - "palette-opacity-background-readonly": { - "$value": "{foundations.opacity.opacity-0}", - "$type": "number" - }, - "palette-opacity-border-readonly": { - "$value": "{foundations.opacity.opacity-15}", - "$type": "number" - }, - "palette-opacity-primary-border": { - "$value": "{foundations.opacity.opacity-40}", - "$type": "number" - }, - "palette-opacity-secondary-border": { - "$value": "{foundations.opacity.opacity-25}", - "$type": "number" - }, - "palette-opacity-tertiary-border": { - "$value": "{foundations.opacity.opacity-15}", - "$type": "number" - } } }, "foundations": { @@ -2004,393 +1560,6 @@ } }, "characteristics": { - "text": { - "text-h1-fontSize": { - "$value": { - "$low": "32px", - "$touch": "42px", - "$medium": "24px", - "$high": "18px" - }, - "$type": "fontSize" - }, - "text-h1-lineHeight": { - "$value": { - "$low": "42px", - "$touch": "54px", - "$medium": "32px", - "$high": "24px" - }, - "$type": "lineHeight" - }, - "text-h2-fontSize": { - "$value": { - "$low": "24px", - "$touch": "32px", - "$medium": "18px", - "$high": "14px" - }, - "$type": "fontSize" - }, - "text-h2-lineHeight": { - "$value": { - "$low": "32px", - "$touch": "42px", - "$medium": "24px", - "$high": "18px" - }, - "$type": "lineHeight" - }, - "text-h3-fontSize": { - "$value": { - "$low": "18px", - "$touch": "24px", - "$medium": "14px", - "$high": "12px" - }, - "$type": "fontSize" - }, - "text-h3-lineHeight": { - "$value": { - "$low": "24px", - "$touch": "32px", - "$medium": "18px", - "$high": "16px" - }, - "$type": "lineHeight" - }, - "text-h4-fontSize": { - "$value": { - "$low": "14px", - "$touch": "16px", - "$medium": "12px", - "$high": "11px" - }, - "$type": "fontSize" - }, - "text-h4-lineHeight": { - "$value": { - "$low": "18px", - "$touch": "20px", - "$medium": "16px", - "$high": "14px" - }, - "$type": "lineHeight" - }, - "text-label-fontSize": { - "$value": { - "$low": "12px", - "$touch": "14px", - "$medium": "11px", - "$high": "10px" - }, - "$type": "fontSize" - }, - "text-label-lineHeight": { - "$value": { - "$low": "16px", - "$touch": "18px", - "$medium": "14px", - "$high": "13px" - }, - "$type": "lineHeight" - }, - "text-fontSize": { - "$value": { - "$low": "14px", - "$touch": "16px", - "$medium": "12px", - "$high": "11px" - }, - "$type": "fontSize" - }, - "text-lineHeight": { - "$value": { - "$low": "18px", - "$touch": "20px", - "$medium": "16px", - "$high": "14px" - }, - "$type": "lineHeight" - }, - "text-minHeight": { - "$value": { - "$low": "18px", - "$touch": "20px", - "$medium": "16px", - "$high": "14px" - }, - "$type": "minHeight" - }, - "text-display1-fontSize": { - "$value": { - "$low": "68px", - "$touch": "84px", - "$medium": "54px", - "$high": "42px" - }, - "$type": "fontSize" - }, - "text-display1-lineHeight": { - "$value": { - "$low": "88px", - "$touch": "109px", - "$medium": "70px", - "$high": "54px" - }, - "$type": "lineHeight" - }, - "text-display2-fontSize": { - "$value": { - "$low": "46px", - "$touch": "58px", - "$medium": "36px", - "$high": "28px" - }, - "$type": "fontSize" - }, - "text-display2-lineHeight": { - "$value": { - "$low": "60px", - "$touch": "76px", - "$medium": "47px", - "$high": "36px" - }, - "$type": "lineHeight" - }, - "text-display3-fontSize": { - "$value": { - "$low": "32px", - "$touch": "42px", - "$medium": "24px", - "$high": "18px" - }, - "$type": "fontSize" - }, - "text-display3-lineHeight": { - "$value": { - "$low": "42px", - "$touch": "54px", - "$medium": "32px", - "$high": "24px" - }, - "$type": "lineHeight" - }, - "text-notation-fontSize": { - "$value": { - "$low": "12px", - "$touch": "14px", - "$medium": "10px", - "$high": "8px" - }, - "$type": "fontSize" - }, - "text-notation-lineHeight": { - "$value": { - "$low": "16px", - "$touch": "18px", - "$medium": "13px", - "$high": "10px" - }, - "$type": "lineHeight" - }, - "text-letterSpacing": { - "$value": "0", - "$type": "letterSpacing" - }, - "text-textAlign": { - "$value": "left", - "$type": "textAlign" - }, - "text-textAlign-embedded": { - "$value": "center", - "$type": "textAlign" - }, - "text-textTransform": { - "$value": "none", - "$type": "textTransform" - }, - "text-action-letterSpacing": { - "$value": "0.6px", - "$type": "letterSpacing" - }, - "text-action-textTransform": { - "$value": "uppercase", - "$type": "textTransform" - }, - "text-action-textAlign": { - "$value": "center", - "$type": "textAlign" - }, - "text-action-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily}", - "$type": "fontFamily" - }, - "text-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-light}", - "$type": "fontWeight" - }, - "text-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-notation-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily}", - "$type": "fontFamily" - }, - "text-notation-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-notation-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-notation-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-h1-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-h1-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-h1-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-medium}", - "$type": "fontWeight" - }, - "text-h1-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-extraBold}", - "$type": "fontWeight" - }, - "text-h2-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-h2-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-h2-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-h2-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-h3-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-h3-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-h3-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-h3-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-h4-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-h4-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-h4-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-h4-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-label-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily}", - "$type": "fontFamily" - }, - "text-label-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-label-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-light}", - "$type": "fontWeight" - }, - "text-label-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-display1-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-display1-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-display1-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-display1-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-display2-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-display2-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-display2-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-display2-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-display3-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-heading}", - "$type": "fontFamily" - }, - "text-display3-fontWeight": { - "$value": "{foundations.typography.typography-fontWeight-semiBold}", - "$type": "fontWeight" - }, - "text-display3-fontWeight-strong": { - "$value": "{foundations.typography.typography-fontWeight-bold}", - "$type": "fontWeight" - }, - "text-display3-fontWeight-small": { - "$value": "{foundations.typography.typography-fontWeight-regular}", - "$type": "fontWeight" - }, - "text-code-fontFamily": { - "$value": "{palette.text.palette-text-fontFamily-code}", - "$type": "fontFamily" - } - }, "accent": { "accent-background": { "$value": "{palette.accent.palette-accent}", @@ -2579,32 +1748,6 @@ "$type": "color" } }, - "draggable": { - "draggable-horizontal-cursor-hover": { - "$value": "row-resize", - "$type": "cursor" - }, - "draggable-horizontal-cursor-active": { - "$value": "row-resize", - "$type": "cursor" - }, - "draggable-vertical-cursor-hover": { - "$value": "col-resize", - "$type": "cursor" - }, - "draggable-vertical-cursor-active": { - "$value": "col-resize", - "$type": "cursor" - }, - "draggable-grab-cursor-hover": { - "$value": "grab", - "$type": "cursor" - }, - "draggable-grab-cursor-active": { - "$value": "grabbing", - "$type": "cursor" - } - }, "editable": { "editable-borderColor": { "$value": "{palette.neutral.palette-neutral}", @@ -2681,10 +1824,6 @@ "navigable-indicator-active": { "$value": "{palette.accent.palette-accent}", "$type": "color" - }, - "navigable-background-hover": { - "$value": "{palette.navigate.palette-navigate-background-hover}", - "$type": "color" } }, "overlayable": {