From aab6b86dce10969e4a13e46ef9014ed3748b80fd Mon Sep 17 00:00:00 2001 From: Scott Boyle Date: Thu, 1 Oct 2026 23:44:19 +0100 Subject: [PATCH 1/2] feat(repo): add data color tokens and brand page lockups Add a ten-slot semantic color.data palette to the mnsp brand for data visualisation, with light and dark values for the default and brand contexts, and rebuild the system/tokens dist artifacts and catalog. On the brand page, combine the adaptive and animated photo treatments into one two-up grid following the photo treatment tile rungs, add Iconography, Interface colors, Web and Mobile figure lockups, retitle the typography and colour figures, and hoist the 80rem figure cap onto the figure stack so no figure carries its own. Co-Authored-By: Claude Fable 5.1 --- .changeset/data-colors.md | 9 + apps/documentation/src/brand.11ty.ts | 253 ++++-- apps/documentation/src/styles/docs.css | 1 - docs/PLANNING.md | 11 +- packages/config/set.catalog.css | 10 + packages/system/dist/css/set.mnsp.tokens.css | 188 +++++ .../color/theme/dark/brand.tokens.json | 32 + .../color/theme/dark/default.tokens.json | 32 + .../color/theme/light/brand.tokens.json | 32 + .../color/theme/light/default.tokens.json | 32 + packages/tokens/dist/set.mnsp.tokens.json | 731 ++++++++++++++++++ 11 files changed, 1270 insertions(+), 61 deletions(-) create mode 100644 .changeset/data-colors.md diff --git a/.changeset/data-colors.md b/.changeset/data-colors.md new file mode 100644 index 0000000..d03e3ab --- /dev/null +++ b/.changeset/data-colors.md @@ -0,0 +1,9 @@ +--- +"@monospaced/set-system": minor +"@monospaced/set-tokens": minor +--- + +Add a ten-slot `color.data.00`–`09` semantic palette to the mnsp brand +for categorical data visualisation, with values for the default and +brand contexts in both light and dark themes. Rebuilt system/tokens +dist artifacts and the config catalog included. diff --git a/apps/documentation/src/brand.11ty.ts b/apps/documentation/src/brand.11ty.ts index cb925ad..e57540d 100644 --- a/apps/documentation/src/brand.11ty.ts +++ b/apps/documentation/src/brand.11ty.ts @@ -65,7 +65,7 @@ export default class Brand { renderSetGridItem({ colStart: 2, colSpan: 10, - children: renderSetStack({ + children: `
${renderSetStack({ gap: "xl", children: [ renderSetFigure({ @@ -101,7 +101,7 @@ export default class Brand { }), }), renderSetFigure({ - caption: "Signature animation", + caption: "Logomark animation", children: renderSetVideo({ autoPlay: true, controls: true, @@ -131,20 +131,29 @@ export default class Brand { }), }), renderSetFigure({ - caption: "Prose", + caption: "Prose typography", children: renderSetImage({ - alt: "A sample sentence set in light monospaced type on near-black: 'Execute gzip benchmarks to analyse quick dev proxy flaws before building json.'", + alt: "A sample sentence set in light monospaced type on near-black: 'Execute gzip benchmarks to analyse quirky dev proxy flaws before building json.'", height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787217221/Prose_typography_kfovbp.png", + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790702905/Prose_typography_kfovbp.png", width: 1280, }), }), renderSetFigure({ - caption: "Monospace", + caption: "Monospace typography", children: renderSetImage({ alt: "A code sample distinguishing easily confused glyphs — capital O, zero, capital I, one, and lowercase l — with arrow and comparison ligatures", height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787217219/Technical_typography_xneubs.png", + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893739/Monospace_typography.png", + width: 1280, + }), + }), + renderSetFigure({ + caption: "Iconography", + children: renderSetImage({ + alt: "A set of outline interface icons in a grid, drawn at a consistent stroke weight to match Berkeley Mono.", + height: 548, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790324137/Iconography.png", width: 1280, }), }), @@ -153,7 +162,7 @@ export default class Brand { children: renderSetImage({ alt: "The twelve-step cyan ramp as vertical columns, running from near-white through saturated mid teal to near-black", height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787139664/Brand_cyan_fs41ig.png", + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893738/Cyan.png", width: 1280, }), }), @@ -162,7 +171,7 @@ export default class Brand { children: renderSetImage({ alt: "Four logo colorways in quadrants: deep teal on pale cyan, near-black on mid cyan, white on brand cyan, and light cyan on near-black", height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787181319/Cyan_logos_j1rmcd.png", + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893743/Logo_colorways.png", width: 1280, }), }), @@ -171,27 +180,51 @@ export default class Brand { children: renderSetImage({ alt: "The logomark repeated across four side-by-side panels, each pairing a different tone from the cyan ramp with its background", height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787181317/Cyan_logomarks_mqi9kn.png", + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893744/Logomark_colorways.png", width: 1280, }), }), renderSetFigure({ - caption: "Supporting colors", + caption: "Spectrum", children: renderSetImage({ alt: "A grid of twelve-step ramps for the supporting hues, one hue per row, each running light to dark", height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787140729/Supporting_color_ywemac.png", + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893734/Spectrum.png", width: 1280, }), }), renderSetFigure({ - caption: "Syntax highlighting", - children: renderSetImage({ - alt: "A code sample on dark teal highlighted in the brand palette: gray comments, blue keywords, orange numbers, green strings, and pink and violet accents", - height: 548, - src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787180062/Syntax_highlighting_hvktmk.png", - width: 1280, - }), + caption: "Interface colors", + children: `
${[ + renderSetImage({ + alt: "Four status messages on dark cyan: Info in azure, Success in green, Warning in yellow and Error in red, each a tinted panel with a matching icon, title and one-line description.", + fit: "fluid", + height: 548, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893727/Interface_colors_1.png", + width: 1280, + }), + renderSetImage({ + alt: "Column and pie charts of component instance counts, with each of eight components in a distinct supporting color and a legend beneath.", + fit: "fluid", + height: 548, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893734/Interface_colors_2.png", + width: 1280, + }), + renderSetImage({ + alt: "Three rows of generic avatar icons in circles, tinted through rose, violet and orange in alternating lighter and darker steps.", + fit: "fluid", + height: 548, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893728/Interface_colors_3.png", + width: 1280, + }), + renderSetImage({ + alt: "A JavaScript sample syntax-highlighted in the brand palette: blue keywords, yellow class names, green strings, red constants and a gray italic comment.", + fit: "fluid", + height: 548, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790893728/Interface_colors_4.png", + width: 1280, + }), + ].join("")}
`, }), renderSetFigure({ caption: "Photo treatment", @@ -367,29 +400,29 @@ export default class Brand { ].join("")}
`, }), renderSetFigure({ - caption: "Ambient animation", - children: `
${renderSetImage( - { - alt: "Cyan halftone photograph of cumulonimbus cloud with a lopping scan animation effect", + caption: "Animated and adaptive photo treatment", + children: `
${[ + renderSetImage({ + alt: "Cyan halftone photograph of cumulonimbus cloud with a looping scan animation effect", fit: "fluid", sources: [ { - height: 852, - media: "(min-width: 101em)", + height: 426, + media: "(min-width: 103em)", srcSet: - "https://res.cloudinary.com/monospaced/image/upload/v1790177860/2018-04-20_15.28.26--cyan--3x2--scan--mid.webp", + "https://res.cloudinary.com/monospaced/image/upload/v1790177860/2018-04-20_15.28.26--cyan--3x2--640--scan--mid.webp", stillSrc: - "https://res.cloudinary.com/monospaced/image/upload/v1789307949/2018-04-20_15.28.26--cyan--3x2--mid.png", - width: 1280, + "https://res.cloudinary.com/monospaced/image/upload/v1790172732/2018-04-20_15.28.26--cyan--3x2--640--mid.png", + width: 640, }, { - height: 640, - media: "(min-width: 46em)", + height: 320, + media: "(min-width: 40em)", srcSet: - "https://res.cloudinary.com/monospaced/image/upload/v1790177860/2018-04-20_15.28.26--cyan--3x2--960--scan--mid.webp", + "https://res.cloudinary.com/monospaced/image/upload/v1790177860/2018-04-20_15.28.26--cyan--3x2--480--scan--mid.webp", stillSrc: - "https://res.cloudinary.com/monospaced/image/upload/v1790172756/2018-04-20_15.28.26--cyan--3x2--960--mid.png", - width: 960, + "https://res.cloudinary.com/monospaced/image/upload/v1790201532/2018-04-20_15.28.26--cyan--3x2--480--mid.png", + width: 480, }, { height: 426, @@ -413,53 +446,161 @@ export default class Brand { src: "https://res.cloudinary.com/monospaced/image/upload/v1790177860/2018-04-20_15.28.26--cyan--3x2--480--scan--mid.webp", stillSrc: "https://res.cloudinary.com/monospaced/image/upload/v1790201532/2018-04-20_15.28.26--cyan--3x2--480--mid.png", - }, - )}
`, - }), - renderSetFigure({ - caption: "Logo on photo treatment", - children: `
${renderSetImage( - { - alt: "Monospaced logo in white on a cyan halftone photograph of cumulonimbus cloud", + }), + renderSetImage({ + adaptive: true, + alt: "Cyan halftone photograph of cumulonimbus clouds, adaptive to current light/dark mode", fit: "fluid", sources: [ { - height: 1280, - media: "(min-width: 92.75em)", + height: 854, + media: "(min-width: 103em)", srcSet: - "https://res.cloudinary.com/monospaced/image/upload/v1790200055/Logo_on_photo_treatment_1920.png", - width: 1920, + "https://res.cloudinary.com/monospaced/image/upload/v1790283163/2018-04-20_15.28.26--cyan--3x2--adaptive.svg", + width: 1280, }, { - height: 854, + height: 640, + media: "(min-width: 46em)", + srcSet: + "https://res.cloudinary.com/monospaced/image/upload/v1790282922/2018-04-20_15.28.26--cyan--3x2--960--adaptive.svg", + width: 960, + }, + { + height: 427, media: "(min-width: 40em)", srcSet: - "https://res.cloudinary.com/monospaced/image/upload/v1790198452/Logo_on_photo_treatment.png", - width: 1280, + "https://res.cloudinary.com/monospaced/image/upload/v1790283167/2018-04-20_15.28.26--cyan--3x2--640--adaptive.svg", + width: 640, }, { height: 640, media: "(min-width: 24em)", srcSet: - "https://res.cloudinary.com/monospaced/image/upload/v1790198540/Logo_on_photo_treatment_960.png", + "https://res.cloudinary.com/monospaced/image/upload/v1790282922/2018-04-20_15.28.26--cyan--3x2--960--adaptive.svg", width: 960, }, { height: 427, media: "(min-width: 20em)", srcSet: - "https://res.cloudinary.com/monospaced/image/upload/v1790198668/Logo_on_photo_treatment_640.png", + "https://res.cloudinary.com/monospaced/image/upload/v1790283167/2018-04-20_15.28.26--cyan--3x2--640--adaptive.svg", width: 640, }, ], - src: "https://res.cloudinary.com/monospaced/image/upload/v1790198668/Logo_on_photo_treatment_640.png", - }, - )}
`, + src: "https://res.cloudinary.com/monospaced/image/upload/v1790283167/2018-04-20_15.28.26--cyan--3x2--640--adaptive.svg", + }), + ].join("")}
`, + }), + renderSetFigure({ + caption: "Logo on photo treatment", + children: renderSetImage({ + alt: "Monospaced logo in white on a cyan halftone photograph of cumulonimbus clouds", + fit: "fluid", + sources: [ + { + height: 1280, + media: "(min-width: 92.75em)", + srcSet: + "https://res.cloudinary.com/monospaced/image/upload/v1790200055/Logo_on_photo_treatment_1920.png", + width: 1920, + }, + { + height: 854, + media: "(min-width: 40em)", + srcSet: + "https://res.cloudinary.com/monospaced/image/upload/v1790198452/Logo_on_photo_treatment.png", + width: 1280, + }, + { + height: 640, + media: "(min-width: 24em)", + srcSet: + "https://res.cloudinary.com/monospaced/image/upload/v1790198540/Logo_on_photo_treatment_960.png", + width: 960, + }, + { + height: 427, + media: "(min-width: 20em)", + srcSet: + "https://res.cloudinary.com/monospaced/image/upload/v1790198668/Logo_on_photo_treatment_640.png", + width: 640, + }, + ], + src: "https://res.cloudinary.com/monospaced/image/upload/v1790198668/Logo_on_photo_treatment_640.png", + }), + }), + renderSetFigure({ + caption: "Web", + children: `
${[ + renderSetImage({ + alt: "Bluesky profile header for Monospaced: a cyan halftone banner, the logomark as the circular avatar, and the handle @monospaced.com.", + fit: "fluid", + height: 853, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891754/Web_1.png", + width: 1280, + }), + renderSetImage({ + alt: "Link preview card for monospaced.com, showing the cyan halftone OG image above the site title and description.", + fit: "fluid", + height: 853, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891756/Web_2.png", + width: 1280, + }), + renderSetImage({ + alt: "A browser's shortcuts row with six site icons; the last is the Monospaced logomark on a brand cyan tile, labelled 'monospaced'", + fit: "fluid", + height: 853, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891753/Web_3.png", + width: 1280, + }), + renderSetImage({ + alt: "A Google search result for monospaced.com, with the logomark favicon beside the URL and the site description below.", + fit: "fluid", + height: 853, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891753/Web_4.png", + width: 1280, + }), + ].join("")}
`, + }), + renderSetFigure({ + caption: "Mobile", + children: `
${[ + renderSetImage({ + alt: "A phone on an oak table showing the monospaced.com homepage: a cyan halftone image above the strapline and introduction in monospaced type.", + fit: "fluid", + height: 960, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891936/Mobile_1.jpg", + width: 1280, + }), + renderSetImage({ + alt: "A phone showing a long-form page on monospaced.com, with headings, a table and lists set in monospaced type on near-black.", + fit: "fluid", + height: 960, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891943/Mobile_2.jpg", + width: 1280, + }), + renderSetImage({ + alt: " ", + fit: "fluid", + height: 960, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891940/Mobile_3.jpg", + width: 1280, + }), + + renderSetImage({ + alt: "A phone showing the Screen web app with a cyan halftone photograph of cumulonimbus cloud in its loading state.", + fit: "fluid", + height: 960, + src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1790891944/Mobile_4.jpg", + width: 1280, + }), + ].join("")}
`, }), renderSetFigure({ caption: "Stickers", children: renderSetImage({ - alt: "Photograph of a laptop sticker-bombed with Monospaced brand stickers", + alt: "The same phone and web app with the cloud photograph fully loaded.", height: 960, src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787168681/Stickers_j0kqx8.jpg", width: 1280, @@ -468,14 +609,14 @@ export default class Brand { renderSetFigure({ caption: "Posters", children: renderSetImage({ - alt: "Two stylised posters representing aspect of the Monospaced visual brand identity hanging in wooden frames on a dark cyan wall", + alt: "Two stylised posters representing aspects of the Monospaced visual brand identity hanging in wooden frames on a dark cyan wall", height: 960, src: "https://res.cloudinary.com/monospaced/image/upload/f_auto,q_auto/v1787691081/Posters_whvojg.jpg", width: 1280, }), }), ].join(""), - }), + })}`, }), ].join(""), }), diff --git a/apps/documentation/src/styles/docs.css b/apps/documentation/src/styles/docs.css index 73041b6..f8699a6 100644 --- a/apps/documentation/src/styles/docs.css +++ b/apps/documentation/src/styles/docs.css @@ -473,7 +473,6 @@ html { display: grid; gap: var(--set-spacing-vertical-300) var(--set-spacing-horizontal-300); grid-template-columns: 1fr; - max-inline-size: 80rem; @media (width >=40em) { grid-template-columns: 1fr 1fr; diff --git a/docs/PLANNING.md b/docs/PLANNING.md index 047f527..b859e7f 100644 --- a/docs/PLANNING.md +++ b/docs/PLANNING.md @@ -8,12 +8,15 @@ What we're working on now. ### Complete Brand page -- semantic/data colours -- adaptive treatment -- iconography -- digital applications - embroidered emblem +#### Remove + +1920 adaptive SVG +1280 scan webp +960 scan webp +1280 still PNG + ## Next What we could be working on next. diff --git a/packages/config/set.catalog.css b/packages/config/set.catalog.css index f672586..c87ced9 100644 --- a/packages/config/set.catalog.css +++ b/packages/config/set.catalog.css @@ -49,6 +49,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ diff --git a/packages/system/dist/css/set.mnsp.tokens.css b/packages/system/dist/css/set.mnsp.tokens.css index e20e2c7..3b4aa4d 100644 --- a/packages/system/dist/css/set.mnsp.tokens.css +++ b/packages/system/dist/css/set.mnsp.tokens.css @@ -44,6 +44,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -313,6 +323,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -397,6 +417,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -481,6 +511,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -565,6 +605,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #b14b7d; + --set-color-data-02: #aed3f8; + --set-color-data-03: #9b622a; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #8958bb; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -649,6 +699,16 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #c46091; + --set-color-data-02: #aed3f8; + --set-color-data-03: #ac7741; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -734,6 +794,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #b14b7d; + --set-color-data-02: #aed3f8; + --set-color-data-03: #9b622a; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #8958bb; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -820,6 +890,16 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #c46091; + --set-color-data-02: #aed3f8; + --set-color-data-03: #ac7741; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -905,6 +985,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #b14b7d; + --set-color-data-02: #aed3f8; + --set-color-data-03: #9b622a; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #8958bb; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -989,6 +1079,16 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #c46091; + --set-color-data-02: #aed3f8; + --set-color-data-03: #ac7741; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1074,6 +1174,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1160,6 +1270,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1245,6 +1365,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1322,6 +1452,13 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-02: #235c94; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1399,6 +1536,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #b14b7d; + --set-color-data-02: #aed3f8; + --set-color-data-03: #9b622a; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #8958bb; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1476,6 +1623,13 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-02: #aed3f8; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1552,6 +1706,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-01: #b14b7d; + --set-color-data-02: #aed3f8; + --set-color-data-03: #9b622a; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-07: #8958bb; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1627,6 +1791,13 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #3ba9a9; + --set-color-data-02: #aed3f8; + --set-color-data-04: #9090f1; + --set-color-data-05: #ffbfbf; + --set-color-data-06: #72a93b; + --set-color-data-08: #d3d38d; + --set-color-data-09: #d27ad2; --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1702,6 +1873,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-01: #c46091; + --set-color-data-02: #235c94; + --set-color-data-03: #ac7741; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-07: #9d6ccd; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1777,6 +1958,13 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ + --set-color-data-00: #007c7c; + --set-color-data-02: #235c94; + --set-color-data-04: #0c0c8f; + --set-color-data-05: #a42e2e; + --set-color-data-06: #254901; + --set-color-data-08: #5c5d01; + --set-color-data-09: #401d40; --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ diff --git a/packages/system/src/mnsp/semantic/color/theme/dark/brand.tokens.json b/packages/system/src/mnsp/semantic/color/theme/dark/brand.tokens.json index 65fd106..4a82862 100644 --- a/packages/system/src/mnsp/semantic/color/theme/dark/brand.tokens.json +++ b/packages/system/src/mnsp/semantic/color/theme/dark/brand.tokens.json @@ -252,5 +252,37 @@ "09": { "$value": "{primitive.color.orange.400}" } + }, + "data": { + "00": { + "$value": "{primitive.color.cyan.600}" + }, + "01": { + "$value": "{primitive.color.rose.700}" + }, + "02": { + "$value": "{primitive.color.azure.400}" + }, + "03": { + "$value": "{primitive.color.orange.700}" + }, + "04": { + "$value": "{primitive.color.blue.600}" + }, + "05": { + "$value": "{primitive.color.red.400}" + }, + "06": { + "$value": "{primitive.color.chartreuse.600}" + }, + "07": { + "$value": "{primitive.color.violet.700}" + }, + "08": { + "$value": "{primitive.color.yellow.400}" + }, + "09": { + "$value": "{primitive.color.magenta.600}" + } } } diff --git a/packages/system/src/mnsp/semantic/color/theme/dark/default.tokens.json b/packages/system/src/mnsp/semantic/color/theme/dark/default.tokens.json index 3f58866..8beb5cb 100644 --- a/packages/system/src/mnsp/semantic/color/theme/dark/default.tokens.json +++ b/packages/system/src/mnsp/semantic/color/theme/dark/default.tokens.json @@ -252,5 +252,37 @@ "09": { "$value": "{primitive.color.orange.400}" } + }, + "data": { + "00": { + "$value": "{primitive.color.cyan.600}" + }, + "01": { + "$value": "{primitive.color.rose.800}" + }, + "02": { + "$value": "{primitive.color.azure.400}" + }, + "03": { + "$value": "{primitive.color.orange.800}" + }, + "04": { + "$value": "{primitive.color.blue.600}" + }, + "05": { + "$value": "{primitive.color.red.400}" + }, + "06": { + "$value": "{primitive.color.chartreuse.600}" + }, + "07": { + "$value": "{primitive.color.violet.800}" + }, + "08": { + "$value": "{primitive.color.yellow.400}" + }, + "09": { + "$value": "{primitive.color.magenta.600}" + } } } diff --git a/packages/system/src/mnsp/semantic/color/theme/light/brand.tokens.json b/packages/system/src/mnsp/semantic/color/theme/light/brand.tokens.json index 63ea89a..4456eaa 100644 --- a/packages/system/src/mnsp/semantic/color/theme/light/brand.tokens.json +++ b/packages/system/src/mnsp/semantic/color/theme/light/brand.tokens.json @@ -252,5 +252,37 @@ "09": { "$value": "{primitive.color.orange.1100}" } + }, + "data": { + "00": { + "$value": "{primitive.color.cyan.800}" + }, + "01": { + "$value": "{primitive.color.rose.700}" + }, + "02": { + "$value": "{primitive.color.azure.900}" + }, + "03": { + "$value": "{primitive.color.orange.700}" + }, + "04": { + "$value": "{primitive.color.blue.1100}" + }, + "05": { + "$value": "{primitive.color.red.900}" + }, + "06": { + "$value": "{primitive.color.chartreuse.1000}" + }, + "07": { + "$value": "{primitive.color.violet.700}" + }, + "08": { + "$value": "{primitive.color.yellow.900}" + }, + "09": { + "$value": "{primitive.color.magenta.1100}" + } } } diff --git a/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json b/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json index df9e8fb..4eb6ee4 100644 --- a/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json +++ b/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json @@ -324,5 +324,37 @@ "$description": "Avatar palette slot 09.", "$value": "{primitive.color.orange.1100}" } + }, + "data": { + "00": { + "$value": "{primitive.color.cyan.800}" + }, + "01": { + "$value": "{primitive.color.rose.700}" + }, + "02": { + "$value": "{primitive.color.azure.900}" + }, + "03": { + "$value": "{primitive.color.orange.700}" + }, + "04": { + "$value": "{primitive.color.blue.1100}" + }, + "05": { + "$value": "{primitive.color.red.900}" + }, + "06": { + "$value": "{primitive.color.chartreuse.1000}" + }, + "07": { + "$value": "{primitive.color.violet.700}" + }, + "08": { + "$value": "{primitive.color.yellow.900}" + }, + "09": { + "$value": "{primitive.color.magenta.1100}" + } } } diff --git a/packages/tokens/dist/set.mnsp.tokens.json b/packages/tokens/dist/set.mnsp.tokens.json index 9da0fab..ebcef9e 100644 --- a/packages/tokens/dist/set.mnsp.tokens.json +++ b/packages/tokens/dist/set.mnsp.tokens.json @@ -11156,6 +11156,737 @@ } } } + }, + "color.data.00": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0, + 0.486275, + 0.486275 + ], + "hex": "#007c7c" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.231373, + 0.662745, + 0.662745 + ], + "hex": "#3ba9a9" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.231373, + 0.662745, + 0.662745 + ], + "hex": "#3ba9a9" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.231373, + 0.662745, + 0.662745 + ], + "hex": "#3ba9a9" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.231373, + 0.662745, + 0.662745 + ], + "hex": "#3ba9a9" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.231373, + 0.662745, + 0.662745 + ], + "hex": "#3ba9a9" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.231373, + 0.662745, + 0.662745 + ], + "hex": "#3ba9a9" + } + } + } + }, + "color.data.01": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.768627, + 0.376471, + 0.568627 + ], + "hex": "#c46091" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.694118, + 0.294118, + 0.490196 + ], + "hex": "#b14b7d" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.694118, + 0.294118, + 0.490196 + ], + "hex": "#b14b7d" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.694118, + 0.294118, + 0.490196 + ], + "hex": "#b14b7d" + } + } + } + }, + "color.data.02": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.137255, + 0.360784, + 0.580392 + ], + "hex": "#235c94" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.682353, + 0.827451, + 0.972549 + ], + "hex": "#aed3f8" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.682353, + 0.827451, + 0.972549 + ], + "hex": "#aed3f8" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.682353, + 0.827451, + 0.972549 + ], + "hex": "#aed3f8" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.682353, + 0.827451, + 0.972549 + ], + "hex": "#aed3f8" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.682353, + 0.827451, + 0.972549 + ], + "hex": "#aed3f8" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.682353, + 0.827451, + 0.972549 + ], + "hex": "#aed3f8" + } + } + } + }, + "color.data.03": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.67451, + 0.466667, + 0.254902 + ], + "hex": "#ac7741" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.607843, + 0.384314, + 0.164706 + ], + "hex": "#9b622a" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.607843, + 0.384314, + 0.164706 + ], + "hex": "#9b622a" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.607843, + 0.384314, + 0.164706 + ], + "hex": "#9b622a" + } + } + } + }, + "color.data.04": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.047059, + 0.047059, + 0.560784 + ], + "hex": "#0c0c8f" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.564706, + 0.564706, + 0.945098 + ], + "hex": "#9090f1" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.564706, + 0.564706, + 0.945098 + ], + "hex": "#9090f1" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.564706, + 0.564706, + 0.945098 + ], + "hex": "#9090f1" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.564706, + 0.564706, + 0.945098 + ], + "hex": "#9090f1" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.564706, + 0.564706, + 0.945098 + ], + "hex": "#9090f1" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.564706, + 0.564706, + 0.945098 + ], + "hex": "#9090f1" + } + } + } + }, + "color.data.05": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.643137, + 0.180392, + 0.180392 + ], + "hex": "#a42e2e" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 0.74902, + 0.74902 + ], + "hex": "#ffbfbf" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 0.74902, + 0.74902 + ], + "hex": "#ffbfbf" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 0.74902, + 0.74902 + ], + "hex": "#ffbfbf" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 0.74902, + 0.74902 + ], + "hex": "#ffbfbf" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 0.74902, + 0.74902 + ], + "hex": "#ffbfbf" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 1, + 0.74902, + 0.74902 + ], + "hex": "#ffbfbf" + } + } + } + }, + "color.data.06": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.145098, + 0.286275, + 0.003922 + ], + "hex": "#254901" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.447059, + 0.662745, + 0.231373 + ], + "hex": "#72a93b" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.447059, + 0.662745, + 0.231373 + ], + "hex": "#72a93b" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.447059, + 0.662745, + 0.231373 + ], + "hex": "#72a93b" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.447059, + 0.662745, + 0.231373 + ], + "hex": "#72a93b" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.447059, + 0.662745, + 0.231373 + ], + "hex": "#72a93b" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.447059, + 0.662745, + 0.231373 + ], + "hex": "#72a93b" + } + } + } + }, + "color.data.07": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.615686, + 0.423529, + 0.803922 + ], + "hex": "#9d6ccd" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.537255, + 0.345098, + 0.733333 + ], + "hex": "#8958bb" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.537255, + 0.345098, + 0.733333 + ], + "hex": "#8958bb" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.537255, + 0.345098, + 0.733333 + ], + "hex": "#8958bb" + } + } + } + }, + "color.data.08": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.360784, + 0.364706, + 0.003922 + ], + "hex": "#5c5d01" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.827451, + 0.827451, + 0.552941 + ], + "hex": "#d3d38d" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.827451, + 0.827451, + 0.552941 + ], + "hex": "#d3d38d" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.827451, + 0.827451, + 0.552941 + ], + "hex": "#d3d38d" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.827451, + 0.827451, + 0.552941 + ], + "hex": "#d3d38d" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.827451, + 0.827451, + 0.552941 + ], + "hex": "#d3d38d" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.827451, + 0.827451, + 0.552941 + ], + "hex": "#d3d38d" + } + } + } + }, + "color.data.09": { + "layer": "semantic", + "$value": { + "colorSpace": "srgb", + "components": [ + 0.25098, + 0.113725, + 0.25098 + ], + "hex": "#401d40" + }, + "varyingModifiers": [ + "theme" + ], + "byTheme": { + "contentDarkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.823529, + 0.478431, + 0.823529 + ], + "hex": "#d27ad2" + } + }, + "contentDarkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.823529, + 0.478431, + 0.823529 + ], + "hex": "#d27ad2" + } + }, + "darkBrand": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.823529, + 0.478431, + 0.823529 + ], + "hex": "#d27ad2" + } + }, + "darkDefault": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.823529, + 0.478431, + 0.823529 + ], + "hex": "#d27ad2" + } + }, + "lightBrandInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.823529, + 0.478431, + 0.823529 + ], + "hex": "#d27ad2" + } + }, + "lightInverse": { + "$value": { + "colorSpace": "srgb", + "components": [ + 0.823529, + 0.478431, + 0.823529 + ], + "hex": "#d27ad2" + } + } + } } } } From 3c039361b270d721e1e3ac4e5a3243d38b6c625d Mon Sep 17 00:00:00 2001 From: Scott Boyle Date: Thu, 1 Oct 2026 23:50:22 +0100 Subject: [PATCH 2/2] feat(system): describe the data palette slots MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add $description to color.data.00–09 in the mnsp light default theme, in the style of the avatar palette slots, with the usage note on 00. Rebuilt dist artifacts and catalog included. Co-Authored-By: Claude Fable 5.1 --- packages/config/set.catalog.css | 20 +- packages/system/dist/css/set.mnsp.tokens.css | 376 +++++++++--------- .../color/theme/light/default.tokens.json | 10 + packages/tokens/dist/set.mnsp.tokens.json | 10 + 4 files changed, 218 insertions(+), 198 deletions(-) diff --git a/packages/config/set.catalog.css b/packages/config/set.catalog.css index c87ced9..b895447 100644 --- a/packages/config/set.catalog.css +++ b/packages/config/set.catalog.css @@ -49,16 +49,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ diff --git a/packages/system/dist/css/set.mnsp.tokens.css b/packages/system/dist/css/set.mnsp.tokens.css index 3b4aa4d..7487171 100644 --- a/packages/system/dist/css/set.mnsp.tokens.css +++ b/packages/system/dist/css/set.mnsp.tokens.css @@ -44,16 +44,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -323,16 +323,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -417,16 +417,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -511,16 +511,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -605,16 +605,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #b14b7d; - --set-color-data-02: #aed3f8; - --set-color-data-03: #9b622a; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #8958bb; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #b14b7d; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #9b622a; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #8958bb; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -699,16 +699,16 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #c46091; - --set-color-data-02: #aed3f8; - --set-color-data-03: #ac7741; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -794,16 +794,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #b14b7d; - --set-color-data-02: #aed3f8; - --set-color-data-03: #9b622a; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #8958bb; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #b14b7d; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #9b622a; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #8958bb; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -890,16 +890,16 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #c46091; - --set-color-data-02: #aed3f8; - --set-color-data-03: #ac7741; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -985,16 +985,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #b14b7d; - --set-color-data-02: #aed3f8; - --set-color-data-03: #9b622a; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #8958bb; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #b14b7d; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #9b622a; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #8958bb; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1079,16 +1079,16 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #c46091; - --set-color-data-02: #aed3f8; - --set-color-data-03: #ac7741; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1174,16 +1174,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1270,16 +1270,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1365,16 +1365,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1452,13 +1452,13 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-02: #235c94; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1536,16 +1536,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #b14b7d; - --set-color-data-02: #aed3f8; - --set-color-data-03: #9b622a; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #8958bb; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #b14b7d; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #9b622a; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #8958bb; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1623,13 +1623,13 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-02: #aed3f8; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1706,16 +1706,16 @@ --set-color-border-subtle: #222424; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-01: #b14b7d; - --set-color-data-02: #aed3f8; - --set-color-data-03: #9b622a; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-07: #8958bb; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #b14b7d; /** Data palette slot 01. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-03: #9b622a; /** Data palette slot 03. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-07: #8958bb; /** Data palette slot 07. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #0e0f0f; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #f1f4f4; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #646766; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1791,13 +1791,13 @@ --set-color-border-subtle: rgba(255, 255, 255, 0.08); /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #3ba9a9; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #004848; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #3ba9a9; - --set-color-data-02: #aed3f8; - --set-color-data-04: #9090f1; - --set-color-data-05: #ffbfbf; - --set-color-data-06: #72a93b; - --set-color-data-08: #d3d38d; - --set-color-data-09: #d27ad2; + --set-color-data-00: #3ba9a9; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-02: #aed3f8; /** Data palette slot 02. */ + --set-color-data-04: #9090f1; /** Data palette slot 04. */ + --set-color-data-05: #ffbfbf; /** Data palette slot 05. */ + --set-color-data-06: #72a93b; /** Data palette slot 06. */ + --set-color-data-08: #d3d38d; /** Data palette slot 08. */ + --set-color-data-09: #d27ad2; /** Data palette slot 09. */ --set-color-foreground-contrast: #001919; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: rgba(255, 255, 255, 0.94); /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: rgba(255, 255, 255, 0.4); /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1873,16 +1873,16 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-01: #c46091; - --set-color-data-02: #235c94; - --set-color-data-03: #ac7741; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-07: #9d6ccd; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-01: #c46091; /** Data palette slot 01. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-03: #ac7741; /** Data palette slot 03. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-07: #9d6ccd; /** Data palette slot 07. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f8fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ @@ -1958,13 +1958,13 @@ --set-color-border-subtle: #e2e4e4; /** Low-contrast border. Use where the border should recede visually. */ --set-color-brand-primary: #007c7c; /** Primary brand color. Use for prominent brand expressions. */ --set-color-brand-support: #91dcdc; /** Supporting brand color. A decorative accent (e.g. strokes, patterns). Not contrast-safe; don't use for text, icons, or interactive elements. */ - --set-color-data-00: #007c7c; - --set-color-data-02: #235c94; - --set-color-data-04: #0c0c8f; - --set-color-data-05: #a42e2e; - --set-color-data-06: #254901; - --set-color-data-08: #5c5d01; - --set-color-data-09: #401d40; + --set-color-data-00: #007c7c; /** Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence. */ + --set-color-data-02: #235c94; /** Data palette slot 02. */ + --set-color-data-04: #0c0c8f; /** Data palette slot 04. */ + --set-color-data-05: #a42e2e; /** Data palette slot 05. */ + --set-color-data-06: #254901; /** Data palette slot 06. */ + --set-color-data-08: #5c5d01; /** Data palette slot 08. */ + --set-color-data-09: #401d40; /** Data palette slot 09. */ --set-color-foreground-contrast: #f4fbfb; /** Contrast foreground. Use for text and icons placed over saturated colored fills (brand, interactive, status, avatar) where the default foreground would lack sufficient contrast. */ --set-color-foreground-default: #0b0c0c; /** Default foreground color. Use as the system's standard color for text and icons. */ --set-color-foreground-muted-non-text: #888b8a; /** Muted foreground for non-text shapes that should recede (e.g. inactive icons and control surfaces, slider tracks). Reduced contrast, but still perceivable. */ diff --git a/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json b/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json index 4eb6ee4..bdcabff 100644 --- a/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json +++ b/packages/system/src/mnsp/semantic/color/theme/light/default.tokens.json @@ -327,33 +327,43 @@ }, "data": { "00": { + "$description": "Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence.", "$value": "{primitive.color.cyan.800}" }, "01": { + "$description": "Data palette slot 01.", "$value": "{primitive.color.rose.700}" }, "02": { + "$description": "Data palette slot 02.", "$value": "{primitive.color.azure.900}" }, "03": { + "$description": "Data palette slot 03.", "$value": "{primitive.color.orange.700}" }, "04": { + "$description": "Data palette slot 04.", "$value": "{primitive.color.blue.1100}" }, "05": { + "$description": "Data palette slot 05.", "$value": "{primitive.color.red.900}" }, "06": { + "$description": "Data palette slot 06.", "$value": "{primitive.color.chartreuse.1000}" }, "07": { + "$description": "Data palette slot 07.", "$value": "{primitive.color.violet.700}" }, "08": { + "$description": "Data palette slot 08.", "$value": "{primitive.color.yellow.900}" }, "09": { + "$description": "Data palette slot 09.", "$value": "{primitive.color.magenta.1100}" } } diff --git a/packages/tokens/dist/set.mnsp.tokens.json b/packages/tokens/dist/set.mnsp.tokens.json index ebcef9e..2012cc1 100644 --- a/packages/tokens/dist/set.mnsp.tokens.json +++ b/packages/tokens/dist/set.mnsp.tokens.json @@ -11159,6 +11159,7 @@ }, "color.data.00": { "layer": "semantic", + "$description": "Data palette slot 00. The first categorical series color for charts and data visualisation. Slots 00–09 provide an ordered palette of distinguishable series colors, assigned in sequence.", "$value": { "colorSpace": "srgb", "components": [ @@ -11242,6 +11243,7 @@ }, "color.data.01": { "layer": "semantic", + "$description": "Data palette slot 01.", "$value": { "colorSpace": "srgb", "components": [ @@ -11292,6 +11294,7 @@ }, "color.data.02": { "layer": "semantic", + "$description": "Data palette slot 02.", "$value": { "colorSpace": "srgb", "components": [ @@ -11375,6 +11378,7 @@ }, "color.data.03": { "layer": "semantic", + "$description": "Data palette slot 03.", "$value": { "colorSpace": "srgb", "components": [ @@ -11425,6 +11429,7 @@ }, "color.data.04": { "layer": "semantic", + "$description": "Data palette slot 04.", "$value": { "colorSpace": "srgb", "components": [ @@ -11508,6 +11513,7 @@ }, "color.data.05": { "layer": "semantic", + "$description": "Data palette slot 05.", "$value": { "colorSpace": "srgb", "components": [ @@ -11591,6 +11597,7 @@ }, "color.data.06": { "layer": "semantic", + "$description": "Data palette slot 06.", "$value": { "colorSpace": "srgb", "components": [ @@ -11674,6 +11681,7 @@ }, "color.data.07": { "layer": "semantic", + "$description": "Data palette slot 07.", "$value": { "colorSpace": "srgb", "components": [ @@ -11724,6 +11732,7 @@ }, "color.data.08": { "layer": "semantic", + "$description": "Data palette slot 08.", "$value": { "colorSpace": "srgb", "components": [ @@ -11807,6 +11816,7 @@ }, "color.data.09": { "layer": "semantic", + "$description": "Data palette slot 09.", "$value": { "colorSpace": "srgb", "components": [