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..b895447 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; /** 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 e20e2c7..7487171 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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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. */ @@ -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; /** 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/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..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 @@ -324,5 +324,47 @@ "$description": "Avatar palette slot 09.", "$value": "{primitive.color.orange.1100}" } + }, + "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 9da0fab..2012cc1 100644 --- a/packages/tokens/dist/set.mnsp.tokens.json +++ b/packages/tokens/dist/set.mnsp.tokens.json @@ -11156,6 +11156,747 @@ } } } + }, + "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": [ + 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", + "$description": "Data palette slot 01.", + "$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", + "$description": "Data palette slot 02.", + "$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", + "$description": "Data palette slot 03.", + "$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", + "$description": "Data palette slot 04.", + "$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", + "$description": "Data palette slot 05.", + "$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", + "$description": "Data palette slot 06.", + "$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", + "$description": "Data palette slot 07.", + "$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", + "$description": "Data palette slot 08.", + "$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", + "$description": "Data palette slot 09.", + "$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" + } + } + } } } }