diff --git a/.changeset/color-roles-component-behavior.md b/.changeset/color-roles-component-behavior.md new file mode 100644 index 0000000000..2742edd04b --- /dev/null +++ b/.changeset/color-roles-component-behavior.md @@ -0,0 +1,9 @@ +--- +'@skillsoft/gamut': minor +--- + +Component behavior from design's component map that the role swap didn't cover. + +- A selected DataList or DataTable row takes the `state-selected` veil over its fill, with the hover veil on top when hovered. `ListRow` takes an `isSelected` prop for the same tint. +- Table rows are `surface-raised`, with `surface-sunken` stripes, instead of transparent. +- ProgressBar's label at `large` and `xl` sizes is two-tone: `text-inverse` on the bar and `text-default` where it runs onto the track, so a short bar's label stays readable. diff --git a/.changeset/color-system-brands.md b/.changeset/color-system-brands.md index 867f98a899..322500b181 100644 --- a/.changeset/color-system-brands.md +++ b/.changeset/color-system-brands.md @@ -6,7 +6,6 @@ Brands on the generated color system. -- Color CSS variables keep the `--color-*` names from `main`, in `@skillsoft/variance`'s `createTheme` and in `tokens.css`. Raw CSS that reads `var(--color-…)` needs no changes. - **Breaking:** `tokens.css` puts its rules in `@layer tokens`, with `reset, base, tokens, recipes, utilities` declared first. - Adds `originalCodecademyTheme`, today's core colors, fonts and hard-offset elevation rebuilt on the generated system. `tokens.css` carries a palette block per brand under `[data-brand]`. - A brand can override a palette step with an exact hex, or point a role at a different step (and, optionally, a different alpha) in one mode. Overrides go through the same contrast checks as generated values. diff --git a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap index dc120561de..f6f30fd586 100644 --- a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap +++ b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing -exports[`themes skillsoft - theme shape 1`] = ` +exports[`themes admin - theme shape 1`] = ` { "_getColorValue": [Function], "_tokens": { @@ -9,17 +9,17 @@ exports[`themes skillsoft - theme shape 1`] = ` "black-a24": "rgba(0, 0, 0, 0.24)", "black-a32": "rgba(0, 0, 0, 0.32)", "black-a60": "rgba(0, 0, 0, 0.6)", - "palette-accent-100": "#fff9fa", - "palette-accent-1000": "#3f0922", - "palette-accent-1100": "#290515", - "palette-accent-200": "#f2e6ea", - "palette-accent-300": "#eac1ce", - "palette-accent-400": "#ea94b2", - "palette-accent-500": "#f44b97", - "palette-accent-600": "#dd007c", - "palette-accent-700": "#af1363", - "palette-accent-800": "#85154b", - "palette-accent-900": "#620f37", + "palette-accent-100": "#fffbeb", + "palette-accent-1000": "#282106", + "palette-accent-1100": "#191404", + "palette-accent-200": "#f2eace", + "palette-accent-300": "#ffd300", + "palette-accent-400": "#cca900", + "palette-accent-500": "#ae932e", + "palette-accent-600": "#937900", + "palette-accent-700": "#75610e", + "palette-accent-800": "#594a10", + "palette-accent-900": "#41360b", "palette-accent-alt-100": "#fafaff", "palette-accent-alt-1000": "#220d57", "palette-accent-alt-1100": "#150739", @@ -31,17 +31,17 @@ exports[`themes skillsoft - theme shape 1`] = ` "palette-accent-alt-700": "#661af0", "palette-accent-alt-800": "#4d1cb5", "palette-accent-alt-900": "#381587", - "palette-danger-100": "#fff9f9", - "palette-danger-1000": "#410912", - "palette-danger-1100": "#2a050a", - "palette-danger-200": "#f2e7e7", - "palette-danger-300": "#eac2c3", - "palette-danger-400": "#ea989b", - "palette-danger-500": "#f45769", - "palette-danger-600": "#e40045", - "palette-danger-700": "#b51439", - "palette-danger-800": "#89162c", - "palette-danger-900": "#66101f", + "palette-danger-100": "#fff9f8", + "palette-danger-1000": "#420a06", + "palette-danger-1100": "#2b0603", + "palette-danger-200": "#f2e7e5", + "palette-danger-300": "#eac3bd", + "palette-danger-400": "#ea9a8d", + "palette-danger-500": "#f45b4a", + "palette-danger-600": "#e70400", + "palette-danger-700": "#b7160d", + "palette-danger-800": "#8a170f", + "palette-danger-900": "#67110a", "palette-neutral-dark-100": "#fafafb", "palette-neutral-dark-1000": "#1d212f", "palette-neutral-dark-1100": "#11141d", @@ -53,55 +53,55 @@ exports[`themes skillsoft - theme shape 1`] = ` "palette-neutral-dark-500": "#8e95a9", "palette-neutral-dark-600": "#717a97", "palette-neutral-dark-700": "#576182", - "palette-neutral-dark-800": "#414a65", + "palette-neutral-dark-800": "#414965", "palette-neutral-dark-900": "#2f364b", - "palette-neutral-light-100": "#fbfaf7", - "palette-neutral-light-1000": "#23221d", - "palette-neutral-light-1100": "#151411", - "palette-neutral-light-200": "#ebeae4", - "palette-neutral-light-300": "#d2cec0", - "palette-neutral-light-400": "#b6b2a3", - "palette-neutral-light-500": "#9a9585", - "palette-neutral-light-600": "#807b6c", - "palette-neutral-light-700": "#666256", - "palette-neutral-light-800": "#4d4b42", - "palette-neutral-light-900": "#383730", + "palette-neutral-light-100": "#fbfaf9", + "palette-neutral-light-1000": "#25211d", + "palette-neutral-light-1100": "#171411", + "palette-neutral-light-200": "#ece9e8", + "palette-neutral-light-300": "#d3ccc7", + "palette-neutral-light-400": "#beafa3", + "palette-neutral-light-500": "#a39285", + "palette-neutral-light-600": "#88786b", + "palette-neutral-light-700": "#6d6056", + "palette-neutral-light-800": "#524942", + "palette-neutral-light-900": "#3c3530", "palette-primary-100": "#f8fbff", - "palette-primary-1000": "#051c50", - "palette-primary-1100": "#031135", + "palette-primary-1000": "#041a57", + "palette-primary-1100": "#020f39", "palette-primary-200": "#e6eaf2", "palette-primary-300": "#c0cee9", - "palette-primary-400": "#95b2e8", - "palette-primary-500": "#6192f3", - "palette-primary-600": "#276eff", - "palette-primary-600-a6": "rgba(39, 110, 255, 0.06)", - "palette-primary-600-a8": "rgba(39, 110, 255, 0.08)", - "palette-primary-600-a9": "rgba(39, 110, 255, 0.09)", - "palette-primary-700": "#0a51df", - "palette-primary-800": "#0c3fa8", - "palette-primary-900": "#082e7d", - "palette-success-100": "#eefeff", - "palette-success-1000": "#082728", - "palette-success-1100": "#041819", - "palette-success-200": "#d2f1f2", - "palette-success-300": "#8ddee2", - "palette-success-400": "#64c4c9", - "palette-success-500": "#34a8ae", - "palette-success-600": "#018d92", - "palette-success-700": "#117074", - "palette-success-800": "#135558", - "palette-success-900": "#0e3e41", - "palette-warning-100": "#fffaef", - "palette-warning-1000": "#2a2006", - "palette-warning-1100": "#1a1304", - "palette-warning-200": "#f2e9d4", - "palette-warning-300": "#e8cb84", - "palette-warning-400": "#cfae5b", - "palette-warning-500": "#b4902d", - "palette-warning-600": "#997600", - "palette-warning-700": "#795e0e", - "palette-warning-800": "#5c4810", - "palette-warning-900": "#43340b", + "palette-primary-400": "#96b2e8", + "palette-primary-500": "#6492f3", + "palette-primary-600": "#2f6dff", + "palette-primary-600-a6": "rgba(47, 109, 255, 0.06)", + "palette-primary-600-a8": "rgba(47, 109, 255, 0.08)", + "palette-primary-600-a9": "rgba(47, 109, 255, 0.09)", + "palette-primary-700": "#0748f0", + "palette-primary-800": "#0939b5", + "palette-primary-900": "#062a86", + "palette-success-100": "#f1fff1", + "palette-success-1000": "#08290c", + "palette-success-1100": "#041a06", + "palette-success-200": "#d8f3d8", + "palette-success-300": "#8de792", + "palette-success-400": "#64cd6d", + "palette-success-500": "#34b147", + "palette-success-600": "#00952b", + "palette-success-700": "#117726", + "palette-success-800": "#135a1f", + "palette-success-900": "#0e4216", + "palette-warning-100": "#fff9f5", + "palette-warning-1000": "#331b06", + "palette-warning-1100": "#201004", + "palette-warning-200": "#f2e8e0", + "palette-warning-300": "#eac6ab", + "palette-warning-400": "#ea9f63", + "palette-warning-500": "#d47d2d", + "palette-warning-600": "#b66200", + "palette-warning-700": "#914f0e", + "palette-warning-800": "#6d3d10", + "palette-warning-900": "#512c0b", "white": "#ffffff", }, "elements": { @@ -113,100 +113,100 @@ exports[`themes skillsoft - theme shape 1`] = ` }, "modes": { "dark": { - "action-danger": "#ea989b", - "action-danger-hover": "#eac2c3", - "action-danger-pressed": "#f2e7e7", - "action-disabled": "#414a65", - "action-neutral": "#ebeae4", - "action-neutral-hover": "#fbfaf7", + "action-danger": "#ea9a8d", + "action-danger-hover": "#eac3bd", + "action-danger-pressed": "#f2e7e5", + "action-disabled": "#414965", + "action-neutral": "#ece9e8", + "action-neutral-hover": "#fbfaf9", "action-neutral-pressed": "#ffffff", - "action-primary": "#95b2e8", - "action-primary-hover": "#c0cee9", - "action-primary-pressed": "#e6eaf2", + "action-primary": "#ffd300", + "action-primary-hover": "#cca900", + "action-primary-pressed": "#ae932e", "background-current": "#11141d", - "border-default": "#807b6c", - "border-strong": "#fbfaf7", - "border-subtle": "#383730", + "border-default": "#88786b", + "border-strong": "#fbfaf9", + "border-subtle": "#3c3530", "shadow-ambient": "rgba(0, 0, 0, 0.24)", "shadow-key": "rgba(0, 0, 0, 0.32)", "shadow-scrim": "rgba(0, 0, 0, 0.6)", - "state-hover": "rgba(39, 110, 255, 0.06)", - "state-pressed": "rgba(39, 110, 255, 0.09)", - "state-selected": "rgba(39, 110, 255, 0.08)", + "state-hover": "rgba(47, 109, 255, 0.06)", + "state-pressed": "rgba(47, 109, 255, 0.09)", + "state-selected": "rgba(47, 109, 255, 0.08)", "surface-brand": "#11141d", "surface-brand-subtle": "#11141d", "surface-default": "#11141d", - "surface-error": "#410912", + "surface-error": "#420a06", "surface-raised": "#1d212f", - "surface-success": "#082728", + "surface-success": "#08290c", "surface-sunken": "#000000", - "surface-warning": "#2a2006", - "text-default": "#ebeae4", - "text-error": "#eac2c3", + "surface-warning": "#331b06", + "text-default": "#ece9e8", + "text-error": "#eac3bd", "text-inverse": "#1d212f", - "text-subtle": "#b6b2a3", - "text-success": "#8ddee2", - "text-warning": "#e8cb84", - "viz-1": "#6192f3", - "viz-2": "#f44b97", - "viz-3": "#cfae5b", + "text-subtle": "#beafa3", + "text-success": "#8de792", + "text-warning": "#eac6ab", + "viz-1": "#6492f3", + "viz-2": "#ae932e", + "viz-3": "#ea9f63", "viz-4": "#7a52ff", - "viz-5": "#8ddee2", - "viz-6": "#e40045", + "viz-5": "#8de792", + "viz-6": "#e70400", "viz-7": "#8e95a9", - "viz-8": "#807b6c", - "viz-seq-1": "#276eff", - "viz-seq-2": "#6192f3", - "viz-seq-3": "#95b2e8", + "viz-8": "#88786b", + "viz-seq-1": "#2f6dff", + "viz-seq-2": "#6492f3", + "viz-seq-3": "#96b2e8", "viz-seq-4": "#c0cee9", }, "light": { - "action-danger": "#89162c", - "action-danger-hover": "#66101f", - "action-danger-pressed": "#410912", - "action-disabled": "#b6b2a3", + "action-danger": "#8a170f", + "action-danger-hover": "#67110a", + "action-danger-pressed": "#420a06", + "action-disabled": "#beafa3", "action-neutral": "#1d212f", "action-neutral-hover": "#11141d", "action-neutral-pressed": "#000000", - "action-primary": "#0c3fa8", - "action-primary-hover": "#082e7d", - "action-primary-pressed": "#051c50", - "background-current": "#fbfaf7", + "action-primary": "#0939b5", + "action-primary-hover": "#062a86", + "action-primary-pressed": "#041a57", + "background-current": "#fbfaf9", "border-default": "#717a97", "border-strong": "#11141d", "border-subtle": "#cbcdd3", "shadow-ambient": "rgba(17, 20, 29, 0.12)", "shadow-key": "rgba(17, 20, 29, 0.16)", "shadow-scrim": "rgba(0, 0, 0, 0.6)", - "state-hover": "rgba(39, 110, 255, 0.06)", - "state-pressed": "rgba(39, 110, 255, 0.09)", - "state-selected": "rgba(39, 110, 255, 0.08)", - "surface-brand": "#fbfaf7", - "surface-brand-subtle": "#fbfaf7", - "surface-default": "#fbfaf7", - "surface-error": "#f2e7e7", + "state-hover": "rgba(47, 109, 255, 0.06)", + "state-pressed": "rgba(47, 109, 255, 0.09)", + "state-selected": "rgba(47, 109, 255, 0.08)", + "surface-brand": "#fbfaf9", + "surface-brand-subtle": "#fbfaf9", + "surface-default": "#fbfaf9", + "surface-error": "#f2e7e5", "surface-raised": "#ffffff", - "surface-success": "#d2f1f2", - "surface-sunken": "#ebeae4", - "surface-warning": "#f2e9d4", + "surface-success": "#d8f3d8", + "surface-sunken": "#ece9e8", + "surface-warning": "#f2e8e0", "text-default": "#1d212f", - "text-error": "#66101f", - "text-inverse": "#ebeae4", - "text-subtle": "#414a65", - "text-success": "#0e3e41", - "text-warning": "#43340b", - "viz-1": "#0c3fa8", - "viz-2": "#af1363", - "viz-3": "#795e0e", + "text-error": "#67110a", + "text-inverse": "#ece9e8", + "text-subtle": "#414965", + "text-success": "#0e4216", + "text-warning": "#512c0b", + "viz-1": "#0939b5", + "viz-2": "#75610e", + "viz-3": "#914f0e", "viz-4": "#7a52ff", - "viz-5": "#018d92", - "viz-6": "#e40045", + "viz-5": "#00952b", + "viz-6": "#e70400", "viz-7": "#1d212f", - "viz-8": "#807b6c", - "viz-seq-1": "#276eff", - "viz-seq-2": "#0a51df", - "viz-seq-3": "#0c3fa8", - "viz-seq-4": "#082e7d", + "viz-8": "#88786b", + "viz-seq-1": "#2f6dff", + "viz-seq-2": "#0748f0", + "viz-seq-3": "#0939b5", + "viz-seq-4": "#062a86", }, }, }, @@ -279,7 +279,7 @@ exports[`themes skillsoft - theme shape 1`] = ` "1": "1px solid var(--color-border-strong)", "2": "2px solid var(--color-border-strong)", }, - "brand": "skillsoft", + "brand": "admin", "breakpoints": { "c_base": "@container (min-width: 1px)", "c_lg": "@container (min-width: 1200px)", @@ -448,7 +448,7 @@ exports[`themes skillsoft - theme shape 1`] = ` "palette-accent-300": "light", "palette-accent-400": "light", "palette-accent-500": "light", - "palette-accent-600": "dark", + "palette-accent-600": "light", "palette-accent-700": "dark", "palette-accent-800": "dark", "palette-accent-900": "dark", @@ -525,7 +525,7 @@ exports[`themes skillsoft - theme shape 1`] = ` "palette-warning-300": "light", "palette-warning-400": "light", "palette-warning-500": "light", - "palette-warning-600": "light", + "palette-warning-600": "dark", "palette-warning-700": "dark", "palette-warning-800": "dark", "palette-warning-900": "dark", @@ -544,14 +544,16 @@ exports[`themes skillsoft - theme shape 1`] = ` "rest-transform": "none", }, "fontFamily": { - "accent": ""Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", -"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", -sans-serif", - "base": ""Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", + "accent": ""Suisse", "Apercu", -apple-system, BlinkMacSystemFont, +"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", +"Helvetica Neue", sans-serif", + "base": ""Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif", - "monospace": ""Roboto Mono", monospace", - "system": ""Roboto", sans-serif", + "monospace": "Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, +monospace", + "system": "-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", +"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif", }, "fontSize": { "14": "0.875rem", @@ -566,11 +568,9 @@ sans-serif", }, "fontWeight": { "400": 400, - "500": 500, "700": 700, "base": 400, - "bold": 500, - "title": 500, + "title": 700, }, "lineHeight": { "base": 1.5, @@ -587,9 +587,9 @@ sans-serif", "action-neutral": "palette-neutral-light-200", "action-neutral-hover": "palette-neutral-light-100", "action-neutral-pressed": "white", - "action-primary": "palette-primary-400", - "action-primary-hover": "palette-primary-300", - "action-primary-pressed": "palette-primary-200", + "action-primary": "palette-accent-300", + "action-primary-hover": "palette-accent-400", + "action-primary-pressed": "palette-accent-500", "background-current": "palette-neutral-dark-1100", "border-default": "palette-neutral-light-600", "border-strong": "palette-neutral-light-100", @@ -676,7 +676,7 @@ sans-serif", "viz-seq-4": "palette-primary-900", }, }, - "name": "skillsoft", + "name": "admin", "spacing": { "0": 0, "12": "0.75rem", @@ -690,62 +690,62 @@ sans-serif", "8": "0.5rem", "96": "6rem", }, - "tokensCss": "/* Generated by @skillsoft/gamut-brand from the "skillsoft" brand. Do not edit. */ + "tokensCss": "/* Generated by @skillsoft/gamut-brand from the "admin" brand. Do not edit. */ @layer reset, base, tokens, recipes, utilities; @layer tokens { - :root, [data-brand="skillsoft"] { + :root, [data-brand="admin"] { --color-white: oklch(1.0000 0.0000 0.00); --color-black: oklch(0.0000 0.0000 0.00); - --color-palette-neutral-light-100: oklch(0.9862 0.0041 93.70); - --color-palette-neutral-light-200: oklch(0.9364 0.0075 93.70); - --color-palette-neutral-light-300: oklch(0.8497 0.0191 93.70); - --color-palette-neutral-light-400: oklch(0.7628 0.0218 93.70); - --color-palette-neutral-light-500: oklch(0.6707 0.0241 93.70); - --color-palette-neutral-light-600: oklch(0.5835 0.0239 93.70); - --color-palette-neutral-light-700: oklch(0.4972 0.0193 93.70); - --color-palette-neutral-light-800: oklch(0.4115 0.0151 93.70); - --color-palette-neutral-light-900: oklch(0.3346 0.0120 93.70); - --color-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70); - --color-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70); - --color-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70); - --color-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70); - --color-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70); - --color-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70); - --color-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70); - --color-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70); - --color-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70); - --color-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70); - --color-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70); - --color-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70); - --color-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70); - --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16); - --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12); - --color-palette-primary-100: oklch(0.9862 0.0064 262.40); - --color-palette-primary-200: oklch(0.9364 0.0121 262.40); - --color-palette-primary-300: oklch(0.8497 0.0407 262.40); - --color-palette-primary-400: oklch(0.7628 0.0846 262.40); - --color-palette-primary-500: oklch(0.6707 0.1531 262.40); - --color-palette-primary-600: oklch(0.5835 0.2274 262.40); - --color-palette-primary-700: oklch(0.4972 0.2254 262.40); - --color-palette-primary-800: oklch(0.4115 0.1767 262.40); - --color-palette-primary-900: oklch(0.3346 0.1405 262.40); - --color-palette-primary-1000: oklch(0.2499 0.1001 262.40); - --color-palette-primary-1100: oklch(0.1925 0.0734 262.40); - --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); - --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); - --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); - --color-palette-accent-100: oklch(0.9862 0.0073 357.30); - --color-palette-accent-200: oklch(0.9364 0.0141 357.30); - --color-palette-accent-300: oklch(0.8497 0.0499 357.30); - --color-palette-accent-400: oklch(0.7628 0.1100 357.30); - --color-palette-accent-500: oklch(0.6707 0.2144 357.30); - --color-palette-accent-600: oklch(0.5835 0.2380 357.30); - --color-palette-accent-700: oklch(0.4972 0.1927 357.30); - --color-palette-accent-800: oklch(0.4115 0.1511 357.30); - --color-palette-accent-900: oklch(0.3346 0.1201 357.30); - --color-palette-accent-1000: oklch(0.2499 0.0856 357.30); - --color-palette-accent-1100: oklch(0.1925 0.0628 357.30); + --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); + --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 263.60); + --color-palette-primary-200: oklch(0.9364 0.0120 263.60); + --color-palette-primary-300: oklch(0.8497 0.0406 263.60); + --color-palette-primary-400: oklch(0.7628 0.0845 263.60); + --color-palette-primary-500: oklch(0.6707 0.1528 263.60); + --color-palette-primary-600: oklch(0.5835 0.2271 263.60); + --color-palette-primary-700: oklch(0.4972 0.2553 263.60); + --color-palette-primary-800: oklch(0.4115 0.2002 263.60); + --color-palette-primary-900: oklch(0.3346 0.1591 263.60); + --color-palette-primary-1000: oklch(0.2499 0.1134 263.60); + --color-palette-primary-1100: oklch(0.1925 0.0832 263.60); + --color-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); @@ -757,39 +757,39 @@ sans-serif", --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --color-palette-danger-100: oklch(0.9862 0.0066 17.30); - --color-palette-danger-200: oklch(0.9364 0.0128 17.30); - --color-palette-danger-300: oklch(0.8497 0.0452 17.30); - --color-palette-danger-400: oklch(0.7628 0.0993 17.30); - --color-palette-danger-500: oklch(0.6707 0.1924 17.30); - --color-palette-danger-600: oklch(0.5835 0.2336 17.30); - --color-palette-danger-700: oklch(0.4972 0.1891 17.30); - --color-palette-danger-800: oklch(0.4115 0.1482 17.30); - --color-palette-danger-900: oklch(0.3346 0.1178 17.30); - --color-palette-danger-1000: oklch(0.2499 0.0840 17.30); - --color-palette-danger-1100: oklch(0.1925 0.0616 17.30); - --color-palette-warning-100: oklch(0.9862 0.0160 88.00); - --color-palette-warning-200: oklch(0.9364 0.0300 88.00); - --color-palette-warning-300: oklch(0.8497 0.0955 88.00); - --color-palette-warning-400: oklch(0.7628 0.1091 88.00); - --color-palette-warning-500: oklch(0.6707 0.1206 88.00); - --color-palette-warning-600: oklch(0.5835 0.1192 88.00); - --color-palette-warning-700: oklch(0.4972 0.0965 88.00); - --color-palette-warning-800: oklch(0.4115 0.0757 88.00); - --color-palette-warning-900: oklch(0.3346 0.0601 88.00); - --color-palette-warning-1000: oklch(0.2499 0.0429 88.00); - --color-palette-warning-1100: oklch(0.1925 0.0314 88.00); - --color-palette-success-100: oklch(0.9862 0.0170 200.00); - --color-palette-success-200: oklch(0.9364 0.0318 200.00); - --color-palette-success-300: oklch(0.8497 0.0794 200.00); - --color-palette-success-400: oklch(0.7628 0.0907 200.00); - --color-palette-success-500: oklch(0.6707 0.1003 200.00); - --color-palette-success-600: oklch(0.5835 0.0991 200.00); - --color-palette-success-700: oklch(0.4972 0.0803 200.00); - --color-palette-success-800: oklch(0.4115 0.0629 200.00); - --color-palette-success-900: oklch(0.3346 0.0500 200.00); - --color-palette-success-1000: oklch(0.2499 0.0356 200.00); - --color-palette-success-1100: oklch(0.1925 0.0261 200.00); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); @@ -844,7 +844,7 @@ sans-serif", --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } @@ -869,9 +869,9 @@ sans-serif", --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ - --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */ - --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ @@ -897,10 +897,2373 @@ sans-serif", --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } ", } `; + +exports[`themes core - theme shape 1`] = ` +{ + "_getColorValue": [Function], + "_tokens": { + "colors": { + "beige": "#FFF0E5", + "beige-100": "#FFF0E5", + "black": "#000000", + "blue": "#1557FF", + "blue-0": "#F5FCFF", + "blue-100": "#D3F2FF", + "blue-300": "#66C4FF", + "blue-400": "#3388FF", + "blue-500": "#1557FF", + "blue-800": "#1D2340", + "gray-100": "#F5F5F5", + "gray-200": "#EEEEEE", + "gray-300": "#E0E0E0", + "gray-600": "#9E9E9E", + "gray-800": "#616161", + "gray-900": "#424242", + "green": "#008A27", + "green-0": "#F5FFE3", + "green-100": "#EAFDC6", + "green-400": "#AEE938", + "green-700": "#008A27", + "green-900": "#151C07", + "hyper": "#3A10E5", + "hyper-400": "#5533FF", + "hyper-500": "#3A10E5", + "lightBlue": "#66C4FF", + "lightGreen": "#AEE938", + "navy": "#10162F", + "navy-100": "rgba(16,22,47,0.04)", + "navy-200": "rgba(16,22,47,0.12)", + "navy-300": "rgba(16,22,47,0.28)", + "navy-400": "rgba(16,22,47,0.47)", + "navy-500": "rgba(16,22,47,0.63)", + "navy-600": "rgba(16,22,47,0.75)", + "navy-700": "rgba(16,22,47,0.86)", + "navy-800": "#10162F", + "navy-900": "#0A0D1C", + "orange": "#FF8C00", + "orange-100": "#FFE8CC", + "orange-500": "#FF8C00", + "paleBlue": "#F5FCFF", + "paleGreen": "#F5FFE3", + "palePink": "#FFF5FF", + "paleRed": "#DC5879", + "paleYellow": "#FFFAE5", + "pink": "#F966FF", + "pink-0": "#FFF5FF", + "pink-400": "#F966FF", + "red": "#E91C11", + "red-0": "#FBF1F0", + "red-300": "#E85D7F", + "red-400": "#DC5879", + "red-500": "#E91C11", + "red-600": "#BE1809", + "red-900": "#280503", + "white": "#ffffff", + "white-100": "rgba(255,255,255,0.04)", + "white-200": "rgba(255,255,255,0.09)", + "white-300": "rgba(255,255,255,0.2)", + "white-400": "rgba(255,255,255,0.35)", + "white-500": "rgba(255,255,255,0.5)", + "white-600": "rgba(255,255,255,0.65)", + "white-700": "rgba(255,255,255,0.8)", + "yellow": "#FFD300", + "yellow-0": "#FFFAE5", + "yellow-400": "#CCA900", + "yellow-500": "#FFD300", + "yellow-900": "#211B00", + }, + "elements": { + "headerHeight": { + "base": "4rem", + "md": "5rem", + }, + "headerZ": 15, + }, + "modes": { + "dark": { + "background": "#10162F", + "background-contrast": "#000000", + "background-current": "#10162F", + "background-disabled": "rgba(255,255,255,0.09)", + "background-error": "#280503", + "background-hover": "rgba(255,255,255,0.09)", + "background-primary": "#0A0D1C", + "background-selected": "rgba(255,255,255,0.04)", + "background-success": "#151C07", + "background-warning": "#211B00", + "border-disabled": "rgba(255,255,255,0.5)", + "border-primary": "#ffffff", + "border-secondary": "rgba(255,255,255,0.65)", + "border-tertiary": "rgba(255,255,255,0.2)", + "danger": "#E85D7F", + "danger-hover": "#DC5879", + "feedback-error": "#E85D7F", + "feedback-success": "#AEE938", + "feedback-warning": "#FFFAE5", + "interface": "#FFD300", + "interface-hover": "#CCA900", + "primary": "#FFD300", + "primary-hover": "#CCA900", + "primary-inverse": "#3A10E5", + "secondary": "#ffffff", + "secondary-hover": "rgba(255,255,255,0.8)", + "shadow-primary": "#ffffff", + "shadow-secondary": "rgba(255,255,255,0.65)", + "text": "#ffffff", + "text-accent": "#FFF0E5", + "text-disabled": "rgba(255,255,255,0.5)", + "text-secondary": "rgba(255,255,255,0.65)", + }, + "light": { + "background": "#ffffff", + "background-contrast": "#ffffff", + "background-current": "#ffffff", + "background-disabled": "rgba(16,22,47,0.12)", + "background-error": "#FBF1F0", + "background-hover": "rgba(16,22,47,0.12)", + "background-primary": "#FFF0E5", + "background-selected": "rgba(16,22,47,0.04)", + "background-success": "#F5FFE3", + "background-warning": "#FFFAE5", + "border-disabled": "rgba(16,22,47,0.63)", + "border-primary": "#10162F", + "border-secondary": "rgba(16,22,47,0.75)", + "border-tertiary": "rgba(16,22,47,0.28)", + "danger": "#E91C11", + "danger-hover": "#BE1809", + "feedback-error": "#BE1809", + "feedback-success": "#008A27", + "feedback-warning": "#FFD300", + "interface": "#3A10E5", + "interface-hover": "#5533FF", + "primary": "#3A10E5", + "primary-hover": "#5533FF", + "primary-inverse": "#FFD300", + "secondary": "#10162F", + "secondary-hover": "rgba(16,22,47,0.86)", + "shadow-primary": "#10162F", + "shadow-secondary": "rgba(16,22,47,0.75)", + "text": "#10162F", + "text-accent": "#0A0D1C", + "text-disabled": "rgba(16,22,47,0.63)", + "text-secondary": "rgba(16,22,47,0.75)", + }, + }, + }, + "_variables": { + "mode": { + "--color-background": "var(--color-white)", + "--color-background-contrast": "var(--color-white)", + "--color-background-current": "var(--color-white)", + "--color-background-disabled": "var(--color-navy-200)", + "--color-background-error": "var(--color-red-0)", + "--color-background-hover": "var(--color-navy-200)", + "--color-background-primary": "var(--color-beige)", + "--color-background-selected": "var(--color-navy-100)", + "--color-background-success": "var(--color-green-0)", + "--color-background-warning": "var(--color-yellow-0)", + "--color-border-disabled": "var(--color-navy-500)", + "--color-border-primary": "var(--color-navy-800)", + "--color-border-secondary": "var(--color-navy-600)", + "--color-border-tertiary": "var(--color-navy-300)", + "--color-danger": "var(--color-red-500)", + "--color-danger-hover": "var(--color-red-600)", + "--color-feedback-error": "var(--color-red-600)", + "--color-feedback-success": "var(--color-green-700)", + "--color-feedback-warning": "var(--color-yellow)", + "--color-interface": "var(--color-hyper-500)", + "--color-interface-hover": "var(--color-hyper-400)", + "--color-primary": "var(--color-hyper-500)", + "--color-primary-hover": "var(--color-hyper-400)", + "--color-primary-inverse": "var(--color-yellow-500)", + "--color-secondary": "var(--color-navy-800)", + "--color-secondary-hover": "var(--color-navy-700)", + "--color-shadow-primary": "var(--color-navy-800)", + "--color-shadow-secondary": "var(--color-navy-600)", + "--color-text": "var(--color-navy-800)", + "--color-text-accent": "var(--color-navy-900)", + "--color-text-disabled": "var(--color-navy-500)", + "--color-text-secondary": "var(--color-navy-600)", + }, + "root": { + "--color-beige": "#FFF0E5", + "--color-beige-100": "#FFF0E5", + "--color-black": "#000000", + "--color-blue": "#1557FF", + "--color-blue-0": "#F5FCFF", + "--color-blue-100": "#D3F2FF", + "--color-blue-300": "#66C4FF", + "--color-blue-400": "#3388FF", + "--color-blue-500": "#1557FF", + "--color-blue-800": "#1D2340", + "--color-gray-100": "#F5F5F5", + "--color-gray-200": "#EEEEEE", + "--color-gray-300": "#E0E0E0", + "--color-gray-600": "#9E9E9E", + "--color-gray-800": "#616161", + "--color-gray-900": "#424242", + "--color-green": "#008A27", + "--color-green-0": "#F5FFE3", + "--color-green-100": "#EAFDC6", + "--color-green-400": "#AEE938", + "--color-green-700": "#008A27", + "--color-green-900": "#151C07", + "--color-hyper": "#3A10E5", + "--color-hyper-400": "#5533FF", + "--color-hyper-500": "#3A10E5", + "--color-lightBlue": "#66C4FF", + "--color-lightGreen": "#AEE938", + "--color-navy": "#10162F", + "--color-navy-100": "rgba(16,22,47,0.04)", + "--color-navy-200": "rgba(16,22,47,0.12)", + "--color-navy-300": "rgba(16,22,47,0.28)", + "--color-navy-400": "rgba(16,22,47,0.47)", + "--color-navy-500": "rgba(16,22,47,0.63)", + "--color-navy-600": "rgba(16,22,47,0.75)", + "--color-navy-700": "rgba(16,22,47,0.86)", + "--color-navy-800": "#10162F", + "--color-navy-900": "#0A0D1C", + "--color-orange": "#FF8C00", + "--color-orange-100": "#FFE8CC", + "--color-orange-500": "#FF8C00", + "--color-paleBlue": "#F5FCFF", + "--color-paleGreen": "#F5FFE3", + "--color-palePink": "#FFF5FF", + "--color-paleRed": "#DC5879", + "--color-paleYellow": "#FFFAE5", + "--color-pink": "#F966FF", + "--color-pink-0": "#FFF5FF", + "--color-pink-400": "#F966FF", + "--color-red": "#E91C11", + "--color-red-0": "#FBF1F0", + "--color-red-300": "#E85D7F", + "--color-red-400": "#DC5879", + "--color-red-500": "#E91C11", + "--color-red-600": "#BE1809", + "--color-red-900": "#280503", + "--color-white": "#ffffff", + "--color-white-100": "rgba(255,255,255,0.04)", + "--color-white-200": "rgba(255,255,255,0.09)", + "--color-white-300": "rgba(255,255,255,0.2)", + "--color-white-400": "rgba(255,255,255,0.35)", + "--color-white-500": "rgba(255,255,255,0.5)", + "--color-white-600": "rgba(255,255,255,0.65)", + "--color-white-700": "rgba(255,255,255,0.8)", + "--color-yellow": "#FFD300", + "--color-yellow-0": "#FFFAE5", + "--color-yellow-400": "#CCA900", + "--color-yellow-500": "#FFD300", + "--color-yellow-900": "#211B00", + "--elements-headerHeight": "4rem", + "--elements-headerZ": 15, + "@media only screen and (min-width: 1024px)": { + "--elements-headerHeight": "5rem", + }, + }, + }, + "borderRadii": { + "full": "999px", + "lg": "8px", + "md": "4px", + "none": "0px", + "sm": "2px", + "xl": "16px", + }, + "borders": { + "1": "1px solid var(--color-border-primary)", + "2": "2px solid var(--color-border-primary)", + }, + "breakpoints": { + "c_base": "@container (min-width: 1px)", + "c_lg": "@container (min-width: 1200px)", + "c_md": "@container (min-width: 1024px)", + "c_sm": "@container (min-width: 768px)", + "c_xl": "@container (min-width: 1440px)", + "c_xs": "@container (min-width: 480px)", + "lg": "@media only screen and (min-width: 1200px)", + "md": "@media only screen and (min-width: 1024px)", + "sm": "@media only screen and (min-width: 768px)", + "xl": "@media only screen and (min-width: 1440px)", + "xs": "@media only screen and (min-width: 480px)", + }, + "colors": { + "background": "var(--color-background)", + "background-contrast": "var(--color-background-contrast)", + "background-current": "var(--color-background-current)", + "background-disabled": "var(--color-background-disabled)", + "background-error": "var(--color-background-error)", + "background-hover": "var(--color-background-hover)", + "background-primary": "var(--color-background-primary)", + "background-selected": "var(--color-background-selected)", + "background-success": "var(--color-background-success)", + "background-warning": "var(--color-background-warning)", + "beige": "var(--color-beige)", + "beige-100": "var(--color-beige-100)", + "black": "var(--color-black)", + "blue": "var(--color-blue)", + "blue-0": "var(--color-blue-0)", + "blue-100": "var(--color-blue-100)", + "blue-300": "var(--color-blue-300)", + "blue-400": "var(--color-blue-400)", + "blue-500": "var(--color-blue-500)", + "blue-800": "var(--color-blue-800)", + "border-disabled": "var(--color-border-disabled)", + "border-primary": "var(--color-border-primary)", + "border-secondary": "var(--color-border-secondary)", + "border-tertiary": "var(--color-border-tertiary)", + "danger": "var(--color-danger)", + "danger-hover": "var(--color-danger-hover)", + "feedback-error": "var(--color-feedback-error)", + "feedback-success": "var(--color-feedback-success)", + "feedback-warning": "var(--color-feedback-warning)", + "gray-100": "var(--color-gray-100)", + "gray-200": "var(--color-gray-200)", + "gray-300": "var(--color-gray-300)", + "gray-600": "var(--color-gray-600)", + "gray-800": "var(--color-gray-800)", + "gray-900": "var(--color-gray-900)", + "green": "var(--color-green)", + "green-0": "var(--color-green-0)", + "green-100": "var(--color-green-100)", + "green-400": "var(--color-green-400)", + "green-700": "var(--color-green-700)", + "green-900": "var(--color-green-900)", + "hyper": "var(--color-hyper)", + "hyper-400": "var(--color-hyper-400)", + "hyper-500": "var(--color-hyper-500)", + "interface": "var(--color-interface)", + "interface-hover": "var(--color-interface-hover)", + "lightBlue": "var(--color-lightBlue)", + "lightGreen": "var(--color-lightGreen)", + "navy": "var(--color-navy)", + "navy-100": "var(--color-navy-100)", + "navy-200": "var(--color-navy-200)", + "navy-300": "var(--color-navy-300)", + "navy-400": "var(--color-navy-400)", + "navy-500": "var(--color-navy-500)", + "navy-600": "var(--color-navy-600)", + "navy-700": "var(--color-navy-700)", + "navy-800": "var(--color-navy-800)", + "navy-900": "var(--color-navy-900)", + "orange": "var(--color-orange)", + "orange-100": "var(--color-orange-100)", + "orange-500": "var(--color-orange-500)", + "paleBlue": "var(--color-paleBlue)", + "paleGreen": "var(--color-paleGreen)", + "palePink": "var(--color-palePink)", + "paleRed": "var(--color-paleRed)", + "paleYellow": "var(--color-paleYellow)", + "pink": "var(--color-pink)", + "pink-0": "var(--color-pink-0)", + "pink-400": "var(--color-pink-400)", + "primary": "var(--color-primary)", + "primary-hover": "var(--color-primary-hover)", + "primary-inverse": "var(--color-primary-inverse)", + "red": "var(--color-red)", + "red-0": "var(--color-red-0)", + "red-300": "var(--color-red-300)", + "red-400": "var(--color-red-400)", + "red-500": "var(--color-red-500)", + "red-600": "var(--color-red-600)", + "red-900": "var(--color-red-900)", + "secondary": "var(--color-secondary)", + "secondary-hover": "var(--color-secondary-hover)", + "shadow-primary": "var(--color-shadow-primary)", + "shadow-secondary": "var(--color-shadow-secondary)", + "text": "var(--color-text)", + "text-accent": "var(--color-text-accent)", + "text-disabled": "var(--color-text-disabled)", + "text-secondary": "var(--color-text-secondary)", + "white": "var(--color-white)", + "white-100": "var(--color-white-100)", + "white-200": "var(--color-white-200)", + "white-300": "var(--color-white-300)", + "white-400": "var(--color-white-400)", + "white-500": "var(--color-white-500)", + "white-600": "var(--color-white-600)", + "white-700": "var(--color-white-700)", + "yellow": "var(--color-yellow)", + "yellow-0": "var(--color-yellow-0)", + "yellow-400": "var(--color-yellow-400)", + "yellow-500": "var(--color-yellow-500)", + "yellow-900": "var(--color-yellow-900)", + }, + "elements": { + "headerHeight": "var(--elements-headerHeight)", + "headerZ": "var(--elements-headerZ)", + }, + "elevation": { + "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)", + "hover-transform": "translate(4px, -4px)", + "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)", + "hoverMirrored-transform": "translate(-4px, -4px)", + "rest-shadow": "0 0 0 0 var(--color-shadow-primary)", + "rest-transform": "none", + }, + "fontFamily": { + "accent": ""Suisse", "Apercu", -apple-system, BlinkMacSystemFont, +"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", +"Helvetica Neue", sans-serif", + "base": ""Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI", +"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", +sans-serif", + "monospace": "Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, +monospace", + "system": "-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", +"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif", + }, + "fontSize": { + "14": "0.875rem", + "16": "1rem", + "18": "1.125rem", + "20": "1.25rem", + "22": "1.375rem", + "26": "1.625rem", + "34": "2.125rem", + "44": "2.75rem", + "64": "4rem", + }, + "fontWeight": { + "400": 400, + "700": 700, + "base": 400, + "title": 700, + }, + "lineHeight": { + "base": 1.5, + "spacedTitle": 1.3, + "title": 1.2, + }, + "mode": "light", + "modes": { + "dark": { + "background": "navy-800", + "background-contrast": "black", + "background-current": "navy-800", + "background-disabled": "white-200", + "background-error": "red-900", + "background-hover": "white-200", + "background-primary": "navy-900", + "background-selected": "white-100", + "background-success": "green-900", + "background-warning": "yellow-900", + "border-disabled": "white-500", + "border-primary": "white", + "border-secondary": "white-600", + "border-tertiary": "white-300", + "danger": "red-300", + "danger-hover": "red-400", + "feedback-error": "red-300", + "feedback-success": "green-400", + "feedback-warning": "yellow-0", + "interface": "yellow-500", + "interface-hover": "yellow-400", + "primary": "yellow-500", + "primary-hover": "yellow-400", + "primary-inverse": "hyper-500", + "secondary": "white", + "secondary-hover": "white-700", + "shadow-primary": "white", + "shadow-secondary": "white-600", + "text": "white", + "text-accent": "beige", + "text-disabled": "white-500", + "text-secondary": "white-600", + }, + "light": { + "background": "white", + "background-contrast": "white", + "background-current": "white", + "background-disabled": "navy-200", + "background-error": "red-0", + "background-hover": "navy-200", + "background-primary": "beige", + "background-selected": "navy-100", + "background-success": "green-0", + "background-warning": "yellow-0", + "border-disabled": "navy-500", + "border-primary": "navy-800", + "border-secondary": "navy-600", + "border-tertiary": "navy-300", + "danger": "red-500", + "danger-hover": "red-600", + "feedback-error": "red-600", + "feedback-success": "green-700", + "feedback-warning": "yellow", + "interface": "hyper-500", + "interface-hover": "hyper-400", + "primary": "hyper-500", + "primary-hover": "hyper-400", + "primary-inverse": "yellow-500", + "secondary": "navy-800", + "secondary-hover": "navy-700", + "shadow-primary": "navy-800", + "shadow-secondary": "navy-600", + "text": "navy-800", + "text-accent": "navy-900", + "text-disabled": "navy-500", + "text-secondary": "navy-600", + }, + }, + "name": "core", + "spacing": { + "0": 0, + "12": "0.75rem", + "16": "1rem", + "24": "1.5rem", + "32": "2rem", + "4": "0.25rem", + "40": "2.5rem", + "48": "3rem", + "64": "4rem", + "8": "0.5rem", + "96": "6rem", + }, +} +`; + +exports[`themes lxStudio - theme shape 1`] = ` +{ + "_getColorValue": [Function], + "_tokens": { + "colors": { + "black": "#000000", + "black-a24": "rgba(0, 0, 0, 0.24)", + "black-a32": "rgba(0, 0, 0, 0.32)", + "black-a60": "rgba(0, 0, 0, 0.6)", + "palette-accent-100": "#fffbeb", + "palette-accent-1000": "#282106", + "palette-accent-1100": "#191404", + "palette-accent-200": "#f2eace", + "palette-accent-300": "#e2cd84", + "palette-accent-400": "#c9b15b", + "palette-accent-500": "#ae932e", + "palette-accent-600": "#937900", + "palette-accent-700": "#75610e", + "palette-accent-800": "#594a10", + "palette-accent-900": "#41360b", + "palette-accent-alt-100": "#fafaff", + "palette-accent-alt-1000": "#220d57", + "palette-accent-alt-1100": "#150739", + "palette-accent-alt-200": "#e9e9f2", + "palette-accent-alt-300": "#cbcae9", + "palette-accent-alt-400": "#aeaae9", + "palette-accent-alt-500": "#9182f3", + "palette-accent-alt-600": "#7a52ff", + "palette-accent-alt-700": "#661af0", + "palette-accent-alt-800": "#4d1cb5", + "palette-accent-alt-900": "#381587", + "palette-danger-100": "#fff9f8", + "palette-danger-1000": "#420a06", + "palette-danger-1100": "#2b0603", + "palette-danger-200": "#f2e7e5", + "palette-danger-300": "#eac3bd", + "palette-danger-400": "#ea9a8d", + "palette-danger-500": "#f45b4a", + "palette-danger-600": "#e70400", + "palette-danger-700": "#b7160d", + "palette-danger-800": "#8a170f", + "palette-danger-900": "#67110a", + "palette-neutral-dark-100": "#fafafb", + "palette-neutral-dark-1000": "#1d212f", + "palette-neutral-dark-1100": "#11141d", + "palette-neutral-dark-1100-a12": "rgba(17, 20, 29, 0.12)", + "palette-neutral-dark-1100-a16": "rgba(17, 20, 29, 0.16)", + "palette-neutral-dark-200": "#e9eaeb", + "palette-neutral-dark-300": "#cbcdd3", + "palette-neutral-dark-400": "#aeb2bd", + "palette-neutral-dark-500": "#8e95a9", + "palette-neutral-dark-600": "#717a97", + "palette-neutral-dark-700": "#576182", + "palette-neutral-dark-800": "#414965", + "palette-neutral-dark-900": "#2f364b", + "palette-neutral-light-100": "#fafbfc", + "palette-neutral-light-1000": "#1d2227", + "palette-neutral-light-1100": "#121518", + "palette-neutral-light-200": "#e9eaeb", + "palette-neutral-light-300": "#c9ced3", + "palette-neutral-light-400": "#a9b3bd", + "palette-neutral-light-500": "#8798a8", + "palette-neutral-light-600": "#6d7d8d", + "palette-neutral-light-700": "#576470", + "palette-neutral-light-800": "#434c55", + "palette-neutral-light-900": "#30373e", + "palette-primary-100": "#f8fbff", + "palette-primary-1000": "#051c50", + "palette-primary-1100": "#031135", + "palette-primary-200": "#e6eaf2", + "palette-primary-300": "#c0cee9", + "palette-primary-400": "#95b2e8", + "palette-primary-500": "#6192f3", + "palette-primary-600": "#276eff", + "palette-primary-600-a6": "rgba(39, 110, 255, 0.06)", + "palette-primary-600-a8": "rgba(39, 110, 255, 0.08)", + "palette-primary-600-a9": "rgba(39, 110, 255, 0.09)", + "palette-primary-700": "#0a51df", + "palette-primary-800": "#0c3fa8", + "palette-primary-900": "#082e7d", + "palette-success-100": "#f0fff5", + "palette-success-1000": "#082917", + "palette-success-1100": "#05190d", + "palette-success-200": "#d5f3df", + "palette-success-300": "#8de4b0", + "palette-success-400": "#64ca90", + "palette-success-500": "#34af71", + "palette-success-600": "#009358", + "palette-success-700": "#127547", + "palette-success-800": "#135936", + "palette-success-900": "#0e4127", + "palette-warning-100": "#fff9f5", + "palette-warning-1000": "#331b06", + "palette-warning-1100": "#201004", + "palette-warning-200": "#f2e8e0", + "palette-warning-300": "#eac6ab", + "palette-warning-400": "#ea9f63", + "palette-warning-500": "#d47d2d", + "palette-warning-600": "#b66200", + "palette-warning-700": "#914f0e", + "palette-warning-800": "#6d3d10", + "palette-warning-900": "#512c0b", + "white": "#ffffff", + }, + "elements": { + "headerHeight": { + "base": "4rem", + "md": "5rem", + }, + "headerZ": 15, + }, + "modes": { + "dark": { + "action-danger": "#ea9a8d", + "action-danger-hover": "#eac3bd", + "action-danger-pressed": "#f2e7e5", + "action-disabled": "#414965", + "action-neutral": "#e9eaeb", + "action-neutral-hover": "#fafbfc", + "action-neutral-pressed": "#ffffff", + "action-primary": "#95b2e8", + "action-primary-hover": "#c0cee9", + "action-primary-pressed": "#e6eaf2", + "background-current": "#11141d", + "border-default": "#6d7d8d", + "border-strong": "#fafbfc", + "border-subtle": "#30373e", + "shadow-ambient": "rgba(0, 0, 0, 0.24)", + "shadow-key": "rgba(0, 0, 0, 0.32)", + "shadow-scrim": "rgba(0, 0, 0, 0.6)", + "state-hover": "rgba(39, 110, 255, 0.06)", + "state-pressed": "rgba(39, 110, 255, 0.09)", + "state-selected": "rgba(39, 110, 255, 0.08)", + "surface-brand": "#11141d", + "surface-brand-subtle": "#11141d", + "surface-default": "#11141d", + "surface-error": "#420a06", + "surface-raised": "#1d212f", + "surface-success": "#082917", + "surface-sunken": "#000000", + "surface-warning": "#331b06", + "text-default": "#e9eaeb", + "text-error": "#eac3bd", + "text-inverse": "#1d212f", + "text-subtle": "#a9b3bd", + "text-success": "#8de4b0", + "text-warning": "#eac6ab", + "viz-1": "#6192f3", + "viz-2": "#ae932e", + "viz-3": "#ea9f63", + "viz-4": "#7a52ff", + "viz-5": "#8de4b0", + "viz-6": "#e70400", + "viz-7": "#8e95a9", + "viz-8": "#6d7d8d", + "viz-seq-1": "#276eff", + "viz-seq-2": "#6192f3", + "viz-seq-3": "#95b2e8", + "viz-seq-4": "#c0cee9", + }, + "light": { + "action-danger": "#8a170f", + "action-danger-hover": "#67110a", + "action-danger-pressed": "#420a06", + "action-disabled": "#a9b3bd", + "action-neutral": "#1d212f", + "action-neutral-hover": "#11141d", + "action-neutral-pressed": "#000000", + "action-primary": "#0c3fa8", + "action-primary-hover": "#082e7d", + "action-primary-pressed": "#051c50", + "background-current": "#fafbfc", + "border-default": "#717a97", + "border-strong": "#11141d", + "border-subtle": "#cbcdd3", + "shadow-ambient": "rgba(17, 20, 29, 0.12)", + "shadow-key": "rgba(17, 20, 29, 0.16)", + "shadow-scrim": "rgba(0, 0, 0, 0.6)", + "state-hover": "rgba(39, 110, 255, 0.06)", + "state-pressed": "rgba(39, 110, 255, 0.09)", + "state-selected": "rgba(39, 110, 255, 0.08)", + "surface-brand": "#fafbfc", + "surface-brand-subtle": "#fafbfc", + "surface-default": "#fafbfc", + "surface-error": "#f2e7e5", + "surface-raised": "#ffffff", + "surface-success": "#d5f3df", + "surface-sunken": "#e9eaeb", + "surface-warning": "#f2e8e0", + "text-default": "#1d212f", + "text-error": "#67110a", + "text-inverse": "#e9eaeb", + "text-subtle": "#414965", + "text-success": "#0e4127", + "text-warning": "#512c0b", + "viz-1": "#0c3fa8", + "viz-2": "#75610e", + "viz-3": "#914f0e", + "viz-4": "#7a52ff", + "viz-5": "#009358", + "viz-6": "#e70400", + "viz-7": "#1d212f", + "viz-8": "#6d7d8d", + "viz-seq-1": "#276eff", + "viz-seq-2": "#0a51df", + "viz-seq-3": "#0c3fa8", + "viz-seq-4": "#082e7d", + }, + }, + }, + "_variables": { + "mode": { + "--color-action-danger": "var(--color-palette-danger-800)", + "--color-action-danger-hover": "var(--color-palette-danger-900)", + "--color-action-danger-pressed": "var(--color-palette-danger-1000)", + "--color-action-disabled": "var(--color-palette-neutral-light-400)", + "--color-action-neutral": "var(--color-palette-neutral-dark-1000)", + "--color-action-neutral-hover": "var(--color-palette-neutral-dark-1100)", + "--color-action-neutral-pressed": "var(--color-black)", + "--color-action-primary": "var(--color-palette-primary-800)", + "--color-action-primary-hover": "var(--color-palette-primary-900)", + "--color-action-primary-pressed": "var(--color-palette-primary-1000)", + "--color-background-current": "var(--color-palette-neutral-light-100)", + "--color-border-default": "var(--color-palette-neutral-dark-600)", + "--color-border-strong": "var(--color-palette-neutral-dark-1100)", + "--color-border-subtle": "var(--color-palette-neutral-dark-300)", + "--color-shadow-ambient": "var(--color-palette-neutral-dark-1100-a12)", + "--color-shadow-key": "var(--color-palette-neutral-dark-1100-a16)", + "--color-shadow-scrim": "var(--color-black-a60)", + "--color-state-hover": "var(--color-palette-primary-600-a6)", + "--color-state-pressed": "var(--color-palette-primary-600-a9)", + "--color-state-selected": "var(--color-palette-primary-600-a8)", + "--color-surface-brand": "var(--color-palette-neutral-light-100)", + "--color-surface-brand-subtle": "var(--color-palette-neutral-light-100)", + "--color-surface-default": "var(--color-palette-neutral-light-100)", + "--color-surface-error": "var(--color-palette-danger-200)", + "--color-surface-raised": "var(--color-white)", + "--color-surface-success": "var(--color-palette-success-200)", + "--color-surface-sunken": "var(--color-palette-neutral-light-200)", + "--color-surface-warning": "var(--color-palette-warning-200)", + "--color-text-default": "var(--color-palette-neutral-dark-1000)", + "--color-text-error": "var(--color-palette-danger-900)", + "--color-text-inverse": "var(--color-palette-neutral-light-200)", + "--color-text-subtle": "var(--color-palette-neutral-dark-800)", + "--color-text-success": "var(--color-palette-success-900)", + "--color-text-warning": "var(--color-palette-warning-900)", + "--color-viz-1": "var(--color-palette-primary-800)", + "--color-viz-2": "var(--color-palette-accent-700)", + "--color-viz-3": "var(--color-palette-warning-700)", + "--color-viz-4": "var(--color-palette-accent-alt-600)", + "--color-viz-5": "var(--color-palette-success-600)", + "--color-viz-6": "var(--color-palette-danger-600)", + "--color-viz-7": "var(--color-palette-neutral-dark-1000)", + "--color-viz-8": "var(--color-palette-neutral-light-600)", + "--color-viz-seq-1": "var(--color-palette-primary-600)", + "--color-viz-seq-2": "var(--color-palette-primary-700)", + "--color-viz-seq-3": "var(--color-palette-primary-800)", + "--color-viz-seq-4": "var(--color-palette-primary-900)", + }, + "root": { + "--elements-headerHeight": "4rem", + "--elements-headerZ": 15, + "@media only screen and (min-width: 1024px)": { + "--elements-headerHeight": "5rem", + }, + }, + }, + "borderRadii": { + "full": "999px", + "lg": "12px", + "md": "8px", + "none": "0px", + "sm": "4px", + "xl": "16px", + }, + "borders": { + "1": "1px solid var(--color-border-strong)", + "2": "2px solid var(--color-border-strong)", + }, + "brand": "lxStudio", + "breakpoints": { + "c_base": "@container (min-width: 1px)", + "c_lg": "@container (min-width: 1200px)", + "c_md": "@container (min-width: 1024px)", + "c_sm": "@container (min-width: 768px)", + "c_xl": "@container (min-width: 1440px)", + "c_xs": "@container (min-width: 480px)", + "lg": "@media only screen and (min-width: 1200px)", + "md": "@media only screen and (min-width: 1024px)", + "sm": "@media only screen and (min-width: 768px)", + "xl": "@media only screen and (min-width: 1440px)", + "xs": "@media only screen and (min-width: 480px)", + }, + "colors": { + "action-danger": "var(--color-action-danger)", + "action-danger-hover": "var(--color-action-danger-hover)", + "action-danger-pressed": "var(--color-action-danger-pressed)", + "action-disabled": "var(--color-action-disabled)", + "action-neutral": "var(--color-action-neutral)", + "action-neutral-hover": "var(--color-action-neutral-hover)", + "action-neutral-pressed": "var(--color-action-neutral-pressed)", + "action-primary": "var(--color-action-primary)", + "action-primary-hover": "var(--color-action-primary-hover)", + "action-primary-pressed": "var(--color-action-primary-pressed)", + "background-current": "var(--color-background-current)", + "black": "var(--color-black)", + "black-a24": "var(--color-black-a24)", + "black-a32": "var(--color-black-a32)", + "black-a60": "var(--color-black-a60)", + "border-default": "var(--color-border-default)", + "border-strong": "var(--color-border-strong)", + "border-subtle": "var(--color-border-subtle)", + "palette-accent-100": "var(--color-palette-accent-100)", + "palette-accent-1000": "var(--color-palette-accent-1000)", + "palette-accent-1100": "var(--color-palette-accent-1100)", + "palette-accent-200": "var(--color-palette-accent-200)", + "palette-accent-300": "var(--color-palette-accent-300)", + "palette-accent-400": "var(--color-palette-accent-400)", + "palette-accent-500": "var(--color-palette-accent-500)", + "palette-accent-600": "var(--color-palette-accent-600)", + "palette-accent-700": "var(--color-palette-accent-700)", + "palette-accent-800": "var(--color-palette-accent-800)", + "palette-accent-900": "var(--color-palette-accent-900)", + "palette-accent-alt-100": "var(--color-palette-accent-alt-100)", + "palette-accent-alt-1000": "var(--color-palette-accent-alt-1000)", + "palette-accent-alt-1100": "var(--color-palette-accent-alt-1100)", + "palette-accent-alt-200": "var(--color-palette-accent-alt-200)", + "palette-accent-alt-300": "var(--color-palette-accent-alt-300)", + "palette-accent-alt-400": "var(--color-palette-accent-alt-400)", + "palette-accent-alt-500": "var(--color-palette-accent-alt-500)", + "palette-accent-alt-600": "var(--color-palette-accent-alt-600)", + "palette-accent-alt-700": "var(--color-palette-accent-alt-700)", + "palette-accent-alt-800": "var(--color-palette-accent-alt-800)", + "palette-accent-alt-900": "var(--color-palette-accent-alt-900)", + "palette-danger-100": "var(--color-palette-danger-100)", + "palette-danger-1000": "var(--color-palette-danger-1000)", + "palette-danger-1100": "var(--color-palette-danger-1100)", + "palette-danger-200": "var(--color-palette-danger-200)", + "palette-danger-300": "var(--color-palette-danger-300)", + "palette-danger-400": "var(--color-palette-danger-400)", + "palette-danger-500": "var(--color-palette-danger-500)", + "palette-danger-600": "var(--color-palette-danger-600)", + "palette-danger-700": "var(--color-palette-danger-700)", + "palette-danger-800": "var(--color-palette-danger-800)", + "palette-danger-900": "var(--color-palette-danger-900)", + "palette-neutral-dark-100": "var(--color-palette-neutral-dark-100)", + "palette-neutral-dark-1000": "var(--color-palette-neutral-dark-1000)", + "palette-neutral-dark-1100": "var(--color-palette-neutral-dark-1100)", + "palette-neutral-dark-1100-a12": "var(--color-palette-neutral-dark-1100-a12)", + "palette-neutral-dark-1100-a16": "var(--color-palette-neutral-dark-1100-a16)", + "palette-neutral-dark-200": "var(--color-palette-neutral-dark-200)", + "palette-neutral-dark-300": "var(--color-palette-neutral-dark-300)", + "palette-neutral-dark-400": "var(--color-palette-neutral-dark-400)", + "palette-neutral-dark-500": "var(--color-palette-neutral-dark-500)", + "palette-neutral-dark-600": "var(--color-palette-neutral-dark-600)", + "palette-neutral-dark-700": "var(--color-palette-neutral-dark-700)", + "palette-neutral-dark-800": "var(--color-palette-neutral-dark-800)", + "palette-neutral-dark-900": "var(--color-palette-neutral-dark-900)", + "palette-neutral-light-100": "var(--color-palette-neutral-light-100)", + "palette-neutral-light-1000": "var(--color-palette-neutral-light-1000)", + "palette-neutral-light-1100": "var(--color-palette-neutral-light-1100)", + "palette-neutral-light-200": "var(--color-palette-neutral-light-200)", + "palette-neutral-light-300": "var(--color-palette-neutral-light-300)", + "palette-neutral-light-400": "var(--color-palette-neutral-light-400)", + "palette-neutral-light-500": "var(--color-palette-neutral-light-500)", + "palette-neutral-light-600": "var(--color-palette-neutral-light-600)", + "palette-neutral-light-700": "var(--color-palette-neutral-light-700)", + "palette-neutral-light-800": "var(--color-palette-neutral-light-800)", + "palette-neutral-light-900": "var(--color-palette-neutral-light-900)", + "palette-primary-100": "var(--color-palette-primary-100)", + "palette-primary-1000": "var(--color-palette-primary-1000)", + "palette-primary-1100": "var(--color-palette-primary-1100)", + "palette-primary-200": "var(--color-palette-primary-200)", + "palette-primary-300": "var(--color-palette-primary-300)", + "palette-primary-400": "var(--color-palette-primary-400)", + "palette-primary-500": "var(--color-palette-primary-500)", + "palette-primary-600": "var(--color-palette-primary-600)", + "palette-primary-600-a6": "var(--color-palette-primary-600-a6)", + "palette-primary-600-a8": "var(--color-palette-primary-600-a8)", + "palette-primary-600-a9": "var(--color-palette-primary-600-a9)", + "palette-primary-700": "var(--color-palette-primary-700)", + "palette-primary-800": "var(--color-palette-primary-800)", + "palette-primary-900": "var(--color-palette-primary-900)", + "palette-success-100": "var(--color-palette-success-100)", + "palette-success-1000": "var(--color-palette-success-1000)", + "palette-success-1100": "var(--color-palette-success-1100)", + "palette-success-200": "var(--color-palette-success-200)", + "palette-success-300": "var(--color-palette-success-300)", + "palette-success-400": "var(--color-palette-success-400)", + "palette-success-500": "var(--color-palette-success-500)", + "palette-success-600": "var(--color-palette-success-600)", + "palette-success-700": "var(--color-palette-success-700)", + "palette-success-800": "var(--color-palette-success-800)", + "palette-success-900": "var(--color-palette-success-900)", + "palette-warning-100": "var(--color-palette-warning-100)", + "palette-warning-1000": "var(--color-palette-warning-1000)", + "palette-warning-1100": "var(--color-palette-warning-1100)", + "palette-warning-200": "var(--color-palette-warning-200)", + "palette-warning-300": "var(--color-palette-warning-300)", + "palette-warning-400": "var(--color-palette-warning-400)", + "palette-warning-500": "var(--color-palette-warning-500)", + "palette-warning-600": "var(--color-palette-warning-600)", + "palette-warning-700": "var(--color-palette-warning-700)", + "palette-warning-800": "var(--color-palette-warning-800)", + "palette-warning-900": "var(--color-palette-warning-900)", + "shadow-ambient": "var(--color-shadow-ambient)", + "shadow-key": "var(--color-shadow-key)", + "shadow-scrim": "var(--color-shadow-scrim)", + "state-hover": "var(--color-state-hover)", + "state-pressed": "var(--color-state-pressed)", + "state-selected": "var(--color-state-selected)", + "surface-brand": "var(--color-surface-brand)", + "surface-brand-subtle": "var(--color-surface-brand-subtle)", + "surface-default": "var(--color-surface-default)", + "surface-error": "var(--color-surface-error)", + "surface-raised": "var(--color-surface-raised)", + "surface-success": "var(--color-surface-success)", + "surface-sunken": "var(--color-surface-sunken)", + "surface-warning": "var(--color-surface-warning)", + "text-default": "var(--color-text-default)", + "text-error": "var(--color-text-error)", + "text-inverse": "var(--color-text-inverse)", + "text-subtle": "var(--color-text-subtle)", + "text-success": "var(--color-text-success)", + "text-warning": "var(--color-text-warning)", + "viz-1": "var(--color-viz-1)", + "viz-2": "var(--color-viz-2)", + "viz-3": "var(--color-viz-3)", + "viz-4": "var(--color-viz-4)", + "viz-5": "var(--color-viz-5)", + "viz-6": "var(--color-viz-6)", + "viz-7": "var(--color-viz-7)", + "viz-8": "var(--color-viz-8)", + "viz-seq-1": "var(--color-viz-seq-1)", + "viz-seq-2": "var(--color-viz-seq-2)", + "viz-seq-3": "var(--color-viz-seq-3)", + "viz-seq-4": "var(--color-viz-seq-4)", + "white": "var(--color-white)", + }, + "contentModes": { + "black": "dark", + "palette-accent-100": "light", + "palette-accent-1000": "dark", + "palette-accent-1100": "dark", + "palette-accent-200": "light", + "palette-accent-300": "light", + "palette-accent-400": "light", + "palette-accent-500": "light", + "palette-accent-600": "light", + "palette-accent-700": "dark", + "palette-accent-800": "dark", + "palette-accent-900": "dark", + "palette-accent-alt-100": "light", + "palette-accent-alt-1000": "dark", + "palette-accent-alt-1100": "dark", + "palette-accent-alt-200": "light", + "palette-accent-alt-300": "light", + "palette-accent-alt-400": "light", + "palette-accent-alt-500": "light", + "palette-accent-alt-600": "dark", + "palette-accent-alt-700": "dark", + "palette-accent-alt-800": "dark", + "palette-accent-alt-900": "dark", + "palette-danger-100": "light", + "palette-danger-1000": "dark", + "palette-danger-1100": "dark", + "palette-danger-200": "light", + "palette-danger-300": "light", + "palette-danger-400": "light", + "palette-danger-500": "light", + "palette-danger-600": "dark", + "palette-danger-700": "dark", + "palette-danger-800": "dark", + "palette-danger-900": "dark", + "palette-neutral-dark-100": "light", + "palette-neutral-dark-1000": "dark", + "palette-neutral-dark-1100": "dark", + "palette-neutral-dark-200": "light", + "palette-neutral-dark-300": "light", + "palette-neutral-dark-400": "light", + "palette-neutral-dark-500": "light", + "palette-neutral-dark-600": "light", + "palette-neutral-dark-700": "dark", + "palette-neutral-dark-800": "dark", + "palette-neutral-dark-900": "dark", + "palette-neutral-light-100": "light", + "palette-neutral-light-1000": "dark", + "palette-neutral-light-1100": "dark", + "palette-neutral-light-200": "light", + "palette-neutral-light-300": "light", + "palette-neutral-light-400": "light", + "palette-neutral-light-500": "light", + "palette-neutral-light-600": "light", + "palette-neutral-light-700": "dark", + "palette-neutral-light-800": "dark", + "palette-neutral-light-900": "dark", + "palette-primary-100": "light", + "palette-primary-1000": "dark", + "palette-primary-1100": "dark", + "palette-primary-200": "light", + "palette-primary-300": "light", + "palette-primary-400": "light", + "palette-primary-500": "light", + "palette-primary-600": "dark", + "palette-primary-700": "dark", + "palette-primary-800": "dark", + "palette-primary-900": "dark", + "palette-success-100": "light", + "palette-success-1000": "dark", + "palette-success-1100": "dark", + "palette-success-200": "light", + "palette-success-300": "light", + "palette-success-400": "light", + "palette-success-500": "light", + "palette-success-600": "light", + "palette-success-700": "dark", + "palette-success-800": "dark", + "palette-success-900": "dark", + "palette-warning-100": "light", + "palette-warning-1000": "dark", + "palette-warning-1100": "dark", + "palette-warning-200": "light", + "palette-warning-300": "light", + "palette-warning-400": "light", + "palette-warning-500": "light", + "palette-warning-600": "dark", + "palette-warning-700": "dark", + "palette-warning-800": "dark", + "palette-warning-900": "dark", + "white": "light", + }, + "elements": { + "headerHeight": "var(--elements-headerHeight)", + "headerZ": "var(--elements-headerZ)", + }, + "elevation": { + "hover-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", + "hover-transform": "none", + "hoverMirrored-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", + "hoverMirrored-transform": "none", + "rest-shadow": "0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)", + "rest-transform": "none", + }, + "fontFamily": { + "accent": ""Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", +"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", +sans-serif", + "base": ""Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI", +"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", +sans-serif", + "monospace": "Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, +monospace", + "system": "-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", +"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif", + }, + "fontSize": { + "14": "0.875rem", + "16": "1rem", + "18": "1.125rem", + "20": "1.25rem", + "22": "1.375rem", + "26": "1.625rem", + "34": "2.125rem", + "44": "2.75rem", + "64": "4rem", + }, + "fontWeight": { + "400": 400, + "500": 500, + "700": 700, + "base": 400, + "bold": 500, + "title": 500, + }, + "lineHeight": { + "base": 1.5, + "spacedTitle": 1.3, + "title": 1.2, + }, + "mode": "light", + "modes": { + "dark": { + "action-danger": "palette-danger-400", + "action-danger-hover": "palette-danger-300", + "action-danger-pressed": "palette-danger-200", + "action-disabled": "palette-neutral-dark-800", + "action-neutral": "palette-neutral-light-200", + "action-neutral-hover": "palette-neutral-light-100", + "action-neutral-pressed": "white", + "action-primary": "palette-primary-400", + "action-primary-hover": "palette-primary-300", + "action-primary-pressed": "palette-primary-200", + "background-current": "palette-neutral-dark-1100", + "border-default": "palette-neutral-light-600", + "border-strong": "palette-neutral-light-100", + "border-subtle": "palette-neutral-light-900", + "shadow-ambient": "black-a24", + "shadow-key": "black-a32", + "shadow-scrim": "black-a60", + "state-hover": "palette-primary-600-a6", + "state-pressed": "palette-primary-600-a9", + "state-selected": "palette-primary-600-a8", + "surface-brand": "palette-neutral-dark-1100", + "surface-brand-subtle": "palette-neutral-dark-1100", + "surface-default": "palette-neutral-dark-1100", + "surface-error": "palette-danger-1000", + "surface-raised": "palette-neutral-dark-1000", + "surface-success": "palette-success-1000", + "surface-sunken": "black", + "surface-warning": "palette-warning-1000", + "text-default": "palette-neutral-light-200", + "text-error": "palette-danger-300", + "text-inverse": "palette-neutral-dark-1000", + "text-subtle": "palette-neutral-light-400", + "text-success": "palette-success-300", + "text-warning": "palette-warning-300", + "viz-1": "palette-primary-500", + "viz-2": "palette-accent-500", + "viz-3": "palette-warning-400", + "viz-4": "palette-accent-alt-600", + "viz-5": "palette-success-300", + "viz-6": "palette-danger-600", + "viz-7": "palette-neutral-dark-500", + "viz-8": "palette-neutral-light-600", + "viz-seq-1": "palette-primary-600", + "viz-seq-2": "palette-primary-500", + "viz-seq-3": "palette-primary-400", + "viz-seq-4": "palette-primary-300", + }, + "light": { + "action-danger": "palette-danger-800", + "action-danger-hover": "palette-danger-900", + "action-danger-pressed": "palette-danger-1000", + "action-disabled": "palette-neutral-light-400", + "action-neutral": "palette-neutral-dark-1000", + "action-neutral-hover": "palette-neutral-dark-1100", + "action-neutral-pressed": "black", + "action-primary": "palette-primary-800", + "action-primary-hover": "palette-primary-900", + "action-primary-pressed": "palette-primary-1000", + "background-current": "palette-neutral-light-100", + "border-default": "palette-neutral-dark-600", + "border-strong": "palette-neutral-dark-1100", + "border-subtle": "palette-neutral-dark-300", + "shadow-ambient": "palette-neutral-dark-1100-a12", + "shadow-key": "palette-neutral-dark-1100-a16", + "shadow-scrim": "black-a60", + "state-hover": "palette-primary-600-a6", + "state-pressed": "palette-primary-600-a9", + "state-selected": "palette-primary-600-a8", + "surface-brand": "palette-neutral-light-100", + "surface-brand-subtle": "palette-neutral-light-100", + "surface-default": "palette-neutral-light-100", + "surface-error": "palette-danger-200", + "surface-raised": "white", + "surface-success": "palette-success-200", + "surface-sunken": "palette-neutral-light-200", + "surface-warning": "palette-warning-200", + "text-default": "palette-neutral-dark-1000", + "text-error": "palette-danger-900", + "text-inverse": "palette-neutral-light-200", + "text-subtle": "palette-neutral-dark-800", + "text-success": "palette-success-900", + "text-warning": "palette-warning-900", + "viz-1": "palette-primary-800", + "viz-2": "palette-accent-700", + "viz-3": "palette-warning-700", + "viz-4": "palette-accent-alt-600", + "viz-5": "palette-success-600", + "viz-6": "palette-danger-600", + "viz-7": "palette-neutral-dark-1000", + "viz-8": "palette-neutral-light-600", + "viz-seq-1": "palette-primary-600", + "viz-seq-2": "palette-primary-700", + "viz-seq-3": "palette-primary-800", + "viz-seq-4": "palette-primary-900", + }, + }, + "name": "lxStudio", + "spacing": { + "0": 0, + "12": "0.75rem", + "16": "1rem", + "24": "1.5rem", + "32": "2rem", + "4": "0.25rem", + "40": "2.5rem", + "48": "3rem", + "64": "4rem", + "8": "0.5rem", + "96": "6rem", + }, + "tokensCss": "/* Generated by @skillsoft/gamut-brand from the "lxStudio" brand. Do not edit. */ +@layer reset, base, tokens, recipes, utilities; + +@layer tokens { + :root, [data-brand="lxStudio"] { + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9876 0.0017 247.84); + --color-palette-neutral-light-200: oklch(0.9364 0.0025 247.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0086 247.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0178 247.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0316 247.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0312 247.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0253 247.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0198 247.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0157 247.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 262.40); + --color-palette-primary-200: oklch(0.9364 0.0121 262.40); + --color-palette-primary-300: oklch(0.8497 0.0407 262.40); + --color-palette-primary-400: oklch(0.7628 0.0846 262.40); + --color-palette-primary-500: oklch(0.6707 0.1531 262.40); + --color-palette-primary-600: oklch(0.5835 0.2274 262.40); + --color-palette-primary-700: oklch(0.4972 0.2254 262.40); + --color-palette-primary-800: oklch(0.4115 0.1767 262.40); + --color-palette-primary-900: oklch(0.3346 0.1405 262.40); + --color-palette-primary-1000: oklch(0.2499 0.1001 262.40); + --color-palette-primary-1100: oklch(0.1925 0.0734 262.40); + --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8497 0.0957 93.60); + --color-palette-accent-400: oklch(0.7628 0.1094 93.60); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0204 156.70); + --color-palette-success-200: oklch(0.9364 0.0405 156.70); + --color-palette-success-300: oklch(0.8497 0.1118 156.70); + --color-palette-success-400: oklch(0.7628 0.1278 156.70); + --color-palette-success-500: oklch(0.6707 0.1413 156.70); + --color-palette-success-600: oklch(0.5835 0.1396 156.70); + --color-palette-success-700: oklch(0.4972 0.1130 156.70); + --color-palette-success-800: oklch(0.4115 0.0886 156.70); + --color-palette-success-900: oklch(0.3346 0.0704 156.70); + --color-palette-success-1000: oklch(0.2499 0.0502 156.70); + --color-palette-success-1100: oklch(0.1925 0.0368 156.70); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + } + + :root, [data-color-mode="light"] { + color-scheme: light; + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + } + + [data-color-mode="dark"] { + color-scheme: dark; + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + } +} +", +} +`; + +exports[`themes platform - theme shape 1`] = ` +{ + "_getColorValue": [Function], + "_tokens": { + "colors": { + "black": "#000000", + "black-a24": "rgba(0, 0, 0, 0.24)", + "black-a32": "rgba(0, 0, 0, 0.32)", + "black-a60": "rgba(0, 0, 0, 0.6)", + "palette-accent-100": "#fffbeb", + "palette-accent-1000": "#282106", + "palette-accent-1100": "#191404", + "palette-accent-200": "#f2eace", + "palette-accent-300": "#ffd300", + "palette-accent-400": "#cca900", + "palette-accent-500": "#ae932e", + "palette-accent-600": "#937900", + "palette-accent-700": "#75610e", + "palette-accent-800": "#594a10", + "palette-accent-900": "#41360b", + "palette-accent-alt-100": "#fafaff", + "palette-accent-alt-1000": "#220d57", + "palette-accent-alt-1100": "#150739", + "palette-accent-alt-200": "#e9e9f2", + "palette-accent-alt-300": "#cbcae9", + "palette-accent-alt-400": "#aeaae9", + "palette-accent-alt-500": "#9182f3", + "palette-accent-alt-600": "#7a52ff", + "palette-accent-alt-700": "#661af0", + "palette-accent-alt-800": "#4d1cb5", + "palette-accent-alt-900": "#381587", + "palette-danger-100": "#fff9f8", + "palette-danger-1000": "#420a06", + "palette-danger-1100": "#2b0603", + "palette-danger-200": "#f2e7e5", + "palette-danger-300": "#eac3bd", + "palette-danger-400": "#ea9a8d", + "palette-danger-500": "#f45b4a", + "palette-danger-600": "#e70400", + "palette-danger-700": "#b7160d", + "palette-danger-800": "#8a170f", + "palette-danger-900": "#67110a", + "palette-neutral-dark-100": "#fafafb", + "palette-neutral-dark-1000": "#1d212f", + "palette-neutral-dark-1100": "#11141d", + "palette-neutral-dark-1100-a12": "rgba(17, 20, 29, 0.12)", + "palette-neutral-dark-1100-a16": "rgba(17, 20, 29, 0.16)", + "palette-neutral-dark-200": "#e9eaeb", + "palette-neutral-dark-300": "#cbcdd3", + "palette-neutral-dark-400": "#aeb2bd", + "palette-neutral-dark-500": "#8e95a9", + "palette-neutral-dark-600": "#717a97", + "palette-neutral-dark-700": "#576182", + "palette-neutral-dark-800": "#414965", + "palette-neutral-dark-900": "#2f364b", + "palette-neutral-light-100": "#f5fcff", + "palette-neutral-light-1000": "#1e2224", + "palette-neutral-light-1100": "#121516", + "palette-neutral-light-200": "#e8eaeb", + "palette-neutral-light-300": "#c7cfd3", + "palette-neutral-light-400": "#a5b5bc", + "palette-neutral-light-500": "#8899a0", + "palette-neutral-light-600": "#6e7e85", + "palette-neutral-light-700": "#58656a", + "palette-neutral-light-800": "#434d51", + "palette-neutral-light-900": "#31383b", + "palette-primary-100": "#f9faff", + "palette-primary-1000": "#140f5f", + "palette-primary-1100": "#0b093f", + "palette-primary-200": "#e7eaf2", + "palette-primary-300": "#c5cce9", + "palette-primary-400": "#a1aee9", + "palette-primary-500": "#798bf3", + "palette-primary-600": "#5962ff", + "palette-primary-600-a6": "rgba(89, 98, 255, 0.06)", + "palette-primary-600-a8": "rgba(89, 98, 255, 0.08)", + "palette-primary-600-a9": "rgba(89, 98, 255, 0.09)", + "palette-primary-700": "#4433f7", + "palette-primary-800": "#331fc6", + "palette-primary-900": "#241793", + "palette-success-100": "#f1fff1", + "palette-success-1000": "#08290c", + "palette-success-1100": "#041a06", + "palette-success-200": "#d8f3d8", + "palette-success-300": "#8de792", + "palette-success-400": "#64cd6d", + "palette-success-500": "#34b147", + "palette-success-600": "#00952b", + "palette-success-700": "#117726", + "palette-success-800": "#135a1f", + "palette-success-900": "#0e4216", + "palette-warning-100": "#fff9f5", + "palette-warning-1000": "#331b06", + "palette-warning-1100": "#201004", + "palette-warning-200": "#f2e8e0", + "palette-warning-300": "#eac6ab", + "palette-warning-400": "#ea9f63", + "palette-warning-500": "#d47d2d", + "palette-warning-600": "#b66200", + "palette-warning-700": "#914f0e", + "palette-warning-800": "#6d3d10", + "palette-warning-900": "#512c0b", + "white": "#ffffff", + }, + "elements": { + "headerHeight": { + "base": "4rem", + "md": "5rem", + }, + "headerZ": 15, + }, + "modes": { + "dark": { + "action-danger": "#ea9a8d", + "action-danger-hover": "#eac3bd", + "action-danger-pressed": "#f2e7e5", + "action-disabled": "#414965", + "action-neutral": "#e8eaeb", + "action-neutral-hover": "#f5fcff", + "action-neutral-pressed": "#ffffff", + "action-primary": "#ffd300", + "action-primary-hover": "#cca900", + "action-primary-pressed": "#ae932e", + "background-current": "#11141d", + "border-default": "#6e7e85", + "border-strong": "#f5fcff", + "border-subtle": "#31383b", + "shadow-ambient": "rgba(0, 0, 0, 0.24)", + "shadow-key": "rgba(0, 0, 0, 0.32)", + "shadow-scrim": "rgba(0, 0, 0, 0.6)", + "state-hover": "rgba(89, 98, 255, 0.06)", + "state-pressed": "rgba(89, 98, 255, 0.09)", + "state-selected": "rgba(89, 98, 255, 0.08)", + "surface-brand": "#11141d", + "surface-brand-subtle": "#11141d", + "surface-default": "#11141d", + "surface-error": "#420a06", + "surface-raised": "#1d212f", + "surface-success": "#08290c", + "surface-sunken": "#000000", + "surface-warning": "#331b06", + "text-default": "#e8eaeb", + "text-error": "#eac3bd", + "text-inverse": "#1d212f", + "text-subtle": "#a5b5bc", + "text-success": "#8de792", + "text-warning": "#eac6ab", + "viz-1": "#798bf3", + "viz-2": "#ae932e", + "viz-3": "#ea9f63", + "viz-4": "#7a52ff", + "viz-5": "#8de792", + "viz-6": "#e70400", + "viz-7": "#8e95a9", + "viz-8": "#6e7e85", + "viz-seq-1": "#5962ff", + "viz-seq-2": "#798bf3", + "viz-seq-3": "#a1aee9", + "viz-seq-4": "#c5cce9", + }, + "light": { + "action-danger": "#8a170f", + "action-danger-hover": "#67110a", + "action-danger-pressed": "#420a06", + "action-disabled": "#a5b5bc", + "action-neutral": "#1d212f", + "action-neutral-hover": "#11141d", + "action-neutral-pressed": "#000000", + "action-primary": "#331fc6", + "action-primary-hover": "#241793", + "action-primary-pressed": "#140f5f", + "background-current": "#f5fcff", + "border-default": "#717a97", + "border-strong": "#11141d", + "border-subtle": "#cbcdd3", + "shadow-ambient": "rgba(17, 20, 29, 0.12)", + "shadow-key": "rgba(17, 20, 29, 0.16)", + "shadow-scrim": "rgba(0, 0, 0, 0.6)", + "state-hover": "rgba(89, 98, 255, 0.06)", + "state-pressed": "rgba(89, 98, 255, 0.09)", + "state-selected": "rgba(89, 98, 255, 0.08)", + "surface-brand": "#f5fcff", + "surface-brand-subtle": "#f5fcff", + "surface-default": "#f5fcff", + "surface-error": "#f2e7e5", + "surface-raised": "#ffffff", + "surface-success": "#d8f3d8", + "surface-sunken": "#e8eaeb", + "surface-warning": "#f2e8e0", + "text-default": "#1d212f", + "text-error": "#67110a", + "text-inverse": "#e8eaeb", + "text-subtle": "#414965", + "text-success": "#0e4216", + "text-warning": "#512c0b", + "viz-1": "#331fc6", + "viz-2": "#75610e", + "viz-3": "#914f0e", + "viz-4": "#7a52ff", + "viz-5": "#00952b", + "viz-6": "#e70400", + "viz-7": "#1d212f", + "viz-8": "#6e7e85", + "viz-seq-1": "#5962ff", + "viz-seq-2": "#4433f7", + "viz-seq-3": "#331fc6", + "viz-seq-4": "#241793", + }, + }, + }, + "_variables": { + "mode": { + "--color-action-danger": "var(--color-palette-danger-400)", + "--color-action-danger-hover": "var(--color-palette-danger-300)", + "--color-action-danger-pressed": "var(--color-palette-danger-200)", + "--color-action-disabled": "var(--color-palette-neutral-dark-800)", + "--color-action-neutral": "var(--color-palette-neutral-light-200)", + "--color-action-neutral-hover": "var(--color-palette-neutral-light-100)", + "--color-action-neutral-pressed": "var(--color-white)", + "--color-action-primary": "var(--color-palette-accent-300)", + "--color-action-primary-hover": "var(--color-palette-accent-400)", + "--color-action-primary-pressed": "var(--color-palette-accent-500)", + "--color-background-current": "var(--color-palette-neutral-dark-1100)", + "--color-border-default": "var(--color-palette-neutral-light-600)", + "--color-border-strong": "var(--color-palette-neutral-light-100)", + "--color-border-subtle": "var(--color-palette-neutral-light-900)", + "--color-shadow-ambient": "var(--color-black-a24)", + "--color-shadow-key": "var(--color-black-a32)", + "--color-shadow-scrim": "var(--color-black-a60)", + "--color-state-hover": "var(--color-palette-primary-600-a6)", + "--color-state-pressed": "var(--color-palette-primary-600-a9)", + "--color-state-selected": "var(--color-palette-primary-600-a8)", + "--color-surface-brand": "var(--color-palette-neutral-dark-1100)", + "--color-surface-brand-subtle": "var(--color-palette-neutral-dark-1100)", + "--color-surface-default": "var(--color-palette-neutral-dark-1100)", + "--color-surface-error": "var(--color-palette-danger-1000)", + "--color-surface-raised": "var(--color-palette-neutral-dark-1000)", + "--color-surface-success": "var(--color-palette-success-1000)", + "--color-surface-sunken": "var(--color-black)", + "--color-surface-warning": "var(--color-palette-warning-1000)", + "--color-text-default": "var(--color-palette-neutral-light-200)", + "--color-text-error": "var(--color-palette-danger-300)", + "--color-text-inverse": "var(--color-palette-neutral-dark-1000)", + "--color-text-subtle": "var(--color-palette-neutral-light-400)", + "--color-text-success": "var(--color-palette-success-300)", + "--color-text-warning": "var(--color-palette-warning-300)", + "--color-viz-1": "var(--color-palette-primary-500)", + "--color-viz-2": "var(--color-palette-accent-500)", + "--color-viz-3": "var(--color-palette-warning-400)", + "--color-viz-4": "var(--color-palette-accent-alt-600)", + "--color-viz-5": "var(--color-palette-success-300)", + "--color-viz-6": "var(--color-palette-danger-600)", + "--color-viz-7": "var(--color-palette-neutral-dark-500)", + "--color-viz-8": "var(--color-palette-neutral-light-600)", + "--color-viz-seq-1": "var(--color-palette-primary-600)", + "--color-viz-seq-2": "var(--color-palette-primary-500)", + "--color-viz-seq-3": "var(--color-palette-primary-400)", + "--color-viz-seq-4": "var(--color-palette-primary-300)", + }, + "root": { + "--elements-headerHeight": "4rem", + "--elements-headerZ": 15, + "@media only screen and (min-width: 1024px)": { + "--elements-headerHeight": "5rem", + }, + }, + }, + "borderRadii": { + "full": "999px", + "lg": "8px", + "md": "4px", + "none": "0px", + "sm": "2px", + "xl": "16px", + }, + "borders": { + "1": "1px solid var(--color-border-strong)", + "2": "2px solid var(--color-border-strong)", + }, + "brand": "platform", + "breakpoints": { + "c_base": "@container (min-width: 1px)", + "c_lg": "@container (min-width: 1200px)", + "c_md": "@container (min-width: 1024px)", + "c_sm": "@container (min-width: 768px)", + "c_xl": "@container (min-width: 1440px)", + "c_xs": "@container (min-width: 480px)", + "lg": "@media only screen and (min-width: 1200px)", + "md": "@media only screen and (min-width: 1024px)", + "sm": "@media only screen and (min-width: 768px)", + "xl": "@media only screen and (min-width: 1440px)", + "xs": "@media only screen and (min-width: 480px)", + }, + "colors": { + "action-danger": "var(--color-action-danger)", + "action-danger-hover": "var(--color-action-danger-hover)", + "action-danger-pressed": "var(--color-action-danger-pressed)", + "action-disabled": "var(--color-action-disabled)", + "action-neutral": "var(--color-action-neutral)", + "action-neutral-hover": "var(--color-action-neutral-hover)", + "action-neutral-pressed": "var(--color-action-neutral-pressed)", + "action-primary": "var(--color-action-primary)", + "action-primary-hover": "var(--color-action-primary-hover)", + "action-primary-pressed": "var(--color-action-primary-pressed)", + "background-current": "var(--color-background-current)", + "black": "var(--color-black)", + "black-a24": "var(--color-black-a24)", + "black-a32": "var(--color-black-a32)", + "black-a60": "var(--color-black-a60)", + "border-default": "var(--color-border-default)", + "border-strong": "var(--color-border-strong)", + "border-subtle": "var(--color-border-subtle)", + "editor-annotation": "var(--color-editor-annotation)", + "editor-atom": "var(--color-editor-atom)", + "editor-attribute": "var(--color-editor-attribute)", + "editor-basic": "var(--color-editor-basic)", + "editor-comment": "var(--color-editor-comment)", + "editor-constant": "var(--color-editor-constant)", + "editor-decoration": "var(--color-editor-decoration)", + "editor-invalid": "var(--color-editor-invalid)", + "editor-key": "var(--color-editor-key)", + "editor-keyword": "var(--color-editor-keyword)", + "editor-number": "var(--color-editor-number)", + "editor-operator": "var(--color-editor-operator)", + "editor-predefined": "var(--color-editor-predefined)", + "editor-property": "var(--color-editor-property)", + "editor-regexp": "var(--color-editor-regexp)", + "editor-string": "var(--color-editor-string)", + "editor-tag": "var(--color-editor-tag)", + "editor-text": "var(--color-editor-text)", + "editor-ui-background": "var(--color-editor-ui-background)", + "editor-ui-indent-active": "var(--color-editor-ui-indent-active)", + "editor-ui-indent-inactive": "var(--color-editor-ui-indent-inactive)", + "editor-ui-line-number-active": "var(--color-editor-ui-line-number-active)", + "editor-ui-line-number-inactive": "var(--color-editor-ui-line-number-inactive)", + "editor-ui-text": "var(--color-editor-ui-text)", + "editor-value": "var(--color-editor-value)", + "editor-variable": "var(--color-editor-variable)", + "palette-accent-100": "var(--color-palette-accent-100)", + "palette-accent-1000": "var(--color-palette-accent-1000)", + "palette-accent-1100": "var(--color-palette-accent-1100)", + "palette-accent-200": "var(--color-palette-accent-200)", + "palette-accent-300": "var(--color-palette-accent-300)", + "palette-accent-400": "var(--color-palette-accent-400)", + "palette-accent-500": "var(--color-palette-accent-500)", + "palette-accent-600": "var(--color-palette-accent-600)", + "palette-accent-700": "var(--color-palette-accent-700)", + "palette-accent-800": "var(--color-palette-accent-800)", + "palette-accent-900": "var(--color-palette-accent-900)", + "palette-accent-alt-100": "var(--color-palette-accent-alt-100)", + "palette-accent-alt-1000": "var(--color-palette-accent-alt-1000)", + "palette-accent-alt-1100": "var(--color-palette-accent-alt-1100)", + "palette-accent-alt-200": "var(--color-palette-accent-alt-200)", + "palette-accent-alt-300": "var(--color-palette-accent-alt-300)", + "palette-accent-alt-400": "var(--color-palette-accent-alt-400)", + "palette-accent-alt-500": "var(--color-palette-accent-alt-500)", + "palette-accent-alt-600": "var(--color-palette-accent-alt-600)", + "palette-accent-alt-700": "var(--color-palette-accent-alt-700)", + "palette-accent-alt-800": "var(--color-palette-accent-alt-800)", + "palette-accent-alt-900": "var(--color-palette-accent-alt-900)", + "palette-danger-100": "var(--color-palette-danger-100)", + "palette-danger-1000": "var(--color-palette-danger-1000)", + "palette-danger-1100": "var(--color-palette-danger-1100)", + "palette-danger-200": "var(--color-palette-danger-200)", + "palette-danger-300": "var(--color-palette-danger-300)", + "palette-danger-400": "var(--color-palette-danger-400)", + "palette-danger-500": "var(--color-palette-danger-500)", + "palette-danger-600": "var(--color-palette-danger-600)", + "palette-danger-700": "var(--color-palette-danger-700)", + "palette-danger-800": "var(--color-palette-danger-800)", + "palette-danger-900": "var(--color-palette-danger-900)", + "palette-neutral-dark-100": "var(--color-palette-neutral-dark-100)", + "palette-neutral-dark-1000": "var(--color-palette-neutral-dark-1000)", + "palette-neutral-dark-1100": "var(--color-palette-neutral-dark-1100)", + "palette-neutral-dark-1100-a12": "var(--color-palette-neutral-dark-1100-a12)", + "palette-neutral-dark-1100-a16": "var(--color-palette-neutral-dark-1100-a16)", + "palette-neutral-dark-200": "var(--color-palette-neutral-dark-200)", + "palette-neutral-dark-300": "var(--color-palette-neutral-dark-300)", + "palette-neutral-dark-400": "var(--color-palette-neutral-dark-400)", + "palette-neutral-dark-500": "var(--color-palette-neutral-dark-500)", + "palette-neutral-dark-600": "var(--color-palette-neutral-dark-600)", + "palette-neutral-dark-700": "var(--color-palette-neutral-dark-700)", + "palette-neutral-dark-800": "var(--color-palette-neutral-dark-800)", + "palette-neutral-dark-900": "var(--color-palette-neutral-dark-900)", + "palette-neutral-light-100": "var(--color-palette-neutral-light-100)", + "palette-neutral-light-1000": "var(--color-palette-neutral-light-1000)", + "palette-neutral-light-1100": "var(--color-palette-neutral-light-1100)", + "palette-neutral-light-200": "var(--color-palette-neutral-light-200)", + "palette-neutral-light-300": "var(--color-palette-neutral-light-300)", + "palette-neutral-light-400": "var(--color-palette-neutral-light-400)", + "palette-neutral-light-500": "var(--color-palette-neutral-light-500)", + "palette-neutral-light-600": "var(--color-palette-neutral-light-600)", + "palette-neutral-light-700": "var(--color-palette-neutral-light-700)", + "palette-neutral-light-800": "var(--color-palette-neutral-light-800)", + "palette-neutral-light-900": "var(--color-palette-neutral-light-900)", + "palette-primary-100": "var(--color-palette-primary-100)", + "palette-primary-1000": "var(--color-palette-primary-1000)", + "palette-primary-1100": "var(--color-palette-primary-1100)", + "palette-primary-200": "var(--color-palette-primary-200)", + "palette-primary-300": "var(--color-palette-primary-300)", + "palette-primary-400": "var(--color-palette-primary-400)", + "palette-primary-500": "var(--color-palette-primary-500)", + "palette-primary-600": "var(--color-palette-primary-600)", + "palette-primary-600-a6": "var(--color-palette-primary-600-a6)", + "palette-primary-600-a8": "var(--color-palette-primary-600-a8)", + "palette-primary-600-a9": "var(--color-palette-primary-600-a9)", + "palette-primary-700": "var(--color-palette-primary-700)", + "palette-primary-800": "var(--color-palette-primary-800)", + "palette-primary-900": "var(--color-palette-primary-900)", + "palette-success-100": "var(--color-palette-success-100)", + "palette-success-1000": "var(--color-palette-success-1000)", + "palette-success-1100": "var(--color-palette-success-1100)", + "palette-success-200": "var(--color-palette-success-200)", + "palette-success-300": "var(--color-palette-success-300)", + "palette-success-400": "var(--color-palette-success-400)", + "palette-success-500": "var(--color-palette-success-500)", + "palette-success-600": "var(--color-palette-success-600)", + "palette-success-700": "var(--color-palette-success-700)", + "palette-success-800": "var(--color-palette-success-800)", + "palette-success-900": "var(--color-palette-success-900)", + "palette-warning-100": "var(--color-palette-warning-100)", + "palette-warning-1000": "var(--color-palette-warning-1000)", + "palette-warning-1100": "var(--color-palette-warning-1100)", + "palette-warning-200": "var(--color-palette-warning-200)", + "palette-warning-300": "var(--color-palette-warning-300)", + "palette-warning-400": "var(--color-palette-warning-400)", + "palette-warning-500": "var(--color-palette-warning-500)", + "palette-warning-600": "var(--color-palette-warning-600)", + "palette-warning-700": "var(--color-palette-warning-700)", + "palette-warning-800": "var(--color-palette-warning-800)", + "palette-warning-900": "var(--color-palette-warning-900)", + "shadow-ambient": "var(--color-shadow-ambient)", + "shadow-key": "var(--color-shadow-key)", + "shadow-scrim": "var(--color-shadow-scrim)", + "state-hover": "var(--color-state-hover)", + "state-pressed": "var(--color-state-pressed)", + "state-selected": "var(--color-state-selected)", + "surface-brand": "var(--color-surface-brand)", + "surface-brand-subtle": "var(--color-surface-brand-subtle)", + "surface-default": "var(--color-surface-default)", + "surface-error": "var(--color-surface-error)", + "surface-raised": "var(--color-surface-raised)", + "surface-success": "var(--color-surface-success)", + "surface-sunken": "var(--color-surface-sunken)", + "surface-warning": "var(--color-surface-warning)", + "text-default": "var(--color-text-default)", + "text-error": "var(--color-text-error)", + "text-inverse": "var(--color-text-inverse)", + "text-subtle": "var(--color-text-subtle)", + "text-success": "var(--color-text-success)", + "text-warning": "var(--color-text-warning)", + "viz-1": "var(--color-viz-1)", + "viz-2": "var(--color-viz-2)", + "viz-3": "var(--color-viz-3)", + "viz-4": "var(--color-viz-4)", + "viz-5": "var(--color-viz-5)", + "viz-6": "var(--color-viz-6)", + "viz-7": "var(--color-viz-7)", + "viz-8": "var(--color-viz-8)", + "viz-seq-1": "var(--color-viz-seq-1)", + "viz-seq-2": "var(--color-viz-seq-2)", + "viz-seq-3": "var(--color-viz-seq-3)", + "viz-seq-4": "var(--color-viz-seq-4)", + "white": "var(--color-white)", + }, + "contentModes": { + "black": "dark", + "palette-accent-100": "light", + "palette-accent-1000": "dark", + "palette-accent-1100": "dark", + "palette-accent-200": "light", + "palette-accent-300": "light", + "palette-accent-400": "light", + "palette-accent-500": "light", + "palette-accent-600": "light", + "palette-accent-700": "dark", + "palette-accent-800": "dark", + "palette-accent-900": "dark", + "palette-accent-alt-100": "light", + "palette-accent-alt-1000": "dark", + "palette-accent-alt-1100": "dark", + "palette-accent-alt-200": "light", + "palette-accent-alt-300": "light", + "palette-accent-alt-400": "light", + "palette-accent-alt-500": "light", + "palette-accent-alt-600": "dark", + "palette-accent-alt-700": "dark", + "palette-accent-alt-800": "dark", + "palette-accent-alt-900": "dark", + "palette-danger-100": "light", + "palette-danger-1000": "dark", + "palette-danger-1100": "dark", + "palette-danger-200": "light", + "palette-danger-300": "light", + "palette-danger-400": "light", + "palette-danger-500": "light", + "palette-danger-600": "dark", + "palette-danger-700": "dark", + "palette-danger-800": "dark", + "palette-danger-900": "dark", + "palette-neutral-dark-100": "light", + "palette-neutral-dark-1000": "dark", + "palette-neutral-dark-1100": "dark", + "palette-neutral-dark-200": "light", + "palette-neutral-dark-300": "light", + "palette-neutral-dark-400": "light", + "palette-neutral-dark-500": "light", + "palette-neutral-dark-600": "light", + "palette-neutral-dark-700": "dark", + "palette-neutral-dark-800": "dark", + "palette-neutral-dark-900": "dark", + "palette-neutral-light-100": "light", + "palette-neutral-light-1000": "dark", + "palette-neutral-light-1100": "dark", + "palette-neutral-light-200": "light", + "palette-neutral-light-300": "light", + "palette-neutral-light-400": "light", + "palette-neutral-light-500": "light", + "palette-neutral-light-600": "light", + "palette-neutral-light-700": "dark", + "palette-neutral-light-800": "dark", + "palette-neutral-light-900": "dark", + "palette-primary-100": "light", + "palette-primary-1000": "dark", + "palette-primary-1100": "dark", + "palette-primary-200": "light", + "palette-primary-300": "light", + "palette-primary-400": "light", + "palette-primary-500": "light", + "palette-primary-600": "dark", + "palette-primary-700": "dark", + "palette-primary-800": "dark", + "palette-primary-900": "dark", + "palette-success-100": "light", + "palette-success-1000": "dark", + "palette-success-1100": "dark", + "palette-success-200": "light", + "palette-success-300": "light", + "palette-success-400": "light", + "palette-success-500": "light", + "palette-success-600": "light", + "palette-success-700": "dark", + "palette-success-800": "dark", + "palette-success-900": "dark", + "palette-warning-100": "light", + "palette-warning-1000": "dark", + "palette-warning-1100": "dark", + "palette-warning-200": "light", + "palette-warning-300": "light", + "palette-warning-400": "light", + "palette-warning-500": "light", + "palette-warning-600": "dark", + "palette-warning-700": "dark", + "palette-warning-800": "dark", + "palette-warning-900": "dark", + "white": "light", + }, + "elements": { + "headerHeight": "var(--elements-headerHeight)", + "headerZ": "var(--elements-headerZ)", + }, + "elevation": { + "hover-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", + "hover-transform": "none", + "hoverMirrored-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", + "hoverMirrored-transform": "none", + "rest-shadow": "0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)", + "rest-transform": "none", + }, + "fontFamily": { + "accent": ""Suisse", "Apercu", -apple-system, BlinkMacSystemFont, +"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", +"Helvetica Neue", sans-serif", + "base": ""Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI", +"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", +sans-serif", + "monospace": "Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas, +monospace", + "system": "-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", +"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif", + }, + "fontSize": { + "14": "0.875rem", + "16": "1rem", + "18": "1.125rem", + "20": "1.25rem", + "22": "1.375rem", + "26": "1.625rem", + "34": "2.125rem", + "44": "2.75rem", + "64": "4rem", + }, + "fontWeight": { + "400": 400, + "700": 700, + "base": 400, + "title": 700, + }, + "lineHeight": { + "base": 1.5, + "spacedTitle": 1.3, + "title": 1.2, + }, + "mode": "dark", + "modes": { + "dark": { + "action-danger": "palette-danger-400", + "action-danger-hover": "palette-danger-300", + "action-danger-pressed": "palette-danger-200", + "action-disabled": "palette-neutral-dark-800", + "action-neutral": "palette-neutral-light-200", + "action-neutral-hover": "palette-neutral-light-100", + "action-neutral-pressed": "white", + "action-primary": "palette-accent-300", + "action-primary-hover": "palette-accent-400", + "action-primary-pressed": "palette-accent-500", + "background-current": "palette-neutral-dark-1100", + "border-default": "palette-neutral-light-600", + "border-strong": "palette-neutral-light-100", + "border-subtle": "palette-neutral-light-900", + "shadow-ambient": "black-a24", + "shadow-key": "black-a32", + "shadow-scrim": "black-a60", + "state-hover": "palette-primary-600-a6", + "state-pressed": "palette-primary-600-a9", + "state-selected": "palette-primary-600-a8", + "surface-brand": "palette-neutral-dark-1100", + "surface-brand-subtle": "palette-neutral-dark-1100", + "surface-default": "palette-neutral-dark-1100", + "surface-error": "palette-danger-1000", + "surface-raised": "palette-neutral-dark-1000", + "surface-success": "palette-success-1000", + "surface-sunken": "black", + "surface-warning": "palette-warning-1000", + "text-default": "palette-neutral-light-200", + "text-error": "palette-danger-300", + "text-inverse": "palette-neutral-dark-1000", + "text-subtle": "palette-neutral-light-400", + "text-success": "palette-success-300", + "text-warning": "palette-warning-300", + "viz-1": "palette-primary-500", + "viz-2": "palette-accent-500", + "viz-3": "palette-warning-400", + "viz-4": "palette-accent-alt-600", + "viz-5": "palette-success-300", + "viz-6": "palette-danger-600", + "viz-7": "palette-neutral-dark-500", + "viz-8": "palette-neutral-light-600", + "viz-seq-1": "palette-primary-600", + "viz-seq-2": "palette-primary-500", + "viz-seq-3": "palette-primary-400", + "viz-seq-4": "palette-primary-300", + }, + "light": { + "action-danger": "palette-danger-800", + "action-danger-hover": "palette-danger-900", + "action-danger-pressed": "palette-danger-1000", + "action-disabled": "palette-neutral-light-400", + "action-neutral": "palette-neutral-dark-1000", + "action-neutral-hover": "palette-neutral-dark-1100", + "action-neutral-pressed": "black", + "action-primary": "palette-primary-800", + "action-primary-hover": "palette-primary-900", + "action-primary-pressed": "palette-primary-1000", + "background-current": "palette-neutral-light-100", + "border-default": "palette-neutral-dark-600", + "border-strong": "palette-neutral-dark-1100", + "border-subtle": "palette-neutral-dark-300", + "shadow-ambient": "palette-neutral-dark-1100-a12", + "shadow-key": "palette-neutral-dark-1100-a16", + "shadow-scrim": "black-a60", + "state-hover": "palette-primary-600-a6", + "state-pressed": "palette-primary-600-a9", + "state-selected": "palette-primary-600-a8", + "surface-brand": "palette-neutral-light-100", + "surface-brand-subtle": "palette-neutral-light-100", + "surface-default": "palette-neutral-light-100", + "surface-error": "palette-danger-200", + "surface-raised": "white", + "surface-success": "palette-success-200", + "surface-sunken": "palette-neutral-light-200", + "surface-warning": "palette-warning-200", + "text-default": "palette-neutral-dark-1000", + "text-error": "palette-danger-900", + "text-inverse": "palette-neutral-light-200", + "text-subtle": "palette-neutral-dark-800", + "text-success": "palette-success-900", + "text-warning": "palette-warning-900", + "viz-1": "palette-primary-800", + "viz-2": "palette-accent-700", + "viz-3": "palette-warning-700", + "viz-4": "palette-accent-alt-600", + "viz-5": "palette-success-600", + "viz-6": "palette-danger-600", + "viz-7": "palette-neutral-dark-1000", + "viz-8": "palette-neutral-light-600", + "viz-seq-1": "palette-primary-600", + "viz-seq-2": "palette-primary-700", + "viz-seq-3": "palette-primary-800", + "viz-seq-4": "palette-primary-900", + }, + }, + "name": "platform", + "spacing": { + "0": 0, + "12": "0.75rem", + "16": "1rem", + "24": "1.5rem", + "32": "2rem", + "4": "0.25rem", + "40": "2.5rem", + "48": "3rem", + "64": "4rem", + "8": "0.5rem", + "96": "6rem", + }, + "tokensCss": "/* Generated by @skillsoft/gamut-brand from the "platform" brand. Do not edit. */ +@layer reset, base, tokens, recipes, utilities; + +@layer tokens { + :root, [data-brand="platform"] { + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9867 0.0084 225.08); + --color-palette-neutral-light-200: oklch(0.9364 0.0032 225.10); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 225.10); + --color-palette-neutral-light-400: oklch(0.7628 0.0202 225.10); + --color-palette-neutral-light-500: oklch(0.6707 0.0223 225.10); + --color-palette-neutral-light-600: oklch(0.5835 0.0221 225.10); + --color-palette-neutral-light-700: oklch(0.4972 0.0179 225.10); + --color-palette-neutral-light-800: oklch(0.4115 0.0140 225.10); + --color-palette-neutral-light-900: oklch(0.3346 0.0111 225.10); + --color-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10); + --color-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 274.10); + --color-palette-primary-200: oklch(0.9364 0.0121 274.10); + --color-palette-primary-300: oklch(0.8497 0.0408 274.10); + --color-palette-primary-400: oklch(0.7628 0.0849 274.10); + --color-palette-primary-500: oklch(0.6707 0.1537 274.10); + --color-palette-primary-600: oklch(0.5835 0.2285 274.10); + --color-palette-primary-700: oklch(0.4972 0.2707 274.10); + --color-palette-primary-800: oklch(0.4115 0.2344 274.10); + --color-palette-primary-900: oklch(0.3346 0.1863 274.10); + --color-palette-primary-1000: oklch(0.2499 0.1328 274.10); + --color-palette-primary-1100: oklch(0.1925 0.0974 274.10); + --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + } + + :root, [data-color-mode="dark"] { + color-scheme: dark; + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + } + + [data-color-mode="light"] { + color-scheme: light; + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + } +} + +@layer tokens{:root,[data-color-mode="dark"]{--color-editor-attribute:#AEE938;--color-editor-annotation:#E85D7F;--color-editor-atom:#F966FF;--color-editor-basic:#ffffff;--color-editor-comment:#84868D;--color-editor-constant:#FF8C00;--color-editor-decoration:#E85D7F;--color-editor-invalid:#E85D7F;--color-editor-key:#66C4FF;--color-editor-keyword:#B3CCFF;--color-editor-number:#E85D7F;--color-editor-operator:#E85D7F;--color-editor-predefined:#ffffff;--color-editor-property:#E85D7F;--color-editor-regexp:#AEE938;--color-editor-string:#FFD300;--color-editor-tag:#E85D7F;--color-editor-text:#FF8C00;--color-editor-value:#FFD300;--color-editor-variable:#AEE938;--color-editor-ui-background:#0A0D1C;--color-editor-ui-text:#ffffff;--color-editor-ui-indent-active:#3B3D49;--color-editor-ui-indent-inactive:#5F616B;--color-editor-ui-line-number-active:#CECFD2;--color-editor-ui-line-number-inactive:#84868D;}[data-color-mode="light"]{--color-editor-attribute:#008A27;--color-editor-annotation:#E91C11;--color-editor-atom:#CA00D1;--color-editor-basic:#10162F;--color-editor-comment:#686C7B;--color-editor-constant:#D14900;--color-editor-decoration:#E91C11;--color-editor-invalid:#E91C11;--color-editor-key:#006D82;--color-editor-keyword:#1557FF;--color-editor-number:#E91C11;--color-editor-operator:#E91C11;--color-editor-predefined:#10162F;--color-editor-property:#E91C11;--color-editor-regexp:#008A27;--color-editor-string:#8A7300;--color-editor-tag:#E91C11;--color-editor-text:#D14900;--color-editor-value:#8A7300;--color-editor-variable:#008A27;--color-editor-ui-background:#ffffff;--color-editor-ui-text:#10162F;--color-editor-ui-indent-active:#BCBDC4;--color-editor-ui-indent-inactive:#8E919D;--color-editor-ui-line-number-active:#31374C;--color-editor-ui-line-number-inactive:#686C7B;}}", +} +`; diff --git a/packages/gamut-styles/src/themes/__tests__/theme.test.ts b/packages/gamut-styles/src/themes/__tests__/theme.test.ts index 670b5aae88..17d575a1dd 100644 --- a/packages/gamut-styles/src/themes/__tests__/theme.test.ts +++ b/packages/gamut-styles/src/themes/__tests__/theme.test.ts @@ -1,7 +1,44 @@ -import { skillsoftTheme } from '../skillsoft'; +import { adminTheme } from '../admin'; +import { coreTheme } from '../core'; +import { lxStudioTheme } from '../lxStudio'; +import { platformTheme } from '../platform'; describe('themes', () => { - it('skillsoft - theme shape', () => { - expect(skillsoftTheme).toMatchSnapshot(); + it.each([ + ['core', coreTheme], + ['platform', platformTheme], + ['admin', adminTheme], + ['lxStudio', lxStudioTheme], + ])(`%s - theme shape`, (_, theme) => expect(theme).toMatchSnapshot()); +}); + +describe('platformTheme', () => { + /* The theme and its tokens.css both start dark, so SSR does too. */ + it('starts in dark mode', () => { + expect(platformTheme.mode).toBe('dark'); + expect(platformTheme.tokensCss).toContain( + ':root, [data-color-mode="dark"] {' + ); + }); + + it("keeps the code editor's colors, declared in both modes", () => { + expect(platformTheme.colors['editor-keyword']).toBe( + 'var(--color-editor-keyword)' + ); + expect(platformTheme.tokensCss).toContain( + '[data-color-mode="light"]{--color-editor-attribute:#008A27;' + ); + expect(platformTheme.tokensCss).toContain( + ':root,[data-color-mode="dark"]{--color-editor-attribute:' + ); + expect(platformTheme.tokensCss).toContain( + '--color-editor-keyword:#B3CCFF;' + ); + }); +}); + +describe('lxStudioTheme', () => { + it('keeps its own radii', () => { + expect(lxStudioTheme.borderRadii.md).toBe('8px'); }); }); diff --git a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx index 4d872d8642..3282072d62 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx @@ -77,7 +77,7 @@ export const TableRow: DataRow = ({ : {}; return ( - + {selectable && ( { }); }); + it('tints a selected row with the state-selected veil', () => { + renderView({ selected: ['1'] }); + + const rows = screen.getAllByRole('row'); + const selectedRow = screen + .getByRole('checkbox', { name: 'Select 1' }) + .closest('tr')!; + const otherRow = screen + .getByRole('checkbox', { name: 'Select 2' }) + .closest('tr')!; + + expect(rows).toContain(selectedRow); + expect(selectedRow).toHaveStyleRule( + 'background-image', + expect.stringContaining('var(--color-state-selected)') + ); + expect(otherRow).not.toHaveStyleRule( + 'background-image', + expect.stringContaining('var(--color-state-selected)') + ); + }); + it("clicking the row's checkbox deselects the row when the row is already selected", () => { renderView({ selected: ['1'] }); diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx index dc0d63b113..a43b73a588 100644 --- a/packages/gamut/src/List/elements.tsx +++ b/packages/gamut/src/List/elements.tsx @@ -59,6 +59,10 @@ export const ListEl = styled('ul', styledOptions<'ul'>())( space ); +/* A veil as a background layer, so it sits over the row's own fill. */ +const veil = (role: 'state-hover' | 'state-selected') => + `linear-gradient(${theme.colors[role]}, ${theme.colors[role]})`; + const rowStates = states({ isOl: { '&::before': { @@ -81,6 +85,16 @@ const rowStates = states({ transparentBg: { bg: 'transparent', }, + /* + * A selected row takes the `state-selected` veil over its own fill + * (design's list map). Hovering it stacks the hover veil on top. + */ + isSelected: { + backgroundImage: veil('state-selected'), + '&:hover': { + backgroundImage: `${veil('state-hover')}, ${veil('state-selected')}`, + }, + }, }); const interactiveState = states({ @@ -89,7 +103,7 @@ const interactiveState = states({ /* Hover is a veil over the row's own fill; focus is the ring alone. */ '&:hover': { - backgroundImage: `linear-gradient(${theme.colors['state-hover']}, ${theme.colors['state-hover']})`, + backgroundImage: veil('state-hover'), }, '&:focus-visible, &:focus-within': { outline: `1px solid ${theme.colors['action-primary']}`, @@ -132,9 +146,9 @@ const rowVariants = variant({ borderColorTop: 'border-subtle', }, }, + /* Rows are `surface-raised`; a stripe is sunken, so it never reads as a selection. */ table: { - bg: 'transparent', - /* A stripe is a sunken surface, so it never reads as a selection. */ + bg: 'surface-raised', '&:nth-of-type(2n)': { bg: 'surface-sunken', }, diff --git a/packages/gamut/src/ProgressBar/ProgressBar.test.tsx b/packages/gamut/src/ProgressBar/ProgressBar.test.tsx index 891a7d489f..710ff521ca 100644 --- a/packages/gamut/src/ProgressBar/ProgressBar.test.tsx +++ b/packages/gamut/src/ProgressBar/ProgressBar.test.tsx @@ -1,9 +1,12 @@ +import { matchers } from '@emotion/jest'; import { MockGamutProvider } from '@skillsoft/gamut-tests'; import { render, screen } from '@testing-library/react'; import { ProgressBar } from '.'; import type { ProgressBarProps } from './types'; +expect.extend(matchers); + describe('ProgressBar', () => { describe.each([ { useLogicalProperties: true, widthProp: 'inlineSize' }, @@ -41,3 +44,35 @@ describe('ProgressBar', () => { } ); }); + +describe('ProgressBar label', () => { + const renderBar = (props: Partial = {}) => + render( + + + + ); + + /* Design's two-tone label: text-inverse on the bar, text-default on the track. */ + it('draws the label on the bar and on the track at large sizes', () => { + renderBar({ size: 'large' }); + + const labels = screen.getAllByText('10%'); + expect(labels).toHaveLength(2); + expect(screen.getByTestId('progress-bar-bar')).toContainElement(labels[1]); + expect(labels[0].parentElement).toHaveStyleRule( + 'color', + 'var(--color-text-default)' + ); + expect(screen.getByTestId('progress-bar-bar')).toHaveStyleRule( + 'overflow', + 'hidden' + ); + }); + + it('draws no label at small sizes', () => { + renderBar({ size: 'small' }); + + expect(screen.queryByText('10%')).toBeNull(); + }); +}); diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index 03a9b72a90..eb78845616 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import type { PatternProps } from '@skillsoft/gamut-patterns'; -import { variant } from '@skillsoft/gamut-styles'; +import { css, variant } from '@skillsoft/gamut-styles'; import * as React from 'react'; import { Box } from '../Box'; @@ -116,6 +116,8 @@ const progressBarForegroundVariants = variant({ display: 'flex', transition: 'width 0.5s', position: 'relative', + /* Clips the bar's copy of the label to the bar. */ + overflow: 'hidden', }, /* Every bar is `text-default`, blue and yellow included. */ variants: { @@ -156,9 +158,28 @@ const DisplayedPercent = styled.span` font-weight: bold; padding: 0.5rem; text-align: right; + white-space: nowrap; width: 100%; `; +/* + * Design's two-tone label: `text-inverse` where it sits on the bar, + * `text-default` where it runs onto the track. The track's copy sits at the + * same place under the bar, so the bar covers it and the wrapper clips it. + */ +const TrackLabel = styled(Box)( + css({ + alignItems: 'center', + color: 'text-default', + display: 'flex', + height: '100%', + left: 0, + position: 'absolute', + top: 0, + transition: 'width 0.5s', + }) +); + export const ProgressBar: React.FC = ({ flat, minimumPercent = 0, @@ -168,6 +189,8 @@ export const ProgressBar: React.FC = ({ variant, }) => { const id = React.useId(); + const width = `${Math.max(minimumPercent, percent)}%`; + const showLabel = ['large', 'xl'].includes(size); return ( = ({ > {`Progress: ${percent}%`} {Pattern && } + {showLabel && ( + + {percent}% + + )} - {['large', 'xl'].includes(size) && ( + {showLabel && ( {percent}% )}