/* ============================================================================ GENERATED FILE — DO NOT EDIT HERE. ---------------------------------------------------------------------------- Source: @karmo-co/drift-kit 18.0.0 → dist/drift-kit.css SHA-256: c455f795d048069a8da88396039fa3107179eae0714ebe16744cbbddae1a212d Edit the design system in the drift-kit repo, then run: npm run sync:drift Anything changed in this file directly will be silently overwritten by the next sync, and `npm run check:drift` will fail in the meantime. ========================================================================== */ /* @karmo-co/drift-kit 18.0.0 — 150 layers, one bundle */ /* ══════════════════════════════════════════ drift-kit:layer tokens/brand/fonts.css ══════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/font/face ═══ */ /* Self-hosted font files — replaces Google Fonts CDN @import. Consuming apps should preload these via ThemeProvider for FOUT prevention. */ /* Inter — Normal — Latin Extended */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — Normal — Latin */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter — Italic — Latin Extended */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter — Italic — Latin */ @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Syne — Normal — Latin Extended */ @font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("./fonts/syne-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Syne — Normal — Latin */ @font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("./fonts/syne-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════════ drift-kit:layer tokens/brand/font-family.css ════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/font/family ═══ */ :root { --dk-primitive-font-family-inter: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --dk-primitive-font-family-syne: Syne, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════════ drift-kit:layer tokens/brand/font-weight.css ════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/font/weight ═══ */ :root { --dk-primitive-font-weight-thin: 100; --dk-primitive-font-weight-extra-light: 200; --dk-primitive-font-weight-light: 300; --dk-primitive-font-weight-regular: 400; --dk-primitive-font-weight-medium: 500; --dk-primitive-font-weight-semi-bold: 600; --dk-primitive-font-weight-bold: 700; --dk-primitive-font-weight-extra-bold: 800; --dk-primitive-font-weight-black: 900; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════ drift-kit:layer tokens/brand/color/foundation.css ═══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/foundation ═══ */ :root { --dk-primitive-color-foundation-black: #000000; --dk-primitive-color-foundation-black-0: #00000000; --dk-primitive-color-foundation-black-60: #00000099; --dk-primitive-color-foundation-white: #ffffff; --dk-primitive-color-foundation-white-0: #ffffff00; --dk-primitive-color-foundation-white-60: #ffffff99; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/blue.css ═════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/blue ═══ */ :root { /* color */ --dk-primitive-color-blue-50: #ebf5ff; --dk-primitive-color-blue-100: #e1effe; --dk-primitive-color-blue-200: #c3ddfd; --dk-primitive-color-blue-300: #a4cafe; --dk-primitive-color-blue-400: #76a9fa; --dk-primitive-color-blue-500: #3f83f8; --dk-primitive-color-blue-600: #1c64f2; --dk-primitive-color-blue-700: #1a56db; --dk-primitive-color-blue-800: #1e429f; --dk-primitive-color-blue-900: #233876; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/gold.css ═════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/gold ═══ */ :root { --dk-primitive-color-gold-50: #fff9e5; --dk-primitive-color-gold-100: #fff2cc; --dk-primitive-color-gold-200: #ffe599; --dk-primitive-color-gold-300: #ffd966; --dk-primitive-color-gold-400: #ffcc33; --dk-primitive-color-gold-500: #ffbf00; --dk-primitive-color-gold-600: #cc9900; --dk-primitive-color-gold-700: #997300; --dk-primitive-color-gold-800: #664c00; --dk-primitive-color-gold-900: #332600; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/gray.css ═════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/gray ═══ */ :root { --dk-primitive-color-gray-25: #f4f5f5; --dk-primitive-color-gray-50: #e9ebeb; --dk-primitive-color-gray-100: #d3d7d7; --dk-primitive-color-gray-200: #bcc2c3; --dk-primitive-color-gray-300: #a6aeaf; --dk-primitive-color-gray-400: #909a9b; --dk-primitive-color-gray-500: #7a8688; --dk-primitive-color-gray-600: #647274; --dk-primitive-color-gray-700: #4d5d60; --dk-primitive-color-gray-800: #37494c; --dk-primitive-color-gray-900: #213538; --dk-primitive-color-gray-1000: #1f2b2d; --dk-primitive-color-gray-1000-0: #1f2b2d00; --dk-primitive-color-gray-1100: #1e2223; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════════ drift-kit:layer tokens/brand/color/green.css ════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/green ═══ */ :root { --dk-primitive-color-green-50: #dcfce7; --dk-primitive-color-green-100: #cbf9db; --dk-primitive-color-green-200: #aef3cf; --dk-primitive-color-green-300: #7dd8a9; --dk-primitive-color-green-400: #5ebe8b; --dk-primitive-color-green-500: #48b47c; --dk-primitive-color-green-600: #31a76a; --dk-primitive-color-green-700: #2e9856; --dk-primitive-color-green-800: #218246; --dk-primitive-color-green-900: #166534; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════════════ drift-kit:layer tokens/brand/color/jade.css ═════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/jade ═══ */ :root { --dk-primitive-color-jade-50: #e5f7f4; --dk-primitive-color-jade-100: #c9eee7; --dk-primitive-color-jade-200: #99dfd2; --dk-primitive-color-jade-300: #66cebb; --dk-primitive-color-jade-400: #33bea5; --dk-primitive-color-jade-500: #00ae8e; --dk-primitive-color-jade-600: #008b72; --dk-primitive-color-jade-700: #006855; --dk-primitive-color-jade-800: #004639; --dk-primitive-color-jade-850: #00342b; --dk-primitive-color-jade-900: #00231c; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════════ drift-kit:layer tokens/brand/color/ocean.css ════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/ocean ═══ */ :root { --dk-primitive-color-ocean-50: #f3f6fc; --dk-primitive-color-ocean-100: #e7eef7; --dk-primitive-color-ocean-200: #c9d9ee; --dk-primitive-color-ocean-300: #9abadf; --dk-primitive-color-ocean-400: #6496cc; --dk-primitive-color-ocean-500: #4079b7; --dk-primitive-color-ocean-600: #2f5f9a; --dk-primitive-color-ocean-700: #284e80; --dk-primitive-color-ocean-800: #244168; --dk-primitive-color-ocean-850: #1f3a5d; --dk-primitive-color-ocean-900: #223858; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════════ drift-kit:layer tokens/brand/color/orange.css ═══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/orange ═══ */ :root { --dk-primitive-color-orange-50: #fff8f1; --dk-primitive-color-orange-100: #feecdc; --dk-primitive-color-orange-200: #fcd9bd; --dk-primitive-color-orange-300: #fdba8c; --dk-primitive-color-orange-400: #ff8a4c; --dk-primitive-color-orange-500: #ff5a1f; --dk-primitive-color-orange-600: #d03801; --dk-primitive-color-orange-700: #b43403; --dk-primitive-color-orange-800: #8a2c0d; --dk-primitive-color-orange-900: #771d1d; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── STOPGAP: new brand orange scale (moved here from primitives/transform.css 2026-09-09) (Figma Brand vars updated 2026-07-28) ── The Figma "Brand" collection orange primitives were re-valued to this scale, but the published drift-ui.css (drift.karmo.co) is a separate build that hasn't been regenerated yet, so it still serves the old orange. These overrides sit on :root (same scope drift-ui.css defines the primitives on) and win by source order — this file loads after drift-ui.css. Everything downstream flows automatically: the Drift "warning" semantic aliases to --color-orange-*, so warning surfaces/text pick these up too. DELETE this block once drift-ui.css is republished from the updated Figma. */ :root { --dk-primitive-color-orange-50: #fff3e5; --dk-primitive-color-orange-100: #ffe7c9; --dk-primitive-color-orange-200: #ffd199; --dk-primitive-color-orange-300: #ffba66; --dk-primitive-color-orange-400: #ffa333; --dk-primitive-color-orange-500: #ff8c00; --dk-primitive-color-orange-600: #cc7000; --dk-primitive-color-orange-700: #995400; --dk-primitive-color-orange-800: #663800; --dk-primitive-color-orange-900: #331c00; } /* ═══════════════════════════════════ drift-kit:layer tokens/brand/color/purple.css ═══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/purple ═══ */ :root { --dk-primitive-color-purple-50: #f6f5ff; --dk-primitive-color-purple-100: #edebfe; --dk-primitive-color-purple-200: #dcd7fe; --dk-primitive-color-purple-300: #cabffd; --dk-primitive-color-purple-400: #ac94fa; --dk-primitive-color-purple-500: #9061f9; --dk-primitive-color-purple-600: #7e3af2; --dk-primitive-color-purple-700: #6c2bd9; --dk-primitive-color-purple-800: #5521b5; --dk-primitive-color-purple-900: #4a1d96; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════════════ drift-kit:layer tokens/brand/color/red.css ══════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/red ═══ */ :root { --dk-primitive-color-red-50: #fdf2f2; --dk-primitive-color-red-100: #fde8e8; --dk-primitive-color-red-200: #fbd5d5; --dk-primitive-color-red-300: #f8b4b4; --dk-primitive-color-red-400: #f98080; --dk-primitive-color-red-500: #f05252; --dk-primitive-color-red-600: #e02424; --dk-primitive-color-red-700: #c81e1e; --dk-primitive-color-red-800: #9b1c1c; --dk-primitive-color-red-900: #771d1d; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════════ drift-kit:layer tokens/brand/color/stale.css ════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/stale ═══ */ :root { --dk-primitive-color-stale-25: #f5f6f6; --dk-primitive-color-stale-50: #edeeee; --dk-primitive-color-stale-100: #e6e7e7; --dk-primitive-color-stale-200: #cfd0d2; --dk-primitive-color-stale-300: #aeb0b2; --dk-primitive-color-stale-400: #888b8d; --dk-primitive-color-stale-500: #6a6d70; --dk-primitive-color-stale-600: #5b5d5f; --dk-primitive-color-stale-700: #4d4f51; --dk-primitive-color-stale-800: #444546; --dk-primitive-color-stale-900: #3c3d3d; --dk-primitive-color-stale-1000: #252527; --dk-primitive-color-stale-1000-0: #25252700; --dk-primitive-color-stale-1100: #1f2021; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════════ drift-kit:layer tokens/brand/color/yellow.css ═══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/color/yellow ═══ */ :root { --dk-primitive-color-yellow-50: #fdfdea; --dk-primitive-color-yellow-100: #fdf6b2; --dk-primitive-color-yellow-200: #fce96a; --dk-primitive-color-yellow-300: #faca15; --dk-primitive-color-yellow-400: #e3a008; --dk-primitive-color-yellow-500: #c27803; --dk-primitive-color-yellow-600: #9f580a; --dk-primitive-color-yellow-700: #8e4b10; --dk-primitive-color-yellow-800: #723b13; --dk-primitive-color-yellow-900: #633112; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════════════════ drift-kit:layer tokens/brand/scale.css ══════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · brand/scale ═══ */ :root { --dk-primitive-scale-0: 0rem; --dk-primitive-scale-0-25: 0.0625rem; --dk-primitive-scale-0-5: 0.125rem; --dk-primitive-scale-0-75: 0.1875rem; --dk-primitive-scale-1: 0.25rem; --dk-primitive-scale-1-5: 0.375rem; --dk-primitive-scale-2: 0.5rem; --dk-primitive-scale-2-5: 0.625rem; --dk-primitive-scale-3: 0.75rem; --dk-primitive-scale-3-5: 0.875rem; --dk-primitive-scale-4: 1rem; --dk-primitive-scale-4-5: 1.125rem; --dk-primitive-scale-5: 1.25rem; --dk-primitive-scale-5-5: 1.375rem; --dk-primitive-scale-6: 1.5rem; --dk-primitive-scale-7: 1.75rem; --dk-primitive-scale-8: 2rem; --dk-primitive-scale-9: 2.25rem; --dk-primitive-scale-10: 2.5rem; --dk-primitive-scale-11: 2.75rem; --dk-primitive-scale-12: 3rem; --dk-primitive-scale-13: 3.25rem; --dk-primitive-scale-14: 3.5rem; --dk-primitive-scale-16: 4rem; --dk-primitive-scale-18: 4.5rem; --dk-primitive-scale-20: 5rem; --dk-primitive-scale-22: 5.25rem; --dk-primitive-scale-24: 5.5rem; --dk-primitive-scale-26: 5.75rem; --dk-primitive-scale-28: 6rem; --dk-primitive-scale-30: 6.5rem; --dk-primitive-scale-32: 7rem; --dk-primitive-scale-34: 7.5rem; --dk-primitive-scale-36: 8rem; --dk-primitive-scale-40: 9rem; --dk-primitive-scale-44: 10rem; --dk-primitive-scale-48: 11rem; --dk-primitive-scale-52: 11.75rem; --dk-primitive-scale-56: 12.75rem; --dk-primitive-scale-60: 13.75rem; --dk-primitive-scale-64: 16rem; --dk-primitive-scale-72: 18.25rem; --dk-primitive-scale-80: 20.5rem; --dk-primitive-scale-96: 22.75rem; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════════ drift-kit:layer tokens/responsive/layout.css ════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/layout ═══ */ /* mobile */ @media (max-width: 768px) { :root { /* Legacy naming - delete once this has been updated on customer portal */ --dk-responsive-frame-width: 48rem; --dk-responsive-max-width: 48rem; /* New layout variables naming convention */ --dk-responsive-layout-frame-width: 48rem; --dk-responsive-layout-max-width: 48rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { /* Legacy naming - delete once this has been updated on customer portal */ --dk-responsive-frame-width: 64rem; --dk-responsive-max-width: 64rem; /* New layout variables naming convention */ --dk-responsive-layout-frame-width: 64rem; --dk-responsive-layout-max-width: 64rem; } } /* desktop */ @media (min-width: 1025px) { :root { /* Legacy naming - delete once this has been updated on customer portal */ --dk-responsive-frame-width: 90rem; --dk-responsive-max-width: 80rem; /* New layout variables naming convention */ --dk-responsive-layout-frame-width: 90rem; --dk-responsive-layout-max-width: 80rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════════ drift-kit:layer tokens/responsive/font/body.css ═════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/body ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-font-body-lg-text-size: 1.125rem; --dk-responsive-font-body-lg-line-height: 1.625rem; --dk-responsive-font-body-lg-paragraph-spacing: 1.625rem; --dk-responsive-font-body-md-text-size: 0.875rem; --dk-responsive-font-body-md-line-height: 1.375rem; --dk-responsive-font-body-md-paragraph-spacing: 1.375rem; --dk-responsive-font-body-sm-text-size: 0.75rem; --dk-responsive-font-body-sm-line-height: 1.125rem; --dk-responsive-font-body-sm-paragraph-spacing: 1.125rem; --dk-responsive-font-body-xsm-text-size: 0.625rem; --dk-responsive-font-body-xsm-line-height: 1rem; --dk-responsive-font-body-xsm-paragraph-spacing: 1rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-font-body-lg-text-size: 1.1875rem; --dk-responsive-font-body-lg-line-height: 1.6875rem; --dk-responsive-font-body-lg-paragraph-spacing: 1.6875rem; --dk-responsive-font-body-md-text-size: 0.9375rem; --dk-responsive-font-body-md-line-height: 1.4375rem; --dk-responsive-font-body-md-paragraph-spacing: 1.4375rem; --dk-responsive-font-body-sm-text-size: 0.8125rem; --dk-responsive-font-body-sm-line-height: 1.1875rem; --dk-responsive-font-body-sm-paragraph-spacing: 1.1875rem; --dk-responsive-font-body-xsm-text-size: 0.6875rem; --dk-responsive-font-body-xsm-line-height: 1.0625rem; --dk-responsive-font-body-xsm-paragraph-spacing: 1.0625rem; } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-font-body-lg-text-size: 1.25rem; --dk-responsive-font-body-lg-line-height: 1.75rem; --dk-responsive-font-body-lg-paragraph-spacing: 1.75rem; --dk-responsive-font-body-md-text-size: 1rem; --dk-responsive-font-body-md-line-height: 1.5rem; --dk-responsive-font-body-md-paragraph-spacing: 1.5rem; --dk-responsive-font-body-sm-text-size: 0.875rem; --dk-responsive-font-body-sm-line-height: 1.25rem; --dk-responsive-font-body-sm-paragraph-spacing: 1.25rem; --dk-responsive-font-body-xsm-text-size: 0.75rem; --dk-responsive-font-body-xsm-line-height: 1.125rem; --dk-responsive-font-body-xsm-paragraph-spacing: 1.125rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════ drift-kit:layer tokens/responsive/font/headings.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/headings ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-font-headings-h1-text-size: 2.5rem; --dk-responsive-font-headings-h1-line-height: 3rem; --dk-responsive-font-headings-h1-paragraph-spacing: 3rem; --dk-responsive-font-headings-h2-text-size: 1.875rem; --dk-responsive-font-headings-h2-line-height: 2.375rem; --dk-responsive-font-headings-h2-paragraph-spacing: 2.375rem; --dk-responsive-font-headings-h3-text-size: 1.5rem; --dk-responsive-font-headings-h3-line-height: 2rem; --dk-responsive-font-headings-h3-paragraph-spacing: 2rem; --dk-responsive-font-headings-h4-text-size: 1.375rem; --dk-responsive-font-headings-h4-line-height: 1.75rem; --dk-responsive-font-headings-h4-paragraph-spacing: 1.75rem; --dk-responsive-font-headings-h5-text-size: 1.25rem; --dk-responsive-font-headings-h5-line-height: 1.5rem; --dk-responsive-font-headings-h5-paragraph-spacing: 1.5rem; --dk-responsive-font-headings-h6-text-size: 1.125rem; --dk-responsive-font-headings-h6-line-height: 1.5rem; --dk-responsive-font-headings-h6-paragraph-spacing: 1.5rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-font-headings-h1-text-size: 2.75rem; --dk-responsive-font-headings-h1-line-height: 3.25rem; --dk-responsive-font-headings-h1-paragraph-spacing: 3.25rem; --dk-responsive-font-headings-h2-text-size: 2.125rem; --dk-responsive-font-headings-h2-line-height: 2.625rem; --dk-responsive-font-headings-h2-paragraph-spacing: 2.625rem; --dk-responsive-font-headings-h3-text-size: 1.625rem; --dk-responsive-font-headings-h3-line-height: 2.125rem; --dk-responsive-font-headings-h3-paragraph-spacing: 2.125rem; --dk-responsive-font-headings-h4-text-size: 1.5rem; --dk-responsive-font-headings-h4-line-height: 1.875rem; --dk-responsive-font-headings-h4-paragraph-spacing: 1.875rem; --dk-responsive-font-headings-h5-text-size: 1.375rem; --dk-responsive-font-headings-h5-line-height: 1.625rem; --dk-responsive-font-headings-h5-paragraph-spacing: 1.625rem; --dk-responsive-font-headings-h6-text-size: 1.1875rem; --dk-responsive-font-headings-h6-line-height: 1.5rem; --dk-responsive-font-headings-h6-paragraph-spacing: 1.5rem; } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-font-headings-h1-text-size: 3rem; --dk-responsive-font-headings-h1-line-height: 3.5rem; --dk-responsive-font-headings-h1-paragraph-spacing: 3.5rem; --dk-responsive-font-headings-h2-text-size: 2.375rem; --dk-responsive-font-headings-h2-line-height: 2.875rem; --dk-responsive-font-headings-h2-paragraph-spacing: 2.875rem; --dk-responsive-font-headings-h3-text-size: 1.75rem; --dk-responsive-font-headings-h3-line-height: 2.25rem; --dk-responsive-font-headings-h3-paragraph-spacing: 2.25rem; --dk-responsive-font-headings-h4-text-size: 1.625rem; --dk-responsive-font-headings-h4-line-height: 2rem; --dk-responsive-font-headings-h4-paragraph-spacing: 2rem; --dk-responsive-font-headings-h5-text-size: 1.5rem; --dk-responsive-font-headings-h5-line-height: 1.75rem; --dk-responsive-font-headings-h5-paragraph-spacing: 1.75rem; --dk-responsive-font-headings-h6-text-size: 1.25rem; --dk-responsive-font-headings-h6-line-height: 1.5rem; --dk-responsive-font-headings-h6-paragraph-spacing: 1.5rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════ drift-kit:layer tokens/responsive/font/input.css ════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/input ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-font-input-lg-text-size: 1.125rem; --dk-responsive-font-input-lg-line-height: 1.625rem; --dk-responsive-font-input-lg-paragraph-spacing: 1.625rem; --dk-responsive-font-input-md-text-size: 1rem; --dk-responsive-font-input-md-line-height: 1.375rem; --dk-responsive-font-input-md-paragraph-spacing: 1.375rem; --dk-responsive-font-input-sm-line-height: 0rem; --dk-responsive-font-input-sm-text-size: 1rem; --dk-responsive-font-input-sm-paragraph-spacing: 1.25rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-font-input-lg-text-size: 1.1875rem; --dk-responsive-font-input-lg-line-height: 1.6875rem; --dk-responsive-font-input-lg-paragraph-spacing: 1.6875rem; --dk-responsive-font-input-md-text-size: 1.0625rem; --dk-responsive-font-input-md-line-height: 1.4375rem; --dk-responsive-font-input-md-paragraph-spacing: 1.4375rem; --dk-responsive-font-input-sm-text-size: 1rem; --dk-responsive-font-input-sm-line-height: 1.3125rem; --dk-responsive-font-input-sm-paragraph-spacing: 1.3125rem; } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-font-input-lg-text-size: 1.25rem; --dk-responsive-font-input-lg-line-height: 1.75rem; --dk-responsive-font-input-lg-paragraph-spacing: 1.75rem; --dk-responsive-font-input-md-text-size: 1.125rem; --dk-responsive-font-input-md-line-height: 1.5rem; --dk-responsive-font-input-md-paragraph-spacing: 1.5rem; --dk-responsive-font-input-sm-text-size: 1rem; --dk-responsive-font-input-sm-line-height: 1.375rem; --dk-responsive-font-input-sm-paragraph-spacing: 1.375rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── FIX: broken core token (moved here from primitives/transform.css 2026-09-09) (mobile input-sm line-height) ───────────── drift-ui.css defines --dk-responsive-font-input-sm-line-height: 0rem in its ≤768px block — a token-export bug (tablet is 1.3125rem, desktop 1.375rem; the mobile text-size token is a normal 1rem). Anything set in input-sm — e.g. the select trigger's value label — collapses to zero height on mobile and vanishes. Mirror the tablet value until Drift ships the fix; delete this block once drift-ui.css is corrected upstream. */ @media (max-width: 768px) { :root { --dk-responsive-font-input-sm-line-height: 1.3125rem; } } /* ═════════════════════════════ drift-kit:layer tokens/responsive/font/overline.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/font/overline ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-font-overline-lg-text-size: 0.6875rem; --dk-responsive-font-overline-lg-line-height: 0.875rem; --dk-responsive-font-overline-lg-paragraph-spacing: 0.875rem; --dk-responsive-font-overline-md-text-size: 0.5625rem; --dk-responsive-font-overline-md-line-height: 0.75rem; --dk-responsive-font-overline-md-paragraph-spacing: 0.75rem; --dk-responsive-font-overline-sm-text-size: 0.5rem; --dk-responsive-font-overline-sm-line-height: 0.75rem; --dk-responsive-font-overline-sm-paragraph-spacing: 0.75rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-font-overline-lg-text-size: 0.75rem; --dk-responsive-font-overline-lg-line-height: 1rem; --dk-responsive-font-overline-lg-paragraph-spacing: 1rem; --dk-responsive-font-overline-md-text-size: 0.625rem; --dk-responsive-font-overline-md-line-height: 0.875rem; --dk-responsive-font-overline-md-paragraph-spacing: 0.875rem; --dk-responsive-font-overline-sm-text-size: 0.5rem; --dk-responsive-font-overline-sm-line-height: 0.75rem; --dk-responsive-font-overline-sm-paragraph-spacing: 0.75rem; } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-font-overline-lg-text-size: 0.75rem; --dk-responsive-font-overline-lg-line-height: 1rem; --dk-responsive-font-overline-lg-paragraph-spacing: 1rem; --dk-responsive-font-overline-md-text-size: 0.625rem; --dk-responsive-font-overline-md-line-height: 0.875rem; --dk-responsive-font-overline-md-paragraph-spacing: 0.875rem; --dk-responsive-font-overline-sm-text-size: 0.5rem; --dk-responsive-font-overline-sm-line-height: 0.75rem; --dk-responsive-font-overline-sm-paragraph-spacing: 0.75rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════ drift-kit:layer tokens/responsive/icon/stroke.css ═══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/icon/stroke ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-icon-stroke-1: 0.0625rem; --dk-responsive-icon-stroke-1-25: 0.0625rem; --dk-responsive-icon-stroke-1-5: 0.0781rem; --dk-responsive-icon-stroke-1-75: 0.0781rem; --dk-responsive-icon-stroke-2: 0.0938rem; --dk-responsive-icon-stroke-2-25: 0.0938rem; --dk-responsive-icon-stroke-2-5: 0.1094rem; --dk-responsive-icon-stroke-2-75: 0.125rem; --dk-responsive-icon-stroke-3: 0.1406rem; --dk-responsive-icon-stroke-3-25: 0.1563rem; --dk-responsive-icon-stroke-3-5: 0.1719rem; --dk-responsive-icon-stroke-4: 0.1875rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-icon-stroke-1: 0.0625rem; --dk-responsive-icon-stroke-1-25: 0.0781rem; --dk-responsive-icon-stroke-1-5: 0.0938rem; --dk-responsive-icon-stroke-1-75: 0.0938rem; --dk-responsive-icon-stroke-2: 0.1094rem; --dk-responsive-icon-stroke-2-25: 0.1094rem; --dk-responsive-icon-stroke-2-5: 0.125rem; --dk-responsive-icon-stroke-2-75: 0.1406rem; --dk-responsive-icon-stroke-3: 0.1563rem; --dk-responsive-icon-stroke-3-25: 0.1719rem; --dk-responsive-icon-stroke-3-5: 0.1875rem; --dk-responsive-icon-stroke-4: 0.2031rem; } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-icon-stroke-1: 0.0625rem; --dk-responsive-icon-stroke-1-25: 0.0781rem; --dk-responsive-icon-stroke-1-5: 0.0938rem; --dk-responsive-icon-stroke-1-75: 0.0938rem; --dk-responsive-icon-stroke-2: 0.1094rem; --dk-responsive-icon-stroke-2-25: 0.1094rem; --dk-responsive-icon-stroke-2-5: 0.125rem; --dk-responsive-icon-stroke-2-75: 0.1406rem; --dk-responsive-icon-stroke-3: 0.1563rem; --dk-responsive-icon-stroke-3-25: 0.1719rem; --dk-responsive-icon-stroke-3-5: 0.1875rem; --dk-responsive-icon-stroke-4: 0.2188rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════════ drift-kit:layer tokens/responsive/spacing.css ═══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/spacing ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-spacing-0-25: var(--dk-primitive-scale-0-25); --dk-responsive-spacing-0-5: var(--dk-primitive-scale-0-25); --dk-responsive-spacing-1: var(--dk-primitive-scale-0-5); --dk-responsive-spacing-1-5: var(--dk-primitive-scale-1); --dk-responsive-spacing-2-5: var(--dk-primitive-scale-1-5); --dk-responsive-spacing-2: var(--dk-primitive-scale-1-5); --dk-responsive-spacing-3: var(--dk-primitive-scale-2); --dk-responsive-spacing-3-5: var(--dk-primitive-scale-2-5); --dk-responsive-spacing-4: var(--dk-primitive-scale-3); --dk-responsive-spacing-4-5: var(--dk-primitive-scale-3-5); --dk-responsive-spacing-5: var(--dk-primitive-scale-4); --dk-responsive-spacing-5-5: var(--dk-primitive-scale-4-5); --dk-responsive-spacing-6: var(--dk-primitive-scale-5); --dk-responsive-spacing-7: var(--dk-primitive-scale-5-5); --dk-responsive-spacing-8: var(--dk-primitive-scale-6); --dk-responsive-spacing-9: var(--dk-primitive-scale-7); --dk-responsive-spacing-10: var(--dk-primitive-scale-8); --dk-responsive-spacing-11: var(--dk-primitive-scale-9); --dk-responsive-spacing-12: var(--dk-primitive-scale-10); --dk-responsive-spacing-14: var(--dk-primitive-scale-12); --dk-responsive-spacing-16: var(--dk-primitive-scale-13); --dk-responsive-spacing-18: var(--dk-primitive-scale-14); --dk-responsive-spacing-20: var(--dk-primitive-scale-16); --dk-responsive-spacing-22: var(--dk-primitive-scale-18); --dk-responsive-spacing-24: var(--dk-primitive-scale-20); --dk-responsive-spacing-26: var(--dk-primitive-scale-22); --dk-responsive-spacing-28: var(--dk-primitive-scale-24); --dk-responsive-spacing-30: var(--dk-primitive-scale-26); --dk-responsive-spacing-32: var(--dk-primitive-scale-28); --dk-responsive-spacing-34: var(--dk-primitive-scale-30); --dk-responsive-spacing-40: var(--dk-primitive-scale-32); --dk-responsive-spacing-48: var(--dk-primitive-scale-40); --dk-responsive-spacing-56: var(--dk-primitive-scale-48); --dk-responsive-spacing-64: var(--dk-primitive-scale-56); --dk-responsive-spacing-72: var(--dk-primitive-scale-60); } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-spacing-0-25: var(--dk-primitive-scale-0-25); --dk-responsive-spacing-0-5: var(--dk-primitive-scale-0-25); --dk-responsive-spacing-1: var(--dk-primitive-scale-0-5); --dk-responsive-spacing-1-5: var(--dk-primitive-scale-1); --dk-responsive-spacing-2: var(--dk-primitive-scale-1-5); --dk-responsive-spacing-2-5: var(--dk-primitive-scale-2); --dk-responsive-spacing-3: var(--dk-primitive-scale-2-5); --dk-responsive-spacing-3-5: var(--dk-primitive-scale-3); --dk-responsive-spacing-4: var(--dk-primitive-scale-3-5); --dk-responsive-spacing-4-5: var(--dk-primitive-scale-4); --dk-responsive-spacing-5: var(--dk-primitive-scale-4-5); --dk-responsive-spacing-5-5: var(--dk-primitive-scale-5); --dk-responsive-spacing-6: var(--dk-primitive-scale-5-5); --dk-responsive-spacing-7: var(--dk-primitive-scale-6); --dk-responsive-spacing-8: var(--dk-primitive-scale-7); --dk-responsive-spacing-9: var(--dk-primitive-scale-8); --dk-responsive-spacing-10: var(--dk-primitive-scale-9); --dk-responsive-spacing-11: var(--dk-primitive-scale-10); --dk-responsive-spacing-12: var(--dk-primitive-scale-11); --dk-responsive-spacing-14: var(--dk-primitive-scale-13); --dk-responsive-spacing-16: var(--dk-primitive-scale-14); --dk-responsive-spacing-18: var(--dk-primitive-scale-16); --dk-responsive-spacing-20: var(--dk-primitive-scale-18); --dk-responsive-spacing-22: var(--dk-primitive-scale-20); --dk-responsive-spacing-24: var(--dk-primitive-scale-22); --dk-responsive-spacing-26: var(--dk-primitive-scale-24); --dk-responsive-spacing-28: var(--dk-primitive-scale-26); --dk-responsive-spacing-30: var(--dk-primitive-scale-28); --dk-responsive-spacing-32: var(--dk-primitive-scale-30); --dk-responsive-spacing-34: var(--dk-primitive-scale-32); --dk-responsive-spacing-40: var(--dk-primitive-scale-36); --dk-responsive-spacing-48: var(--dk-primitive-scale-44); --dk-responsive-spacing-56: var(--dk-primitive-scale-52); --dk-responsive-spacing-64: var(--dk-primitive-scale-60); --dk-responsive-spacing-72: var(--dk-primitive-scale-64); } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-spacing-0-25: var(--dk-primitive-scale-0-25); --dk-responsive-spacing-0-5: var(--dk-primitive-scale-0-5); --dk-responsive-spacing-1: var(--dk-primitive-scale-1); --dk-responsive-spacing-1-5: var(--dk-primitive-scale-1-5); --dk-responsive-spacing-2: var(--dk-primitive-scale-2); --dk-responsive-spacing-2-5: var(--dk-primitive-scale-2-5); --dk-responsive-spacing-3: var(--dk-primitive-scale-3); --dk-responsive-spacing-3-5: var(--dk-primitive-scale-3-5); --dk-responsive-spacing-4: var(--dk-primitive-scale-4); --dk-responsive-spacing-4-5: var(--dk-primitive-scale-4-5); --dk-responsive-spacing-5: var(--dk-primitive-scale-5); --dk-responsive-spacing-5-5: var(--dk-primitive-scale-5-5); --dk-responsive-spacing-6: var(--dk-primitive-scale-6); --dk-responsive-spacing-7: var(--dk-primitive-scale-7); --dk-responsive-spacing-8: var(--dk-primitive-scale-8); --dk-responsive-spacing-9: var(--dk-primitive-scale-9); --dk-responsive-spacing-10: var(--dk-primitive-scale-10); --dk-responsive-spacing-11: var(--dk-primitive-scale-11); --dk-responsive-spacing-12: var(--dk-primitive-scale-12); --dk-responsive-spacing-14: var(--dk-primitive-scale-14); --dk-responsive-spacing-16: var(--dk-primitive-scale-16); --dk-responsive-spacing-18: var(--dk-primitive-scale-18); --dk-responsive-spacing-20: var(--dk-primitive-scale-20); --dk-responsive-spacing-22: var(--dk-primitive-scale-22); --dk-responsive-spacing-24: var(--dk-primitive-scale-24); --dk-responsive-spacing-26: var(--dk-primitive-scale-26); --dk-responsive-spacing-28: var(--dk-primitive-scale-28); --dk-responsive-spacing-30: var(--dk-primitive-scale-30); --dk-responsive-spacing-32: var(--dk-primitive-scale-32); --dk-responsive-spacing-34: var(--dk-primitive-scale-34); --dk-responsive-spacing-40: var(--dk-primitive-scale-40); --dk-responsive-spacing-48: var(--dk-primitive-scale-48); --dk-responsive-spacing-56: var(--dk-primitive-scale-56); --dk-responsive-spacing-64: var(--dk-primitive-scale-64); --dk-responsive-spacing-72: var(--dk-primitive-scale-72); --dk-responsive-spacing-1: var(--dk-primitive-scale-1); --dk-responsive-spacing-1-5: var(--dk-primitive-scale-1-5); --dk-responsive-spacing-2: var(--dk-primitive-scale-2); --dk-responsive-spacing-2-5: var(--dk-primitive-scale-2-5); --dk-responsive-spacing-3: var(--dk-primitive-scale-3); --dk-responsive-spacing-3-5: var(--dk-primitive-scale-3-5); --dk-responsive-spacing-4: var(--dk-primitive-scale-4); --dk-responsive-spacing-4-5: var(--dk-primitive-scale-4-5); --dk-responsive-spacing-5: var(--dk-primitive-scale-5); --dk-responsive-spacing-5-5: var(--dk-primitive-scale-5-5); --dk-responsive-spacing-6: var(--dk-primitive-scale-6); --dk-responsive-spacing-7: var(--dk-primitive-scale-7); --dk-responsive-spacing-8: var(--dk-primitive-scale-8); --dk-responsive-spacing-9: var(--dk-primitive-scale-9); --dk-responsive-spacing-10: var(--dk-primitive-scale-10); --dk-responsive-spacing-11: var(--dk-primitive-scale-11); --dk-responsive-spacing-12: var(--dk-primitive-scale-12); --dk-responsive-spacing-16: var(--dk-primitive-scale-16); --dk-responsive-spacing-20: var(--dk-primitive-scale-20); --dk-responsive-spacing-24: var(--dk-primitive-scale-24); --dk-responsive-spacing-28: var(--dk-primitive-scale-28); --dk-responsive-spacing-32: var(--dk-primitive-scale-32); --dk-responsive-spacing-40: var(--dk-primitive-scale-40); --dk-responsive-spacing-48: var(--dk-primitive-scale-48); --dk-responsive-spacing-56: var(--dk-primitive-scale-56); --dk-responsive-spacing-64: var(--dk-primitive-scale-64); --dk-responsive-spacing-72: var(--dk-primitive-scale-72); } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════ drift-kit:layer tokens/responsive/border/radius.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · responsive/border/radius ═══ */ /* mobile */ @media (max-width: 768px) { :root { --dk-responsive-border-radius-border-radius-0: 0rem; --dk-responsive-border-radius-border-radius-25: 0.0625rem; --dk-responsive-border-radius-border-radius-50: 0.0625rem; --dk-responsive-border-radius-border-radius-75: 0.125rem; --dk-responsive-border-radius-border-radius-100: 0.1875rem; --dk-responsive-border-radius-border-radius-125: 0.25rem; --dk-responsive-border-radius-border-radius-150: 0.3125rem; --dk-responsive-border-radius-border-radius-200: 0.375rem; --dk-responsive-border-radius-border-radius-300: 0.5rem; --dk-responsive-border-radius-border-radius-400: 0.75rem; --dk-responsive-border-radius-border-radius-500: 1rem; --dk-responsive-border-radius-border-radius-600: 1.25rem; --dk-responsive-border-radius-border-radius-700: 1.375rem; --dk-responsive-border-radius-border-radius-800: 1.5rem; --dk-responsive-border-radius-border-radius-round: 62.4375rem; } } /* tablet */ @media (min-width: 769px) and (max-width: 1024px) { :root { --dk-responsive-border-radius-border-radius-0: 0rem; --dk-responsive-border-radius-border-radius-25: 0.0625rem; --dk-responsive-border-radius-border-radius-50: 0.125rem; --dk-responsive-border-radius-border-radius-75: 0.1875rem; --dk-responsive-border-radius-border-radius-100: 0.25rem; --dk-responsive-border-radius-border-radius-125: 0.3125rem; --dk-responsive-border-radius-border-radius-150: 0.375rem; --dk-responsive-border-radius-border-radius-200: 0.4375rem; --dk-responsive-border-radius-border-radius-300: 0.625rem; --dk-responsive-border-radius-border-radius-400: 0.875rem; --dk-responsive-border-radius-border-radius-500: 1.125rem; --dk-responsive-border-radius-border-radius-600: 1.375rem; --dk-responsive-border-radius-border-radius-700: 1.5rem; --dk-responsive-border-radius-border-radius-800: 1.75rem; --dk-responsive-border-radius-border-radius-round: 62.4375rem; } } /* desktop */ @media (min-width: 1025px) { :root { --dk-responsive-border-radius-border-radius-0: 0rem; --dk-responsive-border-radius-border-radius-25: 0.0625rem; --dk-responsive-border-radius-border-radius-50: 0.125rem; --dk-responsive-border-radius-border-radius-75: 0.1875rem; --dk-responsive-border-radius-border-radius-100: 0.25rem; --dk-responsive-border-radius-border-radius-125: 0.3125rem; --dk-responsive-border-radius-border-radius-150: 0.375rem; --dk-responsive-border-radius-border-radius-200: 0.5rem; --dk-responsive-border-radius-border-radius-300: 0.75rem; --dk-responsive-border-radius-border-radius-400: 1rem; --dk-responsive-border-radius-border-radius-500: 1.25rem; --dk-responsive-border-radius-border-radius-600: 1.5rem; --dk-responsive-border-radius-border-radius-700: 1.75rem; --dk-responsive-border-radius-border-radius-800: 2rem; --dk-responsive-border-radius-border-radius-round: 62.4375rem; } } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════════════ drift-kit:layer tokens/dynamic/spacing.css ══════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · dynamic/spacing ═══ */ /* * Dynamic Spacing System * Use data-density attribute to control spacing density across your application * * Usage: *
- Tighter spacing *
- Default spacing (also default without attribute) *
- More spacious */ /* Default spacing (Normal) */ :root, [data-density="normal"] { --dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-25); --dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-0-5); --dk-dynamic-spacing-1: var(--dk-responsive-spacing-1); --dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-1-5); --dk-dynamic-spacing-2: var(--dk-responsive-spacing-2); --dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-2-5); --dk-dynamic-spacing-3: var(--dk-responsive-spacing-3); --dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-3-5); --dk-dynamic-spacing-4: var(--dk-responsive-spacing-4); --dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-4-5); --dk-dynamic-spacing-5: var(--dk-responsive-spacing-5); --dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-5-5); --dk-dynamic-spacing-6: var(--dk-responsive-spacing-6); --dk-dynamic-spacing-7: var(--dk-responsive-spacing-7); --dk-dynamic-spacing-8: var(--dk-responsive-spacing-8); --dk-dynamic-spacing-9: var(--dk-responsive-spacing-9); --dk-dynamic-spacing-10: var(--dk-responsive-spacing-10); --dk-dynamic-spacing-11: var(--dk-responsive-spacing-11); --dk-dynamic-spacing-12: var(--dk-responsive-spacing-12); --dk-dynamic-spacing-14: var(--dk-responsive-spacing-14); --dk-dynamic-spacing-16: var(--dk-responsive-spacing-16); --dk-dynamic-spacing-18: var(--dk-responsive-spacing-18); --dk-dynamic-spacing-20: var(--dk-responsive-spacing-20); --dk-dynamic-spacing-22: var(--dk-responsive-spacing-22); --dk-dynamic-spacing-24: var(--dk-responsive-spacing-24); --dk-dynamic-spacing-26: var(--dk-responsive-spacing-26); --dk-dynamic-spacing-28: var(--dk-responsive-spacing-28); --dk-dynamic-spacing-30: var(--dk-responsive-spacing-30); --dk-dynamic-spacing-32: var(--dk-responsive-spacing-32); --dk-dynamic-spacing-40: var(--dk-responsive-spacing-40); --dk-dynamic-spacing-48: var(--dk-responsive-spacing-48); --dk-dynamic-spacing-56: var(--dk-responsive-spacing-56); --dk-dynamic-spacing-64: var(--dk-responsive-spacing-64); } /* Tight spacing - ~one step down from normal */ [data-density="tight"] { --dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-25); --dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-0-25); --dk-dynamic-spacing-1: var(--dk-responsive-spacing-0-5); --dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-1); --dk-dynamic-spacing-2: var(--dk-responsive-spacing-1-5); --dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-2); --dk-dynamic-spacing-3: var(--dk-responsive-spacing-2-5); --dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-3); --dk-dynamic-spacing-4: var(--dk-responsive-spacing-3-5); --dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-4); --dk-dynamic-spacing-5: var(--dk-responsive-spacing-4-5); --dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-5); --dk-dynamic-spacing-6: var(--dk-responsive-spacing-5-5); --dk-dynamic-spacing-7: var(--dk-responsive-spacing-6); --dk-dynamic-spacing-8: var(--dk-responsive-spacing-7); --dk-dynamic-spacing-9: var(--dk-responsive-spacing-8); --dk-dynamic-spacing-10: var(--dk-responsive-spacing-9); --dk-dynamic-spacing-11: var(--dk-responsive-spacing-10); --dk-dynamic-spacing-12: var(--dk-responsive-spacing-11); --dk-dynamic-spacing-14: var(--dk-responsive-spacing-12); --dk-dynamic-spacing-16: var(--dk-responsive-spacing-14); --dk-dynamic-spacing-18: var(--dk-responsive-spacing-16); --dk-dynamic-spacing-20: var(--dk-responsive-spacing-18); --dk-dynamic-spacing-22: var(--dk-responsive-spacing-20); --dk-dynamic-spacing-24: var(--dk-responsive-spacing-22); --dk-dynamic-spacing-26: var(--dk-responsive-spacing-24); --dk-dynamic-spacing-28: var(--dk-responsive-spacing-26); --dk-dynamic-spacing-30: var(--dk-responsive-spacing-28); --dk-dynamic-spacing-32: var(--dk-responsive-spacing-30); --dk-dynamic-spacing-40: var(--dk-responsive-spacing-32); --dk-dynamic-spacing-48: var(--dk-responsive-spacing-40); --dk-dynamic-spacing-56: var(--dk-responsive-spacing-48); --dk-dynamic-spacing-64: var(--dk-responsive-spacing-56); } /* Spacious - ~one step up from normal */ [data-density="spacious"] { --dk-dynamic-spacing-0-25: var(--dk-responsive-spacing-0-5); --dk-dynamic-spacing-0-5: var(--dk-responsive-spacing-1); --dk-dynamic-spacing-1: var(--dk-responsive-spacing-1-5); --dk-dynamic-spacing-1-5: var(--dk-responsive-spacing-2); --dk-dynamic-spacing-2: var(--dk-responsive-spacing-2-5); --dk-dynamic-spacing-2-5: var(--dk-responsive-spacing-3); --dk-dynamic-spacing-3: var(--dk-responsive-spacing-3-5); --dk-dynamic-spacing-3-5: var(--dk-responsive-spacing-4); --dk-dynamic-spacing-4: var(--dk-responsive-spacing-4-5); --dk-dynamic-spacing-4-5: var(--dk-responsive-spacing-5); --dk-dynamic-spacing-5: var(--dk-responsive-spacing-5-5); --dk-dynamic-spacing-5-5: var(--dk-responsive-spacing-6); --dk-dynamic-spacing-6: var(--dk-responsive-spacing-7); --dk-dynamic-spacing-7: var(--dk-responsive-spacing-8); --dk-dynamic-spacing-8: var(--dk-responsive-spacing-9); --dk-dynamic-spacing-9: var(--dk-responsive-spacing-10); --dk-dynamic-spacing-10: var(--dk-responsive-spacing-11); --dk-dynamic-spacing-11: var(--dk-responsive-spacing-12); --dk-dynamic-spacing-12: var(--dk-responsive-spacing-14); --dk-dynamic-spacing-14: var(--dk-responsive-spacing-16); --dk-dynamic-spacing-16: var(--dk-responsive-spacing-18); --dk-dynamic-spacing-18: var(--dk-responsive-spacing-20); --dk-dynamic-spacing-20: var(--dk-responsive-spacing-22); --dk-dynamic-spacing-22: var(--dk-responsive-spacing-24); --dk-dynamic-spacing-24: var(--dk-responsive-spacing-28); --dk-dynamic-spacing-26: var(--dk-responsive-spacing-30); --dk-dynamic-spacing-28: var(--dk-responsive-spacing-32); --dk-dynamic-spacing-30: var(--dk-responsive-spacing-34); --dk-dynamic-spacing-32: var(--dk-responsive-spacing-40); --dk-dynamic-spacing-40: var(--dk-responsive-spacing-48); --dk-dynamic-spacing-48: var(--dk-responsive-spacing-56); --dk-dynamic-spacing-56: var(--dk-responsive-spacing-64); --dk-dynamic-spacing-64: var(--dk-responsive-spacing-72); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════════ drift-kit:layer tokens/dynamic/border/radius.css ════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · dynamic/border/radius ═══ */ /* radius */ :root, [data-border-radius="normal"] { --dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-25); --dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-50); --dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-75); --dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-100); --dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-125); --dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-150); --dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-200); --dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-300); --dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-400); --dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-500); --dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-600); --dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round); } [data-border-radius="sharp"] { --dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round); } [data-border-radius="bubbly"] { --dk-dynamic-border-radius-0: var(--dk-responsive-border-radius-border-radius-0); --dk-dynamic-border-radius-25: var(--dk-responsive-border-radius-border-radius-50); --dk-dynamic-border-radius-50: var(--dk-responsive-border-radius-border-radius-75); --dk-dynamic-border-radius-75: var(--dk-responsive-border-radius-border-radius-100); --dk-dynamic-border-radius-100: var(--dk-responsive-border-radius-border-radius-125); --dk-dynamic-border-radius-125: var(--dk-responsive-border-radius-border-radius-150); --dk-dynamic-border-radius-150: var(--dk-responsive-border-radius-border-radius-200); --dk-dynamic-border-radius-200: var(--dk-responsive-border-radius-border-radius-300); --dk-dynamic-border-radius-300: var(--dk-responsive-border-radius-border-radius-400); --dk-dynamic-border-radius-400: var(--dk-responsive-border-radius-border-radius-500); --dk-dynamic-border-radius-500: var(--dk-responsive-border-radius-border-radius-600); --dk-dynamic-border-radius-600: var(--dk-responsive-border-radius-border-radius-700); --dk-dynamic-border-radius-round: var(--dk-responsive-border-radius-border-radius-round); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════════ drift-kit:layer tokens/dynamic/border/width.css ═════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · dynamic/border/width ═══ */ /* width */ :root, [data-border-width="thin"] { --dk-dynamic-border-width-0: var(--dk-primitive-scale-0); --dk-dynamic-border-width-25: var(--dk-primitive-scale-0-25); --dk-dynamic-border-width-50: var(--dk-primitive-scale-0-5); --dk-dynamic-border-width-100: var(--dk-primitive-scale-1); --dk-dynamic-border-width-150: var(--dk-primitive-scale-1-5); --dk-dynamic-border-width-200: var(--dk-primitive-scale-2); } [data-border-width="medium"] { --dk-dynamic-border-width-0: var(--dk-primitive-scale-0); --dk-dynamic-border-width-25: var(--dk-primitive-scale-0-5); --dk-dynamic-border-width-50: var(--dk-primitive-scale-1); --dk-dynamic-border-width-100: var(--dk-primitive-scale-1-5); --dk-dynamic-border-width-150: var(--dk-primitive-scale-2); --dk-dynamic-border-width-200: var(--dk-primitive-scale-2-5); } [data-border-width="thick"] { --dk-dynamic-border-width-0: var(--dk-primitive-scale-0); --dk-dynamic-border-width-25: var(--dk-primitive-scale-1); --dk-dynamic-border-width-50: var(--dk-primitive-scale-1-5); --dk-dynamic-border-width-100: var(--dk-primitive-scale-2); --dk-dynamic-border-width-150: var(--dk-primitive-scale-2-5); --dk-dynamic-border-width-200: var(--dk-primitive-scale-3); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════ drift-kit:layer tokens/alias/karmo/color/base.css ═══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/base ═══ */ :root [data-brand="karmo"] { --dk-color-base-black: var(--dk-primitive-color-foundation-black); --dk-color-base-black-60: var(--dk-primitive-color-foundation-black-60); --dk-color-base-white: var(--dk-primitive-color-foundation-white); --dk-color-base-white-60: var(--dk-primitive-color-foundation-white-60); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════ drift-kit:layer tokens/alias/karmo/color/error.css ══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/error ═══ */ :root [data-brand="karmo"] { --dk-color-error-100: var(--dk-primitive-color-red-100); --dk-color-error-200: var(--dk-primitive-color-red-200); --dk-color-error-300: var(--dk-primitive-color-red-300); --dk-color-error-400: var(--dk-primitive-color-red-400); --dk-color-error-50: var(--dk-primitive-color-red-50); --dk-color-error-500: var(--dk-primitive-color-red-500); --dk-color-error-600: var(--dk-primitive-color-red-600); --dk-color-error-700: var(--dk-primitive-color-red-700); --dk-color-error-800: var(--dk-primitive-color-red-800); --dk-color-error-900: var(--dk-primitive-color-red-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-error-650: color-mix(in srgb, var(--dk-primitive-color-red-600) 50%, var(--dk-primitive-color-red-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-error-550: color-mix(in srgb, var(--dk-primitive-color-red-500) 50%, var(--dk-primitive-color-red-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="karmo"] { --dk-color-error-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-red-50)); } /* ════════════════════════ drift-kit:layer tokens/alias/karmo/color/information.css ════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/information ═══ */ :root [data-brand="karmo"] { --dk-color-information-100: var(--dk-primitive-color-blue-100); --dk-color-information-200: var(--dk-primitive-color-blue-200); --dk-color-information-300: var(--dk-primitive-color-blue-300); --dk-color-information-400: var(--dk-primitive-color-blue-400); --dk-color-information-50: var(--dk-primitive-color-blue-50); --dk-color-information-500: var(--dk-primitive-color-blue-500); --dk-color-information-600: var(--dk-primitive-color-blue-600); --dk-color-information-700: var(--dk-primitive-color-blue-700); --dk-color-information-800: var(--dk-primitive-color-blue-800); --dk-color-information-900: var(--dk-primitive-color-blue-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-information-650: color-mix(in srgb, var(--dk-primitive-color-blue-600) 50%, var(--dk-primitive-color-blue-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-information-550: color-mix(in srgb, var(--dk-primitive-color-blue-500) 50%, var(--dk-primitive-color-blue-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="karmo"] { --dk-color-information-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-blue-50)); } /* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/neutral.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/neutral ═══ */ :root [data-brand="karmo"] { --dk-color-neutral-100: var(--dk-primitive-color-gray-100); --dk-color-neutral-1000: var(--dk-primitive-color-gray-1000); --dk-color-neutral-1100: var(--dk-primitive-color-gray-1100); --dk-color-neutral-200: var(--dk-primitive-color-gray-200); --dk-color-neutral-25: var(--dk-primitive-color-gray-25); --dk-color-neutral-300: var(--dk-primitive-color-gray-300); --dk-color-neutral-400: var(--dk-primitive-color-gray-400); --dk-color-neutral-50: var(--dk-primitive-color-gray-50); --dk-color-neutral-500: var(--dk-primitive-color-gray-500); --dk-color-neutral-600: var(--dk-primitive-color-gray-600); --dk-color-neutral-700: var(--dk-primitive-color-gray-700); --dk-color-neutral-800: var(--dk-primitive-color-gray-800); --dk-color-neutral-900: var(--dk-primitive-color-gray-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/primary.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/primary ═══ */ :root [data-brand="karmo"] { --dk-color-primary-100: var(--dk-primitive-color-jade-100); --dk-color-primary-200: var(--dk-primitive-color-jade-200); --dk-color-primary-300: var(--dk-primitive-color-jade-300); --dk-color-primary-400: var(--dk-primitive-color-jade-400); --dk-color-primary-50: var(--dk-primitive-color-jade-50); --dk-color-primary-500: var(--dk-primitive-color-jade-500); --dk-color-primary-600: var(--dk-primitive-color-jade-600); --dk-color-primary-700: var(--dk-primitive-color-jade-700); --dk-color-primary-800: var(--dk-primitive-color-jade-800); --dk-color-primary-850: var(--dk-primitive-color-jade-850); --dk-color-primary-900: var(--dk-primitive-color-jade-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-primary-650: color-mix(in srgb, var(--dk-primitive-color-jade-600) 50%, var(--dk-primitive-color-jade-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-primary-550: color-mix(in srgb, var(--dk-primitive-color-jade-500) 50%, var(--dk-primitive-color-jade-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="karmo"] { --dk-color-primary-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-jade-50)); } /* ══════════════════════════ drift-kit:layer tokens/alias/karmo/color/secondary.css ══════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/secondary ═══ */ :root [data-brand="karmo"] { --dk-color-secondary-100: var(--dk-primitive-color-gold-100); --dk-color-secondary-200: var(--dk-primitive-color-gold-200); --dk-color-secondary-300: var(--dk-primitive-color-gold-300); --dk-color-secondary-400: var(--dk-primitive-color-gold-400); --dk-color-secondary-50: var(--dk-primitive-color-gold-50); --dk-color-secondary-500: var(--dk-primitive-color-gold-500); --dk-color-secondary-600: var(--dk-primitive-color-gold-600); --dk-color-secondary-700: var(--dk-primitive-color-gold-700); --dk-color-secondary-800: var(--dk-primitive-color-gold-800); --dk-color-secondary-900: var(--dk-primitive-color-gold-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/success.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/success ═══ */ :root [data-brand="karmo"] { --dk-color-success-100: var(--dk-primitive-color-green-100); --dk-color-success-200: var(--dk-primitive-color-green-200); --dk-color-success-300: var(--dk-primitive-color-green-300); --dk-color-success-400: var(--dk-primitive-color-green-400); --dk-color-success-50: var(--dk-primitive-color-green-50); --dk-color-success-500: var(--dk-primitive-color-green-500); --dk-color-success-600: var(--dk-primitive-color-green-600); --dk-color-success-700: var(--dk-primitive-color-green-700); --dk-color-success-800: var(--dk-primitive-color-green-800); --dk-color-success-900: var(--dk-primitive-color-green-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/karmo/color/warning.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/color/warning ═══ */ :root [data-brand="karmo"] { --dk-color-warning-100: var(--dk-primitive-color-orange-100); --dk-color-warning-200: var(--dk-primitive-color-orange-200); --dk-color-warning-300: var(--dk-primitive-color-orange-300); --dk-color-warning-400: var(--dk-primitive-color-orange-400); --dk-color-warning-50: var(--dk-primitive-color-orange-50); --dk-color-warning-500: var(--dk-primitive-color-orange-500); --dk-color-warning-600: var(--dk-primitive-color-orange-600); --dk-color-warning-700: var(--dk-primitive-color-orange-700); --dk-color-warning-800: var(--dk-primitive-color-orange-800); --dk-color-warning-900: var(--dk-primitive-color-orange-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-warning-650: color-mix(in srgb, var(--dk-primitive-color-orange-600) 50%, var(--dk-primitive-color-orange-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-color-warning-550: color-mix(in srgb, var(--dk-primitive-color-orange-500) 50%, var(--dk-primitive-color-orange-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="karmo"] { --dk-color-warning-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-orange-50)); } /* ════════════════════════════════ drift-kit:layer tokens/alias/karmo/font/body.css ════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/body ═══ */ :root [data-brand="karmo"] { --dk-font-body-lg-text-size: var(--dk-responsive-font-body-lg-text-size); --dk-font-body-lg-line-height: var(--dk-responsive-font-body-lg-line-height); --dk-font-body-lg-paragraph-spacing: var(--dk-responsive-font-body-lg-paragraph-spacing); --dk-font-body-md-text-size: var(--dk-responsive-font-body-md-text-size); --dk-font-body-md-line-height: var(--dk-responsive-font-body-md-line-height); --dk-font-body-md-paragraph-spacing: var(--dk-responsive-font-body-md-paragraph-spacing); --dk-font-body-sm-text-size: var(--dk-responsive-font-body-sm-text-size); --dk-font-body-sm-line-height: var(--dk-responsive-font-body-sm-line-height); --dk-font-body-sm-paragraph-spacing: var(--dk-responsive-font-body-sm-paragraph-spacing); --dk-font-body-xsm-text-size: var(--dk-responsive-font-body-xsm-text-size); --dk-font-body-xsm-line-height: var(--dk-responsive-font-body-xsm-line-height); --dk-font-body-xsm-paragraph-spacing: var(--dk-responsive-font-body-xsm-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════ drift-kit:layer tokens/alias/karmo/font/family.css ══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/family ═══ */ :root [data-brand="karmo"] { --dk-font-family-primary: var(--dk-primitive-font-family-inter); --dk-font-family-secondary: var(--dk-primitive-font-family-syne); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════ drift-kit:layer tokens/alias/karmo/font/heading.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/heading ═══ */ :root [data-brand="karmo"] { --dk-font-heading-h1-text-size: var(--dk-responsive-font-headings-h1-text-size); --dk-font-heading-h1-line-height: var(--dk-responsive-font-headings-h1-line-height); --dk-font-heading-h1-paragraph-spacing: var(--dk-responsive-font-headings-h1-paragraph-spacing); --dk-font-heading-h2-text-size: var(--dk-responsive-font-headings-h2-text-size); --dk-font-heading-h2-line-height: var(--dk-responsive-font-headings-h2-line-height); --dk-font-heading-h2-paragraph-spacing: var(--dk-responsive-font-headings-h2-paragraph-spacing); --dk-font-heading-h3-text-size: var(--dk-responsive-font-headings-h3-text-size); --dk-font-heading-h3-line-height: var(--dk-responsive-font-headings-h3-line-height); --dk-font-heading-h3-paragraph-spacing: var(--dk-responsive-font-headings-h3-paragraph-spacing); --dk-font-heading-h4-text-size: var(--dk-responsive-font-headings-h4-text-size); --dk-font-heading-h4-line-height: var(--dk-responsive-font-headings-h4-line-height); --dk-font-heading-h4-paragraph-spacing: var(--dk-responsive-font-headings-h4-paragraph-spacing); --dk-font-heading-h5-text-size: var(--dk-responsive-font-headings-h5-text-size); --dk-font-heading-h5-line-height: var(--dk-responsive-font-headings-h5-line-height); --dk-font-heading-h5-paragraph-spacing: var(--dk-responsive-font-headings-h5-paragraph-spacing); --dk-font-heading-h6-text-size: var(--dk-responsive-font-headings-h6-text-size); --dk-font-heading-h6-line-height: var(--dk-responsive-font-headings-h6-line-height); --dk-font-heading-h6-paragraph-spacing: var(--dk-responsive-font-headings-h6-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/karmo/font/overline.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/overline ═══ */ :root [data-brand="karmo"] { --dk-font-overline-lg-text-size: var(--dk-responsive-font-overline-lg-text-size); --dk-font-overline-lg-line-height: var(--dk-responsive-font-overline-lg-line-height); --dk-font-overline-lg-paragraph-spacing: var(--dk-responsive-font-overline-lg-paragraph-spacing); --dk-font-overline-md-text-size: var(--dk-responsive-font-overline-md-text-size); --dk-font-overline-md-line-height: var(--dk-responsive-font-overline-md-line-height); --dk-font-overline-md-paragraph-spacing: var(--dk-responsive-font-overline-md-paragraph-spacing); --dk-font-overline-sm-text-size: var(--dk-responsive-font-overline-sm-text-size); --dk-font-overline-sm-line-height: var(--dk-responsive-font-overline-sm-line-height); --dk-font-overline-sm-paragraph-spacing: var(--dk-responsive-font-overline-sm-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════ drift-kit:layer tokens/alias/karmo/font/input.css ═══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/font/input ═══ */ :root [data-brand="karmo"] { --dk-font-input-lg-text-size: var(--dk-responsive-font-input-lg-text-size); --dk-font-input-lg-line-height: var(--dk-responsive-font-input-lg-line-height); --dk-font-input-lg-paragraph-spacing: var(--dk-responsive-font-input-lg-paragraph-spacing); --dk-font-input-md-text-size: var(--dk-responsive-font-input-md-text-size); --dk-font-input-md-line-height: var(--dk-responsive-font-input-md-line-height); --dk-font-input-md-paragraph-spacing: var(--dk-responsive-font-input-md-paragraph-spacing); --dk-font-input-sm-text-size: var(--dk-responsive-font-input-sm-text-size); --dk-font-input-sm-line-height: var(--dk-responsive-font-input-sm-line-height); --dk-font-input-sm-paragraph-spacing: var(--dk-responsive-font-input-sm-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/karmo/border/radius.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/border/radius ═══ */ :root [data-brand="karmo"] { --dk-border-radius-0: var(--dk-dynamic-border-radius-0); --dk-border-radius-25: var(--dk-dynamic-border-radius-25); --dk-border-radius-50: var(--dk-dynamic-border-radius-50); --dk-border-radius-75: var(--dk-dynamic-border-radius-75); --dk-border-radius-100: var(--dk-dynamic-border-radius-100); --dk-border-radius-125: var(--dk-dynamic-border-radius-125); --dk-border-radius-150: var(--dk-dynamic-border-radius-150); --dk-border-radius-200: var(--dk-dynamic-border-radius-200); --dk-border-radius-300: var(--dk-dynamic-border-radius-300); --dk-border-radius-400: var(--dk-dynamic-border-radius-400); --dk-border-radius-500: var(--dk-dynamic-border-radius-500); --dk-border-radius-600: var(--dk-dynamic-border-radius-600); --dk-border-radius-round: var(--dk-dynamic-border-radius-round); --dk-border-radius-round-fixed: 624.9375rem; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════ drift-kit:layer tokens/alias/karmo/border/width.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/border/width ═══ */ :root [data-brand="karmo"] { --dk-border-width-0: var(--dk-dynamic-border-width-0); --dk-border-width-25: var(--dk-dynamic-border-width-25); --dk-border-width-50: var(--dk-dynamic-border-width-50); --dk-border-width-100: var(--dk-dynamic-border-width-100); --dk-border-width-150: var(--dk-dynamic-border-width-150); --dk-border-width-200: var(--dk-dynamic-border-width-200); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════════ drift-kit:layer tokens/alias/karmo/spacing.css ══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/karmo/spacing ═══ */ :root [data-brand="karmo"] { --dk-spacing-0-25: var(--dk-dynamic-spacing-0-25); --dk-spacing-0-5: var(--dk-dynamic-spacing-0-5); --dk-spacing-1: var(--dk-dynamic-spacing-1); --dk-spacing-1-5: var(--dk-dynamic-spacing-1-5); --dk-spacing-2: var(--dk-dynamic-spacing-2); --dk-spacing-2-5: var(--dk-dynamic-spacing-2-5); --dk-spacing-3: var(--dk-dynamic-spacing-3); --dk-spacing-3-5: var(--dk-dynamic-spacing-3-5); --dk-spacing-4: var(--dk-dynamic-spacing-4); --dk-spacing-4-5: var(--dk-dynamic-spacing-4-5); --dk-spacing-5: var(--dk-dynamic-spacing-5); --dk-spacing-5-5: var(--dk-dynamic-spacing-5-5); --dk-spacing-6: var(--dk-dynamic-spacing-6); --dk-spacing-7: var(--dk-dynamic-spacing-7); --dk-spacing-8: var(--dk-dynamic-spacing-8); --dk-spacing-9: var(--dk-dynamic-spacing-9); --dk-spacing-10: var(--dk-dynamic-spacing-10); --dk-spacing-11: var(--dk-dynamic-spacing-11); --dk-spacing-12: var(--dk-dynamic-spacing-12); --dk-spacing-14: var(--dk-dynamic-spacing-14); --dk-spacing-16: var(--dk-dynamic-spacing-16); --dk-spacing-20: var(--dk-dynamic-spacing-20); --dk-spacing-24: var(--dk-dynamic-spacing-24); --dk-spacing-28: var(--dk-dynamic-spacing-28); --dk-spacing-32: var(--dk-dynamic-spacing-32); --dk-spacing-40: var(--dk-dynamic-spacing-40); --dk-spacing-48: var(--dk-dynamic-spacing-48); --dk-spacing-56: var(--dk-dynamic-spacing-56); --dk-spacing-64: var(--dk-dynamic-spacing-64); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════ drift-kit:layer tokens/alias/volvo/color/base.css ═══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/base ═══ */ :root [data-brand="volvo"] { --dk-color-base-black: var(--dk-primitive-color-foundation-black); --dk-color-base-black-60: var(--dk-primitive-color-foundation-black-60); --dk-color-base-white: var(--dk-primitive-color-foundation-white); --dk-color-base-white-60: var(--dk-primitive-color-foundation-white-60); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════ drift-kit:layer tokens/alias/volvo/color/error.css ══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/error ═══ */ :root [data-brand="volvo"] { --dk-color-error-100: var(--dk-primitive-color-red-100); --dk-color-error-200: var(--dk-primitive-color-red-200); --dk-color-error-300: var(--dk-primitive-color-red-300); --dk-color-error-400: var(--dk-primitive-color-red-400); --dk-color-error-50: var(--dk-primitive-color-red-50); --dk-color-error-500: var(--dk-primitive-color-red-500); --dk-color-error-600: var(--dk-primitive-color-red-600); --dk-color-error-700: var(--dk-primitive-color-red-700); --dk-color-error-800: var(--dk-primitive-color-red-800); --dk-color-error-900: var(--dk-primitive-color-red-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-error-650: color-mix(in srgb, var(--dk-primitive-color-red-600) 50%, var(--dk-primitive-color-red-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-error-550: color-mix(in srgb, var(--dk-primitive-color-red-500) 50%, var(--dk-primitive-color-red-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="volvo"] { --dk-color-error-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-red-50)); } /* ════════════════════════ drift-kit:layer tokens/alias/volvo/color/information.css ════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/information ═══ */ :root [data-brand="volvo"] { --dk-color-information-100: var(--dk-primitive-color-blue-100); --dk-color-information-200: var(--dk-primitive-color-blue-200); --dk-color-information-300: var(--dk-primitive-color-blue-300); --dk-color-information-400: var(--dk-primitive-color-blue-400); --dk-color-information-50: var(--dk-primitive-color-blue-50); --dk-color-information-500: var(--dk-primitive-color-blue-500); --dk-color-information-600: var(--dk-primitive-color-blue-600); --dk-color-information-700: var(--dk-primitive-color-blue-700); --dk-color-information-800: var(--dk-primitive-color-blue-800); --dk-color-information-900: var(--dk-primitive-color-blue-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-information-650: color-mix(in srgb, var(--dk-primitive-color-blue-600) 50%, var(--dk-primitive-color-blue-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-information-550: color-mix(in srgb, var(--dk-primitive-color-blue-500) 50%, var(--dk-primitive-color-blue-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="volvo"] { --dk-color-information-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-blue-50)); } /* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/neutral.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/neutral ═══ */ :root [data-brand="volvo"] { --dk-color-neutral-100: var(--dk-primitive-color-stale-100); --dk-color-neutral-1000: var(--dk-primitive-color-stale-1000); --dk-color-neutral-1100: var(--dk-primitive-color-stale-1100); --dk-color-neutral-200: var(--dk-primitive-color-stale-200); --dk-color-neutral-25: var(--dk-primitive-color-stale-25); --dk-color-neutral-300: var(--dk-primitive-color-stale-300); --dk-color-neutral-400: var(--dk-primitive-color-stale-400); --dk-color-neutral-50: var(--dk-primitive-color-stale-50); --dk-color-neutral-500: var(--dk-primitive-color-stale-500); --dk-color-neutral-600: var(--dk-primitive-color-stale-600); --dk-color-neutral-700: var(--dk-primitive-color-stale-700); --dk-color-neutral-800: var(--dk-primitive-color-stale-800); --dk-color-neutral-900: var(--dk-primitive-color-stale-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/primary.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/primary ═══ */ :root [data-brand="volvo"] { --dk-color-primary-100: var(--dk-primitive-color-ocean-100); --dk-color-primary-200: var(--dk-primitive-color-ocean-200); --dk-color-primary-300: var(--dk-primitive-color-ocean-300); --dk-color-primary-400: var(--dk-primitive-color-ocean-400); --dk-color-primary-50: var(--dk-primitive-color-ocean-50); --dk-color-primary-500: var(--dk-primitive-color-ocean-500); --dk-color-primary-600: var(--dk-primitive-color-ocean-600); --dk-color-primary-700: var(--dk-primitive-color-ocean-700); --dk-color-primary-800: var(--dk-primitive-color-ocean-800); --dk-color-primary-850: var(--dk-primitive-color-ocean-850); --dk-color-primary-900: var(--dk-primitive-color-ocean-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-primary-650: color-mix(in srgb, var(--dk-primitive-color-ocean-600) 50%, var(--dk-primitive-color-ocean-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-primary-550: color-mix(in srgb, var(--dk-primitive-color-jade-500) 50%, var(--dk-primitive-color-jade-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="volvo"] { --dk-color-primary-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-jade-50)); } /* ══════════════════════════ drift-kit:layer tokens/alias/volvo/color/secondary.css ══════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/secondary ═══ */ :root [data-brand="volvo"] { --dk-color-secondary-100: var(--dk-primitive-color-ocean-100); --dk-color-secondary-200: var(--dk-primitive-color-ocean-200); --dk-color-secondary-300: var(--dk-primitive-color-ocean-300); --dk-color-secondary-400: var(--dk-primitive-color-ocean-400); --dk-color-secondary-50: var(--dk-primitive-color-ocean-50); --dk-color-secondary-500: var(--dk-primitive-color-ocean-500); --dk-color-secondary-600: var(--dk-primitive-color-ocean-600); --dk-color-secondary-700: var(--dk-primitive-color-ocean-700); --dk-color-secondary-800: var(--dk-primitive-color-ocean-800); --dk-color-secondary-850: var(--dk-primitive-color-ocean-850); --dk-color-secondary-900: var(--dk-primitive-color-ocean-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/success.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/success ═══ */ :root [data-brand="volvo"] { --dk-color-success-100: var(--dk-primitive-color-green-100); --dk-color-success-200: var(--dk-primitive-color-green-200); --dk-color-success-300: var(--dk-primitive-color-green-300); --dk-color-success-400: var(--dk-primitive-color-green-400); --dk-color-success-50: var(--dk-primitive-color-green-50); --dk-color-success-500: var(--dk-primitive-color-green-500); --dk-color-success-600: var(--dk-primitive-color-green-600); --dk-color-success-700: var(--dk-primitive-color-green-700); --dk-color-success-800: var(--dk-primitive-color-green-800); --dk-color-success-900: var(--dk-primitive-color-green-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/volvo/color/warning.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/color/warning ═══ */ :root [data-brand="volvo"] { --dk-color-warning-100: var(--dk-primitive-color-orange-100); --dk-color-warning-200: var(--dk-primitive-color-orange-200); --dk-color-warning-300: var(--dk-primitive-color-orange-300); --dk-color-warning-400: var(--dk-primitive-color-orange-400); --dk-color-warning-50: var(--dk-primitive-color-orange-50); --dk-color-warning-500: var(--dk-primitive-color-orange-500); --dk-color-warning-600: var(--dk-primitive-color-orange-600); --dk-color-warning-700: var(--dk-primitive-color-orange-700); --dk-color-warning-800: var(--dk-primitive-color-orange-800); --dk-color-warning-900: var(--dk-primitive-color-orange-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 650, Karmo's own rung ───────────────────────────────────────────────── THE UPSTREAM RAMP HAS NO STEP BETWEEN 600 AND 700, and a solid status fill sits at 700. That leaves a control on a solid panel exactly one usable rung: 600 for its resting fill, and nothing quieter to rest on or nearer to step to. Every attempt to give it a hover state either pushed the fill to 500, where the lightest glyph the ramp offers reads 2.13 against it on warning and 2.54 on primary, or left hover doing nothing at all. Both were reported. Derived rather than picked, so it stays in step if upstream retunes either neighbour, and declared BELOW the fence because the ramp itself is upstream's and a refresh would take an edit there away. srgb rather than oklab because the gates' colour parsing reads color(srgb ...) and nothing further. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-warning-650: color-mix(in srgb, var(--dk-primitive-color-orange-600) 50%, var(--dk-primitive-color-orange-700)); } /* ── 550, the second of Karmo's own rungs ────────────────────────────────── ADDED FOR THE SAME REASON AS 650 ABOVE, one step further. With the resting fill at 650 and hover at 600, a press on a solid panel had nowhere left to go: 500 is light enough that the ramp's own lightest glyph reads 2.13 on warning, so active was pinned to hover's fill and the press did nothing visible. 550 is the step that lets active move and still carry a legible glyph. Derived from its neighbours for the same reason 650 is. ────────────────────────────────────────────────────────────────────────── */ :root [data-brand="volvo"] { --dk-color-warning-550: color-mix(in srgb, var(--dk-primitive-color-orange-500) 50%, var(--dk-primitive-color-orange-600)); } /* -- 25, the third of Karmo's own rungs ------------------------------------ A PRESS ON A SOLID FILL LIGHTENS, and the glyph lightens with it. Hover already held rung 50, the lightest the upstream ramp has, so the pressed glyph had nowhere lighter to go and the press was made to darken instead. That was wrong and was reported: on a solid panel the press should lift, not sink. Derived the way the NEUTRAL ramp already derives its own 25, which is the midpoint of white and rung 50: neutral-25 is #f4f5f5, neutral-50 is #e9ebeb, and (255+233)/2 = 244 = 0xf4 exactly. The status ramps simply never had the rung the neutral one does, so this adds it rather than inventing a step. Below the fence, in srgb, for the same reasons 650 and 550 are. ------------------------------------------------------------------------ */ :root [data-brand="volvo"] { --dk-color-warning-25: color-mix(in srgb, #fff 50%, var(--dk-primitive-color-orange-50)); } /* ════════════════════════════════ drift-kit:layer tokens/alias/volvo/font/body.css ════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/body ═══ */ :root [data-brand="volvo"] { --dk-font-body-lg-text-size: var(--dk-responsive-font-body-lg-text-size); --dk-font-body-lg-line-height: var(--dk-responsive-font-body-lg-line-height); --dk-font-body-lg-paragraph-spacing: var(--dk-responsive-font-body-lg-paragraph-spacing); --dk-font-body-md-text-size: var(--dk-responsive-font-body-md-text-size); --dk-font-body-md-line-height: var(--dk-responsive-font-body-md-line-height); --dk-font-body-md-paragraph-spacing: var(--dk-responsive-font-body-md-paragraph-spacing); --dk-font-body-sm-text-size: var(--dk-responsive-font-body-sm-text-size); --dk-font-body-sm-line-height: var(--dk-responsive-font-body-sm-line-height); --dk-font-body-sm-paragraph-spacing: var(--dk-responsive-font-body-sm-paragraph-spacing); --dk-font-body-xsm-text-size: var(--dk-responsive-font-body-xsm-text-size); --dk-font-body-xsm-line-height: var(--dk-responsive-font-body-xsm-line-height); --dk-font-body-xsm-paragraph-spacing: var(--dk-responsive-font-body-xsm-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════ drift-kit:layer tokens/alias/volvo/font/family.css ══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/family ═══ */ :root [data-brand="volvo"] { --dk-font-family-primary: var(--dk-primitive-font-family-inter); --dk-font-family-secondary: var(--dk-primitive-font-family-syne); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════ drift-kit:layer tokens/alias/volvo/font/heading.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/heading ═══ */ :root [data-brand="volvo"] { --dk-font-heading-h1-text-size: var(--dk-responsive-font-headings-h1-text-size); --dk-font-heading-h1-line-height: var(--dk-responsive-font-headings-h1-line-height); --dk-font-heading-h1-paragraph-spacing: var(--dk-responsive-font-headings-h1-paragraph-spacing); --dk-font-heading-h2-text-size: var(--dk-responsive-font-headings-h2-text-size); --dk-font-heading-h2-line-height: var(--dk-responsive-font-headings-h2-line-height); --dk-font-heading-h2-paragraph-spacing: var(--dk-responsive-font-headings-h2-paragraph-spacing); --dk-font-heading-h3-text-size: var(--dk-responsive-font-headings-h3-text-size); --dk-font-heading-h3-line-height: var(--dk-responsive-font-headings-h3-line-height); --dk-font-heading-h3-paragraph-spacing: var(--dk-responsive-font-headings-h3-paragraph-spacing); --dk-font-heading-h4-text-size: var(--dk-responsive-font-headings-h4-text-size); --dk-font-heading-h4-line-height: var(--dk-responsive-font-headings-h4-line-height); --dk-font-heading-h4-paragraph-spacing: var(--dk-responsive-font-headings-h4-paragraph-spacing); --dk-font-heading-h5-text-size: var(--dk-responsive-font-headings-h5-text-size); --dk-font-heading-h5-line-height: var(--dk-responsive-font-headings-h5-line-height); --dk-font-heading-h5-paragraph-spacing: var(--dk-responsive-font-headings-h5-paragraph-spacing); --dk-font-heading-h6-text-size: var(--dk-responsive-font-headings-h6-text-size); --dk-font-heading-h6-line-height: var(--dk-responsive-font-headings-h6-line-height); --dk-font-heading-h6-paragraph-spacing: var(--dk-responsive-font-headings-h6-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/volvo/font/overline.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/overline ═══ */ :root [data-brand="volvo"] { --dk-font-overline-lg-text-size: var(--dk-responsive-font-overline-lg-text-size); --dk-font-overline-lg-line-height: var(--dk-responsive-font-overline-lg-line-height); --dk-font-overline-lg-paragraph-spacing: var(--dk-responsive-font-overline-lg-paragraph-spacing); --dk-font-overline-md-text-size: var(--dk-responsive-font-overline-md-text-size); --dk-font-overline-md-line-height: var(--dk-responsive-font-overline-md-line-height); --dk-font-overline-md-paragraph-spacing: var(--dk-responsive-font-overline-md-paragraph-spacing); --dk-font-overline-sm-text-size: var(--dk-responsive-font-overline-sm-text-size); --dk-font-overline-sm-line-height: var(--dk-responsive-font-overline-sm-line-height); --dk-font-overline-sm-paragraph-spacing: var(--dk-responsive-font-overline-sm-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════ drift-kit:layer tokens/alias/volvo/font/input.css ═══════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/font/input ═══ */ :root [data-brand="volvo"] { --dk-font-input-lg-text-size: var(--dk-responsive-font-input-lg-text-size); --dk-font-input-lg-line-height: var(--dk-responsive-font-input-lg-line-height); --dk-font-input-lg-paragraph-spacing: var(--dk-responsive-font-input-lg-paragraph-spacing); --dk-font-input-md-text-size: var(--dk-responsive-font-input-md-text-size); --dk-font-input-md-line-height: var(--dk-responsive-font-input-md-line-height); --dk-font-input-md-paragraph-spacing: var(--dk-responsive-font-input-md-paragraph-spacing); --dk-font-input-sm-text-size: var(--dk-responsive-font-input-sm-text-size); --dk-font-input-sm-line-height: var(--dk-responsive-font-input-sm-line-height); --dk-font-input-sm-paragraph-spacing: var(--dk-responsive-font-input-sm-paragraph-spacing); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ════════════════════════════ drift-kit:layer tokens/alias/volvo/border/radius.css ════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/border/radius ═══ */ :root [data-brand="volvo"] { --dk-border-radius-0: var(--dk-dynamic-border-radius-0); --dk-border-radius-25: var(--dk-dynamic-border-radius-25); --dk-border-radius-50: var(--dk-dynamic-border-radius-50); --dk-border-radius-75: var(--dk-dynamic-border-radius-75); --dk-border-radius-100: var(--dk-dynamic-border-radius-100); --dk-border-radius-125: var(--dk-dynamic-border-radius-125); --dk-border-radius-150: var(--dk-dynamic-border-radius-150); --dk-border-radius-200: var(--dk-dynamic-border-radius-200); --dk-border-radius-300: var(--dk-dynamic-border-radius-300); --dk-border-radius-400: var(--dk-dynamic-border-radius-400); --dk-border-radius-500: var(--dk-dynamic-border-radius-500); --dk-border-radius-600: var(--dk-dynamic-border-radius-600); --dk-border-radius-round: var(--dk-dynamic-border-radius-round); --dk-border-radius-round-fixed: 624.9375rem; } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═════════════════════════════ drift-kit:layer tokens/alias/volvo/border/width.css ═════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/border/width ═══ */ :root [data-brand="volvo"] { --dk-border-width-0: var(--dk-dynamic-border-width-0); --dk-border-width-25: var(--dk-dynamic-border-width-25); --dk-border-width-50: var(--dk-dynamic-border-width-50); --dk-border-width-100: var(--dk-dynamic-border-width-100); --dk-border-width-150: var(--dk-dynamic-border-width-150); --dk-border-width-200: var(--dk-dynamic-border-width-200); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════════ drift-kit:layer tokens/alias/volvo/spacing.css ══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · alias/volvo/spacing ═══ */ :root [data-brand="volvo"] { --dk-spacing-0-25: var(--dk-dynamic-spacing-0-25); --dk-spacing-0-5: var(--dk-dynamic-spacing-0-5); --dk-spacing-1: var(--dk-dynamic-spacing-1); --dk-spacing-1-5: var(--dk-dynamic-spacing-1-5); --dk-spacing-2: var(--dk-dynamic-spacing-2); --dk-spacing-2-5: var(--dk-dynamic-spacing-2-5); --dk-spacing-3: var(--dk-dynamic-spacing-3); --dk-spacing-3-5: var(--dk-dynamic-spacing-3-5); --dk-spacing-4: var(--dk-dynamic-spacing-4); --dk-spacing-4-5: var(--dk-dynamic-spacing-4-5); --dk-spacing-5: var(--dk-dynamic-spacing-5); --dk-spacing-5-5: var(--dk-dynamic-spacing-5-5); --dk-spacing-6: var(--dk-dynamic-spacing-6); --dk-spacing-7: var(--dk-dynamic-spacing-7); --dk-spacing-8: var(--dk-dynamic-spacing-8); --dk-spacing-9: var(--dk-dynamic-spacing-9); --dk-spacing-10: var(--dk-dynamic-spacing-10); --dk-spacing-11: var(--dk-dynamic-spacing-11); --dk-spacing-12: var(--dk-dynamic-spacing-12); --dk-spacing-14: var(--dk-dynamic-spacing-14); --dk-spacing-16: var(--dk-dynamic-spacing-16); --dk-spacing-20: var(--dk-dynamic-spacing-20); --dk-spacing-24: var(--dk-dynamic-spacing-24); --dk-spacing-28: var(--dk-dynamic-spacing-28); --dk-spacing-32: var(--dk-dynamic-spacing-32); --dk-spacing-40: var(--dk-dynamic-spacing-40); --dk-spacing-48: var(--dk-dynamic-spacing-48); --dk-spacing-56: var(--dk-dynamic-spacing-56); --dk-spacing-64: var(--dk-dynamic-spacing-64); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════ drift-kit:layer tokens/alias/karmo/font/body-fixed.css ══════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Alias GROUP: Font / Body — FIXED SIZES (Karmo override, 2026-09-08) ─────────────────────────────────────────────────────────── Upstream aliases --font-body-* onto the responsive layer, so body copy shrinks with the viewport: md 16 → 15 → 14, xsm 12 → 11 → 10 on a phone. That is backwards for reading text — a phone is held closer, iOS zooms any input under 16px, and 10px sits under the legibility floor — and every system we benchmark (Material 3, Polaris, Atlassian, Primer, Apple HIG) holds body sizes constant and scales DISPLAY type instead. Karmo decision (8 Sep, spec C3): body is fixed at the desktop values; headings keep their responsive ramp; the -responsive- tokens stay available for anything that explicitly wants them. Consumers that change with this: Button labels, Input, Select, Checkbox labels, Toast, dk-component-body, and the Forge chrome — all stop shrinking. PLACEMENT: after the Volvo alias files (manifest), not in the Karmo region of alias/karmo/font/body.css — check:placement refuses a Karmo override that a later upstream fence (volvo/font/body.css) re-declares at equal specificity, and it is right to. Selector matches upstream's exactly, so this wins on source order alone; Volvo is untouched. Values reference the scale primitives, never raw rem: lg 20/28 --dk-primitive-scale-5 / --dk-primitive-scale-7 md 16/24 --dk-primitive-scale-4 / --dk-primitive-scale-6 sm 14/20 --dk-primitive-scale-3-5 / --dk-primitive-scale-5 xsm 12/18 --dk-primitive-scale-3 / --dk-primitive-scale-4-5 ─────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-font-body-lg-text-size: var(--dk-primitive-scale-5); --dk-font-body-lg-line-height: var(--dk-primitive-scale-7); --dk-font-body-lg-paragraph-spacing: var(--dk-primitive-scale-7); --dk-font-body-md-text-size: var(--dk-primitive-scale-4); --dk-font-body-md-line-height: var(--dk-primitive-scale-6); --dk-font-body-md-paragraph-spacing: var(--dk-primitive-scale-6); --dk-font-body-sm-text-size: var(--dk-primitive-scale-3-5); --dk-font-body-sm-line-height: var(--dk-primitive-scale-5); --dk-font-body-sm-paragraph-spacing: var(--dk-primitive-scale-5); --dk-font-body-xsm-text-size: var(--dk-primitive-scale-3); --dk-font-body-xsm-line-height: var(--dk-primitive-scale-4-5); --dk-font-body-xsm-paragraph-spacing: var(--dk-primitive-scale-4-5); } /* ══════════════════════ drift-kit:layer tokens/alias/karmo/font/overline-fixed.css ══════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Alias GROUP: Font / Overline — FIXED SIZES (Karmo override, 2026-09-08) ─────────────────────────────────────────────────────────── Upstream's overline rungs are responsive AND tiny: 12 / 10 / 8 px on desktop, 11 / 9 / 8 on a phone. 8 px is under any legibility floor and 10 px caps are the practical minimum. Karmo decision (typography-tier spec, D5): uppercase labels hold 12 / 11 / 10 px at every breakpoint. Consumers: dk-component-eyebrow and the dk-component-input label (Overline large — stays 12, stops shrinking). Figma's Overline styles need the same correction — flagged for Julio. PLACEMENT after the Volvo alias files, for the same check:placement reason as body-fixed.css. 11 px has no --scale-* primitive (the scale runs 0.625 → 0.75 rem), so md is written as 0.6875rem with this note. lg 12/16 --dk-primitive-scale-3 / --dk-primitive-scale-4 md 11/16 0.6875rem / --dk-primitive-scale-4 sm 10/12 --dk-primitive-scale-2-5 / --dk-primitive-scale-3 ─────────────────────────────────────────────────────────── */ :root [data-brand="karmo"] { --dk-font-overline-lg-text-size: var(--dk-primitive-scale-3); --dk-font-overline-lg-line-height: var(--dk-primitive-scale-4); --dk-font-overline-lg-paragraph-spacing: var(--dk-primitive-scale-4); --dk-font-overline-md-text-size: 0.6875rem; --dk-font-overline-md-line-height: var(--dk-primitive-scale-4); --dk-font-overline-md-paragraph-spacing: var(--dk-primitive-scale-4); --dk-font-overline-sm-text-size: var(--dk-primitive-scale-2-5); --dk-font-overline-sm-line-height: var(--dk-primitive-scale-3); --dk-font-overline-sm-paragraph-spacing: var(--dk-primitive-scale-3); } /* ═════════════════════════ drift-kit:layer tokens/alias/karmo/font/input-fixed.css ═════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Alias GROUP: Font / Input — FIXED SIZES (Karmo override, 2026-09-09) ─────────────────────────────────────────────────────────── Same call as body-fixed.css and overline-fixed.css: control text does not shrink with the viewport. Upstream's input ramp is responsive (and its mobile sm line-height is a literal 0rem — a long-standing upstream bug that drift-extensions once had to patch); fixing at the desktop values removes both problems at once. Consumers: dk-component-input, dk-component-select, dk-component-switch label, dk-component-dropzone — all on the sm rung. lg 20/28 --dk-primitive-scale-5 / --dk-primitive-scale-7 md 18/24 --dk-primitive-scale-4-5 / --dk-primitive-scale-6 sm 16/22 --dk-primitive-scale-4 / --dk-primitive-scale-5-5 Placed after the Volvo alias files (check:placement). */ :root [data-brand="karmo"] { --dk-font-input-lg-text-size: var(--dk-primitive-scale-5); --dk-font-input-lg-line-height: var(--dk-primitive-scale-7); --dk-font-input-lg-paragraph-spacing: var(--dk-primitive-scale-7); --dk-font-input-md-text-size: var(--dk-primitive-scale-4-5); --dk-font-input-md-line-height: var(--dk-primitive-scale-6); --dk-font-input-md-paragraph-spacing: var(--dk-primitive-scale-6); --dk-font-input-sm-text-size: var(--dk-primitive-scale-4); --dk-font-input-sm-line-height: var(--dk-primitive-scale-5-5); --dk-font-input-sm-paragraph-spacing: var(--dk-primitive-scale-5-5); } /* ══════════════════════════ drift-kit:layer tokens/alias/karmo/font/type-scale.css ══════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Alias GROUP: Font / Type scale — KARMO-OWNED (2026-09-10, 4.0.0) ─────────────────────────────────────────────────────────── One scale for the three type tiers, replacing the ramps the component collections used to borrow. Reason it exists — the audit that opened 4.0.0 found three faults in what we had, all of them invisible until you list the rungs side by side: 1. NO DISPLAY RANGE. Hero (Syne, the display tier) read the HEADING ramp, so it topped out at the same 48px as an H1 and ran down to 24px. A display tier that cannot go bigger than the heading tier is not a tier; 24px in a display face is a heading wearing the wrong font. 2. A RAMP WITH A HOLE AND A BUNCH. Headings ran 48 · 38 · 28 · 26 · 24 · 20. The h3→h2 step is 36%, while h3→h4→h5 are 8% apart — three rungs inside 4px that no one can tell apart, and a gap at 32–36 with nothing in it. 3. NO 18px BODY. Copy jumped 16 → 20 with nothing between, so long-form reading had no rung of its own. THE SCALE. Every value below is a --dk-primitive-scale-* step (the 4px grid) with ONE noted exception, and every ramp is monotonic in both size and leading ratio: as the rung gets smaller the line-height ratio gets looser, which is the direction type wants. RESPONSIVENESS follows the 8 Sep decision (body-fixed.css): DISPLAY type scales with the viewport, READING type does not. So display and heading carry three breakpoints; body is fixed at every width. NAMING. --dk-font-scale-{tier}-{rung}-{property}. The rungs are the t-shirt vocabulary the component collections already spoke for body and eyebrow (xxlarge…xxsmall, Atlassian's heading vocabulary), so all four type primitives now share ONE size vocabulary. Deliberately NOT the h1…h6 names the heading ramp used to carry: those are an HTML outline vocabulary, and putting them on a purely visual axis invites the exact coupling the size axis exists to break — see components/heading/tokens.css § Sizes. The `scale` segment keeps these clear of upstream's --dk-font-body-lg / --dk-font-heading-h1 groups, which stay untouched and still resolve. Two ramps one word apart with 2px between their rungs would be a trap. ─────────────────────────────────────────────────────────── */ /* ── DISPLAY — Hero (Syne). Sits ABOVE the heading tier at every breakpoint. Desktop 72 · 64 · 56 · 48 · 40, stepping 8px, leading 1.11 → 1.20. ── */ @media (max-width: 768px) { :root [data-brand="karmo"] { --dk-font-scale-display-xxlarge-text-size: var(--dk-primitive-scale-12); --dk-font-scale-display-xxlarge-line-height: var(--dk-primitive-scale-14); --dk-font-scale-display-xlarge-text-size: var(--dk-primitive-scale-11); --dk-font-scale-display-xlarge-line-height: var(--dk-primitive-scale-13); --dk-font-scale-display-large-text-size: var(--dk-primitive-scale-10); --dk-font-scale-display-large-line-height: var(--dk-primitive-scale-12); --dk-font-scale-display-medium-text-size: var(--dk-primitive-scale-9); --dk-font-scale-display-medium-line-height: var(--dk-primitive-scale-11); --dk-font-scale-display-small-text-size: var(--dk-primitive-scale-8); --dk-font-scale-display-small-line-height: var(--dk-primitive-scale-10); } } @media (min-width: 769px) and (max-width: 1024px) { :root [data-brand="karmo"] { --dk-font-scale-display-xxlarge-text-size: var(--dk-primitive-scale-16); --dk-font-scale-display-xxlarge-line-height: var(--dk-primitive-scale-18); --dk-font-scale-display-xlarge-text-size: var(--dk-primitive-scale-14); --dk-font-scale-display-xlarge-line-height: var(--dk-primitive-scale-16); --dk-font-scale-display-large-text-size: var(--dk-primitive-scale-12); --dk-font-scale-display-large-line-height: var(--dk-primitive-scale-14); --dk-font-scale-display-medium-text-size: var(--dk-primitive-scale-11); --dk-font-scale-display-medium-line-height: var(--dk-primitive-scale-13); --dk-font-scale-display-small-text-size: var(--dk-primitive-scale-9); --dk-font-scale-display-small-line-height: var(--dk-primitive-scale-11); } } @media (min-width: 1025px) { :root [data-brand="karmo"] { --dk-font-scale-display-xxlarge-text-size: var(--dk-primitive-scale-18); --dk-font-scale-display-xxlarge-line-height: var(--dk-primitive-scale-20); --dk-font-scale-display-xlarge-text-size: var(--dk-primitive-scale-16); --dk-font-scale-display-xlarge-line-height: var(--dk-primitive-scale-18); --dk-font-scale-display-large-text-size: var(--dk-primitive-scale-14); --dk-font-scale-display-large-line-height: var(--dk-primitive-scale-16); --dk-font-scale-display-medium-text-size: var(--dk-primitive-scale-12); --dk-font-scale-display-medium-line-height: var(--dk-primitive-scale-14); --dk-font-scale-display-small-text-size: var(--dk-primitive-scale-10); --dk-font-scale-display-small-line-height: var(--dk-primitive-scale-12); } } /* ── HEADING — Heading (Inter). Seven rungs, 48 → 20 on desktop, every step at least 11% so no two rungs read the same. The old ramp's dead middle (28 · 26 · 24) becomes one rung and the empty 32–36 band is filled. ── */ @media (max-width: 768px) { :root [data-brand="karmo"] { --dk-font-scale-heading-xxlarge-text-size: var(--dk-primitive-scale-10); --dk-font-scale-heading-xxlarge-line-height: var(--dk-primitive-scale-12); --dk-font-scale-heading-xlarge-text-size: var(--dk-primitive-scale-8); --dk-font-scale-heading-xlarge-line-height: var(--dk-primitive-scale-10); --dk-font-scale-heading-large-text-size: var(--dk-primitive-scale-7); --dk-font-scale-heading-large-line-height: var(--dk-primitive-scale-9); --dk-font-scale-heading-medium-text-size: var(--dk-primitive-scale-6); --dk-font-scale-heading-medium-line-height: var(--dk-primitive-scale-8); --dk-font-scale-heading-small-text-size: var(--dk-primitive-scale-5-5); --dk-font-scale-heading-small-line-height: var(--dk-primitive-scale-7); --dk-font-scale-heading-xsmall-text-size: var(--dk-primitive-scale-5); --dk-font-scale-heading-xsmall-line-height: var(--dk-primitive-scale-7); --dk-font-scale-heading-xxsmall-text-size: var(--dk-primitive-scale-4-5); --dk-font-scale-heading-xxsmall-line-height: var(--dk-primitive-scale-6); } } @media (min-width: 769px) and (max-width: 1024px) { :root [data-brand="karmo"] { --dk-font-scale-heading-xxlarge-text-size: var(--dk-primitive-scale-11); --dk-font-scale-heading-xxlarge-line-height: var(--dk-primitive-scale-13); --dk-font-scale-heading-xlarge-text-size: var(--dk-primitive-scale-9); --dk-font-scale-heading-xlarge-line-height: var(--dk-primitive-scale-11); --dk-font-scale-heading-large-text-size: var(--dk-primitive-scale-8); --dk-font-scale-heading-large-line-height: var(--dk-primitive-scale-10); --dk-font-scale-heading-medium-text-size: var(--dk-primitive-scale-7); --dk-font-scale-heading-medium-line-height: var(--dk-primitive-scale-9); --dk-font-scale-heading-small-text-size: var(--dk-primitive-scale-6); --dk-font-scale-heading-small-line-height: var(--dk-primitive-scale-8); --dk-font-scale-heading-xsmall-text-size: var(--dk-primitive-scale-5-5); --dk-font-scale-heading-xsmall-line-height: var(--dk-primitive-scale-7); --dk-font-scale-heading-xxsmall-text-size: var(--dk-primitive-scale-5); --dk-font-scale-heading-xxsmall-line-height: var(--dk-primitive-scale-7); } } @media (min-width: 1025px) { :root [data-brand="karmo"] { --dk-font-scale-heading-xxlarge-text-size: var(--dk-primitive-scale-12); --dk-font-scale-heading-xxlarge-line-height: var(--dk-primitive-scale-14); --dk-font-scale-heading-xlarge-text-size: var(--dk-primitive-scale-10); --dk-font-scale-heading-xlarge-line-height: var(--dk-primitive-scale-12); --dk-font-scale-heading-large-text-size: var(--dk-primitive-scale-9); --dk-font-scale-heading-large-line-height: var(--dk-primitive-scale-11); --dk-font-scale-heading-medium-text-size: var(--dk-primitive-scale-8); --dk-font-scale-heading-medium-line-height: var(--dk-primitive-scale-10); --dk-font-scale-heading-small-text-size: var(--dk-primitive-scale-7); --dk-font-scale-heading-small-line-height: var(--dk-primitive-scale-9); --dk-font-scale-heading-xsmall-text-size: var(--dk-primitive-scale-6); --dk-font-scale-heading-xsmall-line-height: var(--dk-primitive-scale-8); --dk-font-scale-heading-xxsmall-text-size: var(--dk-primitive-scale-5); --dk-font-scale-heading-xxsmall-line-height: var(--dk-primitive-scale-7); } } /* ── BODY — Body text (Inter). FIXED at every breakpoint (body-fixed.css states the case). Adds the 18px reading rung the old ramp skipped. 26px line-height is the one value with no --dk-primitive-scale-* step (the grid runs 24 → 28); 28 reads at 1.56 and 24 at 1.33, both outside the 1.4–1.5 band body copy wants, so it is written raw with this note — the same exception, for the same reason, as overline-fixed.css's 11px. */ :root [data-brand="karmo"] { --dk-font-scale-body-xlarge-text-size: var(--dk-primitive-scale-5); --dk-font-scale-body-xlarge-line-height: var(--dk-primitive-scale-7); --dk-font-scale-body-large-text-size: var(--dk-primitive-scale-4-5); --dk-font-scale-body-large-line-height: 1.625rem; --dk-font-scale-body-medium-text-size: var(--dk-primitive-scale-4); --dk-font-scale-body-medium-line-height: var(--dk-primitive-scale-6); --dk-font-scale-body-small-text-size: var(--dk-primitive-scale-3-5); --dk-font-scale-body-small-line-height: var(--dk-primitive-scale-5); --dk-font-scale-body-xsmall-text-size: var(--dk-primitive-scale-3); --dk-font-scale-body-xsmall-line-height: var(--dk-primitive-scale-4-5); } /* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/surface.css ═══════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/surface ═══ */ :root, [data-theme="light"] { --dk-surface-backdrop-black: #000000cc; --dk-surface-backdrop-transparent: #ffffff00; --dk-surface-base-black: var(--dk-color-base-black); --dk-surface-base-white: var(--dk-color-base-white); --dk-surface-card-default: var(--dk-color-base-white); --dk-surface-card-focus: var(--dk-color-neutral-50); --dk-surface-card-hover: var(--dk-color-neutral-25); --dk-surface-card-secondary: var(--dk-color-neutral-25); --dk-surface-card-tertiary: var(--dk-color-neutral-1000); --dk-surface-default-body: var(--dk-color-base-white); --dk-surface-default-body-reverse: var(--dk-color-neutral-1100); --dk-surface-disabled-default: var(--dk-color-neutral-300); --dk-surface-disabled-subtle: var(--dk-color-neutral-25); --dk-surface-error-default: var(--dk-color-error-500); --dk-surface-error-focus: var(--dk-color-error-700); --dk-surface-error-hover: var(--dk-color-error-600); --dk-surface-error-subtle: var(--dk-color-error-50); --dk-surface-error-subtle-focus: var(--dk-color-error-200); --dk-surface-error-subtle-hover: var(--dk-color-error-100); --dk-surface-glass-default: var(--dk-color-base-white-60); --dk-surface-information-default: var(--dk-color-information-500); --dk-surface-information-focus: var(--dk-color-information-700); --dk-surface-information-hover: var(--dk-color-information-600); --dk-surface-information-subtle: var(--dk-color-information-50); --dk-surface-information-subtle-focus: var(--dk-color-information-200); --dk-surface-information-subtle-hover: var(--dk-color-information-100); --dk-surface-neutral-default: var(--dk-color-neutral-500); --dk-surface-neutral-focus: var(--dk-color-neutral-600); --dk-surface-neutral-hover: var(--dk-color-neutral-600); --dk-surface-neutral-on-color: var(--dk-color-neutral-100); --dk-surface-neutral-subtle: var(--dk-color-neutral-25); --dk-surface-neutral-subtle-focus: var(--dk-color-neutral-100); --dk-surface-neutral-subtle-hover: var(--dk-color-neutral-50); --dk-surface-page-default: var(--dk-color-base-white); --dk-surface-page-secondary: var(--dk-color-neutral-25); --dk-surface-page-tertiary: var(--dk-color-neutral-1000); --dk-surface-primary-default: var(--dk-color-primary-500); --dk-surface-primary-disabled: var(--dk-color-primary-200); --dk-surface-primary-focus: var(--dk-color-primary-700); --dk-surface-primary-hover: var(--dk-color-primary-600); --dk-surface-primary-on-color: var(--dk-color-primary-100); --dk-surface-primary-subtle: var(--dk-color-primary-50); --dk-surface-primary-subtle-focus: var(--dk-color-primary-200); --dk-surface-primary-subtle-hover: var(--dk-color-primary-100); --dk-surface-success-default: var(--dk-color-success-500); --dk-surface-success-focus: var(--dk-color-success-700); --dk-surface-success-hover: var(--dk-color-success-600); --dk-surface-success-subtle: var(--dk-color-success-50); --dk-surface-success-subtle-focus: var(--dk-color-success-200); --dk-surface-success-subtle-hover: var(--dk-color-success-100); --dk-surface-warning-default: var(--dk-color-warning-500); --dk-surface-warning-focus: var(--dk-color-warning-700); --dk-surface-warning-hover: var(--dk-color-warning-600); --dk-surface-warning-subtle: var(--dk-color-warning-50); --dk-surface-warning-subtle-focus: var(--dk-color-warning-200); --dk-surface-warning-subtle-hover: var(--dk-color-warning-100); } [data-theme="dark"] { --dk-surface-backdrop-black: #000000cc; --dk-surface-backdrop-transparent: #26262600; --dk-surface-base-black: var(--dk-color-base-black); --dk-surface-base-white: var(--dk-color-base-white); --dk-surface-card-default: var(--dk-color-neutral-1100); --dk-surface-card-focus: var(--dk-color-neutral-800); --dk-surface-card-hover: var(--dk-color-neutral-900); --dk-surface-card-secondary: var(--dk-color-neutral-900); --dk-surface-card-tertiary: var(--dk-color-neutral-50); --dk-surface-default-body: var(--dk-color-neutral-1100); --dk-surface-default-body-reverse: var(--dk-color-base-white); --dk-surface-disabled-default: var(--dk-color-neutral-300); --dk-surface-disabled-subtle: var(--dk-color-neutral-1000); --dk-surface-error-default: var(--dk-color-error-700); --dk-surface-error-focus: var(--dk-color-error-500); --dk-surface-error-hover: var(--dk-color-error-600); --dk-surface-error-subtle: var(--dk-color-error-900); --dk-surface-error-subtle-focus: var(--dk-color-error-700); --dk-surface-error-subtle-hover: var(--dk-color-error-800); --dk-surface-glass-default: var(--dk-color-base-black-60); --dk-surface-information-default: var(--dk-color-information-600); --dk-surface-information-focus: var(--dk-color-information-400); --dk-surface-information-hover: var(--dk-color-information-500); --dk-surface-information-subtle: var(--dk-color-information-900); --dk-surface-information-subtle-focus: var(--dk-color-information-700); --dk-surface-information-subtle-hover: var(--dk-color-information-800); --dk-surface-neutral-default: var(--dk-color-neutral-700); --dk-surface-neutral-focus: var(--dk-color-neutral-500); --dk-surface-neutral-hover: var(--dk-color-neutral-600); --dk-surface-neutral-on-color: var(--dk-color-neutral-800); --dk-surface-neutral-subtle: var(--dk-color-neutral-900); --dk-surface-neutral-subtle-focus: var(--dk-color-neutral-700); --dk-surface-neutral-subtle-hover: var(--dk-color-neutral-800); --dk-surface-page-default: var(--dk-color-neutral-1100); --dk-surface-page-secondary: var(--dk-color-neutral-1000); --dk-surface-page-tertiary: var(--dk-color-neutral-25); --dk-surface-primary-default: var(--dk-color-primary-600); --dk-surface-primary-disabled: var(--dk-color-primary-800); --dk-surface-primary-focus: var(--dk-color-primary-400); --dk-surface-primary-hover: var(--dk-color-primary-500); --dk-surface-primary-on-color: var(--dk-color-primary-800); --dk-surface-primary-subtle: var(--dk-color-primary-850); --dk-surface-primary-subtle-focus: var(--dk-color-primary-700); --dk-surface-primary-subtle-hover: var(--dk-color-primary-800); --dk-surface-success-default: var(--dk-color-success-700); --dk-surface-success-focus: var(--dk-color-success-500); --dk-surface-success-hover: var(--dk-color-success-600); --dk-surface-success-subtle: var(--dk-color-success-900); --dk-surface-success-subtle-focus: var(--dk-color-success-700); --dk-surface-success-subtle-hover: var(--dk-color-success-800); --dk-surface-warning-default: var(--dk-color-warning-600); --dk-surface-warning-focus: var(--dk-color-warning-400); --dk-surface-warning-hover: var(--dk-color-warning-500); --dk-surface-warning-subtle: var(--dk-color-warning-900); --dk-surface-warning-subtle-focus: var(--dk-color-warning-700); --dk-surface-warning-subtle-hover: var(--dk-color-warning-800); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ── 0. The page's own colours, held under a second name ────────────────── A scope that declines to set a token does not "leave it alone". Custom properties inherit, so a container nested inside a toned panel keeps that panel's values for everything it does not restore, and the tokens below are exactly the ones a tone remaps. Level 1 and level 2 restore them to their own rungs; level 0 restores them to these. These duplicate the upstream declarations in mapped/text, mapped/icon and mapped/border rather than reading them, and that is deliberate twice over. Upstream owns those files above the fence and a refresh would take an edit there with it. And reading the public token would not capture the page value anyway: put data-tone on the same element that carries data-theme and the public token is already remapped by the time this block resolves, so the "page default" would be whatever the tone said. A literal cannot be fooled that way. test/page-defaults.test.js asserts every line here still matches the upstream value it copies, so a refresh that moves a rung fails loudly instead of drifting. */ [data-theme="light"] { --_page-text: var(--dk-color-base-black); --_page-icon-body: var(--dk-color-base-black); --_page-text-neutral-default: var(--dk-color-neutral-600); --_page-text-neutral-subtle: var(--dk-color-neutral-300); --_page-icon-neutral-default: var(--dk-color-neutral-500); --_page-icon-neutral-subtle: var(--dk-color-neutral-300); --_page-text-primary-default: var(--dk-color-primary-500); --_page-text-success-default: var(--dk-color-success-500); --_page-text-error-default: var(--dk-color-error-500); --_page-text-warning-default: var(--dk-color-warning-500); --_page-text-information-default: var(--dk-color-information-500); --_page-icon-primary-default: var(--dk-color-primary-500); --_page-icon-success-default: var(--dk-color-success-500); --_page-icon-error-default: var(--dk-color-error-500); --_page-icon-warning-default: var(--dk-color-warning-500); --_page-icon-information-default: var(--dk-color-information-500); --_page-border-primary-default: var(--dk-color-primary-500); --_page-border-success-default: var(--dk-color-success-500); --_page-border-error-default: var(--dk-color-error-500); --_page-border-warning-default: var(--dk-color-warning-500); --_page-border-information-default: var(--dk-color-information-500); } [data-theme="dark"] { --_page-text: var(--dk-color-base-white); --_page-icon-body: var(--dk-color-base-white); --_page-text-neutral-default: var(--dk-color-neutral-200); --_page-text-neutral-subtle: var(--dk-color-neutral-600); --_page-icon-neutral-default: var(--dk-color-neutral-200); --_page-icon-neutral-subtle: var(--dk-color-neutral-600); --_page-text-primary-default: var(--dk-color-primary-500); --_page-text-success-default: var(--dk-color-success-400); --_page-text-error-default: var(--dk-color-error-400); --_page-text-warning-default: var(--dk-color-warning-400); --_page-text-information-default: var(--dk-color-information-400); --_page-icon-primary-default: var(--dk-color-primary-500); --_page-icon-success-default: var(--dk-color-success-400); --_page-icon-error-default: var(--dk-color-error-400); --_page-icon-warning-default: var(--dk-color-warning-400); --_page-icon-information-default: var(--dk-color-information-400); --_page-border-primary-default: var(--dk-color-primary-500); --_page-border-success-default: var(--dk-color-success-400); --_page-border-error-default: var(--dk-color-error-400); --_page-border-warning-default: var(--dk-color-warning-400); --_page-border-information-default: var(--dk-color-information-400); } /* ── A SOFTER BACKDROP, for things that dim the page without owning it ───── Upstream ships one: --dk-surface-backdrop-black, #000000cc, 80% black, which is what a Modal wants. A Modal is the page for as long as it is open, and a backdrop that heavy says so. A SELECT'S SHEET IS NOT THAT. It is a menu that happens to be full width on a phone, you are three taps into a form behind it, and 80% black turns that form into a black rectangle: the context you are choosing FOR disappears while you choose. 40% dims enough to say "this is on top" and leaves the page legible underneath, which is the figure iOS and Material both land near for sheets as against dialogs. Declared below the fence, in both themes, because upstream owns the block above it and a refresh would take an edit there with it. Same value in light and dark: a scrim is a scrim, and the thing it dims is already whichever theme it is. */ [data-theme="light"], [data-theme="dark"] { --dk-surface-backdrop-soft: #00000066; } /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Surface ─────────────────────────────────────────────────────────── */ /* --dk-surface-raised-default A surface that sits *on top of* the page background — used for floating / elevated UI such as the top navigation bar, floating pills, and overlay boxes (e.g. a legend). Distinct from --dk-surface-card-default so elevated chrome can read as the topmost layer. Light → color-base-white Dark → color-neutral-1000 */ [data-theme="light"] { --dk-surface-raised-default: var(--dk-color-base-white); } [data-theme="dark"] { --dk-surface-raised-default: var(--dk-color-neutral-1000); } /* --dk-surface-raised-active The pressed/active variant of --dk-surface-raised-default. One step beyond --dk-surface-raised-hover in the same direction (slightly darker in light, slightly lighter in dark) so the "rest → hover → active" progression reads as a single coherent emphasis ramp. Light → color-neutral-50 (one step darker than the neutral-25 hover) Dark → color-neutral-800 (one tone lighter than neutral-900) */ [data-theme="light"] { --dk-surface-raised-active: var(--dk-color-neutral-50); } [data-theme="dark"] { --dk-surface-raised-active: var(--dk-color-neutral-800); } /* --dk-surface-raised-hover The hover variant of --dk-surface-raised-default. - LIGHT: one step darker than --dk-surface-raised-default (neutral-25), so the hover surface itself carries the affordance alongside the darker border. - DARK: one tone lighter than --dk-surface-raised-default (neutral-900), so dark-mode hover gets the contrast bump it needs. Light → color-neutral-25 (one step darker than base-white) Dark → color-neutral-900 (one step lighter than neutral-1000) */ [data-theme="light"] { --dk-surface-raised-hover: var(--dk-color-neutral-25); } [data-theme="dark"] { --dk-surface-raised-hover: var(--dk-color-neutral-900); } /* --dk-surface-raised-glass A translucent variant of --dk-surface-raised-default for "frosted glass" floating surfaces (e.g. the IA Explorer detail panel). Pair it with backdrop-filter: blur(...) so the canvas behind shows through, softly blurred — the modern translucent-chrome look. DERIVED, not hand-mixed (2026-08-18): this IS --dk-surface-raised-default at --dk-primitive-opacity-glass, expressed with relative-colour syntax, so it tracks that token through theme, brand AND surface level automatically. It used to hard-code the rgb it already knew (rgba(255,255,255,.72) light / rgba(31,43,45,.72) dark) — identical output, but frozen at the level-0, karmo-brand values. One block per theme is now redundant and kept only for symmetry with the rest of the file. */ [data-theme="light"] { --dk-surface-raised-glass: rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass)); } [data-theme="dark"] { --dk-surface-raised-glass: rgb(from var(--dk-surface-raised-default) r g b / var(--dk-primitive-opacity-glass)); } /* --dk-surface-page-glass A translucent variant of --dk-surface-page-default for frosted bands that sit directly ON the page surface (e.g. the sticky search/filter cluster on the All Projects page). Distinct from --dk-surface-raised-glass, which mirrors the RAISED surface: in dark the raised rgb (neutral-1000) is a step lighter than the page (neutral-1100), so a raised-glass band reads as a visible rectangle over the page background. This one mirrors the page rgb, so the band melts into the page in both themes. Raw rgba for the same reason as above. Light → rgba(255, 255, 255, 0.72) (== surface-page-default @ 72%) Dark → rgba(30, 34, 35, 0.72) (== surface-page-default @ 72%) */ [data-theme="light"] { --dk-surface-page-glass: rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass)); } [data-theme="dark"] { --dk-surface-page-glass: rgb(from var(--dk-surface-default-body) r g b / var(--dk-primitive-opacity-glass)); } /* --dk-surface-canvas-default The "back layer" surface used for canvas-like workspaces (e.g. the IA Explorer flow area, future map / diagram views). Pairs with --dk-surface-raised-default to form a clear two-layer system: raised chrome (topbar, breadcrumb, legend, hint chips) floats *above* the canvas surface. In LIGHT mode the canvas is a hair softer than pure white so floating chrome (which is pure white) reads as elevated against it. In DARK mode the canvas sits at the deepest neutral, matching the page default, so the raised chrome (one step lighter, on neutral-1000) lifts visibly off it. Light → color-neutral-25 Dark → color-neutral-1100 NOTE: Drift core has page-default (white / 1100), page-secondary (neutral-25 / 1000) and page-tertiary (same as secondary), but none of those combine "neutral-25 light + neutral-1100 dark" — which is the specific contrast pair needed for the canvas/raised pairing here. */ [data-theme="light"] { --dk-surface-canvas-default: var(--dk-color-neutral-25); } [data-theme="dark"] { --dk-surface-canvas-default: var(--dk-color-neutral-1100); } /* --dk-surface-inverse-default A high-contrast "inverted" surface — dark in light mode, light in dark mode — for elements that should read as the opposite of the UI regardless of theme (e.g. tooltips, toasts, key callouts, the inverse button variant). Pair with an inverse text/icon colour. DEFINITION (tightened 2026-08-18): exactly THE OPPOSITE THEME'S BODY SURFACE — the dark theme's body in light mode, the light theme's body in dark mode. Previously one step in from each end (1000 / neutral-50), which held back the contrast this token exists to provide; "inverse" now means inverse, and the value is derivable rather than chosen. Light → color-neutral-1100 (= the dark theme's --dk-surface-level-0) Dark → color-base-white (= the light theme's --dk-surface-level-0) Note on white in dark mode: pure white at fill size is the maximum-glare choice, accepted deliberately here — this token's whole purpose is maximum contrast, and anything wanting a softer neutral has plain/raised (buttons) or the nested/raised families (chrome). */ [data-theme="light"] { --dk-surface-inverse-default: var(--dk-color-neutral-1100); } [data-theme="dark"] { --dk-surface-inverse-default: var(--dk-color-base-white); } /* --dk-surface-inverse-hover / --dk-surface-inverse-active Interaction ladder for inverse chrome (the inverse button variant): each state steps BACK toward the ambient theme — lighter in light mode's near-black, darker in dark mode's near-white — so press reads as "settling into" the page. Stepped by PERCEPTION, not by index (learned 2026-08-18 — a first attempt used one ramp step each way and the light states were invisible): the neutral ramp is perceptually COMPRESSED at its deep end, so equal-looking steps need unequal indices. From the rest values above, these land both themes on a ~20-unit-per-state ladder: Light 1100 → 900 → 800 (#1e2223 → #213538 → #37494c) Dark white → 50 → 100 (#ffffff → #e9ebeb → #d3d7d7) */ [data-theme="light"] { --dk-surface-inverse-hover: var(--dk-color-neutral-900); --dk-surface-inverse-active: var(--dk-color-neutral-800); } [data-theme="dark"] { --dk-surface-inverse-hover: var(--dk-color-neutral-50); --dk-surface-inverse-active: var(--dk-color-neutral-100); } /* --dk-text-inverse-default / --dk-icon-inverse-default Content on an inverse surface — the flip of the flip: white on the near-black (light mode), deepest neutral on the near-white (dark mode). */ [data-theme="light"] { --dk-text-inverse-default: var(--dk-color-base-white); --dk-icon-inverse-default: var(--dk-color-base-white); } [data-theme="dark"] { --dk-text-inverse-default: var(--dk-color-neutral-1000); --dk-icon-inverse-default: var(--dk-color-neutral-1000); } /* --dk-surface-inverse-level-0/1/2, --dk-border-inverse-hairline*, --dk-text-inverse-neutral The inverse surface's own ladder and content, added 5.5.0 so data-tone="inverse" has rungs to step through. --dk-surface-inverse-default is already defined as exactly THE OPPOSITE THEME'S BODY SURFACE, so the levels write themselves: they are that theme's ladder, borrowed whole. Light mode's inverse panel is the dark theme's 1100/1000/900; dark mode's is the light theme's white/25/50. The hairline follows the same idea — it should look like the OPPOSITE theme's page hairline does. Dark's page hairline reads 1.70:1, and gray-800 on the light-mode inverse panel is 1.70:1; light's reads 1.20:1, and gray-100 on the dark-mode inverse panel is the closest available at 1.45:1. Hold at level 1 and step once at level 2, the rule 5.1.0 derived. Neutral copy inverts too, to the opposite theme's neutral — without it, neutral text on a light-mode inverse panel sits at roughly 2.3:1. */ [data-theme="light"] { --dk-surface-inverse-level-0: var(--dk-color-neutral-1100); --dk-surface-inverse-level-1: var(--dk-color-neutral-1000); --dk-surface-inverse-level-2: var(--dk-color-neutral-900); --dk-border-inverse-structural: var(--dk-color-neutral-900); --dk-border-inverse-structural-level-2: var(--dk-color-neutral-800); --dk-border-inverse-hairline: var(--dk-color-neutral-800); --dk-border-inverse-hairline-level-1: var(--dk-color-neutral-800); --dk-border-inverse-hairline-level-2: var(--dk-color-neutral-700); --dk-text-inverse-neutral: var(--dk-color-neutral-300); --dk-icon-inverse-neutral: var(--dk-color-neutral-300); } [data-theme="dark"] { --dk-surface-inverse-level-0: var(--dk-color-base-white); --dk-surface-inverse-level-1: var(--dk-color-neutral-25); --dk-surface-inverse-level-2: var(--dk-color-neutral-50); --dk-border-inverse-structural: var(--dk-color-neutral-50); --dk-border-inverse-structural-level-2: var(--dk-color-neutral-100); --dk-border-inverse-hairline: var(--dk-color-neutral-100); --dk-border-inverse-hairline-level-1: var(--dk-color-neutral-100); --dk-border-inverse-hairline-level-2: var(--dk-color-neutral-200); --dk-text-inverse-neutral: var(--dk-color-neutral-600); --dk-icon-inverse-neutral: var(--dk-color-neutral-600); } /* --dk-surface-nested-default A surface for boxes nested INSIDE a raised card (e.g. section items) that must read as distinct from their container. One step toward contrast from --dk-surface-raised-default: slightly darker in light, slightly lighter in dark. Light → color-neutral-25 (just off-white — kept subtle) Dark → color-neutral-900 */ [data-theme="light"] { --dk-surface-nested-default: var(--dk-color-neutral-25); } [data-theme="dark"] { --dk-surface-nested-default: var(--dk-color-neutral-900); } /* --dk-surface-nested-glass Translucent variant of --dk-surface-nested-default — a "frosted glass" version of the nested-box surface, so a nested panel (e.g. the Design System docs-nav) can sit on a glass container and share the sidebar's frosted-chrome look. Pair with backdrop-filter: blur(...). DERIVED from --dk-surface-nested-default at --dk-primitive-opacity-glass (see the note on --dk-surface-raised-glass). This is the token the derivation helped most: the nested surface REMAPS per surface level, so the old frozen rgba kept a level-0 tint on a level-2 panel; it now follows the rung. */ [data-theme="light"] { --dk-surface-nested-glass: rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass)); } [data-theme="dark"] { --dk-surface-nested-glass: rgb(from var(--dk-surface-nested-default) r g b / var(--dk-primitive-opacity-glass)); } /* --dk-surface-primary-default / -hover / -active / -focus (OVERRIDE) The primary-teal interactive surface used for "active / selected" emphasis (focal node fill, active sidebar destination, active phase tab). Core Drift shifts these darker in dark mode, but primary teal is a mid-range brand value that reads well on both light and dark backgrounds (same rationale as --dk-shadow-on-color). We therefore pin them to a single theme-independent "rest → hover → active/focus" emphasis ramp. Rest is the same mid-teal (500) in both themes, but the hover/active/focus steps go in OPPOSITE directions per theme so the interaction always reads as emphasis against its background. -active shares the deepest (focus) step as the pressed-button emphasis: Light: default 500 → hover 600 → active/focus 700 (darken on a light canvas) Dark: default 500 → hover 400 → active/focus 300 (lighten on a dark canvas) */ [data-theme="light"] { --dk-surface-primary-default: var(--dk-color-primary-500); --dk-surface-primary-hover: var(--dk-color-primary-600); --dk-surface-primary-active: var(--dk-color-primary-700); --dk-surface-primary-focus: var(--dk-color-primary-700); } [data-theme="dark"] { --dk-surface-primary-default: var(--dk-color-primary-500); --dk-surface-primary-hover: var(--dk-color-primary-400); --dk-surface-primary-active: var(--dk-color-primary-300); --dk-surface-primary-focus: var(--dk-color-primary-300); } /* --dk-surface-primary-marker Primary fill for small persistent status markers/indicators — e.g. the "new" dot on a section/modal node's items. Unlike --dk-surface-primary-default (a solid 500 in both themes, tuned as a button/node fill), the marker steps one lighter on dark so a tiny dot reads clearly against deep neutral canvas surfaces rather than muddying into them. (Same 500/400 values as the -highlight tokens, but a distinct token: those mark a transient interaction state, this is permanent.) Light → color-primary-500 Dark → color-primary-400 */ [data-theme="light"] { --dk-surface-primary-marker: var(--dk-color-primary-500); } [data-theme="dark"] { --dk-surface-primary-marker: var(--dk-color-primary-400); } /* --dk-surface-neutral-subtle-active Pressed step of the neutral-subtle surface ramp. Core Drift provides --dk-surface-neutral-subtle (default) and --dk-surface-neutral-subtle-hover but stops there; this continues the ramp one step in each theme's direction so a subtle neutral control (e.g. the shift-hint toast's close button) has a press state consistent with its hover. Mirrors the core ramp's primitives: Light: subtle 25 → hover 50 → active 100 Dark: subtle 900 → hover 800 → active 700 */ [data-theme="light"] { --dk-surface-neutral-subtle-active: var(--dk-color-neutral-100); } [data-theme="dark"] { --dk-surface-neutral-subtle-active: var(--dk-color-neutral-700); } /* ── Surface levels (spec: 2026-08-18-drift-surface-levels-design.md) ── The page's explicit 3-rung surface ladder: 0 = body, 1 = first nested section, 2 = deeper nesting. Light darkens down the ladder, dark lightens (elevation-as-lightness, à la Material dark). Sections opt in via the data-surface="1|2" CONTAINER attribute (absent/"0" = body level); each scope remaps ONLY the relative-neutral mapped family, so components consuming raised/nested tokens adapt with zero component changes. --dk-surface-current (the Atlassian --ds-elevation-surface-current pattern) always holds the rung's own colour, for consumers that must relate to their context (cut-out borders, matching fills). NOTE: --dk-surface-canvas-default is NOT a ladder alias — its dark value deliberately sits at body depth (1100) so raised chrome (1000) lifts off the canvas (see its comment above). TWO LAYERS, ON PURPOSE (restructured 2026-09-09 — the theme-inheriting pattern tones already used, spec 2026-09-08-drift-body-followups C8): 1. RAMP tokens --{token}-level-{1,2}, declared on [data-theme="light"] / [data-theme="dark"] like --surface-level-N. Custom properties inherit, so a data-surface section reads them from the NEAREST themed ancestor — the theme it actually sits in. 2. SCOPES [data-theme] [data-surface="N"]:not([data-theme]) that only say `--token: var(--token-level-N)`. Theme-agnostic in value; the bare [data-theme] ancestor leg is there for specificity only ((0,3,0), tying the old per-theme blocks and the tone scopes, which follow this file and win ties by order). The compound leg covers the same-element case (docs previews and probe divs carry both attributes on one node). This CLOSES the 2026-08-18 KNOWN LIMITATION: a data-surface section that is a DESCENDANT of a re-themed panel used to match both themes' descendant legs at equal specificity and take whichever block came later in the file (dark values leaking into a Light preview on a Dark page — the docs papered over it by stamping the preview's theme on every nested section). Now the scope has no theme in it to get wrong. Verified 2026-09-09: every remapped token measures identically to the previous four-block form in both themes at all three levels, and the nested case resolves the inner theme. */ [data-theme="light"] { --dk-surface-level-0: var(--dk-color-base-white); --dk-surface-level-1: var(--dk-color-neutral-25); --dk-surface-level-2: var(--dk-color-neutral-50); --dk-surface-current: var(--dk-surface-level-0); --dk-border-hairline-current: var(--dk-border-raised-default); } [data-theme="dark"] { --dk-surface-level-0: var(--dk-color-neutral-1100); --dk-surface-level-1: var(--dk-color-neutral-1000); --dk-surface-level-2: var(--dk-color-neutral-900); --dk-surface-current: var(--dk-surface-level-0); --dk-border-hairline-current: var(--dk-border-raised-default); } /* --surface-lifted-{default|hover|active} Interactive raised CONTROLS (the button's `raised` variant) — one contrast step off --dk-surface-current in BOTH themes, so the control reads lifted AT REST on every rung (Julio, 2026-08-18: white-on-white raised buttons read as `subtle`, while dark mode — 1000-on-1100 — always read correctly). Light resolves to the nested ramp (one step INTO the page: 25/50/100 at level 0), dark to the raised ramp (one step OUT of the dark: 1000/900/800 at level 0). The per-theme CHOICE OF RAMP is what used to need theme- specific [data-surface] legs; it is now expressed as level tokens that reference the nested/raised level tokens of the same theme, so it inherits like everything else. The three neutral control fills form ONE ladder off --dk-surface-current: plain rest = --dk-surface-current (flat: border-defined) plain hover / lifted rest = --dk-surface-lifted-default (one step off) plain active / lifted hover = --dk-surface-lifted-hover (two steps off) The mapped --surface-raised-* family is untouched by all of this — passive raised CARDS/chrome stay white in light at every rung (repainting them would melt them into the canvas). */ [data-theme="light"] { --dk-surface-lifted-default: var(--dk-surface-nested-default); --dk-surface-lifted-hover: var(--dk-surface-nested-hover); --dk-surface-lifted-active: var(--dk-surface-nested-active); --dk-surface-lifted-default-level-1: var(--dk-surface-nested-default-level-1); --dk-surface-lifted-hover-level-1: var(--dk-surface-nested-hover-level-1); --dk-surface-lifted-active-level-1: var(--dk-surface-nested-active-level-1); --dk-surface-lifted-default-level-2: var(--dk-surface-nested-default-level-2); --dk-surface-lifted-hover-level-2: var(--dk-surface-nested-hover-level-2); --dk-surface-lifted-active-level-2: var(--dk-surface-nested-active-level-2); } [data-theme="dark"] { --dk-surface-lifted-default: var(--dk-surface-raised-default); --dk-surface-lifted-hover: var(--dk-surface-raised-hover); --dk-surface-lifted-active: var(--dk-surface-raised-active); --dk-surface-lifted-default-level-1: var(--dk-surface-raised-default-level-1); --dk-surface-lifted-hover-level-1: var(--dk-surface-raised-hover-level-1); --dk-surface-lifted-active-level-1: var(--dk-surface-raised-active-level-1); --dk-surface-lifted-default-level-2: var(--dk-surface-raised-default-level-2); --dk-surface-lifted-hover-level-2: var(--dk-surface-raised-hover-level-2); --dk-surface-lifted-active-level-2: var(--dk-surface-raised-active-level-2); } /* ── 1. Level ramps — what each rung remaps, per theme ────────────────────── Light darkens one neutral step per rung, dark lightens one. Values are the ones the four per-theme blocks carried until 2026-09-09, unchanged. */ [data-theme="light"] { /* Raised chrome — Passive raised cards/chrome STAY white in light at every rung (two same-day trials stepped it; both superseded — the raised button rides --surface-lifted-*, the plain button rests at --dk-surface-current). Hover/active step one neutral so states that matched the rung's own colour (raised-hover = neutral-25) stay visible. Dark lifts everything one step so "above" keeps meaning "lighter". */ --dk-surface-raised-default-level-1: var(--dk-color-base-white); --dk-surface-raised-default-level-2: var(--dk-color-base-white); --dk-surface-raised-hover-level-1: var(--dk-color-neutral-50); --dk-surface-raised-hover-level-2: var(--dk-color-neutral-100); --dk-surface-raised-active-level-1: var(--dk-color-neutral-100); --dk-surface-raised-active-level-2: var(--dk-color-neutral-200); /* Nested boxes — One step toward contrast from the rung, per level. */ --dk-surface-nested-default-level-1: var(--dk-color-neutral-50); --dk-surface-nested-default-level-2: var(--dk-color-neutral-100); --dk-surface-nested-hover-level-1: var(--dk-color-neutral-100); --dk-surface-nested-hover-level-2: var(--dk-color-neutral-200); --dk-surface-nested-active-level-1: var(--dk-color-neutral-200); --dk-surface-nested-active-level-2: var(--dk-color-neutral-300); /* Hairline borders — Borders step ONE position along the hairline ramp (see the ramp table on --dk-border-raised-default): every role's index = its base index + the surface level. */ --dk-border-raised-default-level-1: var(--dk-color-neutral-100); --dk-border-raised-default-level-2: var(--dk-color-neutral-200); --dk-border-raised-hover-level-1: var(--dk-color-neutral-200); --dk-border-raised-hover-level-2: var(--dk-color-neutral-300); --dk-border-raised-active-level-1: var(--dk-color-neutral-300); --dk-border-raised-active-level-2: var(--dk-color-neutral-400); /* The nested edge HOLDS at level 1 and steps once at level 2, rather than stepping every level. Stepping per level made it climb: measured 1.45 → 1.65 → 1.89 in light, so a nested box at level 2 read 30% stronger than the same box on the page, when depth should if anything be quieter. The surface only moves a shade per rung while a full ramp step is larger, so the two do not cancel — the same over-correction 5.1.0 found for disabled content and 5.6.0 found for tone hairlines. */ --dk-border-nested-default-level-1: var(--dk-color-neutral-100); --dk-border-nested-default-level-2: var(--dk-color-neutral-200); --dk-border-nested-hover-level-1: var(--dk-color-neutral-300); --dk-border-nested-hover-level-2: var(--dk-color-neutral-400); --dk-border-nested-active-level-1: var(--dk-color-neutral-400); --dk-border-nested-active-level-2: var(--dk-color-neutral-500); /* Subtle tint fills — Core rests a whisper off the page (primary/error-50 light, primary-850/error-900 dark), tonally on top of the rung — the whole rest→hover→focus ladder steps one deeper into the tint per level (the subtle button + outline hover fills ride these). */ --dk-surface-primary-subtle-level-1: var(--dk-color-primary-100); --dk-surface-primary-subtle-level-2: var(--dk-color-primary-200); --dk-surface-primary-subtle-hover-level-1: var(--dk-color-primary-200); --dk-surface-primary-subtle-hover-level-2: var(--dk-color-primary-300); --dk-surface-primary-subtle-focus-level-1: var(--dk-color-primary-300); --dk-surface-primary-subtle-focus-level-2: var(--dk-color-primary-400); --dk-surface-error-subtle-level-1: var(--dk-color-error-100); --dk-surface-error-subtle-level-2: var(--dk-color-error-200); --dk-surface-error-subtle-hover-level-1: var(--dk-color-error-200); --dk-surface-error-subtle-hover-level-2: var(--dk-color-error-300); --dk-surface-error-subtle-focus-level-1: var(--dk-color-error-300); --dk-surface-error-subtle-focus-level-2: var(--dk-color-error-400); /* Status text and icon — The paired text/icon steps WITH the tint (core: 500 light / 400 dark) so text-on-tint contrast holds as the fill deepens. Warning and information joined on 2026-09-07 (dk-component-body) so the status family steps as one. Success is NOT here: Karmo's jade alias (primitives/transform.css) is re-declared in the scopes below so it rides primary's step. */ --dk-text-primary-default-level-1: var(--dk-color-primary-600); --dk-text-primary-default-level-2: var(--dk-color-primary-700); --dk-icon-primary-default-level-1: var(--dk-color-primary-600); --dk-icon-primary-default-level-2: var(--dk-color-primary-700); --dk-text-error-default-level-1: var(--dk-color-error-600); --dk-text-error-default-level-2: var(--dk-color-error-700); --dk-icon-error-default-level-1: var(--dk-color-error-600); --dk-icon-error-default-level-2: var(--dk-color-error-700); --dk-text-warning-default-level-1: var(--dk-color-warning-600); --dk-text-warning-default-level-2: var(--dk-color-warning-700); --dk-icon-warning-default-level-1: var(--dk-color-warning-600); --dk-icon-warning-default-level-2: var(--dk-color-warning-700); --dk-text-information-default-level-1: var(--dk-color-information-600); --dk-text-information-default-level-2: var(--dk-color-information-700); --dk-icon-information-default-level-1: var(--dk-color-information-600); --dk-icon-information-default-level-2: var(--dk-color-information-700); /* Neutral text and icon — Body copy steps the same one rung (2026-09-07, dk-component-body) so copy on a card holds the contrast it has on the page. --dk-text-default is fixed by decision — black is black on any grey. */ --dk-text-neutral-default-level-1: var(--dk-color-neutral-700); --dk-text-neutral-default-level-2: var(--dk-color-neutral-800); --dk-icon-neutral-default-level-1: var(--dk-color-neutral-600); --dk-icon-neutral-default-level-2: var(--dk-color-neutral-700); --dk-text-neutral-subtle-level-1: var(--dk-color-neutral-600); --dk-text-neutral-subtle-level-2: var(--dk-color-neutral-700); --dk-icon-neutral-subtle-level-1: var(--dk-color-neutral-400); --dk-icon-neutral-subtle-level-2: var(--dk-color-neutral-500); /* Status HAIRLINES — added 5.3.0. The -default rung is the status colour at full strength (500), which is right for a control's border and far too loud for a RULE: measured against the page, -default runs 2.33:1 (warning) to 4.25:1 (primary) where the neutral hairline every divider actually wants sits at 1.20:1. A status divider was reading three to four times heavier than the plain one beside it. The hairline rung is the 300 in light, landing every family in a 1.68-1.89 band — beside --dk-border-neutral-subtle's 1.80, so a tinted rule and a quiet neutral rule carry the same weight. Ladder: HOLD at level 1, step once at level 2. Stepping every level over-corrects exactly as it did for disabled content in 5.1.0 (error would run 1.72 → 2.49 → 3.48, getting LOUDER the deeper it nests); the surfaces here are the same white → gray-25 → gray-50 ramp, so the same rule applies. */ /* Neutral gets a hairline of its own rather than borrowing --dk-border-neutral-subtle. Two reasons: a token the Divider borrows is a token that moves when its real owner changes it, and the border half of the neutral-subtle family is the only one with no level ladder — text and icon have had one since the levels work, border never did, which is why neutral was the one divider colour that stayed flat while the statuses stepped. Same value as before at level 0, so nothing moves on the page. */ --dk-border-neutral-hairline: var(--dk-color-neutral-200); --dk-border-neutral-hairline-level-1: var(--dk-color-neutral-200); --dk-border-neutral-hairline-level-2: var(--dk-color-neutral-300); --dk-border-primary-hairline: var(--dk-color-primary-300); --dk-border-primary-hairline-level-1: var(--dk-color-primary-300); --dk-border-primary-hairline-level-2: var(--dk-color-primary-400); --dk-border-error-hairline: var(--dk-color-error-300); --dk-border-error-hairline-level-1: var(--dk-color-error-300); --dk-border-error-hairline-level-2: var(--dk-color-error-400); --dk-border-warning-hairline: var(--dk-color-warning-300); --dk-border-warning-hairline-level-1: var(--dk-color-warning-300); --dk-border-warning-hairline-level-2: var(--dk-color-warning-400); --dk-border-information-hairline: var(--dk-color-information-300); --dk-border-information-hairline-level-1: var(--dk-color-information-300); --dk-border-information-hairline-level-2: var(--dk-color-information-400); /* Status borders — added 5.2.0. Status TEXT has stepped per level since 2026-09-07; status BORDERS never did, so an error Input inside a level-2 card drew the same 500 rung as one on the page. Same class of gap as the disabled-content one closed in 5.1.0. Rungs mirror the status text ladder exactly, so a status border and status text of the same status on the same surface stay in step. FOUR families, not five: --dk-border-success-default is aliased to --dk-border-primary-default in mapped/success.css, so success inherits this for free — declaring a success ladder here would shadow the alias and put core Drift's green back on a jade page. -subtle is deliberately absent: those are on-fill tints (error-50 and friends), not a lower rung of the same idea, and stepping a tint that exists to sit ON a fill is not meaningful. PRIMARY DOES NOT STEP AT LEVEL 1 IN LIGHT: mapped/border.css already overrides --dk-border-primary-default's light base to primary-600 (the OVERRIDE, for the focal-node rim) — the exact rung this ladder's level-1 declares below — so level 0 and level 1 render identically; only level 2 (700) reads as a step. Status TEXT's light base is 500, one rung earlier, so text still steps at every level, and the two ladders are mirrored anyway, deliberately, because a border and its paired text on the same surface must agree. Normalising primary's light border base to 500 is a separate change: it would move seven components for a reason unrelated to this ladder. */ --dk-border-primary-default-level-1: var(--dk-color-primary-600); --dk-border-primary-default-level-2: var(--dk-color-primary-700); --dk-border-error-default-level-1: var(--dk-color-error-600); --dk-border-error-default-level-2: var(--dk-color-error-700); --dk-border-warning-default-level-1: var(--dk-color-warning-600); --dk-border-warning-default-level-2: var(--dk-color-warning-700); --dk-border-information-default-level-1: var(--dk-color-information-600); --dk-border-information-default-level-2: var(--dk-color-information-700); /* Disabled CONTENT — the -default rung, which until 5.1.0 had no ladder at all. The -subtle family below is disabled CHROME and steps one rung per level to stay visible against a moving fill; -default is the label a type primitive reads, and it was fixed, so its contrast DECAYED as the surface rose to meet it: 2.88 → 2.64 → 2.41 in light, 5.57 → 5.05 → 4.46 in dark. Disabled copy was quietly getting harder to read the deeper it nested. Stepping it one rung per level like the chrome overshoots the other way (2.88 → 3.44 → 4.18 — disabled getting LOUDER as it nests). What holds the rung's emphasis steady is to HOLD at level 1 and step once at level 2, the nearest available rung to the level-0 anchor at each stop: light 2.88 · 2.64 · 3.14 (gray-400 · 400 · 500) dark 5.57 · 5.05 · 5.70 (gray-400 · 400 · 300) Level 1 is declared rather than omitted so the ladder is greppable and the hold reads as a decision, not an oversight. Only text and icon: the surface and border -default tokens have no consumer in the kit. */ --dk-text-disabled-default-level-1: var(--dk-color-neutral-400); --dk-text-disabled-default-level-2: var(--dk-color-neutral-500); --dk-icon-disabled-default-level-1: var(--dk-color-neutral-400); --dk-icon-disabled-default-level-2: var(--dk-color-neutral-500); /* Disabled chrome — Core's disabled fill EQUALS a rung's colour (neutral-25 light / neutral-1000 dark) — the whole family steps one so disabled controls stay visible. */ --dk-surface-disabled-subtle-level-1: var(--dk-color-neutral-50); --dk-surface-disabled-subtle-level-2: var(--dk-color-neutral-100); --dk-border-disabled-subtle-level-1: var(--dk-color-neutral-200); --dk-border-disabled-subtle-level-2: var(--dk-color-neutral-300); --dk-text-disabled-subtle-level-1: var(--dk-color-neutral-300); --dk-text-disabled-subtle-level-2: var(--dk-color-neutral-400); --dk-icon-disabled-subtle-level-1: var(--dk-color-neutral-200); --dk-icon-disabled-subtle-level-2: var(--dk-color-neutral-300); --dk-border-disabled-elevation-level-1: var(--dk-color-neutral-300); --dk-border-disabled-elevation-level-2: var(--dk-color-neutral-400); } [data-theme="dark"] { /* Raised chrome — Passive raised cards/chrome STAY white in light at every rung (two same-day trials stepped it; both superseded — the raised button rides --surface-lifted-*, the plain button rests at --dk-surface-current). Hover/active step one neutral so states that matched the rung's own colour (raised-hover = neutral-25) stay visible. Dark lifts everything one step so "above" keeps meaning "lighter". */ --dk-surface-raised-default-level-1: var(--dk-color-neutral-900); --dk-surface-raised-default-level-2: var(--dk-color-neutral-800); --dk-surface-raised-hover-level-1: var(--dk-color-neutral-800); --dk-surface-raised-hover-level-2: var(--dk-color-neutral-700); --dk-surface-raised-active-level-1: var(--dk-color-neutral-700); --dk-surface-raised-active-level-2: var(--dk-color-neutral-600); /* Nested boxes — One step toward contrast from the rung, per level. */ --dk-surface-nested-default-level-1: var(--dk-color-neutral-800); --dk-surface-nested-default-level-2: var(--dk-color-neutral-700); --dk-surface-nested-hover-level-1: var(--dk-color-neutral-700); --dk-surface-nested-hover-level-2: var(--dk-color-neutral-600); --dk-surface-nested-active-level-1: var(--dk-color-neutral-600); --dk-surface-nested-active-level-2: var(--dk-color-neutral-500); /* Hairline borders — Borders step ONE position along the hairline ramp (see the ramp table on --dk-border-raised-default): every role's index = its base index + the surface level. */ --dk-border-raised-default-level-1: var(--dk-color-neutral-700); --dk-border-raised-default-level-2: var(--dk-color-neutral-600); --dk-border-raised-hover-level-1: var(--dk-color-neutral-600); --dk-border-raised-hover-level-2: var(--dk-color-neutral-500); --dk-border-raised-active-level-1: var(--dk-color-neutral-500); --dk-border-raised-active-level-2: var(--dk-color-neutral-400); --dk-border-nested-default-level-1: var(--dk-color-neutral-700); --dk-border-nested-default-level-2: var(--dk-color-neutral-600); --dk-border-nested-hover-level-1: var(--dk-color-neutral-500); --dk-border-nested-hover-level-2: var(--dk-color-neutral-400); --dk-border-nested-active-level-1: var(--dk-color-neutral-400); --dk-border-nested-active-level-2: var(--dk-color-neutral-300); /* Subtle tint fills — Core rests a whisper off the page (primary/error-50 light, primary-850/error-900 dark), tonally on top of the rung — the whole rest→hover→focus ladder steps one deeper into the tint per level (the subtle button + outline hover fills ride these). */ --dk-surface-primary-subtle-level-1: var(--dk-color-primary-800); --dk-surface-primary-subtle-level-2: var(--dk-color-primary-700); --dk-surface-primary-subtle-hover-level-1: var(--dk-color-primary-700); --dk-surface-primary-subtle-hover-level-2: var(--dk-color-primary-600); --dk-surface-primary-subtle-focus-level-1: var(--dk-color-primary-600); --dk-surface-primary-subtle-focus-level-2: var(--dk-color-primary-500); --dk-surface-error-subtle-level-1: var(--dk-color-error-800); --dk-surface-error-subtle-level-2: var(--dk-color-error-700); --dk-surface-error-subtle-hover-level-1: var(--dk-color-error-700); --dk-surface-error-subtle-hover-level-2: var(--dk-color-error-600); --dk-surface-error-subtle-focus-level-1: var(--dk-color-error-600); --dk-surface-error-subtle-focus-level-2: var(--dk-color-error-500); /* Status text and icon — The paired text/icon steps WITH the tint (core: 500 light / 400 dark) so text-on-tint contrast holds as the fill deepens. Warning and information joined on 2026-09-07 (dk-component-body) so the status family steps as one. Success is NOT here: Karmo's jade alias (primitives/transform.css) is re-declared in the scopes below so it rides primary's step. */ --dk-text-primary-default-level-1: var(--dk-color-primary-300); --dk-text-primary-default-level-2: var(--dk-color-primary-200); --dk-icon-primary-default-level-1: var(--dk-color-primary-300); --dk-icon-primary-default-level-2: var(--dk-color-primary-200); --dk-text-error-default-level-1: var(--dk-color-error-300); --dk-text-error-default-level-2: var(--dk-color-error-200); --dk-icon-error-default-level-1: var(--dk-color-error-300); --dk-icon-error-default-level-2: var(--dk-color-error-200); --dk-text-warning-default-level-1: var(--dk-color-warning-300); --dk-text-warning-default-level-2: var(--dk-color-warning-200); --dk-icon-warning-default-level-1: var(--dk-color-warning-300); --dk-icon-warning-default-level-2: var(--dk-color-warning-200); --dk-text-information-default-level-1: var(--dk-color-information-300); --dk-text-information-default-level-2: var(--dk-color-information-200); --dk-icon-information-default-level-1: var(--dk-color-information-300); --dk-icon-information-default-level-2: var(--dk-color-information-200); /* Neutral text and icon — Body copy steps the same one rung (2026-09-07, dk-component-body) so copy on a card holds the contrast it has on the page. --dk-text-default is fixed by decision — black is black on any grey. */ --dk-text-neutral-default-level-1: var(--dk-color-neutral-200); --dk-text-neutral-default-level-2: var(--dk-color-neutral-100); --dk-icon-neutral-default-level-1: var(--dk-color-neutral-200); --dk-icon-neutral-default-level-2: var(--dk-color-neutral-100); --dk-text-neutral-subtle-level-1: var(--dk-color-neutral-300); --dk-text-neutral-subtle-level-2: var(--dk-color-neutral-200); --dk-icon-neutral-subtle-level-1: var(--dk-color-neutral-500); --dk-icon-neutral-subtle-level-2: var(--dk-color-neutral-400); /* Status HAIRLINES — see the light block for the reasoning. Dark takes the 800 rung (1.48-1.97 against the page) and steps toward the light end as the surface rises, as every dark ladder does. Same hold-at-1, step-at-2 rule. */ /* Neutral hairline — see the light block. Steps toward the light end as the surface rises, as every dark ladder does. */ --dk-border-neutral-hairline: var(--dk-color-neutral-600); --dk-border-neutral-hairline-level-1: var(--dk-color-neutral-600); --dk-border-neutral-hairline-level-2: var(--dk-color-neutral-500); --dk-border-primary-hairline: var(--dk-color-primary-800); --dk-border-primary-hairline-level-1: var(--dk-color-primary-800); --dk-border-primary-hairline-level-2: var(--dk-color-primary-700); --dk-border-error-hairline: var(--dk-color-error-800); --dk-border-error-hairline-level-1: var(--dk-color-error-800); --dk-border-error-hairline-level-2: var(--dk-color-error-700); --dk-border-warning-hairline: var(--dk-color-warning-800); --dk-border-warning-hairline-level-1: var(--dk-color-warning-800); --dk-border-warning-hairline-level-2: var(--dk-color-warning-700); --dk-border-information-hairline: var(--dk-color-information-800); --dk-border-information-hairline-level-1: var(--dk-color-information-800); --dk-border-information-hairline-level-2: var(--dk-color-information-700); /* Status borders — see the light block for the reasoning. Dark steps toward the light end as the surface rises, as every dark ladder does. primary's base is 500 while the other three are 400, so primary's level-1 is a two-rung step where theirs is one. That asymmetry is copied from the status TEXT ladder rather than corrected: the two families must agree on the same surface, and straightening it would move text in seven components for a reason unrelated to this change. Flagged in the spec. */ --dk-border-primary-default-level-1: var(--dk-color-primary-300); --dk-border-primary-default-level-2: var(--dk-color-primary-200); --dk-border-error-default-level-1: var(--dk-color-error-300); --dk-border-error-default-level-2: var(--dk-color-error-200); --dk-border-warning-default-level-1: var(--dk-color-warning-300); --dk-border-warning-default-level-2: var(--dk-color-warning-200); --dk-border-information-default-level-1: var(--dk-color-information-300); --dk-border-information-default-level-2: var(--dk-color-information-200); /* Disabled CONTENT — see the light block for the reasoning and the numbers. */ --dk-text-disabled-default-level-1: var(--dk-color-neutral-400); --dk-text-disabled-default-level-2: var(--dk-color-neutral-300); --dk-icon-disabled-default-level-1: var(--dk-color-neutral-400); --dk-icon-disabled-default-level-2: var(--dk-color-neutral-300); /* Disabled chrome — Core's disabled fill EQUALS a rung's colour (neutral-25 light / neutral-1000 dark) — the whole family steps one so disabled controls stay visible. */ --dk-surface-disabled-subtle-level-1: var(--dk-color-neutral-900); --dk-surface-disabled-subtle-level-2: var(--dk-color-neutral-800); --dk-border-disabled-subtle-level-1: var(--dk-color-neutral-700); --dk-border-disabled-subtle-level-2: var(--dk-color-neutral-600); --dk-text-disabled-subtle-level-1: var(--dk-color-neutral-600); --dk-text-disabled-subtle-level-2: var(--dk-color-neutral-500); --dk-icon-disabled-subtle-level-1: var(--dk-color-neutral-700); --dk-icon-disabled-subtle-level-2: var(--dk-color-neutral-600); --dk-border-disabled-elevation-level-1: var(--dk-color-neutral-400); --dk-border-disabled-elevation-level-2: var(--dk-color-neutral-500); } /* ── 2. Level scopes — theme-agnostic; each line only points at its ramp ── */ [data-theme] [data-surface="1"]:not([data-theme]), [data-theme][data-surface="1"] { --dk-text-default: var(--_page-text); --dk-icon-default-body: var(--_page-icon-body); --dk-surface-current: var(--dk-surface-level-1); --dk-border-hairline-current: var(--dk-border-raised-default); /* Raised chrome */ --dk-surface-raised-default: var(--dk-surface-raised-default-level-1); --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-1); --dk-surface-raised-active: var(--dk-surface-raised-active-level-1); /* Nested boxes */ --dk-surface-nested-default: var(--dk-surface-nested-default-level-1); --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-1); --dk-surface-nested-active: var(--dk-surface-nested-active-level-1); /* Hairline borders */ --dk-border-raised-default: var(--dk-border-raised-default-level-1); --dk-border-raised-hover: var(--dk-border-raised-hover-level-1); --dk-border-raised-active: var(--dk-border-raised-active-level-1); --dk-border-nested-default: var(--dk-border-nested-default-level-1); --dk-border-nested-hover: var(--dk-border-nested-hover-level-1); --dk-border-nested-active: var(--dk-border-nested-active-level-1); /* Subtle tint fills */ --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-1); --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-1); --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-1); --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-1); --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-1); --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-1); /* Status text and icon */ --dk-text-primary-default: var(--dk-text-primary-default-level-1); --dk-icon-primary-default: var(--dk-icon-primary-default-level-1); --dk-text-error-default: var(--dk-text-error-default-level-1); --dk-icon-error-default: var(--dk-icon-error-default-level-1); --dk-text-warning-default: var(--dk-text-warning-default-level-1); --dk-icon-warning-default: var(--dk-icon-warning-default-level-1); --dk-text-information-default: var(--dk-text-information-default-level-1); --dk-icon-information-default: var(--dk-icon-information-default-level-1); /* Neutral text and icon */ --dk-text-neutral-default: var(--dk-text-neutral-default-level-1); --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1); --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1); --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1); /* Hairlines */ --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-1); --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-1); --dk-border-error-hairline: var(--dk-border-error-hairline-level-1); --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-1); --dk-border-information-hairline: var(--dk-border-information-hairline-level-1); /* Status borders */ --dk-border-primary-default: var(--dk-border-primary-default-level-1); --dk-border-error-default: var(--dk-border-error-default-level-1); --dk-border-warning-default: var(--dk-border-warning-default-level-1); --dk-border-information-default: var(--dk-border-information-default-level-1); /* Disabled content */ --dk-text-disabled-default: var(--dk-text-disabled-default-level-1); --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-1); /* Disabled chrome */ --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-1); --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-1); --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-1); --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-1); --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-1); /* Lifted controls (see --surface-lifted-* above) */ --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-1); --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-1); --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-1); /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias resolves once on the themed element, so it is re-declared here to re-resolve against this rung's primary — never as a success-N primitive, which would swap jade for core green (check:contrast caught that, 2026-09-08). */ --dk-text-success-default: var(--dk-text-primary-default); --dk-icon-success-default: var(--dk-icon-primary-default); } [data-theme] [data-surface="2"]:not([data-theme]), [data-theme][data-surface="2"] { --dk-text-default: var(--_page-text); --dk-icon-default-body: var(--_page-icon-body); --dk-surface-current: var(--dk-surface-level-2); --dk-border-hairline-current: var(--dk-border-raised-default); /* Raised chrome */ --dk-surface-raised-default: var(--dk-surface-raised-default-level-2); --dk-surface-raised-hover: var(--dk-surface-raised-hover-level-2); --dk-surface-raised-active: var(--dk-surface-raised-active-level-2); /* Nested boxes */ --dk-surface-nested-default: var(--dk-surface-nested-default-level-2); --dk-surface-nested-hover: var(--dk-surface-nested-hover-level-2); --dk-surface-nested-active: var(--dk-surface-nested-active-level-2); /* Hairline borders */ --dk-border-raised-default: var(--dk-border-raised-default-level-2); --dk-border-raised-hover: var(--dk-border-raised-hover-level-2); --dk-border-raised-active: var(--dk-border-raised-active-level-2); --dk-border-nested-default: var(--dk-border-nested-default-level-2); --dk-border-nested-hover: var(--dk-border-nested-hover-level-2); --dk-border-nested-active: var(--dk-border-nested-active-level-2); /* Subtle tint fills */ --dk-surface-primary-subtle: var(--dk-surface-primary-subtle-level-2); --dk-surface-primary-subtle-hover: var(--dk-surface-primary-subtle-hover-level-2); --dk-surface-primary-subtle-focus: var(--dk-surface-primary-subtle-focus-level-2); --dk-surface-error-subtle: var(--dk-surface-error-subtle-level-2); --dk-surface-error-subtle-hover: var(--dk-surface-error-subtle-hover-level-2); --dk-surface-error-subtle-focus: var(--dk-surface-error-subtle-focus-level-2); /* Status text and icon */ --dk-text-primary-default: var(--dk-text-primary-default-level-2); --dk-icon-primary-default: var(--dk-icon-primary-default-level-2); --dk-text-error-default: var(--dk-text-error-default-level-2); --dk-icon-error-default: var(--dk-icon-error-default-level-2); --dk-text-warning-default: var(--dk-text-warning-default-level-2); --dk-icon-warning-default: var(--dk-icon-warning-default-level-2); --dk-text-information-default: var(--dk-text-information-default-level-2); --dk-icon-information-default: var(--dk-icon-information-default-level-2); /* Neutral text and icon */ --dk-text-neutral-default: var(--dk-text-neutral-default-level-2); --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2); --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2); --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2); /* Hairlines */ --dk-border-neutral-hairline: var(--dk-border-neutral-hairline-level-2); --dk-border-primary-hairline: var(--dk-border-primary-hairline-level-2); --dk-border-error-hairline: var(--dk-border-error-hairline-level-2); --dk-border-warning-hairline: var(--dk-border-warning-hairline-level-2); --dk-border-information-hairline: var(--dk-border-information-hairline-level-2); /* Status borders */ --dk-border-primary-default: var(--dk-border-primary-default-level-2); --dk-border-error-default: var(--dk-border-error-default-level-2); --dk-border-warning-default: var(--dk-border-warning-default-level-2); --dk-border-information-default: var(--dk-border-information-default-level-2); /* Disabled content */ --dk-text-disabled-default: var(--dk-text-disabled-default-level-2); --dk-icon-disabled-default: var(--dk-icon-disabled-default-level-2); /* Disabled chrome */ --dk-surface-disabled-subtle: var(--dk-surface-disabled-subtle-level-2); --dk-border-disabled-subtle: var(--dk-border-disabled-subtle-level-2); --dk-text-disabled-subtle: var(--dk-text-disabled-subtle-level-2); --dk-icon-disabled-subtle: var(--dk-icon-disabled-subtle-level-2); --dk-border-disabled-elevation: var(--dk-border-disabled-elevation-level-2); /* Lifted controls (see --surface-lifted-* above) */ --dk-surface-lifted-default: var(--dk-surface-lifted-default-level-2); --dk-surface-lifted-hover: var(--dk-surface-lifted-hover-level-2); --dk-surface-lifted-active: var(--dk-surface-lifted-active-level-2); /* And the border that sits on them, which by this rung had been caught up by the surface it was drawn against. See border.css for the measurement. */ --dk-border-control-default: var(--dk-border-control-default-level-2); --dk-border-control-hover: var(--dk-border-control-hover-level-2); --dk-border-control-active: var(--dk-border-control-active-level-2); /* Success IS jade at Karmo (primitives/transform.css). The theme-level alias resolves once on the themed element, so it is re-declared here to re-resolve against this rung's primary — never as a success-N primitive, which would swap jade for core green (check:contrast caught that, 2026-09-08). */ --dk-text-success-default: var(--dk-text-primary-default); --dk-icon-success-default: var(--dk-icon-primary-default); } /* LEVEL 0 IS A REAL SCOPE NOW. The attribute table has always said "absent or 0 = the page", and absent does mean that, but 0 selected nothing at all: a container could not declare itself back to the page level from inside a tone. Everything levels 1 and 2 remap is restored here, so a
inside a solid panel is the page again. Found on Body's "On surfaces" section, where the level 0 card paints the page white and sat inside a solid preview: its status copy was still the rung 50 the on-solid outline rule hands a non-matching status, pale text on white at 1.09:1. Restoring only text-default and icon-default-body fixed the two obvious lines and left the other four unreadable, which is the same half-a-pair fault this file keeps producing. */ [data-theme] [data-surface="0"]:not([data-theme]), [data-theme][data-surface="0"] { --dk-text-default: var(--_page-text); --dk-icon-default-body: var(--_page-icon-body); --dk-text-neutral-default: var(--_page-text-neutral-default); --dk-text-neutral-subtle: var(--_page-text-neutral-subtle); --dk-icon-neutral-default: var(--_page-icon-neutral-default); --dk-icon-neutral-subtle: var(--_page-icon-neutral-subtle); --dk-text-primary-default: var(--_page-text-primary-default); --dk-text-success-default: var(--_page-text-success-default); --dk-text-error-default: var(--_page-text-error-default); --dk-text-warning-default: var(--_page-text-warning-default); --dk-text-information-default: var(--_page-text-information-default); --dk-icon-primary-default: var(--_page-icon-primary-default); --dk-icon-success-default: var(--_page-icon-success-default); --dk-icon-error-default: var(--_page-icon-error-default); --dk-icon-warning-default: var(--_page-icon-warning-default); --dk-icon-information-default: var(--_page-icon-information-default); --dk-border-primary-default: var(--_page-border-primary-default); --dk-border-success-default: var(--_page-border-success-default); --dk-border-error-default: var(--_page-border-error-default); --dk-border-warning-default: var(--_page-border-warning-default); --dk-border-information-default: var(--_page-border-information-default); } /* ════════════════════════════════════════ drift-kit:layer tokens/mapped/border.css ════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/border ═══ */ :root, [data-theme="light"] { --dk-border-base-black: var(--dk-color-base-black); --dk-border-base-white: var(--dk-color-base-white); --dk-border-card-default: var(--dk-color-neutral-50); --dk-border-card-secondary: var(--dk-color-neutral-100); --dk-border-default-body: var(--dk-color-base-black); --dk-border-default-body-reverse: var(--dk-color-base-white); --dk-border-disabled-default: var(--dk-color-neutral-400); --dk-border-disabled-elevation: var(--dk-color-neutral-200); --dk-border-disabled-on-color: var(--dk-color-neutral-200); --dk-border-disabled-subtle: var(--dk-color-neutral-50); --dk-border-error-default: var(--dk-color-error-500); --dk-border-error-elevation: var(--dk-color-error-800); --dk-border-error-elevation-focus: var(--dk-color-error-700); --dk-border-error-elevation-hover: var(--dk-color-error-700); --dk-border-error-focus: var(--dk-color-error-700); --dk-border-error-hover: var(--dk-color-error-600); --dk-border-error-subtle: var(--dk-color-error-50); --dk-border-error-subtle-focus: var(--dk-color-error-200); --dk-border-error-subtle-hover: var(--dk-color-error-100); --dk-border-glass-default: var(--dk-color-neutral-50); --dk-border-information-default: var(--dk-color-information-500); --dk-border-information-elevation: var(--dk-color-information-800); --dk-border-information-elevation-focus: var(--dk-color-information-700); --dk-border-information-elevation-hover: var(--dk-color-information-700); --dk-border-information-focus: var(--dk-color-information-700); --dk-border-information-hover: var(--dk-color-information-600); --dk-border-information-subtle: var(--dk-color-information-50); --dk-border-information-subtle-focus: var(--dk-color-information-200); --dk-border-information-subtle-hover: var(--dk-color-information-100); --dk-border-neutral-default: var(--dk-color-neutral-600); --dk-border-neutral-elevation: var(--dk-color-neutral-800); --dk-border-neutral-elevation-focus: var(--dk-color-neutral-700); --dk-border-neutral-elevation-hover: var(--dk-color-neutral-700); --dk-border-neutral-focus: var(--dk-color-neutral-800); --dk-border-neutral-hover: var(--dk-color-neutral-700); --dk-border-neutral-subtle: var(--dk-color-neutral-200); --dk-border-neutral-subtle-focus: var(--dk-color-neutral-500); --dk-border-neutral-subtle-hover: var(--dk-color-neutral-400); --dk-border-page-default: var(--dk-color-neutral-50); --dk-border-page-secondary: var(--dk-color-neutral-200); --dk-border-primary-default: var(--dk-color-primary-500); --dk-border-primary-disabled: var(--dk-color-primary-300); --dk-border-primary-elevation: var(--dk-color-primary-800); --dk-border-primary-elevation-focus: var(--dk-color-primary-700); --dk-border-primary-elevation-hover: var(--dk-color-primary-700); --dk-border-primary-focus: var(--dk-color-primary-700); --dk-border-primary-hover: var(--dk-color-primary-600); --dk-border-primary-on-color: var(--dk-color-primary-200); --dk-border-primary-subtle: var(--dk-color-primary-100); --dk-border-primary-subtle-focus: var(--dk-color-primary-300); --dk-border-primary-subtle-hover: var(--dk-color-primary-200); --dk-border-success-default: var(--dk-color-success-500); --dk-border-success-elevation: var(--dk-color-success-800); --dk-border-success-elevation-focus: var(--dk-color-success-700); --dk-border-success-elevation-hover: var(--dk-color-success-700); --dk-border-success-focus: var(--dk-color-success-700); --dk-border-success-hover: var(--dk-color-success-600); --dk-border-success-subtle: var(--dk-color-success-50); --dk-border-success-subtle-focus: var(--dk-color-success-200); --dk-border-success-subtle-hover: var(--dk-color-success-100); --dk-border-warning-default: var(--dk-color-warning-500); --dk-border-warning-elevation: var(--dk-color-warning-800); --dk-border-warning-elevation-focus: var(--dk-color-warning-700); --dk-border-warning-elevation-hover: var(--dk-color-warning-700); --dk-border-warning-focus: var(--dk-color-warning-700); --dk-border-warning-hover: var(--dk-color-warning-600); --dk-border-warning-subtle: var(--dk-color-warning-50); --dk-border-warning-subtle-focus: var(--dk-color-warning-200); --dk-border-warning-subtle-hover: var(--dk-color-warning-100); } [data-theme="dark"] { --dk-border-base-black: var(--dk-color-base-black); --dk-border-base-white: var(--dk-color-base-white); --dk-border-card-default: var(--dk-color-neutral-600); --dk-border-card-secondary: var(--dk-color-neutral-500); --dk-border-default-body: var(--dk-color-base-white); --dk-border-default-body-reverse: var(--dk-color-base-black); --dk-border-disabled-default: var(--dk-color-neutral-400); --dk-border-disabled-elevation: var(--dk-color-neutral-300); --dk-border-disabled-on-color: var(--dk-color-neutral-700); --dk-border-disabled-subtle: var(--dk-color-neutral-800); --dk-border-error-default: var(--dk-color-error-400); --dk-border-error-elevation: var(--dk-color-error-800); --dk-border-error-elevation-focus: var(--dk-color-error-700); --dk-border-error-elevation-hover: var(--dk-color-error-700); --dk-border-error-focus: var(--dk-color-error-200); --dk-border-error-hover: var(--dk-color-error-300); --dk-border-error-subtle: var(--dk-color-error-50); --dk-border-error-subtle-focus: var(--dk-color-error-200); --dk-border-error-subtle-hover: var(--dk-color-error-100); --dk-border-glass-default: var(--dk-color-neutral-800); --dk-border-information-default: var(--dk-color-information-400); --dk-border-information-elevation: var(--dk-color-information-800); --dk-border-information-elevation-focus: var(--dk-color-information-700); --dk-border-information-elevation-hover: var(--dk-color-information-700); --dk-border-information-focus: var(--dk-color-information-200); --dk-border-information-hover: var(--dk-color-information-300); --dk-border-information-subtle: var(--dk-color-information-50); --dk-border-information-subtle-focus: var(--dk-color-information-200); --dk-border-information-subtle-hover: var(--dk-color-information-100); --dk-border-neutral-default: var(--dk-color-neutral-300); --dk-border-neutral-elevation: var(--dk-color-neutral-800); --dk-border-neutral-elevation-focus: var(--dk-color-neutral-700); --dk-border-neutral-elevation-hover: var(--dk-color-neutral-700); --dk-border-neutral-focus: var(--dk-color-neutral-100); --dk-border-neutral-hover: var(--dk-color-neutral-200); --dk-border-neutral-subtle: var(--dk-color-neutral-600); --dk-border-neutral-subtle-focus: var(--dk-color-neutral-400); --dk-border-neutral-subtle-hover: var(--dk-color-neutral-500); --dk-border-page-default: var(--dk-color-neutral-700); --dk-border-page-secondary: var(--dk-color-neutral-800); --dk-border-primary-default: var(--dk-color-primary-500); --dk-border-primary-disabled: var(--dk-color-primary-700); --dk-border-primary-elevation: var(--dk-color-primary-800); --dk-border-primary-elevation-focus: var(--dk-color-primary-600); --dk-border-primary-elevation-hover: var(--dk-color-primary-700); --dk-border-primary-focus: var(--dk-color-primary-300); --dk-border-primary-hover: var(--dk-color-primary-400); --dk-border-primary-on-color: var(--dk-color-primary-700); --dk-border-primary-subtle: var(--dk-color-primary-800); --dk-border-primary-subtle-focus: var(--dk-color-primary-600); --dk-border-primary-subtle-hover: var(--dk-color-primary-700); --dk-border-success-default: var(--dk-color-success-400); --dk-border-success-elevation: var(--dk-color-success-800); --dk-border-success-elevation-focus: var(--dk-color-success-700); --dk-border-success-elevation-hover: var(--dk-color-success-700); --dk-border-success-focus: var(--dk-color-success-200); --dk-border-success-hover: var(--dk-color-success-300); --dk-border-success-subtle: var(--dk-color-success-50); --dk-border-success-subtle-focus: var(--dk-color-success-200); --dk-border-success-subtle-hover: var(--dk-color-success-100); --dk-border-warning-default: var(--dk-color-warning-400); --dk-border-warning-elevation: var(--dk-color-warning-800); --dk-border-warning-elevation-focus: var(--dk-color-warning-700); --dk-border-warning-elevation-hover: var(--dk-color-warning-700); --dk-border-warning-focus: var(--dk-color-warning-200); --dk-border-warning-hover: var(--dk-color-warning-300); --dk-border-warning-subtle: var(--dk-color-warning-50); --dk-border-warning-subtle-focus: var(--dk-color-warning-200); --dk-border-warning-subtle-hover: var(--dk-color-warning-100); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Border ─────────────────────────────────────────────────────────── */ /* --dk-border-raised-default The companion border to --dk-surface-raised-default. Renamed from the earlier --border-neutral-soft so the surface/border pairing is obvious at the call site (raised surface + raised border = consistent floating- chrome treatment). Light → color-neutral-50 Dark → color-neutral-800 ── THE HAIRLINE RAMP (refactor 2026-08-18) ── Every raised- and nested-border value across this file, INCLUDING the surface-level remaps, is one position on a single five-step ramp: pos 0 1 2 3 4 5 Light n-50 n-100 n-200 n-300 n-400 n-500 Dark n-800 n-700 n-600 n-500 n-400 n-300 ── TWO LADDERS ON ONE RAMP, BY WHETHER A SHADOW IS PRESENT (2026-08-18) ── Total edge definition = border + shadow, so an element carrying a shadow needs LESS border than one defined by its border alone. Two families read off this ramp at different starting positions: --border-raised-* pos 0/1/2 — elevated chrome that ALSO has a shadow: cards, modals, snippets, the sidebar. --border-control-* pos 1/2/3 in LIGHT (pos 0/1/2 in dark) — controls with NO resting shadow, where the hairline is the only thing defining the edge: plain/raised buttons. History worth keeping: pos 0 was briefly retuned to a minted n-75 half-step for EVERYBODY, which fixed the button and immediately made the shadowed cards read too heavy (Julio) — the tell that one token was serving two roles. The control family was split out at n-75, then tuned one further step to n-100 on the same day; the half-step primitive was removed once nothing consumed it (re-mint it if a value between 50 and 100 is ever wanted again). Roles read off it by index, and a surface level shifts the index by the level number — exactly how the surface ladder itself works: raised-default = pos 0+level nested-default = pos 1+level raised-hover = pos 1+level nested-hover = pos 2+level raised-active = pos 2+level nested-active = pos 3+level Six positions exist because nested-active at level 2 reaches pos 5. Making the ramp explicit immediately caught a bug it had been hiding: the level blocks used to remap only nested-DEFAULT, so at level 2 the nested hover border came out LIGHTER than its own resting border. All six roles shift together now. These were 28 RAW HEX declarations (a hand-authored pure-grey ladder in light, #EBEBEB→#B3B3B3 at −14/step, and a tinted one in dark) — the only colours in the system with no primitive backing. Three problems that fixed: 1. They were BRAND-BLIND. --color-neutral-* resolves to the gray family for karmo and the stale family for the other brand; raw hex ignored that, so borders stayed karmo-toned on every brand. 2. They couldn't be retuned centrally, and the surface-levels work had to EXTRAPOLATE four new ones by eye for want of a ramp to index. 3. The −14 spacing sat BELOW the ~20-unit perceptibility threshold (see --dk-surface-inverse-hover), so border state changes were marginal; the scale's native ~22 spacing makes them read. On the tint question (Julio's call — pure grey, no new scale): at the light end the scale's own tint is 2–4 units, i.e. visually pure already, so pos 0 lands Δ2 from the old #EBEBEB. At the dark end the tint is large and WANTED — it matches the teal-tinted dark surfaces, and a truly pure grey hairline would read warm against them. So the scale gives both for free and no new primitives were needed. Still raw, deliberately: --dk-border-raised-subtle and the two *-glass borders, which are translucent (rgba) rather than ramp positions. */ [data-theme="light"] { --dk-border-raised-default: var(--dk-color-neutral-50); } [data-theme="dark"] { --dk-border-raised-default: var(--dk-color-neutral-800); } /* --dk-border-raised-hover The hover variant of --dk-border-raised-default, mirroring the surface-side --dk-surface-raised-hover. One tone darker in light, one tone lighter in dark, so the border subtly strengthens on hover in both themes. Light → color-neutral-100 (hairline ramp pos 1 — see the ramp table Dark → color-neutral-700 on --dk-border-raised-default above) */ [data-theme="light"] { --dk-border-raised-hover: var(--dk-color-neutral-100); } [data-theme="dark"] { --dk-border-raised-hover: var(--dk-color-neutral-700); } /* --dk-border-raised-active The pressed/active variant — one tone beyond --dk-border-raised-hover in the same direction. Combined with --dk-surface-raised-active they form the third step in a "rest → hover → active" progression. Light → color-neutral-200 (hairline ramp pos 2) Dark → color-neutral-600 */ [data-theme="light"] { --dk-border-raised-active: var(--dk-color-neutral-200); } [data-theme="dark"] { --dk-border-raised-active: var(--dk-color-neutral-600); } /* --dk-border-control-default / -hover / -active The hairline ladder for an interactive control that carries NO shadow, so its border is the ONLY thing defining its edge — the `plain` and `raised` button variants today. Stronger than --dk-border-raised-default, which is tuned for elevated chrome whose shadow shares the work (see the two-resting-positions note on --dk-border-raised-default above). WHEN TO USE WHICH — mechanical, not a judgement call: does the element have a resting box-shadow? Yes → the --border-raised-* family. No → this. In LIGHT this is the chrome ramp shifted one position (pos 1/2/3 against chrome's 0/1/2), which is why it needs its own hover/active rather than borrowing chrome's: resting on chrome's pos 1 would collide with chrome's HOVER value and the control would stop changing on hover. Keeping the whole ladder shifted preserves a ~22-unit step per state. In DARK it simply equals the chrome ramp (pos 0/1/2) — dark hairlines were never reported as weak, and that ramp's strides are tighter anyway. The asymmetry is tuned by eye, not derived; adjust it the same way. Light → neutral-100 / 200 / 300 (tuned darker twice on 2026-08-18) Dark → neutral-800 / 700 / 600 Candidates for adopting this later, once reviewed on screen: unshadowed chips, toggles, and any input/select that reads too faint at rest. */ /* THE LEVEL-2 RUNGS EXIST BECAUSE THE SURFACE UNDER THEM CATCHES THEM UP. --dk-surface-lifted-default steps down the ramp with data-surface, 25 to 50 to 100 in light, while this border stayed pinned at 100: by level 2 the border and the control's own background were THE SAME COLOUR and the button read as borderless. Dark does the same thing one rung apart, #1f2b2d to neutral-900 to neutral-800 against a pinned neutral-800. Reported on the raised button, measured at a border-to-background contrast of exactly 1.000 at level 2 where every other level sits near 1.33 in light and 1.54 in dark. ONLY LEVEL 2 IS REMAPPED, deliberately. Level 1 already runs a touch flatter than level 0 (1.213 against 1.329) and reads correctly on screen, and moving it a whole rung would overshoot level 0's own contrast rather than match it: the ramp has no rung between 100 and 200 to land on. The defect is the collision, not the gradient. */ [data-theme="light"] { --dk-border-control-default: var(--dk-color-neutral-100); --dk-border-control-hover: var(--dk-color-neutral-200); --dk-border-control-active: var(--dk-color-neutral-300); --dk-border-control-default-level-2: var(--dk-color-neutral-200); --dk-border-control-hover-level-2: var(--dk-color-neutral-300); --dk-border-control-active-level-2: var(--dk-color-neutral-400); } [data-theme="dark"] { --dk-border-control-default: var(--dk-color-neutral-800); --dk-border-control-hover: var(--dk-color-neutral-700); --dk-border-control-active: var(--dk-color-neutral-600); /* Lighter, not darker: on a dark surface the border is the lighter of the two, so following the surface down the ramp means going UP these rungs. */ --dk-border-control-default-level-2: var(--dk-color-neutral-700); --dk-border-control-hover-level-2: var(--dk-color-neutral-600); --dk-border-control-active-level-2: var(--dk-color-neutral-500); } /* --dk-border-raised-subtle An extra-faint companion border for raised/recessed sections where even --dk-border-raised-default (ramp pos 0) reads as too hard a line against a near-white surface (e.g. the modal's "use design system" switch-field on --dk-surface-neutral-subtle). Translucent rather than a fixed grey so it stays barely-there on any light surface (and a faint light edge on dark) — no neutral primitive sits between gray-25 and gray-50, so a raw low-opacity value is the only way to land between them. Light → rgba(0,0,0,0.025) (~6 tonal units on an off-white surface) Dark → rgba(255,255,255,0.05) */ [data-theme="light"] { --dk-border-raised-subtle: rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle)); } [data-theme="dark"] { --dk-border-raised-subtle: rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse)); } /* --dk-border-nested-default Companion border for --dk-surface-nested-default. One tone past --dk-border-raised-default (darker in light, lighter in dark) so a nested box reads cleanly against both its own surface and the card behind it. Light → color-neutral-100 (hairline ramp pos 1) Dark → color-neutral-700 */ [data-theme="light"] { --dk-border-nested-default: var(--dk-color-neutral-100); } [data-theme="dark"] { --dk-border-nested-default: var(--dk-color-neutral-700); } /* --dk-border-nested-glass Companion border for --dk-surface-nested-glass — a translucent, deliberately SUBTLE edge tuned close to the frosted surface's own tone (barely a step of contrast) so the panel edge whispers rather than drawing a line. Same ~72% alpha as the surface-glass sibling. DERIVED (2026-08-18) from --dk-border-raised-default (hairline ramp pos 0) at --dk-primitive-opacity-glass: the old hand-picked rgb sat within 2-5 units of that token in both themes, and pos 0 — the softest hairline in the ramp — is the right base for an edge meant to whisper. NOTE it no longer relates to --dk-border-nested-default, which moved two ramp positions darker during the control/chrome split. */ [data-theme="light"] { --dk-border-nested-glass: rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass)); } [data-theme="dark"] { --dk-border-nested-glass: rgb(from var(--dk-border-raised-default) r g b / var(--dk-primitive-opacity-glass)); } /* --dk-border-primary-default / -hover / -active / -focus (OVERRIDE) The primary-teal border that pairs with the --surface-primary-* fills (focal node, active sidebar destination, active phase tab). Steps in OPPOSITE directions per theme so the border always deepens the rim against its canvas. -active shares the deepest (focus) step as the pressed-button emphasis: Light: default 600 → hover 700 → active/focus 800 (darker than the fill) Dark: default 400 → hover 300 → active/focus 200 (lighter than the fill) */ [data-theme="light"] { --dk-border-primary-default: var(--dk-color-primary-600); --dk-border-primary-hover: var(--dk-color-primary-700); --dk-border-primary-active: var(--dk-color-primary-800); --dk-border-primary-focus: var(--dk-color-primary-800); } [data-theme="dark"] { --dk-border-primary-default: var(--dk-color-primary-400); --dk-border-primary-hover: var(--dk-color-primary-300); --dk-border-primary-active: var(--dk-color-primary-200); --dk-border-primary-focus: var(--dk-color-primary-200); } /* --dk-surface-card-active (NEW) Core Drift defines the card surface as default / hover / focus but has no -active step. We mirror --dk-surface-card-focus so a pressed/active card surface — e.g. the Select trigger's :active state — matches its focus look exactly: Light: --dk-color-neutral-50 (same value as --dk-surface-card-focus) Dark: --dk-color-neutral-800 (same value as --dk-surface-card-focus) */ [data-theme="light"] { --dk-surface-card-active: var(--dk-color-neutral-50); } [data-theme="dark"] { --dk-surface-card-active: var(--dk-color-neutral-800); } /* --dk-border-primary-guide (NEW) A soft primary guide line — used for the loop-nesting indicator that runs down the side of nested section items (inspector + node). Recedes against its surface in BOTH themes (decorative, not a structural rim): pale teal in light, a mid teal in dark that reads equivalently quiet against the dark canvas. (Deliberately NOT --dk-border-primary-subtle, which the action-node border ramp already references via fallback — a shared name would perturb those borders.) Light: primary 200 Dark: primary 600 */ [data-theme="light"] { --dk-border-primary-guide: var(--dk-color-primary-200); } [data-theme="dark"] { --dk-border-primary-guide: var(--dk-color-primary-600); } /* --dk-border-{error,warning,information}-subtle / -subtle-hover / -subtle-focus OVERRIDING UPSTREAM. The upstream block at the top of this file declares these three families IDENTICALLY in its light and dark blocks (50/100/200 both times), which is not a choice anyone made: every other rung in the same families flips (error-default 500→400, -hover 600→300, -focus 700→200), and the two families someone actually looked at, primary and neutral, flip their subtle trios too. The status trios were simply left behind. Two things were measured wrong before this override (2026-09-13, reported from the Disko session): Light --dk-border-error-subtle resolved to the SAME colour as the fill it outlines, --dk-surface-error-subtle. 1.00:1. The token drew nothing at all, which is why nobody noticed it in light. Dark the fill flips to -900 and the border did not, so a near-white hairline (#fdf2f2) blazed around a dark maroon panel at 9.69:1. Warning was worse, 14.69:1; information 10.03:1. The rungs here are not new: they are the ones --dk-border-primary-subtle already uses (light 100/200/300, dark 800/700/600), so all six tones now read off one shape. That lands every status at 1.06-1.10:1 in light and 1.23-1.63:1 in dark against its own subtle fill, next to primary's 1.12 / 1.27 and neutral's 1.65 / 2.58. Success needs nothing here: mapped/success.css already points its subtle border trio at primary's, because success IS jade at Karmo. Not to be confused with --dk-border-{status}-structural-on-subtle in mapped/tone.css, which is the LEVEL-AWARE border for a tone-scoped subtle panel and already flips correctly. That one is a step stronger by design (light -200, dark -800); this is the flat family with hover and focus rungs. */ [data-theme="light"] { --dk-border-error-subtle: var(--dk-color-error-100); --dk-border-error-subtle-hover: var(--dk-color-error-200); --dk-border-error-subtle-focus: var(--dk-color-error-300); --dk-border-warning-subtle: var(--dk-color-warning-100); --dk-border-warning-subtle-hover: var(--dk-color-warning-200); --dk-border-warning-subtle-focus: var(--dk-color-warning-300); --dk-border-information-subtle: var(--dk-color-information-100); --dk-border-information-subtle-hover: var(--dk-color-information-200); --dk-border-information-subtle-focus: var(--dk-color-information-300); } [data-theme="dark"] { --dk-border-error-subtle: var(--dk-color-error-800); --dk-border-error-subtle-hover: var(--dk-color-error-700); --dk-border-error-subtle-focus: var(--dk-color-error-600); --dk-border-warning-subtle: var(--dk-color-warning-800); --dk-border-warning-subtle-hover: var(--dk-color-warning-700); --dk-border-warning-subtle-focus: var(--dk-color-warning-600); --dk-border-information-subtle: var(--dk-color-information-800); --dk-border-information-subtle-hover: var(--dk-color-information-700); --dk-border-information-subtle-focus: var(--dk-color-information-600); } /* --dk-border-field-* — THE RESTING BORDER OF AN OUTLINED CONTROL --------------------------------------------------------------------------- A field that is flush with its surface is defined by its border alone, so that border is doing structural work no other border in the kit does. Nothing already here fits, and the reason is that THE NEUTRAL RAMP IS NOT MIRRORED: light subtle 200 subtle-hover 400 subtle-focus 500 default 600 dark subtle 600 subtle-hover 500 subtle-focus 400 default 300 so any single token lands on different rungs per theme. neutral-default is 600 against 300, opposite ENDS, and read as a hard dark outline in light and a bright one in dark. neutral-subtle-focus is 500 against 400 and was still called too dark in light and too light in dark, which is the same complaint twice: the ramp is symmetric but the perception is not, because a near-black surface gives any grey more contrast than a near-white one does. Measured every rung against --dk-surface-current in both themes at all three levels, then every pairing. light-400/dark-600 was the evenest soft pairing the ramp contains, 2.41 to 3.21, and dark-600 is where dark settled. Light then went one rung softer again, to neutral-300, on the same judgement as everything above: still too dark, dark now fine. So the two themes are no longer the same rung and no longer need to be, which is the whole reason this token is declared per theme rather than borrowed from a mirrored family. light neutral-300 2.26 / 2.07 / 1.89 across levels 0, 1, 2 dark neutral-600 3.21 / 2.91 / 2.58 The next rung down in light is neutral-200 at 1.80 / 1.65 / 1.51, which is roughly where GitHub sits, and is available if this is still heavy. BELOW THE 3:1 WCAG 1.4.11 FLOOR everywhere except dark level 0, and that is a deliberate, designer-made call rather than an oversight. Judge it when the palette next moves. The label above the field is always present and is not the only thing identifying the control, and this sits where GitHub, Stripe and Shopify put the same border, but it is a real trade and it is written down here so nobody has to rediscover it. Hover steps to neutral-500 in BOTH themes, which is darker in light and brighter in dark, so it reads as "more defined" either way, and it is even by construction: 3.14 to 4.28. Light's resting rung moving down widened that step rather than breaking it, which suits a hover: 2.26 to 3.75 in light, 3.21 to 4.28 in dark, and the fill moves underneath it as well. */ /* THE RAISED FIELD'S BORDER IS ONE RUNG FAINTER at every state. A field lifted on a shadow already has an edge, the shadow's, so the border is doing half the job it does on a flush field and the full-strength rung reads as a second outline. Two rungs toward the surface in light, where the white page makes any grey border stand out, and in dark two at rest and on hover with focus one rung down, since primary on a dark fill already reads quietly. The error and disabled borders are not in this set, because a raised field that is wrong or dead has to say so just as loudly as a flush one. ONE RUNG WAS NOT ENOUGH IN LIGHT: neutral-200 on white still read as a drawn outline beside the shadow. neutral-100 is 1.4:1 against white, which is deliberately below the 3:1 a flush field would need: on a raised field the shadow is what says where the control is, and the border only finishes it. */ [data-theme="light"] { --dk-border-field-default: var(--dk-color-neutral-300); --dk-border-field-hover: var(--dk-color-neutral-500); --dk-border-field-raised-default: var(--dk-color-neutral-100); --dk-border-field-raised-hover: var(--dk-color-neutral-300); --dk-border-field-raised-focus: var(--dk-color-primary-400); } [data-theme="dark"] { --dk-border-field-default: var(--dk-color-neutral-600); --dk-border-field-hover: var(--dk-color-neutral-500); --dk-border-field-raised-default: var(--dk-color-neutral-800); --dk-border-field-raised-hover: var(--dk-color-neutral-700); --dk-border-field-raised-focus: var(--dk-color-primary-500); } /* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/outline.css ═══════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Outline ─────────────────────────────────────────────────────────── */ /* --dk-outline-selected-default The ring drawn around an element when it is the "active" (selected) item — e.g. the IA Explorer node currently driving the side panel. Rendered as a CSS `outline` (drawn OUTSIDE the box, so no layout shift) rather than a border, so the element keeps its own resting border treatment underneath. Used by elements sitting on neutral / white surfaces (other pages, content sections, out-of-scope nodes). Light → color-primary-500 (a clear teal ring against white-ish surfaces) Dark → color-primary-200 (a light teal ring that reads against dark) */ [data-theme="light"] { --dk-outline-selected-default: var(--dk-color-primary-500); } [data-theme="dark"] { --dk-outline-selected-default: var(--dk-color-primary-200); } /* --dk-outline-selected-on-color The selected-ring variant for an element sitting on a COLOURED (primary / teal) surface — e.g. the focal "you-are-here" node, whose background is --dk-surface-primary-default. The default teal ring has too little contrast against a teal fill, so in light mode this steps down to the deepest primary; dark mode keeps the same light-teal ring as the default, which already contrasts well against the dark teal fill. Light → color-primary-700 (deep teal ring on the teal focal fill) Dark → color-primary-200 (== default; light ring reads against dark) */ [data-theme="light"] { --dk-outline-selected-on-color: var(--dk-color-primary-700); } [data-theme="dark"] { --dk-outline-selected-on-color: var(--dk-color-primary-200); } /* --dk-focus-ring-primary (moved here from primitives/transform.css 2026-09-09 — a Mapped token, not a primitive) The wide (4px) primary focus ring on search fields (.forge-search). Riding on --dk-border-primary-default (primary-600) read too dark/heavy at that width in light mode. One step lighter per theme so the ring glows rather than blocks: Light → color-primary-500 Dark → color-primary-400 */ [data-theme="light"] { --dk-focus-ring-primary: var(--dk-color-primary-500); } [data-theme="dark"] { --dk-focus-ring-primary: var(--dk-color-primary-400); } /* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/text.css ══════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/text ═══ */ :root, [data-theme="light"] { --dk-text-default: var(--dk-color-base-black); --dk-text-default-reverse: var(--dk-color-base-white); --dk-text-base-black: var(--dk-color-base-black); --dk-text-base-white: var(--dk-color-base-white); --dk-text-disabled-default: var(--dk-color-neutral-400); --dk-text-disabled-on-color: var(--dk-color-neutral-300); --dk-text-disabled-subtle: var(--dk-color-neutral-200); /* Disabled text INSIDE A FORM FIELD (Input, Select). The field keeps its neutral body/card fill inside a tone (as the component library does), so its disabled label must not follow the tone the way --dk-text-disabled-subtle does since 3.1.0. Declared here on [data-theme] it computes to the neutral value at the theme root and is inherited already-resolved — the tone scopes never touch it. Same value as --dk-text-disabled-subtle on a neutral surface. */ --dk-text-disabled-on-field: var(--dk-text-disabled-subtle); --dk-text-error-default: var(--dk-color-error-500); --dk-text-error-focus: var(--dk-color-error-700); --dk-text-error-hover: var(--dk-color-error-600); --dk-text-error-on-color: var(--dk-color-base-white); --dk-text-error-on-color-focus: var(--dk-color-base-white); --dk-text-error-on-color-hover: var(--dk-color-base-white); --dk-text-error-subtle: var(--dk-color-error-50); --dk-text-error-subtle-focus: var(--dk-color-error-200); --dk-text-error-subtle-hover: var(--dk-color-error-100); --dk-text-information-default: var(--dk-color-information-500); --dk-text-information-focus: var(--dk-color-information-700); --dk-text-information-hover: var(--dk-color-information-600); --dk-text-information-on-color: var(--dk-color-base-white); --dk-text-information-on-color-focus: var(--dk-color-base-white); --dk-text-information-on-color-hover: var(--dk-color-base-white); --dk-text-information-subtle: var(--dk-color-information-50); --dk-text-information-subtle-focus: var(--dk-color-information-200); --dk-text-information-subtle-hover: var(--dk-color-information-100); --dk-text-neutral-default: var(--dk-color-neutral-600); --dk-text-neutral-focus: var(--dk-color-neutral-800); --dk-text-neutral-hover: var(--dk-color-neutral-700); --dk-text-neutral-subtle: var(--dk-color-neutral-300); --dk-text-neutral-subtle-focus: var(--dk-color-neutral-500); --dk-text-neutral-subtle-hover: var(--dk-color-neutral-400); --dk-text-on-color-body: var(--dk-color-base-white); --dk-text-on-color-caption: var(--dk-color-base-white); --dk-text-on-color-heading: var(--dk-color-base-white); --dk-text-on-color-placeholder: var(--dk-color-neutral-500); --dk-text-primary-default: var(--dk-color-primary-500); --dk-text-primary-disabled: var(--dk-color-primary-300); --dk-text-primary-focus: var(--dk-color-primary-700); --dk-text-primary-hover: var(--dk-color-primary-600); --dk-text-primary-on-color: var(--dk-color-primary-500); --dk-text-primary-on-color-focus: var(--dk-color-primary-700); --dk-text-primary-on-color-hover: var(--dk-color-primary-600); --dk-text-primary-subtle: var(--dk-color-primary-50); --dk-text-primary-subtle-focus: var(--dk-color-primary-200); --dk-text-primary-subtle-hover: var(--dk-color-primary-100); --dk-text-success-default: var(--dk-color-success-500); --dk-text-success-focus: var(--dk-color-success-700); --dk-text-success-hover: var(--dk-color-success-600); --dk-text-success-on-color: var(--dk-color-base-white); --dk-text-success-on-color-focus: var(--dk-color-base-white); --dk-text-success-on-color-hover: var(--dk-color-base-white); --dk-text-success-subtle: var(--dk-color-success-50); --dk-text-success-subtle-focus: var(--dk-color-success-200); --dk-text-success-subtle-hover: var(--dk-color-success-100); --dk-text-warning-default: var(--dk-color-warning-500); --dk-text-warning-focus: var(--dk-color-warning-700); --dk-text-warning-hover: var(--dk-color-warning-600); --dk-text-warning-on-color: var(--dk-color-base-white); --dk-text-warning-on-color-focus: var(--dk-color-base-white); --dk-text-warning-on-color-hover: var(--dk-color-base-white); --dk-text-warning-subtle: var(--dk-color-warning-50); --dk-text-warning-subtle-focus: var(--dk-color-warning-200); --dk-text-warning-subtle-hover: var(--dk-color-warning-100); } [data-theme="dark"] { --dk-text-default: var(--dk-color-base-white); --dk-text-default-reverse: var(--dk-color-base-black); --dk-text-base-black: var(--dk-color-base-black); --dk-text-base-white: var(--dk-color-base-white); --dk-text-disabled-default: var(--dk-color-neutral-400); --dk-text-disabled-on-color: var(--dk-color-neutral-600); --dk-text-disabled-subtle: var(--dk-color-neutral-700); --dk-text-disabled-on-field: var(--dk-text-disabled-subtle); /* see light block */ --dk-text-error-default: var(--dk-color-error-400); --dk-text-error-focus: var(--dk-color-error-200); --dk-text-error-hover: var(--dk-color-error-300); --dk-text-error-on-color: var(--dk-color-base-white); --dk-text-error-on-color-focus: var(--dk-color-base-white); --dk-text-error-on-color-hover: var(--dk-color-base-white); --dk-text-error-subtle: var(--dk-color-error-900); --dk-text-error-subtle-focus: var(--dk-color-error-700); --dk-text-error-subtle-hover: var(--dk-color-error-800); --dk-text-information-default: var(--dk-color-information-400); --dk-text-information-focus: var(--dk-color-information-200); --dk-text-information-hover: var(--dk-color-information-300); --dk-text-information-on-color: var(--dk-color-base-white); --dk-text-information-on-color-focus: var(--dk-color-base-white); --dk-text-information-on-color-hover: var(--dk-color-base-white); --dk-text-information-subtle: var(--dk-color-information-900); --dk-text-information-subtle-focus: var(--dk-color-information-700); --dk-text-information-subtle-hover: var(--dk-color-information-800); --dk-text-neutral-default: var(--dk-color-neutral-200); --dk-text-neutral-focus: var(--dk-color-neutral-50); --dk-text-neutral-hover: var(--dk-color-neutral-100); --dk-text-neutral-subtle: var(--dk-color-neutral-600); --dk-text-neutral-subtle-focus: var(--dk-color-neutral-400); --dk-text-neutral-subtle-hover: var(--dk-color-neutral-500); --dk-text-on-color-body: var(--dk-color-base-black); --dk-text-on-color-caption: var(--dk-color-base-black); --dk-text-on-color-heading: var(--dk-color-base-black); --dk-text-on-color-placeholder: var(--dk-color-neutral-500); --dk-text-primary-default: var(--dk-color-primary-500); --dk-text-primary-disabled: var(--dk-color-primary-700); --dk-text-primary-focus: var(--dk-color-primary-300); --dk-text-primary-hover: var(--dk-color-primary-400); --dk-text-primary-on-color: var(--dk-color-primary-500); --dk-text-primary-on-color-focus: var(--dk-color-primary-700); --dk-text-primary-on-color-hover: var(--dk-color-primary-600); --dk-text-primary-subtle: var(--dk-color-primary-900); --dk-text-primary-subtle-focus: var(--dk-color-primary-700); --dk-text-primary-subtle-hover: var(--dk-color-primary-800); --dk-text-success-default: var(--dk-color-success-400); --dk-text-success-focus: var(--dk-color-success-200); --dk-text-success-hover: var(--dk-color-success-300); --dk-text-success-on-color: var(--dk-color-base-white); --dk-text-success-on-color-focus: var(--dk-color-base-white); --dk-text-success-on-color-hover: var(--dk-color-base-white); --dk-text-success-subtle: var(--dk-color-success-900); --dk-text-success-subtle-focus: var(--dk-color-success-700); --dk-text-success-subtle-hover: var(--dk-color-success-800); --dk-text-warning-default: var(--dk-color-warning-400); --dk-text-warning-focus: var(--dk-color-warning-200); --dk-text-warning-hover: var(--dk-color-warning-300); --dk-text-warning-on-color: var(--dk-color-base-white); --dk-text-warning-on-color-focus: var(--dk-color-base-white); --dk-text-warning-on-color-hover: var(--dk-color-base-white); --dk-text-warning-subtle: var(--dk-color-warning-900); --dk-text-warning-subtle-focus: var(--dk-color-warning-700); --dk-text-warning-subtle-hover: var(--dk-color-warning-800); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Text ─────────────────────────────────────────────────────────── */ /* --dk-text-primary-highlight A brighter, more saturated primary text colour used to mark a transient "highlighted" state — e.g. the interaction-hint chips on a canvas while the user is actively performing the matching action (scrolling to zoom, dragging to pan). Sits one step lighter than --dk-text-primary-default so the shift reads as feedback rather than as an emphasis-permanence change. Light → color-primary-500 Dark → color-primary-400 */ [data-theme="light"] { --dk-text-primary-highlight: var(--dk-color-primary-500); } [data-theme="dark"] { --dk-text-primary-highlight: var(--dk-color-primary-400); } /* --dk-text-primary-disabled (LIGHT OVERRIDE) Disabled primary text (e.g. the label of an out-of-scope action node). Core Drift uses color-primary-300 in light mode, which reads too strong against the --dk-surface-primary-subtle fill; we soften it one step to color-primary-200. Dark mode keeps the core value. */ [data-theme="light"] { --dk-text-primary-disabled: var(--dk-color-primary-200); } /* --text-{error,success,warning,information}-active The third step of each status TEXT ramp. Core ships -default and -hover for every status but -active for PRIMARY only, so a control whose label must keep contrast as its tinted fill deepens on press had nowhere to land (found 2026-08-18 giving the subtle/outline buttons per-state text: their pressed fill is {status}-200, the same fill already judged too low-contrast against {status}-500 text at surface level 2). Continues each ramp's own stride, matching primary's existing values. Light → color-{status}-700 (default 500 → hover 600 → here) Dark → color-{status}-200 (default 400 → hover 300 → here) */ [data-theme="light"] { --dk-text-error-active: var(--dk-color-error-700); --dk-text-warning-active: var(--dk-color-warning-700); --dk-text-information-active: var(--dk-color-information-700); } [data-theme="dark"] { --dk-text-error-active: var(--dk-color-error-200); --dk-text-warning-active: var(--dk-color-warning-200); --dk-text-information-active: var(--dk-color-information-200); } /* --dk-text-{primary,error,warning,information}-on-subtle Status text as it reads sitting on that SAME status's own subtle tint — e.g. Alert's title/body on its own --dk-surface--subtle fill (2026-09-13). tone.css already has a token for this exact reading, --dk-text--on-subtle-level-0, and the values below match it deliberately — but tone.css is the one mapped file the build's generated inverse mirror skips (scripts/build.js: "the tone layer OWNS inverse and mirroring it would be circular"), so anything declared only there resolves by the literal page theme and reads wrong the moment it is nested inside a data-tone="inverse" panel. Found wiring Alert's title/body straight to the tone.css token: check:conformance's inverse check (real dark panel must equal an inverse panel on a light page, and vice versa) failed 210 ways. This family lives in an ordinary both-theme mapped file instead, so the mirror covers it the same as everything else in this file. Light → color-{status}-700 Dark → color-{status}-200 primary is declared by hand here rather than reused from --dk-text-primary-active two files over (mapped/shadow.css), even though the value is identical today: that token means "pressed/active interaction state", a different axis that happens to land on the same rung and is free to move for interaction reasons without taking Alert's resting text with it. success is not declared here — it borrows primary in mapped/success.css, with the rest of that file's success-is-jade aliases. */ [data-theme="light"] { --dk-text-primary-on-subtle: var(--dk-color-primary-700); --dk-text-error-on-subtle: var(--dk-color-error-700); --dk-text-warning-on-subtle: var(--dk-color-warning-700); --dk-text-information-on-subtle: var(--dk-color-information-700); } [data-theme="dark"] { --dk-text-primary-on-subtle: var(--dk-color-primary-200); --dk-text-error-on-subtle: var(--dk-color-error-200); --dk-text-warning-on-subtle: var(--dk-color-warning-200); --dk-text-information-on-subtle: var(--dk-color-information-200); } /* --dk-text-neutral-subtle (BOTH THEMES) + its hover/focus steps Core maps subtle to the far end of the neutral ramp — light: neutral-300, dark: neutral-600 — which is the SAME pair as -default, simply swapped. That leaves secondary text at 2.26:1 in light and 2.91:1 on raised surfaces in dark: below WCAG AA (4.5:1) and below even the 3:1 large-text floor in light. Measured 2026-08-27 against #ffffff and the dark page/raised surfaces. Each theme lands one legible step short of its own -default, keeping the subtle/default separation at one ramp step in both: Light neutral-500 2.26 -> 3.75 (default neutral-600, 5.00) Dark neutral-400 2.91 -> 5.05 on raised, 3.21 -> 5.57 on page (default neutral-300, 6.45) Dark initially moved to neutral-500 for symmetry with light, but at 3.88:1 on raised surfaces it was still reported hard to read (2026-08-28) - dark has more ramp headroom than light, so it uses it. Dark now passes AA for body text; light's 3.75 remains the known limit: within this ramp nothing higher exists without becoming -default itself. Light-mode captions at body size that must be AA should use --dk-text-neutral-default. The hover and focus steps progress AWAY from the background in both themes - they previously sat lighter than the base in light mode, which would have made hover reduce contrast instead of raising it. */ [data-theme="light"] { --dk-text-neutral-subtle: var(--dk-color-neutral-500); --dk-text-neutral-subtle-hover: var(--dk-color-neutral-600); --dk-text-neutral-subtle-focus: var(--dk-color-neutral-700); } [data-theme="dark"] { --dk-text-neutral-subtle: var(--dk-color-neutral-400); --dk-text-neutral-subtle-hover: var(--dk-color-neutral-300); --dk-text-neutral-subtle-focus: var(--dk-color-neutral-200); } /* --dk-icon-neutral-active The third step of the neutral ICON ramp. Core Drift ships --dk-icon-neutral-default and -hover but stops there, so a control whose icon should track a "rest → hover → press" progression had nowhere to land (found 2026-08-18 wiring per-state text/icon colours onto the plain and raised buttons). Continues the core ramp's own stride by one step. Light → color-neutral-700 (core: 500 → 600 → here) Dark → color-neutral-100 (core: 300 → 200 → here) */ [data-theme="light"] { --dk-icon-neutral-active: var(--dk-color-neutral-700); } [data-theme="dark"] { --dk-icon-neutral-active: var(--dk-color-neutral-100); } /* --dk-text-nested-default Text inside nested item boxes (on --dk-surface-nested-default). One tone stronger than --dk-text-neutral-default (neutral-600/300) — darker in light, lighter in dark — so it reads clearly on the slightly-contrasted nested surface. Light → color-neutral-700 Dark → color-neutral-200 */ [data-theme="light"] { --dk-text-nested-default: var(--dk-color-neutral-700); } [data-theme="dark"] { --dk-text-nested-default: var(--dk-color-neutral-200); } /* --dk-text-disabled-subtle-hover Hover variant of Drift core's --dk-text-disabled-subtle — for dimmed text on an element that is still interactive (e.g. out-of-scope IA Explorer nodes, which rest at --dk-text-disabled-subtle but remain clickable). Steps one tone toward higher contrast than rest: darker in light, lighter in dark. Core rests at neutral-200 (light) / neutral-700 (dark). Light → color-neutral-300 Dark → color-neutral-600 */ [data-theme="light"] { --dk-text-disabled-subtle-hover: var(--dk-color-neutral-300); } [data-theme="dark"] { --dk-text-disabled-subtle-hover: var(--dk-color-neutral-600); } /* --dk-text-disabled-subtle-active Pressed variant — one tone beyond -hover in the same direction, the third step in the disabled-subtle "rest → hover → active" emphasis ramp. Light → color-neutral-400 Dark → color-neutral-500 */ [data-theme="light"] { --dk-text-disabled-subtle-active: var(--dk-color-neutral-400); } [data-theme="dark"] { --dk-text-disabled-subtle-active: var(--dk-color-neutral-500); } /* --text-code-{tag|attr|string|keyword|comment} Syntax-highlight palette for code snippets (design-system docs; usable by any prototype that renders code). Built on the primary scale + its analogous-hue neighbour families (Primary neighbours group below) so the highlighting reads as ONE branded palette rather than an imported editor theme: same tone/weight per step, hues fanned around the primary. tag → the primary itself (element/component names carry the brand) attr → quiet neutral (the snippet's base text grey) — attrs are the connective tissue; the VALUES carry the colour (2026-08-17) string → next2 (+36°, blue) — values/strings pop against the grey attrs keyword → next1 (+18°, cyan) — between tag and string (import/from/const) comment → subtle neutral, deliberately outside the hue fan (de-emphasis) Light picks 600 steps for contrast on white code bodies; dark picks 300 steps on the deep neutral body. */ [data-theme="light"] { --dk-text-code-tag: var(--dk-color-primary-600); --dk-text-code-attr: var(--dk-text-neutral-default); --dk-text-code-string: var(--dk-primitive-color-primary-next2-600); --dk-text-code-keyword: var(--dk-primitive-color-primary-next1-600); --dk-text-code-comment: var(--dk-color-neutral-400); } [data-theme="dark"] { --dk-text-code-tag: var(--dk-color-primary-300); --dk-text-code-attr: var(--dk-text-neutral-default); --dk-text-code-string: var(--dk-primitive-color-primary-next2-300); --dk-text-code-keyword: var(--dk-primitive-color-primary-next1-300); --dk-text-code-comment: var(--dk-color-neutral-500); } /* --dk-text-eyebrow-default (moved here from primitives/transform.css 2026-09-09) Small uppercase SECTION EYEBROWS (the sidebar's "Visibility" / "Items" labels and kin). Core Drift's --dk-text-neutral-subtle is THEME-INDEPENDENT (#a6aeaf), which reads too faint against light surfaces and too dim against dark ones. This maps a real contrast step per theme: Light → color-neutral-600 (darker than subtle) Dark → color-neutral-300 (lighter than subtle) */ [data-theme="light"] { --dk-text-eyebrow-default: var(--dk-color-neutral-600); } [data-theme="dark"] { --dk-text-eyebrow-default: var(--dk-color-neutral-300); } /* --dk-text-field-placeholder — HINT TEXT INSIDE A CONTROL --------------------------------------------------------------------------- A placeholder has one job: read as clearly NOT the value. The value is --dk-text-default, 12.88 to 21 against the field, so the gap does the work. Three earlier attempts each missed for a different reason. --dk-text-disabled-on-color means text on a status fill, which this is not, and had no level variants. --dk-text-disabled-default was 2.41 in light against 4.46 in dark, lopsided. --dk-text-neutral-subtle CLIMBS with the level, 3.75 to 5.75 in light and up to 7.14 in dark, which is how it ended up looking like a value someone had typed in grey. Same pairing as --dk-border-field-default, and for the same measured reason: light-400 with dark-600 is the evenest soft band the ramp offers, 2.41 to 3.21. Sharing the border's colour is not an accident to be tidied away later; an empty field reading as one quiet grey outline plus one quiet grey hint is the point. They are two tokens rather than one so they can diverge if a future design wants them to. This is deliberately below AA, and the docs say so: a placeholder can never carry the label, the format hint, or anything else a reader needs. Those go in the label and the caption, which clear AA comfortably. */ [data-theme="light"] { --dk-text-field-placeholder: var(--dk-color-neutral-400); } [data-theme="dark"] { --dk-text-field-placeholder: var(--dk-color-neutral-600); } /* --dk-text-link-{default,hover,active,underline} The link ramp (29 Sep 2026), for dk-component-link and the bare links the kit's text components style. Its own family rather than --dk-text-primary-* because that token is jade-500 in light, 2.82:1 on white, which cannot carry text a reader has to read. Rest, hover and active step one rung at a time along the primary ramp, darkening in light and brightening in dark, which lines up with the existing --dk-text-primary-hover and -focus steps. LIGHT REST IS 600, NOT 700, BY DECISION. 700 clears AA at 6.75:1 but was judged too dark beside the rest of the brand; 600 is 4.25:1 on white, under AA for body-size text and over it for large text. check:contrast records it as a known exception rather than lowering its threshold. Hover and active clear AA in both themes. THE UNDERLINE IS A LIGHTER RUNG at rest so an underlined sentence does not read as a row of bars; on hover the link takes currentColor for it. Light → default 600 · hover 700 · active 800 · underline 300 Dark → default 500 · hover 400 · active 300 · underline 700 */ [data-theme="light"] { --dk-text-link-default: var(--dk-color-primary-600); --dk-text-link-hover: var(--dk-color-primary-700); --dk-text-link-active: var(--dk-color-primary-800); --dk-text-link-underline: var(--dk-color-primary-300); } [data-theme="dark"] { --dk-text-link-default: var(--dk-color-primary-500); --dk-text-link-hover: var(--dk-color-primary-400); --dk-text-link-active: var(--dk-color-primary-300); --dk-text-link-underline: var(--dk-color-primary-700); } /* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/icon.css ══════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/icon ═══ */ :root, [data-theme="light"] { --dk-icon-base-black: var(--dk-color-base-black); --dk-icon-base-white: var(--dk-color-base-white); --dk-icon-default-body: var(--dk-color-base-black); --dk-icon-default-body-reverse: var(--dk-color-base-white); --dk-icon-disabled-default: var(--dk-color-neutral-400); --dk-icon-disabled-on-color: var(--dk-color-neutral-300); --dk-icon-disabled-subtle: var(--dk-color-neutral-100); --dk-icon-disabled-on-field: var(--dk-icon-disabled-subtle); /* field-internal icon; tone-immune, see text.css */ --dk-icon-error-default: var(--dk-color-error-500); --dk-icon-error-focus: var(--dk-color-error-700); --dk-icon-error-hover: var(--dk-color-error-600); --dk-icon-error-on-color: var(--dk-color-base-white); --dk-icon-error-on-color-focus: var(--dk-color-base-white); --dk-icon-error-on-color-hover: var(--dk-color-base-white); --dk-icon-error-subtle: var(--dk-color-error-50); --dk-icon-error-subtle-focus: var(--dk-color-error-200); --dk-icon-error-subtle-hover: var(--dk-color-error-100); --dk-icon-information-default: var(--dk-color-information-500); --dk-icon-information-focus: var(--dk-color-information-700); --dk-icon-information-hover: var(--dk-color-information-600); --dk-icon-information-on-color: var(--dk-color-base-white); --dk-icon-information-on-color-focus: var(--dk-color-base-white); --dk-icon-information-on-color-hover: var(--dk-color-base-white); --dk-icon-information-subtle: var(--dk-color-information-50); --dk-icon-information-subtle-focus: var(--dk-color-information-200); --dk-icon-information-subtle-hover: var(--dk-color-information-100); --dk-icon-neutral-default: var(--dk-color-neutral-500); --dk-icon-neutral-focus: var(--dk-color-neutral-700); --dk-icon-neutral-hover: var(--dk-color-neutral-600); --dk-icon-neutral-subtle: var(--dk-color-neutral-300); --dk-icon-neutral-subtle-focus: var(--dk-color-neutral-500); --dk-icon-neutral-subtle-hover: var(--dk-color-neutral-400); --dk-icon-primary-default: var(--dk-color-primary-500); --dk-icon-primary-disabled: var(--dk-color-primary-300); --dk-icon-primary-focus: var(--dk-color-primary-700); --dk-icon-primary-hover: var(--dk-color-primary-600); --dk-icon-primary-on-color: var(--dk-color-base-white); --dk-icon-primary-on-color-focus: var(--dk-color-base-white); --dk-icon-primary-on-color-hover: var(--dk-color-base-white); --dk-icon-primary-subtle: var(--dk-color-primary-50); --dk-icon-primary-subtle-focus: var(--dk-color-primary-200); --dk-icon-primary-subtle-hover: var(--dk-color-primary-100); --dk-icon-success-default: var(--dk-color-success-500); --dk-icon-success-focus: var(--dk-color-success-700); --dk-icon-success-hover: var(--dk-color-success-600); --dk-icon-success-on-color: var(--dk-color-base-white); --dk-icon-success-on-color-focus: var(--dk-color-base-white); --dk-icon-success-on-color-hover: var(--dk-color-base-white); --dk-icon-success-subtle: var(--dk-color-success-50); --dk-icon-success-subtle-focus: var(--dk-color-success-200); --dk-icon-success-subtle-hover: var(--dk-color-success-100); --dk-icon-warning-default: var(--dk-color-warning-500); --dk-icon-warning-focus: var(--dk-color-warning-700); --dk-icon-warning-hover: var(--dk-color-warning-600); --dk-icon-warning-on-color: var(--dk-color-base-white); --dk-icon-warning-on-color-focus: var(--dk-color-base-white); --dk-icon-warning-on-color-hover: var(--dk-color-base-white); --dk-icon-warning-subtle: var(--dk-color-warning-50); --dk-icon-warning-subtle-focus: var(--dk-color-warning-200); --dk-icon-warning-subtle-hover: var(--dk-color-warning-100); } [data-theme="dark"] { --dk-icon-base-black: var(--dk-color-base-black); --dk-icon-base-white: var(--dk-color-base-white); --dk-icon-default-body: var(--dk-color-base-white); --dk-icon-default-body-reverse: var(--dk-color-base-black); --dk-icon-disabled-default: var(--dk-color-neutral-400); --dk-icon-disabled-on-color: var(--dk-color-neutral-600); --dk-icon-disabled-subtle: var(--dk-color-neutral-800); --dk-icon-disabled-on-field: var(--dk-icon-disabled-subtle); /* field-internal icon; tone-immune, see text.css */ --dk-icon-error-default: var(--dk-color-error-400); --dk-icon-error-focus: var(--dk-color-error-200); --dk-icon-error-hover: var(--dk-color-error-300); --dk-icon-error-on-color: var(--dk-color-base-white); --dk-icon-error-on-color-focus: var(--dk-color-base-white); --dk-icon-error-on-color-hover: var(--dk-color-base-white); --dk-icon-error-subtle: var(--dk-color-error-900); --dk-icon-error-subtle-focus: var(--dk-color-error-700); --dk-icon-error-subtle-hover: var(--dk-color-error-800); --dk-icon-information-default: var(--dk-color-information-400); --dk-icon-information-focus: var(--dk-color-information-200); --dk-icon-information-hover: var(--dk-color-information-300); --dk-icon-information-on-color: var(--dk-color-base-white); --dk-icon-information-on-color-focus: var(--dk-color-base-white); --dk-icon-information-on-color-hover: var(--dk-color-base-white); --dk-icon-information-subtle: var(--dk-color-information-900); --dk-icon-information-subtle-focus: var(--dk-color-information-700); --dk-icon-information-subtle-hover: var(--dk-color-information-800); --dk-icon-neutral-default: var(--dk-color-neutral-200); --dk-icon-neutral-focus: var(--dk-color-neutral-50); --dk-icon-neutral-hover: var(--dk-color-neutral-100); --dk-icon-neutral-subtle: var(--dk-color-neutral-600); --dk-icon-neutral-subtle-focus: var(--dk-color-neutral-400); --dk-icon-neutral-subtle-hover: var(--dk-color-neutral-500); --dk-icon-primary-default: var(--dk-color-primary-500); --dk-icon-primary-disabled: var(--dk-color-primary-700); --dk-icon-primary-focus: var(--dk-color-primary-300); --dk-icon-primary-hover: var(--dk-color-primary-400); --dk-icon-primary-on-color: var(--dk-color-base-white); --dk-icon-primary-on-color-focus: var(--dk-color-base-white); --dk-icon-primary-on-color-hover: var(--dk-color-base-white); --dk-icon-primary-subtle: var(--dk-color-primary-800); --dk-icon-primary-subtle-focus: var(--dk-color-primary-600); --dk-icon-primary-subtle-hover: var(--dk-color-primary-700); --dk-icon-success-default: var(--dk-color-success-400); --dk-icon-success-focus: var(--dk-color-success-200); --dk-icon-success-hover: var(--dk-color-success-300); --dk-icon-success-on-color: var(--dk-color-base-white); --dk-icon-success-on-color-focus: var(--dk-color-base-white); --dk-icon-success-on-color-hover: var(--dk-color-base-white); --dk-icon-success-subtle: var(--dk-color-success-900); --dk-icon-success-subtle-focus: var(--dk-color-success-700); --dk-icon-success-subtle-hover: var(--dk-color-success-800); --dk-icon-warning-default: var(--dk-color-warning-400); --dk-icon-warning-focus: var(--dk-color-warning-200); --dk-icon-warning-hover: var(--dk-color-warning-300); --dk-icon-warning-on-color: var(--dk-color-base-white); --dk-icon-warning-on-color-focus: var(--dk-color-base-white); --dk-icon-warning-on-color-hover: var(--dk-color-base-white); --dk-icon-warning-subtle: var(--dk-color-warning-900); --dk-icon-warning-subtle-focus: var(--dk-color-warning-700); --dk-icon-warning-subtle-hover: var(--dk-color-warning-800); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Icon ─────────────────────────────────────────────────────────── */ /* --icon-{error,success,warning,information}-active The third step of each status ICON ramp. Core ships -default and -hover for every status but -active for PRIMARY only, so a control whose label must keep contrast as its tinted fill deepens on press had nowhere to land (found 2026-08-18 giving the subtle/outline buttons per-state text: their pressed fill is {status}-200, the same fill already judged too low-contrast against {status}-500 text at surface level 2). Continues each ramp's own stride, matching primary's existing values. Light → color-{status}-700 (default 500 → hover 600 → here) Dark → color-{status}-200 (default 400 → hover 300 → here) */ [data-theme="light"] { --dk-icon-error-active: var(--dk-color-error-700); --dk-icon-warning-active: var(--dk-color-warning-700); --dk-icon-information-active: var(--dk-color-information-700); } [data-theme="dark"] { --dk-icon-error-active: var(--dk-color-error-200); --dk-icon-warning-active: var(--dk-color-warning-200); --dk-icon-information-active: var(--dk-color-information-200); } /* --dk-icon-primary-highlight The icon-side counterpart to --dk-text-primary-highlight. Kept as a separate token (rather than aliasing the text one) so that icon and text highlight colours can diverge in the future without breaking either semantic. Light → color-primary-500 Dark → color-primary-400 */ [data-theme="light"] { --dk-icon-primary-highlight: var(--dk-color-primary-500); } [data-theme="dark"] { --dk-icon-primary-highlight: var(--dk-color-primary-400); } /* --dk-icon-primary-disabled (LIGHT OVERRIDE) Icon-side counterpart to the --dk-text-primary-disabled light override above — softened from core's color-primary-300 to color-primary-200 so the disabled icon of an out-of-scope action node sits gently on --dk-surface-primary-subtle. Dark mode keeps the core value. */ [data-theme="light"] { --dk-icon-primary-disabled: var(--dk-color-primary-200); } /* --dk-icon-disabled-subtle-hover Icon-side counterpart to --dk-text-disabled-subtle-hover, for the dimmed icon inside an interactive disabled-looking element. Core rests at neutral-100 (light) / neutral-800 (dark); hover steps one tone toward contrast. Light → color-neutral-200 Dark → color-neutral-700 */ [data-theme="light"] { --dk-icon-disabled-subtle-hover: var(--dk-color-neutral-200); } [data-theme="dark"] { --dk-icon-disabled-subtle-hover: var(--dk-color-neutral-700); } /* --dk-icon-disabled-subtle-active Pressed variant — one tone beyond -hover, the third step in the icon disabled-subtle "rest → hover → active" ramp. Light → color-neutral-300 Dark → color-neutral-600 */ [data-theme="light"] { --dk-icon-disabled-subtle-active: var(--dk-color-neutral-300); } [data-theme="dark"] { --dk-icon-disabled-subtle-active: var(--dk-color-neutral-600); } /* ═════════════════════════════════════════ drift-kit:layer tokens/mapped/field.css ═════════════════════════════════════════ */ /* ============================================================================ The field palette, and the choice palette below it ---------------------------------------------------------------------------- THE QUESTION THIS ANSWERS: what colour is the inside of a text field when the panel under it carries a status tone? Not the panel's colour, which is what it was. .dk-component-input__field painted --dk-surface-current, chosen deliberately so a field sits flush with its surface and steps with the level ladder. A tone remaps that token to the panel's own fill, so on a toned panel the field became the panel: measured 1.00:1 against it in all twelve tone, fill and theme combinations, leaving a 1px border as the only evidence a control was there. Reported from the Input playground on a solid primary panel. The border was already half of this answer. --dk-border-field-default exists because "a field flush with its surface is defined by its border alone, so that border is doing structural work no other border in the kit does", and it is declared per theme rather than borrowed for exactly that reason. This is the other half, and the same argument: the inside of a field is not the panel it sits on, so it does not borrow the panel's tokens. WHY IT IS A WHOLE PALETTE AND NOT ONE FILL. Measured every token the field paints with, untoned against a solid primary, a subtle primary, a solid error and an inverse panel: twenty of the twenty-one moved. Changing the fill alone would have swapped an invisible field for a white box with white text in it, because --dk-text-default is white inside a solid tone. The value, the affix, the placeholder, both focus rings, the invalid borders, the disabled rungs and the action buttons all have to come out of the tone together. WHAT IT DELIBERATELY DOES NOT CHANGE. The label, the caption and the error message sit OUTSIDE the field box, on the panel, and they should read as the panel's copy. They still take --dk-text-neutral-default and friends, which is why a toned panel's form still reads as one thing. INVERSE IS NOT A STATUS and is not escaped here. It means "the opposite theme", so a field on an inverse panel should flip with it, and it already did. The declarations below are per theme and per level in the two shapes scripts/build.js mirrors, so the generated inverse block re-states the whole palette as the opposite theme without a line of it being written twice. LEVELS STILL APPLY. A field on a level 2 panel is still flush with level 2; that part of the original design was right and is kept. Only the tone is escaped. The level 0 values are written as primitives rather than as the public tokens they mirror, because a tone remaps those public tokens on the very element these rules land on, so reading one here would capture the toned value and escape nothing. test/field-palette.test.js asserts each one still matches the untoned token it copies. ============================================================================ */ [data-theme="light"] { /* The field's own fill, and the rung down it takes on hover. */ --dk-surface-field-default: var(--dk-color-base-white); --dk-surface-field-hover: var(--dk-color-neutral-25); /* The in-field action buttons (reveal a password, clear a field, help). */ --dk-surface-field-action-hover: var(--dk-color-neutral-50); --dk-surface-field-action-active: var(--dk-color-neutral-100); /* The value someone types, and the affixes around it: a currency mark, a unit, a leading glyph. Two tokens because an affix is quieter than a value on purpose. */ --dk-text-field-default: var(--dk-color-base-black); --dk-text-field-affix: var(--dk-color-neutral-600); --dk-text-field-disabled: var(--dk-color-neutral-200); /* Glyphs inside the field: the action buttons at rest, under the pointer, and on a control that is refusing input. */ --dk-icon-field-default: var(--dk-color-neutral-500); --dk-icon-field-hover: var(--dk-color-neutral-700); --dk-icon-field-disabled: var(--dk-color-neutral-100); /* THE FIELD'S OWN GLYPH, a rung quieter than the affix text it used to share. A leading icon names nothing the label does not already name, so it should sit back until the field is in use. Measured on white: rest 3.76:1 and hover 5.0:1, so the resting glyph still clears the 3:1 a meaningful icon needs, and hover steps one rung toward the typed value. */ --dk-icon-field-subtle: var(--dk-color-neutral-500); --dk-icon-field-subtle-hover: var(--dk-color-neutral-600); /* Focus. The ring is the wider, paler halo outside the border. */ --dk-border-field-focus: var(--dk-color-primary-600); --dk-border-field-focus-ring: var(--dk-color-primary-300); /* aria-invalid. Same three parts as focus, in error's ramp. */ --dk-border-field-error: var(--dk-color-error-500); --dk-border-field-error-focus: var(--dk-color-error-700); --dk-border-field-error-ring: var(--dk-color-error-300); --dk-border-field-disabled: var(--dk-color-neutral-100); } [data-theme="dark"] { --dk-surface-field-default: var(--dk-color-neutral-1100); --dk-surface-field-hover: var(--dk-color-neutral-900); --dk-surface-field-action-hover: var(--dk-color-neutral-800); --dk-surface-field-action-active: var(--dk-color-neutral-700); --dk-text-field-default: var(--dk-color-base-white); --dk-text-field-affix: var(--dk-color-neutral-200); --dk-text-field-disabled: var(--dk-color-neutral-700); --dk-icon-field-default: var(--dk-color-neutral-200); --dk-icon-field-hover: var(--dk-color-neutral-50); --dk-icon-field-disabled: var(--dk-color-neutral-800); /* The same rung in both themes, which is the point: 500 sits between the field and its text in either one. Measured on the dark field fill: rest 4.3:1, hover (400) 5.6:1. */ --dk-icon-field-subtle: var(--dk-color-neutral-500); --dk-icon-field-subtle-hover: var(--dk-color-neutral-400); --dk-border-field-focus: var(--dk-color-primary-400); --dk-border-field-focus-ring: var(--dk-color-primary-600); --dk-border-field-error: var(--dk-color-error-400); --dk-border-field-error-focus: var(--dk-color-error-200); --dk-border-field-error-ring: var(--dk-color-error-600); --dk-border-field-disabled: var(--dk-color-neutral-800); } /* The level ladder, for the nine that move with it. The rest are the same colour at every level by design: a focus ring, an invalid border and the typed value do not get quieter because the panel is nested. These point at the level RAMP tokens rather than at the public names. The ramp is what the untoned level scopes themselves read, and no tone touches it, so a toned panel at level 1 still hands its field level 1's neutrals. */ [data-theme] [data-surface="1"]:not([data-theme]), [data-theme][data-surface="1"] { --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-1); --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-1); --dk-surface-field-default: var(--dk-surface-level-1); --dk-surface-field-hover: var(--dk-surface-nested-default-level-1); --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-1); --dk-surface-field-action-active: var(--dk-surface-nested-active-level-1); --dk-text-field-affix: var(--dk-text-neutral-default-level-1); --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-1); --dk-icon-field-default: var(--dk-icon-neutral-default-level-1); --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-1); --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-1); } [data-theme] [data-surface="2"]:not([data-theme]), [data-theme][data-surface="2"] { --dk-surface-choice-disabled: var(--dk-surface-choice-disabled-level-2); --dk-icon-choice-disabled: var(--dk-icon-choice-disabled-level-2); --dk-surface-field-default: var(--dk-surface-level-2); --dk-surface-field-hover: var(--dk-surface-nested-default-level-2); --dk-surface-field-action-hover: var(--dk-surface-nested-hover-level-2); --dk-surface-field-action-active: var(--dk-surface-nested-active-level-2); --dk-text-field-affix: var(--dk-text-neutral-default-level-2); --dk-text-field-disabled: var(--dk-text-disabled-subtle-level-2); --dk-icon-field-default: var(--dk-icon-neutral-default-level-2); --dk-icon-field-disabled: var(--dk-icon-disabled-subtle-level-2); --dk-border-field-disabled: var(--dk-border-disabled-subtle-level-2); } /* ── The other half: a CHOICE control's selected state ────────────────────── A checkbox and a radio are field-shaped when empty, which is why their box reads the palette above, and they are something else entirely once chosen: a small filled brand swatch with a glyph on it. That fill lives here because it needs the same two properties the palette needs, a level that does not matter and a tone that cannot reach it, and because Checkbox and Radio must not drift apart. Component-to-component is not a tier, so they cannot read each other; a shared mapped family is how two siblings stay identical. THE LADDER MOVES THE WAY EACH THEME WANTS AND THE GLYPH FOLLOWS IT. Measured every rung against the page behind the box and against both candidate glyph colours: light rest 600 page 4.25 white glyph 4.25 hover 700 page 6.75 white glyph 6.75 press 800 page 10.85 white glyph 10.85 dark rest 500 page 5.69 primary-900 glyph 5.92 hover 400 page 6.92 primary-900 glyph 7.20 press 300 page 8.49 primary-900 glyph 8.84 Both axes climb in both themes: the box separates further from the page AND the glyph reads better, on every step. That is only possible because the glyph colour is a token rather than a literal white. The old checkbox wrote `stroke: #fff` into its stylesheet and sat at 2.82:1 on a primary-500 fill, under the 3:1 a graphical object carries, with no way to fix it per theme. THE CHOSEN FILL HAS NO LEVEL LADDER and the DISABLED pair does. A selected checkbox is a brand statement, not a surface, so it is the same colour on the page and at level 2. Its disabled form is not a brand statement at all any more, it is a neutral, and every neutral in this kit steps with the level or it stops separating from the panel it sits on. Both rungs move, the box and the glyph on it: light L0 box 1.45 vs panel, glyph 2.59 on box L1 box 1.65, glyph 2.77 L2 box 1.89, glyph 3.05 dark L0 box 1.70, glyph 2.52 L1 box 2.12, glyph 2.39 L2 box 2.58, glyph 2.21 Level 0 is untouched, so the ladder is an addition rather than a retune. The rungs are declared per theme and the level scopes only re-point, which is the two-layer shape the rest of the kit uses and the shape the inverse mirror knows how to copy. */ [data-theme="light"] { --dk-surface-choice-selected: var(--dk-color-primary-600); --dk-surface-choice-selected-hover: var(--dk-color-primary-700); --dk-surface-choice-selected-active: var(--dk-color-primary-800); --dk-icon-choice-selected: var(--dk-color-base-white); /* ── THE UNSELECTED TRACK, which only a switch has. ── Checkbox and Radio paint their unengaged state from the FIELD palette: an outlined box, flush with the page, because a form of them should not read as a page of grey boxes. A switch cannot do that, and the reason is the thumb. The thumb sits ON the track and is the only thing that says which way the control is pointing, so the pair has to clear the 3:1 a graphical object carries in both states. Flush with the page it cannot: white on --dk-surface-field-default is 1.00:1, and the neutral thumb that made the flush track work read as a grey lozenge rather than a switch. So the off track is FILLED and the thumb is WHITE, which is what every switch anyone has used looks like, and the rung is chosen by that measurement rather than by eye: rung white on it it on the page neutral-200 1.80 1.80 neutral-300 2.26 2.26 neutral-400 2.88 2.88 ships neutral-500 3.75 3.75 clears 3:1, reads heavy neutral-600 5.00 5.00 400 SHIPS AT 2.88:1, which is 0.12 under the 3:1 a graphical object carries, and that is a decision rather than an oversight. 500 clears the floor and was called too dark on sight: an off switch is the resting state of a control nobody has touched, and at 500 a column of them reads as a column of grey lozenges. The gap is closed by the thumb's SHADOW rather than by its fill, which is how a physical switch is legible too: the disc sits above the track and its edge is drawn by the light, not by a colour difference. Input records the same kind of decision for its border and its placeholder, in the same words, for the same reason. The hover and press rungs step away from the page, the direction every other control in the kit steps, and both clear 3:1 on the way. */ --dk-surface-choice-track: var(--dk-color-neutral-400); --dk-surface-choice-track-hover: var(--dk-color-neutral-500); --dk-surface-choice-track-active: var(--dk-color-neutral-600); /* THE THUMB, IN EITHER STATE, and white in both themes. It used to read --dk-icon-choice-selected when the switch was on, which is Checkbox's TICK colour and goes primary-900 in dark: the disc turned near-black the moment the dark palette was in play, whether that was dark mode or an inverse panel inside light. A tick and a thumb are not the same object. A 2px stroke needs the contrast a dark glyph gives it; a 14px disc with a shadow under it is read by its edge, which is why the light off track can sit at 2.88:1 and why the dark on track can sit at 2.82:1. One colour, so the thumb is a thing that slides rather than a thing that changes. */ --dk-icon-choice-track: var(--dk-color-base-white); /* DISABLED AND CHOSEN IS NEUTRAL, NOT A QUIET BRAND TINT, and the kit had already answered this before the question was asked. What it does with a disabled control that carries the brand: button default/primary, light fill #f4f5f5 label #bcc2c3 button subtle/primary, light fill #f4f5f5 label #bcc2c3 button default/primary, dark fill #1f2b2d label #4d5d60 switch on, disabled, both track #00ae8e Button goes fully neutral, in both variants and both themes. Switch is the only thing that keeps the brand, and it does not even mute it: a disabled on-switch is pixel-identical to an enabled one, which is a defect rather than a precedent. Checkbox was siding with the exception. The reasoning, not only the convention: the tick's SHAPE is what says "this is on", and it survives being grey. The brand colour was saying something else, that the control is live, which is the one thing a disabled control must stop claiming. The rung is neutral-500 rather than the fainter one a disabled button's label takes, because a tick is a 1.5px stroke and a label is a word. Measured: 2.59:1 in light against the 2.27:1 the primary tint gave, and 2.52:1 in dark against 4.68:1. Dark is the real cost of this change and it was made with that number in view. */ --dk-surface-choice-disabled: var(--dk-color-neutral-100); --dk-icon-choice-disabled: var(--dk-color-neutral-500); --dk-surface-choice-disabled-level-1: var(--dk-color-neutral-200); --dk-icon-choice-disabled-level-1: var(--dk-color-neutral-600); --dk-surface-choice-disabled-level-2: var(--dk-color-neutral-300); --dk-icon-choice-disabled-level-2: var(--dk-color-neutral-700); } [data-theme="dark"] { --dk-surface-choice-selected: var(--dk-color-primary-500); --dk-surface-choice-selected-hover: var(--dk-color-primary-400); --dk-surface-choice-selected-active: var(--dk-color-primary-300); --dk-icon-choice-selected: var(--dk-color-primary-900); /* The same pair, mirrored, and NOT moved when light dropped a rung to 400. "Lighter" means opposite things in the two themes: in light it means closer to the page and quieter, which is what was asked for; in dark it would mean further from the page and louder, which is the opposite. Measured, white on the track and the track on the page: neutral-700 6.88 / 2.33 the track fades into the page neutral-600 5.00 / 3.21 ships: both axes clear 3:1 neutral-500 3.75 / 4.28 clears, and shouts for a resting state So dark keeps 600 and clears the floor on both axes, where light trades 0.12 of thumb contrast for a quieter control. */ --dk-surface-choice-track: var(--dk-color-neutral-600); --dk-surface-choice-track-hover: var(--dk-color-neutral-500); --dk-surface-choice-track-active: var(--dk-color-neutral-400); /* White here too: see the light block. The thumb does not change colour. */ --dk-icon-choice-track: var(--dk-color-base-white); /* Neutral here too, see the light block. The box is 1.70:1 against the page and the tick 2.52:1 on the box: quiet, and there. */ --dk-surface-choice-disabled: var(--dk-color-neutral-800); --dk-icon-choice-disabled: var(--dk-color-neutral-500); --dk-surface-choice-disabled-level-1: var(--dk-color-neutral-700); --dk-icon-choice-disabled-level-1: var(--dk-color-neutral-400); --dk-surface-choice-disabled-level-2: var(--dk-color-neutral-600); --dk-icon-choice-disabled-level-2: var(--dk-color-neutral-300); } /* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/tone.css ══════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Tone (status surfaces) — Karmo, 2026-09-08 ─────────────────────────────────────────────────────────── A TONE is a status-coloured container: the tinted panel behind an alert, the solid fill of a badge, the pink box a form error sits in. Drift ships the fills (--surface-{status}-subtle / -default) but never said what STATUS TEXT looks like on top of them — error-500 on error-50 is 3:1, and the component-library's Tag reaches for a --text-{status}-body that no token file defines. This file answers that, and gives SUBTLE tones the same three surface levels the neutral ladder has. MARKUP
…
subtle tint, level 0
…
one step deeper
…
solid fill background: var(--dk-surface-current) — same contract as the level ladder. WHAT A TONE REMAPS (and nothing else — spec C2) --dk-surface-current the tone's fill at this level --text/icon-{status}-default the MATCHING status only → on-tint / on-solid solid fills also: --dk-text-default → on-solid (white; black on warning) --text/icon-neutral-default/-subtle → the status's 50 tint Other statuses, white/black, borders: untouched by design. DISABLED follows the surface since 2026-09-10 — see 1b below. SOLID FILLS DO NOT STEP WITH LEVELS (spec C5, amended after measuring). A solid fill is already the top of its ramp; deepening it in light and lightening it in dark (the -hover/-focus direction) took white text from 4.7:1 to 3.5:1 on the lighter dark rungs. Levels exist to keep text legible, so a level that costs legibility has no reason to exist. The fill holds at the status 500 (light) / 700 (dark) — the same values Button's default variant uses — and data-surface on a solid tone only affects what it affects everywhere else. TWO LAYERS, ON PURPOSE (spec C8 — the theme-inheriting pattern) 1. RAMP tokens, declared on [data-theme="light"] / [data-theme="dark"] like --surface-level-N: --surface-{status}-subtle-level-{0,1,2}, --surface-{status}-solid, --text/icon-{status}-on-subtle-level-{0,1,2}, --text/icon-{status}-on-solid, --text/icon-neutral-on-{status}-solid. They inherit from the NEAREST themed ancestor, so a tone inside a re-themed panel resolves that panel's theme — the level blocks in surface.css cannot say the same (their "KNOWN LIMITATION"). 2. SCOPES, theme-agnostic: [data-theme] [data-tone=…] wires the status's ramp into private --tone-* slots; generic [data-tone] / [data-surface] / [data-tone-fill] scopes pick the level and fill. Selectors carry a bare [data-theme] ancestor only for specificity — (0,3,0) ties the level blocks and wins on source order; level/fill scopes add one attribute. COMPONENT TOKENS MUST DECLARE ON [data-tone] TOO. A component token such as --dk-component-body-error-color: var(--dk-text-error-default) declared only on [data-theme] resolves THERE and is inherited already-resolved; the tone's remap never reaches it. Every components//tokens.css therefore scopes on [data-theme="light"], [data-theme="dark"], [data-surface], [data-tone]. RAMP DIRECTION mirrors what designers already know: level 1 of a subtle tone IS its -subtle-hover value, level 2 its -subtle-focus value. Status text steps the opposite way so contrast holds or improves per level (measured, spec § 9). Success is jade here (primitives/transform.css) — its tone aliases primary's. Warning is a gold: white fails on it, so on-solid text is black and neutral copy on solid warning is neutral-900. ─────────────────────────────────────────────────────────── */ /* ── 1. Ramp tokens (theme-scoped, inherit from the nearest theme) ─────── */ [data-theme="light"] { /* primary */ --dk-surface-primary-subtle-level-0: var(--dk-color-primary-50); --dk-surface-primary-subtle-level-1: var(--dk-color-primary-100); --dk-surface-primary-subtle-level-2: var(--dk-color-primary-200); --dk-surface-primary-solid: var(--dk-color-primary-700); --dk-surface-primary-solid-level-0: var(--dk-color-primary-700); --dk-surface-primary-solid-level-1: var(--dk-color-primary-800); --dk-surface-primary-solid-level-2: var(--dk-color-primary-900); --dk-text-primary-on-subtle-level-0: var(--dk-color-primary-700); --dk-icon-primary-on-subtle-level-0: var(--dk-color-primary-700); --dk-text-primary-on-subtle-level-1: var(--dk-color-primary-800); --dk-icon-primary-on-subtle-level-1: var(--dk-color-primary-800); --dk-text-primary-on-subtle-level-2: var(--dk-color-primary-900); --dk-icon-primary-on-subtle-level-2: var(--dk-color-primary-900); --dk-text-primary-on-solid: var(--dk-text-base-white); --dk-icon-primary-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-primary-solid: var(--dk-color-primary-50); --dk-icon-neutral-on-primary-solid: var(--dk-color-primary-50); /* error */ --dk-surface-error-subtle-level-0: var(--dk-color-error-50); --dk-surface-error-subtle-level-1: var(--dk-color-error-100); --dk-surface-error-subtle-level-2: var(--dk-color-error-200); --dk-surface-error-solid: var(--dk-color-error-700); --dk-surface-error-solid-level-0: var(--dk-color-error-700); --dk-surface-error-solid-level-1: var(--dk-color-error-800); --dk-surface-error-solid-level-2: var(--dk-color-error-900); /* Hairline rules ON a tone. A divider inside a tinted panel drew the neutral grey hairline, which reads as foreign on a tint; and an explicit status hairline returned the same value on the tint as on the page, where it was calibrated. These are the on-tint rungs, measured against the fills they actually sit on: 1.53-1.70 on tint, 1.38-2.14 on solid. Solid fills need the opposite move in dark — a dark rung on a dark fill disappears — so they step toward the light end. */ --dk-border-primary-structural-on-subtle: var(--dk-color-primary-200); --dk-border-primary-structural-on-subtle-level-2: var(--dk-color-primary-300); --dk-border-primary-hairline-on-subtle: var(--dk-color-primary-300); --dk-border-primary-hairline-on-subtle-level-2: var(--dk-color-primary-400); --dk-border-primary-hairline-on-solid: var(--dk-color-primary-300); /* success IS jade — these follow primary like the other 34 tokens in mapped/success.css. Referencing --dk-color-success-* directly drew core Drift's green on a jade fill: #aef3cf against primary's #99dfd2 on the same #e5f7f4 panel, which is the clash that file exists to prevent. */ --dk-border-success-structural-on-subtle: var(--dk-border-primary-structural-on-subtle); --dk-border-success-structural-on-subtle-level-2: var(--dk-border-primary-structural-on-subtle-level-2); --dk-border-success-hairline-on-subtle: var(--dk-border-primary-hairline-on-subtle); --dk-border-success-hairline-on-subtle-level-2: var(--dk-border-primary-hairline-on-subtle-level-2); --dk-border-success-hairline-on-solid: var(--dk-border-primary-hairline-on-solid); --dk-border-error-structural-on-subtle: var(--dk-color-error-200); --dk-border-error-structural-on-subtle-level-2: var(--dk-color-error-300); --dk-border-error-hairline-on-subtle: var(--dk-color-error-300); --dk-border-error-hairline-on-subtle-level-2: var(--dk-color-error-400); --dk-border-error-hairline-on-solid: var(--dk-color-error-300); --dk-border-warning-structural-on-subtle: var(--dk-color-warning-200); --dk-border-warning-structural-on-subtle-level-2: var(--dk-color-warning-300); --dk-border-warning-hairline-on-subtle: var(--dk-color-warning-300); --dk-border-warning-hairline-on-subtle-level-2: var(--dk-color-warning-400); --dk-border-warning-hairline-on-solid: var(--dk-color-warning-300); --dk-border-information-structural-on-subtle: var(--dk-color-information-200); --dk-border-information-structural-on-subtle-level-2: var(--dk-color-information-300); --dk-border-information-hairline-on-subtle: var(--dk-color-information-300); --dk-border-information-hairline-on-subtle-level-2: var(--dk-color-information-400); --dk-border-information-hairline-on-solid: var(--dk-color-information-300); --dk-text-error-on-subtle-level-0: var(--dk-color-error-700); --dk-icon-error-on-subtle-level-0: var(--dk-color-error-700); --dk-text-error-on-subtle-level-1: var(--dk-color-error-800); --dk-icon-error-on-subtle-level-1: var(--dk-color-error-800); --dk-text-error-on-subtle-level-2: var(--dk-color-error-900); --dk-icon-error-on-subtle-level-2: var(--dk-color-error-900); --dk-text-error-on-solid: var(--dk-text-base-white); --dk-icon-error-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-error-solid: var(--dk-color-error-50); --dk-icon-neutral-on-error-solid: var(--dk-color-error-50); /* warning */ --dk-surface-warning-subtle-level-0: var(--dk-color-warning-50); --dk-surface-warning-subtle-level-1: var(--dk-color-warning-100); --dk-surface-warning-subtle-level-2: var(--dk-color-warning-200); --dk-surface-warning-solid: var(--dk-color-warning-700); --dk-surface-warning-solid-level-0: var(--dk-color-warning-700); --dk-surface-warning-solid-level-1: var(--dk-color-warning-800); --dk-surface-warning-solid-level-2: var(--dk-color-warning-900); --dk-text-warning-on-subtle-level-0: var(--dk-color-warning-700); --dk-icon-warning-on-subtle-level-0: var(--dk-color-warning-700); --dk-text-warning-on-subtle-level-1: var(--dk-color-warning-800); --dk-icon-warning-on-subtle-level-1: var(--dk-color-warning-800); --dk-text-warning-on-subtle-level-2: var(--dk-color-warning-900); --dk-icon-warning-on-subtle-level-2: var(--dk-color-warning-900); /* White, by Julio's decision (11 Sep 2026), overriding the contrast reading. Warning's light solid is #ff8c00, where white measures 2.33:1 and black measures 9.00:1 — black was chosen originally for exactly that reason and made warning the only light solid tone clearing 4.5:1. It is changed here for consistency: a lone dark-text badge among four light-text ones read as a mistake on the Surfaces page. Deliberate, not an oversight — and the reason this comment exists. Dark is unaffected: its fill is #995400, where white already measured 5.80:1 and was already correct. If solid tones ever carry real paragraphs rather than short labels, this is the first thing to revisit. */ --dk-text-warning-on-solid: var(--dk-text-base-white); --dk-icon-warning-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-warning-solid: var(--dk-color-warning-50); --dk-icon-neutral-on-warning-solid: var(--dk-color-warning-50); /* information */ --dk-surface-information-subtle-level-0: var(--dk-color-information-50); --dk-surface-information-subtle-level-1: var(--dk-color-information-100); --dk-surface-information-subtle-level-2: var(--dk-color-information-200); --dk-surface-information-solid: var(--dk-color-information-700); --dk-surface-information-solid-level-0: var(--dk-color-information-700); --dk-surface-information-solid-level-1: var(--dk-color-information-800); --dk-surface-information-solid-level-2: var(--dk-color-information-900); --dk-text-information-on-subtle-level-0: var(--dk-color-information-700); --dk-icon-information-on-subtle-level-0: var(--dk-color-information-700); --dk-text-information-on-subtle-level-1: var(--dk-color-information-800); --dk-icon-information-on-subtle-level-1: var(--dk-color-information-800); --dk-text-information-on-subtle-level-2: var(--dk-color-information-900); --dk-icon-information-on-subtle-level-2: var(--dk-color-information-900); --dk-text-information-on-solid: var(--dk-text-base-white); --dk-icon-information-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-information-solid: var(--dk-color-information-50); --dk-icon-neutral-on-information-solid: var(--dk-color-information-50); /* success — Karmo's success IS jade (primitives/transform.css); the tone follows suit */ --dk-surface-success-subtle-level-0: var(--dk-surface-primary-subtle-level-0); --dk-surface-success-subtle-level-1: var(--dk-surface-primary-subtle-level-1); --dk-surface-success-subtle-level-2: var(--dk-surface-primary-subtle-level-2); --dk-surface-success-solid: var(--dk-surface-primary-solid); --dk-surface-success-solid-level-0: var(--dk-surface-primary-solid-level-0); --dk-surface-success-solid-level-1: var(--dk-surface-primary-solid-level-1); --dk-surface-success-solid-level-2: var(--dk-surface-primary-solid-level-2); --dk-text-success-on-subtle-level-0: var(--dk-text-primary-on-subtle-level-0); --dk-icon-success-on-subtle-level-0: var(--dk-icon-primary-on-subtle-level-0); --dk-text-success-on-subtle-level-1: var(--dk-text-primary-on-subtle-level-1); --dk-icon-success-on-subtle-level-1: var(--dk-icon-primary-on-subtle-level-1); --dk-text-success-on-subtle-level-2: var(--dk-text-primary-on-subtle-level-2); --dk-icon-success-on-subtle-level-2: var(--dk-icon-primary-on-subtle-level-2); --dk-text-success-on-solid: var(--dk-text-primary-on-solid); --dk-icon-success-on-solid: var(--dk-icon-primary-on-solid); --dk-text-neutral-on-success-solid: var(--dk-text-neutral-on-primary-solid); --dk-icon-neutral-on-success-solid: var(--dk-icon-neutral-on-primary-solid); } [data-theme="dark"] { /* primary */ --dk-surface-primary-subtle-level-0: var(--dk-color-primary-900); --dk-surface-primary-subtle-level-1: var(--dk-color-primary-800); --dk-surface-primary-subtle-level-2: var(--dk-color-primary-700); --dk-surface-primary-solid: var(--dk-color-primary-700); --dk-surface-primary-solid-level-0: var(--dk-color-primary-700); --dk-surface-primary-solid-level-1: var(--dk-color-primary-800); --dk-surface-primary-solid-level-2: var(--dk-color-primary-900); --dk-text-primary-on-subtle-level-0: var(--dk-color-primary-200); --dk-icon-primary-on-subtle-level-0: var(--dk-color-primary-200); --dk-text-primary-on-subtle-level-1: var(--dk-color-primary-100); --dk-icon-primary-on-subtle-level-1: var(--dk-color-primary-100); --dk-text-primary-on-subtle-level-2: var(--dk-color-primary-50); --dk-icon-primary-on-subtle-level-2: var(--dk-color-primary-50); --dk-text-primary-on-solid: var(--dk-text-base-white); --dk-icon-primary-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-primary-solid: var(--dk-color-primary-50); --dk-icon-neutral-on-primary-solid: var(--dk-color-primary-50); /* error */ --dk-surface-error-subtle-level-0: var(--dk-color-error-900); --dk-surface-error-subtle-level-1: var(--dk-color-error-800); --dk-surface-error-subtle-level-2: var(--dk-color-error-700); --dk-surface-error-solid: var(--dk-color-error-700); --dk-surface-error-solid-level-0: var(--dk-color-error-700); --dk-surface-error-solid-level-1: var(--dk-color-error-800); --dk-surface-error-solid-level-2: var(--dk-color-error-900); /* Hairline rules ON a tone — see the light block. */ --dk-border-primary-structural-on-subtle: var(--dk-color-primary-800); --dk-border-primary-structural-on-subtle-level-2: var(--dk-color-primary-800); --dk-border-primary-hairline-on-subtle: var(--dk-color-primary-700); --dk-border-primary-hairline-on-subtle-level-2: var(--dk-color-primary-500); --dk-border-primary-hairline-on-solid: var(--dk-color-primary-400); --dk-border-success-structural-on-subtle: var(--dk-border-primary-structural-on-subtle); --dk-border-success-structural-on-subtle-level-2: var(--dk-border-primary-structural-on-subtle-level-2); --dk-border-success-hairline-on-subtle: var(--dk-border-primary-hairline-on-subtle); --dk-border-success-hairline-on-subtle-level-2: var(--dk-border-primary-hairline-on-subtle-level-2); --dk-border-success-hairline-on-solid: var(--dk-border-primary-hairline-on-solid); --dk-border-error-structural-on-subtle: var(--dk-color-error-800); --dk-border-error-structural-on-subtle-level-2: var(--dk-color-error-800); --dk-border-error-hairline-on-subtle: var(--dk-color-error-700); --dk-border-error-hairline-on-subtle-level-2: var(--dk-color-error-500); --dk-border-error-hairline-on-solid: var(--dk-color-error-400); /* Warning is the one status whose dark ramp cannot say this with a rung. Every tone here tints at 900 and draws its structural edge at 800, and that single rule lands error at 1.30:1, information at 1.23:1 and primary and success at 1.54:1 against their own fill. Warning lands at 1.63:1, the loudest of the five, and reads louder still because amber on dark brown carries more chroma than blue on dark blue. Julio saw it on the Surfaces page before any measurement. The wiring is not the problem: warning-900 is rgb(51, 28, 0) and warning-800 is rgb(102, 56, 0), exactly double in every channel, so this ramp simply steps further here than the others and has no rung between. Hence the mix, which is derived from the same two primitives rather than being a new colour, so it still follows the palette. 70% lands at 1.40:1, the median of the other four. */ --dk-border-warning-structural-on-subtle: color-mix(in srgb, var(--dk-color-warning-800) 70%, var(--dk-color-warning-900)); --dk-border-warning-structural-on-subtle-level-2: var(--dk-border-warning-structural-on-subtle); --dk-border-warning-hairline-on-subtle: var(--dk-color-warning-700); --dk-border-warning-hairline-on-subtle-level-2: var(--dk-color-warning-500); --dk-border-warning-hairline-on-solid: var(--dk-color-warning-400); --dk-border-information-structural-on-subtle: var(--dk-color-information-800); --dk-border-information-structural-on-subtle-level-2: var(--dk-color-information-800); --dk-border-information-hairline-on-subtle: var(--dk-color-information-700); --dk-border-information-hairline-on-subtle-level-2: var(--dk-color-information-500); --dk-border-information-hairline-on-solid: var(--dk-color-information-400); --dk-text-error-on-subtle-level-0: var(--dk-color-error-200); --dk-icon-error-on-subtle-level-0: var(--dk-color-error-200); --dk-text-error-on-subtle-level-1: var(--dk-color-error-100); --dk-icon-error-on-subtle-level-1: var(--dk-color-error-100); --dk-text-error-on-subtle-level-2: var(--dk-color-error-50); --dk-icon-error-on-subtle-level-2: var(--dk-color-error-50); --dk-text-error-on-solid: var(--dk-text-base-white); --dk-icon-error-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-error-solid: var(--dk-color-error-50); --dk-icon-neutral-on-error-solid: var(--dk-color-error-50); /* warning */ --dk-surface-warning-subtle-level-0: var(--dk-color-warning-900); --dk-surface-warning-subtle-level-1: var(--dk-color-warning-800); --dk-surface-warning-subtle-level-2: var(--dk-color-warning-700); --dk-surface-warning-solid: var(--dk-color-warning-700); --dk-surface-warning-solid-level-0: var(--dk-color-warning-700); --dk-surface-warning-solid-level-1: var(--dk-color-warning-800); --dk-surface-warning-solid-level-2: var(--dk-color-warning-900); --dk-text-warning-on-subtle-level-0: var(--dk-color-warning-200); --dk-icon-warning-on-subtle-level-0: var(--dk-color-warning-200); --dk-text-warning-on-subtle-level-1: var(--dk-color-warning-100); --dk-icon-warning-on-subtle-level-1: var(--dk-color-warning-100); --dk-text-warning-on-subtle-level-2: var(--dk-color-warning-50); --dk-icon-warning-on-subtle-level-2: var(--dk-color-warning-50); --dk-text-warning-on-solid: var(--dk-text-base-white); --dk-icon-warning-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-warning-solid: var(--dk-color-warning-50); --dk-icon-neutral-on-warning-solid: var(--dk-color-warning-50); /* information */ --dk-surface-information-subtle-level-0: var(--dk-color-information-900); --dk-surface-information-subtle-level-1: var(--dk-color-information-800); --dk-surface-information-subtle-level-2: var(--dk-color-information-700); --dk-surface-information-solid: var(--dk-color-information-700); --dk-surface-information-solid-level-0: var(--dk-color-information-700); --dk-surface-information-solid-level-1: var(--dk-color-information-800); --dk-surface-information-solid-level-2: var(--dk-color-information-900); --dk-text-information-on-subtle-level-0: var(--dk-color-information-200); --dk-icon-information-on-subtle-level-0: var(--dk-color-information-200); --dk-text-information-on-subtle-level-1: var(--dk-color-information-100); --dk-icon-information-on-subtle-level-1: var(--dk-color-information-100); --dk-text-information-on-subtle-level-2: var(--dk-color-information-50); --dk-icon-information-on-subtle-level-2: var(--dk-color-information-50); --dk-text-information-on-solid: var(--dk-text-base-white); --dk-icon-information-on-solid: var(--dk-icon-base-white); --dk-text-neutral-on-information-solid: var(--dk-color-information-50); --dk-icon-neutral-on-information-solid: var(--dk-color-information-50); /* success — Karmo's success IS jade (primitives/transform.css); the tone follows suit */ --dk-surface-success-subtle-level-0: var(--dk-surface-primary-subtle-level-0); --dk-surface-success-subtle-level-1: var(--dk-surface-primary-subtle-level-1); --dk-surface-success-subtle-level-2: var(--dk-surface-primary-subtle-level-2); --dk-surface-success-solid: var(--dk-surface-primary-solid); --dk-surface-success-solid-level-0: var(--dk-surface-primary-solid-level-0); --dk-surface-success-solid-level-1: var(--dk-surface-primary-solid-level-1); --dk-surface-success-solid-level-2: var(--dk-surface-primary-solid-level-2); --dk-text-success-on-subtle-level-0: var(--dk-text-primary-on-subtle-level-0); --dk-icon-success-on-subtle-level-0: var(--dk-icon-primary-on-subtle-level-0); --dk-text-success-on-subtle-level-1: var(--dk-text-primary-on-subtle-level-1); --dk-icon-success-on-subtle-level-1: var(--dk-icon-primary-on-subtle-level-1); --dk-text-success-on-subtle-level-2: var(--dk-text-primary-on-subtle-level-2); --dk-icon-success-on-subtle-level-2: var(--dk-icon-primary-on-subtle-level-2); --dk-text-success-on-solid: var(--dk-text-primary-on-solid); --dk-icon-success-on-solid: var(--dk-icon-primary-on-solid); --dk-text-neutral-on-success-solid: var(--dk-text-neutral-on-primary-solid); --dk-icon-neutral-on-success-solid: var(--dk-icon-neutral-on-primary-solid); } /* ── 1b. Disabled ramp tokens — DISABLED FOLLOWS THE SURFACE (2026-09-10) ── A disabled control is a relationship to its surface, not a colour. Core's one neutral recipe (neutral-25 fill / neutral-200 label in light) reads on the default surface, but on a tint the fill vanishes (1.01:1 against success-50) and on a solid it pops as a grey chip with a 1.65:1 label — the "hard to read on the success surface" a developer raised on 10 Sep. Inside a tone the shared disabled family therefore re-declares from the tone's OWN ramp, the way the level ladder already steps disabled one rung: subtle tint fill = one rung deeper than the surface (50→100, 100→200, 200→300 in light; 900→800, 800→700, 700→600 in dark), border one rung past the fill, label the 400 rung in light (warning 500) and 500–600 in dark; solid fill fill = one rung TOWARD the canvas (500→400 light, 700→800 dark) so it recedes rather than reading as hover; label from the far end of the ramp (100 light, warning 800; 400 dark). -default is one rung stronger than -subtle in every slot, keeping Drift's two disabled emphases. Every value is an existing primitive — no alpha. Consumers: Button (all variants), Input, Select, Checkbox, Icon button, Body/Heading/Hero/Eyebrow/Icon [data-disabled]. Measured ratios in the spec (docs/superpowers/specs/2026-09-10-drift-disabled-on-tones-design.md). */ [data-theme="light"] { /* primary — disabled controls on a primary surface */ --dk-surface-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-100); --dk-surface-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-200); --dk-border-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-200); --dk-border-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-300); --dk-text-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-400); --dk-text-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-500); --dk-icon-disabled-subtle-on-primary-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0); --dk-icon-disabled-default-on-primary-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0); --dk-surface-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-200); --dk-surface-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-300); --dk-border-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-300); --dk-border-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-400); --dk-text-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-500); --dk-text-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-600); --dk-icon-disabled-subtle-on-primary-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1); --dk-icon-disabled-default-on-primary-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1); --dk-surface-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-300); --dk-surface-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-400); --dk-border-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-400); --dk-border-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-text-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-600); --dk-text-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-700); --dk-icon-disabled-subtle-on-primary-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2); --dk-icon-disabled-default-on-primary-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2); --dk-surface-disabled-subtle-on-primary-solid: var(--dk-color-primary-400); --dk-surface-disabled-default-on-primary-solid: var(--dk-color-primary-300); --dk-border-disabled-subtle-on-primary-solid: var(--dk-color-primary-400); --dk-border-disabled-default-on-primary-solid: var(--dk-color-primary-300); --dk-text-disabled-subtle-on-primary-solid: var(--dk-color-primary-100); --dk-text-disabled-default-on-primary-solid: var(--dk-color-primary-50); --dk-icon-disabled-subtle-on-primary-solid: var(--dk-text-disabled-subtle-on-primary-solid); --dk-icon-disabled-default-on-primary-solid: var(--dk-text-disabled-default-on-primary-solid); /* error — disabled controls on a error surface */ --dk-surface-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-100); --dk-surface-disabled-default-on-error-subtle-level-0: var(--dk-color-error-200); --dk-border-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-200); --dk-border-disabled-default-on-error-subtle-level-0: var(--dk-color-error-300); --dk-text-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-400); --dk-text-disabled-default-on-error-subtle-level-0: var(--dk-color-error-500); --dk-icon-disabled-subtle-on-error-subtle-level-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0); --dk-icon-disabled-default-on-error-subtle-level-0: var(--dk-text-disabled-default-on-error-subtle-level-0); --dk-surface-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-200); --dk-surface-disabled-default-on-error-subtle-level-1: var(--dk-color-error-300); --dk-border-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-300); --dk-border-disabled-default-on-error-subtle-level-1: var(--dk-color-error-400); --dk-text-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-500); --dk-text-disabled-default-on-error-subtle-level-1: var(--dk-color-error-600); --dk-icon-disabled-subtle-on-error-subtle-level-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1); --dk-icon-disabled-default-on-error-subtle-level-1: var(--dk-text-disabled-default-on-error-subtle-level-1); --dk-surface-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-300); --dk-surface-disabled-default-on-error-subtle-level-2: var(--dk-color-error-400); --dk-border-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-400); --dk-border-disabled-default-on-error-subtle-level-2: var(--dk-color-error-500); --dk-text-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-600); --dk-text-disabled-default-on-error-subtle-level-2: var(--dk-color-error-700); --dk-icon-disabled-subtle-on-error-subtle-level-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2); --dk-icon-disabled-default-on-error-subtle-level-2: var(--dk-text-disabled-default-on-error-subtle-level-2); --dk-surface-disabled-subtle-on-error-solid: var(--dk-color-error-400); --dk-surface-disabled-default-on-error-solid: var(--dk-color-error-300); --dk-border-disabled-subtle-on-error-solid: var(--dk-color-error-400); --dk-border-disabled-default-on-error-solid: var(--dk-color-error-300); --dk-text-disabled-subtle-on-error-solid: var(--dk-color-error-100); --dk-text-disabled-default-on-error-solid: var(--dk-color-error-50); --dk-icon-disabled-subtle-on-error-solid: var(--dk-text-disabled-subtle-on-error-solid); --dk-icon-disabled-default-on-error-solid: var(--dk-text-disabled-default-on-error-solid); /* warning — disabled controls on a warning surface */ --dk-surface-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-100); --dk-surface-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-200); --dk-border-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-200); --dk-border-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-300); --dk-text-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-500); --dk-text-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-600); --dk-icon-disabled-subtle-on-warning-subtle-level-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0); --dk-icon-disabled-default-on-warning-subtle-level-0: var(--dk-text-disabled-default-on-warning-subtle-level-0); --dk-surface-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-200); --dk-surface-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-300); --dk-border-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-300); --dk-border-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-400); --dk-text-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-600); --dk-text-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-700); --dk-icon-disabled-subtle-on-warning-subtle-level-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1); --dk-icon-disabled-default-on-warning-subtle-level-1: var(--dk-text-disabled-default-on-warning-subtle-level-1); --dk-surface-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-300); --dk-surface-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-400); --dk-border-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-400); --dk-border-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-text-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-700); --dk-text-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-800); --dk-icon-disabled-subtle-on-warning-subtle-level-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2); --dk-icon-disabled-default-on-warning-subtle-level-2: var(--dk-text-disabled-default-on-warning-subtle-level-2); --dk-surface-disabled-subtle-on-warning-solid: var(--dk-color-warning-400); --dk-surface-disabled-default-on-warning-solid: var(--dk-color-warning-300); --dk-border-disabled-subtle-on-warning-solid: var(--dk-color-warning-400); --dk-border-disabled-default-on-warning-solid: var(--dk-color-warning-300); --dk-text-disabled-subtle-on-warning-solid: var(--dk-color-warning-800); --dk-text-disabled-default-on-warning-solid: var(--dk-color-warning-900); --dk-icon-disabled-subtle-on-warning-solid: var(--dk-text-disabled-subtle-on-warning-solid); --dk-icon-disabled-default-on-warning-solid: var(--dk-text-disabled-default-on-warning-solid); /* information — disabled controls on a information surface */ --dk-surface-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-100); --dk-surface-disabled-default-on-information-subtle-level-0: var(--dk-color-information-200); --dk-border-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-200); --dk-border-disabled-default-on-information-subtle-level-0: var(--dk-color-information-300); --dk-text-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-400); --dk-text-disabled-default-on-information-subtle-level-0: var(--dk-color-information-500); --dk-icon-disabled-subtle-on-information-subtle-level-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0); --dk-icon-disabled-default-on-information-subtle-level-0: var(--dk-text-disabled-default-on-information-subtle-level-0); --dk-surface-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-200); --dk-surface-disabled-default-on-information-subtle-level-1: var(--dk-color-information-300); --dk-border-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-300); --dk-border-disabled-default-on-information-subtle-level-1: var(--dk-color-information-400); --dk-text-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-500); --dk-text-disabled-default-on-information-subtle-level-1: var(--dk-color-information-600); --dk-icon-disabled-subtle-on-information-subtle-level-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1); --dk-icon-disabled-default-on-information-subtle-level-1: var(--dk-text-disabled-default-on-information-subtle-level-1); --dk-surface-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-300); --dk-surface-disabled-default-on-information-subtle-level-2: var(--dk-color-information-400); --dk-border-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-400); --dk-border-disabled-default-on-information-subtle-level-2: var(--dk-color-information-500); --dk-text-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-600); --dk-text-disabled-default-on-information-subtle-level-2: var(--dk-color-information-700); --dk-icon-disabled-subtle-on-information-subtle-level-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2); --dk-icon-disabled-default-on-information-subtle-level-2: var(--dk-text-disabled-default-on-information-subtle-level-2); --dk-surface-disabled-subtle-on-information-solid: var(--dk-color-information-400); --dk-surface-disabled-default-on-information-solid: var(--dk-color-information-300); --dk-border-disabled-subtle-on-information-solid: var(--dk-color-information-400); --dk-border-disabled-default-on-information-solid: var(--dk-color-information-300); --dk-text-disabled-subtle-on-information-solid: var(--dk-color-information-100); --dk-text-disabled-default-on-information-solid: var(--dk-color-information-50); --dk-icon-disabled-subtle-on-information-solid: var(--dk-text-disabled-subtle-on-information-solid); --dk-icon-disabled-default-on-information-solid: var(--dk-text-disabled-default-on-information-solid); /* success is jade — aliases primary, as the rest of the success ramp does */ --dk-surface-disabled-subtle-on-success-subtle-level-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0); --dk-surface-disabled-default-on-success-subtle-level-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0); --dk-border-disabled-subtle-on-success-subtle-level-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0); --dk-border-disabled-default-on-success-subtle-level-0: var(--dk-border-disabled-default-on-primary-subtle-level-0); --dk-text-disabled-subtle-on-success-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0); --dk-text-disabled-default-on-success-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0); --dk-icon-disabled-subtle-on-success-subtle-level-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0); --dk-icon-disabled-default-on-success-subtle-level-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0); --dk-surface-disabled-subtle-on-success-subtle-level-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1); --dk-surface-disabled-default-on-success-subtle-level-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1); --dk-border-disabled-subtle-on-success-subtle-level-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1); --dk-border-disabled-default-on-success-subtle-level-1: var(--dk-border-disabled-default-on-primary-subtle-level-1); --dk-text-disabled-subtle-on-success-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1); --dk-text-disabled-default-on-success-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1); --dk-icon-disabled-subtle-on-success-subtle-level-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1); --dk-icon-disabled-default-on-success-subtle-level-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1); --dk-surface-disabled-subtle-on-success-subtle-level-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2); --dk-surface-disabled-default-on-success-subtle-level-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2); --dk-border-disabled-subtle-on-success-subtle-level-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2); --dk-border-disabled-default-on-success-subtle-level-2: var(--dk-border-disabled-default-on-primary-subtle-level-2); --dk-text-disabled-subtle-on-success-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2); --dk-text-disabled-default-on-success-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2); --dk-icon-disabled-subtle-on-success-subtle-level-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2); --dk-icon-disabled-default-on-success-subtle-level-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2); --dk-surface-disabled-subtle-on-success-solid: var(--dk-surface-disabled-subtle-on-primary-solid); --dk-surface-disabled-default-on-success-solid: var(--dk-surface-disabled-default-on-primary-solid); --dk-border-disabled-subtle-on-success-solid: var(--dk-border-disabled-subtle-on-primary-solid); --dk-border-disabled-default-on-success-solid: var(--dk-border-disabled-default-on-primary-solid); --dk-text-disabled-subtle-on-success-solid: var(--dk-text-disabled-subtle-on-primary-solid); --dk-text-disabled-default-on-success-solid: var(--dk-text-disabled-default-on-primary-solid); --dk-icon-disabled-subtle-on-success-solid: var(--dk-icon-disabled-subtle-on-primary-solid); --dk-icon-disabled-default-on-success-solid: var(--dk-icon-disabled-default-on-primary-solid); /* inverse — disabled controls on an inverse panel. The panel is the OTHER theme's page colour, so this is the other theme's disabled ramp. */ --dk-surface-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-1000); --dk-surface-disabled-default-on-inverse-level-0: var(--dk-color-neutral-300); --dk-border-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-700); --dk-border-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400); --dk-text-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-600); --dk-text-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400); --dk-icon-disabled-subtle-on-inverse-level-0: var(--dk-text-disabled-subtle-on-inverse-level-0); --dk-icon-disabled-default-on-inverse-level-0: var(--dk-text-disabled-default-on-inverse-level-0); --dk-surface-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-900); --dk-surface-disabled-default-on-inverse-level-1: var(--dk-color-neutral-300); --dk-border-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-700); --dk-border-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400); --dk-text-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-600); --dk-text-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400); --dk-icon-disabled-subtle-on-inverse-level-1: var(--dk-text-disabled-subtle-on-inverse-level-1); --dk-icon-disabled-default-on-inverse-level-1: var(--dk-text-disabled-default-on-inverse-level-1); --dk-surface-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-800); --dk-surface-disabled-default-on-inverse-level-2: var(--dk-color-neutral-300); --dk-border-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-600); --dk-border-disabled-default-on-inverse-level-2: var(--dk-color-neutral-400); --dk-text-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-500); --dk-text-disabled-default-on-inverse-level-2: var(--dk-color-neutral-300); --dk-icon-disabled-subtle-on-inverse-level-2: var(--dk-text-disabled-subtle-on-inverse-level-2); --dk-icon-disabled-default-on-inverse-level-2: var(--dk-text-disabled-default-on-inverse-level-2); } [data-theme="dark"] { /* primary — disabled controls on a primary surface */ --dk-surface-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-800); --dk-surface-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-700); --dk-border-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-700); --dk-border-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-600); --dk-text-disabled-subtle-on-primary-subtle-level-0: var(--dk-color-primary-600); --dk-text-disabled-default-on-primary-subtle-level-0: var(--dk-color-primary-500); --dk-icon-disabled-subtle-on-primary-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0); --dk-icon-disabled-default-on-primary-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0); --dk-surface-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-700); --dk-surface-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-600); --dk-border-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-600); --dk-border-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-500); --dk-text-disabled-subtle-on-primary-subtle-level-1: var(--dk-color-primary-500); --dk-text-disabled-default-on-primary-subtle-level-1: var(--dk-color-primary-400); --dk-icon-disabled-subtle-on-primary-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1); --dk-icon-disabled-default-on-primary-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1); --dk-surface-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-600); --dk-surface-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-border-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-border-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-400); --dk-text-disabled-subtle-on-primary-subtle-level-2: var(--dk-color-primary-300); --dk-text-disabled-default-on-primary-subtle-level-2: var(--dk-color-primary-200); --dk-icon-disabled-subtle-on-primary-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2); --dk-icon-disabled-default-on-primary-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2); --dk-surface-disabled-subtle-on-primary-solid: var(--dk-color-primary-800); --dk-surface-disabled-default-on-primary-solid: var(--dk-color-primary-900); --dk-border-disabled-subtle-on-primary-solid: var(--dk-color-primary-800); --dk-border-disabled-default-on-primary-solid: var(--dk-color-primary-900); --dk-text-disabled-subtle-on-primary-solid: var(--dk-color-primary-400); --dk-text-disabled-default-on-primary-solid: var(--dk-color-primary-300); --dk-icon-disabled-subtle-on-primary-solid: var(--dk-text-disabled-subtle-on-primary-solid); --dk-icon-disabled-default-on-primary-solid: var(--dk-text-disabled-default-on-primary-solid); /* error — disabled controls on a error surface */ --dk-surface-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-800); --dk-surface-disabled-default-on-error-subtle-level-0: var(--dk-color-error-700); --dk-border-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-700); --dk-border-disabled-default-on-error-subtle-level-0: var(--dk-color-error-600); --dk-text-disabled-subtle-on-error-subtle-level-0: var(--dk-color-error-500); --dk-text-disabled-default-on-error-subtle-level-0: var(--dk-color-error-400); --dk-icon-disabled-subtle-on-error-subtle-level-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0); --dk-icon-disabled-default-on-error-subtle-level-0: var(--dk-text-disabled-default-on-error-subtle-level-0); --dk-surface-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-700); --dk-surface-disabled-default-on-error-subtle-level-1: var(--dk-color-error-600); --dk-border-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-600); --dk-border-disabled-default-on-error-subtle-level-1: var(--dk-color-error-500); --dk-text-disabled-subtle-on-error-subtle-level-1: var(--dk-color-error-400); --dk-text-disabled-default-on-error-subtle-level-1: var(--dk-color-error-300); --dk-icon-disabled-subtle-on-error-subtle-level-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1); --dk-icon-disabled-default-on-error-subtle-level-1: var(--dk-text-disabled-default-on-error-subtle-level-1); --dk-surface-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-600); --dk-surface-disabled-default-on-error-subtle-level-2: var(--dk-color-error-500); --dk-border-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-500); --dk-border-disabled-default-on-error-subtle-level-2: var(--dk-color-error-400); --dk-text-disabled-subtle-on-error-subtle-level-2: var(--dk-color-error-300); --dk-text-disabled-default-on-error-subtle-level-2: var(--dk-color-error-200); --dk-icon-disabled-subtle-on-error-subtle-level-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2); --dk-icon-disabled-default-on-error-subtle-level-2: var(--dk-text-disabled-default-on-error-subtle-level-2); --dk-surface-disabled-subtle-on-error-solid: var(--dk-color-error-800); --dk-surface-disabled-default-on-error-solid: var(--dk-color-error-900); --dk-border-disabled-subtle-on-error-solid: var(--dk-color-error-800); --dk-border-disabled-default-on-error-solid: var(--dk-color-error-900); --dk-text-disabled-subtle-on-error-solid: var(--dk-color-error-400); --dk-text-disabled-default-on-error-solid: var(--dk-color-error-300); --dk-icon-disabled-subtle-on-error-solid: var(--dk-text-disabled-subtle-on-error-solid); --dk-icon-disabled-default-on-error-solid: var(--dk-text-disabled-default-on-error-solid); /* warning — disabled controls on a warning surface */ --dk-surface-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-800); --dk-surface-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-700); --dk-border-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-700); --dk-border-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-600); --dk-text-disabled-subtle-on-warning-subtle-level-0: var(--dk-color-warning-500); --dk-text-disabled-default-on-warning-subtle-level-0: var(--dk-color-warning-400); --dk-icon-disabled-subtle-on-warning-subtle-level-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0); --dk-icon-disabled-default-on-warning-subtle-level-0: var(--dk-text-disabled-default-on-warning-subtle-level-0); --dk-surface-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-700); --dk-surface-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-600); --dk-border-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-600); --dk-border-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-500); --dk-text-disabled-subtle-on-warning-subtle-level-1: var(--dk-color-warning-400); --dk-text-disabled-default-on-warning-subtle-level-1: var(--dk-color-warning-300); --dk-icon-disabled-subtle-on-warning-subtle-level-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1); --dk-icon-disabled-default-on-warning-subtle-level-1: var(--dk-text-disabled-default-on-warning-subtle-level-1); --dk-surface-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-600); --dk-surface-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-border-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-border-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-400); --dk-text-disabled-subtle-on-warning-subtle-level-2: var(--dk-color-warning-200); --dk-text-disabled-default-on-warning-subtle-level-2: var(--dk-color-warning-100); --dk-icon-disabled-subtle-on-warning-subtle-level-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2); --dk-icon-disabled-default-on-warning-subtle-level-2: var(--dk-text-disabled-default-on-warning-subtle-level-2); --dk-surface-disabled-subtle-on-warning-solid: var(--dk-color-warning-800); --dk-surface-disabled-default-on-warning-solid: var(--dk-color-warning-900); --dk-border-disabled-subtle-on-warning-solid: var(--dk-color-warning-800); --dk-border-disabled-default-on-warning-solid: var(--dk-color-warning-900); --dk-text-disabled-subtle-on-warning-solid: var(--dk-color-warning-400); --dk-text-disabled-default-on-warning-solid: var(--dk-color-warning-300); --dk-icon-disabled-subtle-on-warning-solid: var(--dk-text-disabled-subtle-on-warning-solid); --dk-icon-disabled-default-on-warning-solid: var(--dk-text-disabled-default-on-warning-solid); /* information — disabled controls on a information surface */ --dk-surface-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-800); --dk-surface-disabled-default-on-information-subtle-level-0: var(--dk-color-information-700); --dk-border-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-700); --dk-border-disabled-default-on-information-subtle-level-0: var(--dk-color-information-600); --dk-text-disabled-subtle-on-information-subtle-level-0: var(--dk-color-information-500); --dk-text-disabled-default-on-information-subtle-level-0: var(--dk-color-information-400); --dk-icon-disabled-subtle-on-information-subtle-level-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0); --dk-icon-disabled-default-on-information-subtle-level-0: var(--dk-text-disabled-default-on-information-subtle-level-0); --dk-surface-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-700); --dk-surface-disabled-default-on-information-subtle-level-1: var(--dk-color-information-600); --dk-border-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-600); --dk-border-disabled-default-on-information-subtle-level-1: var(--dk-color-information-500); --dk-text-disabled-subtle-on-information-subtle-level-1: var(--dk-color-information-400); --dk-text-disabled-default-on-information-subtle-level-1: var(--dk-color-information-300); --dk-icon-disabled-subtle-on-information-subtle-level-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1); --dk-icon-disabled-default-on-information-subtle-level-1: var(--dk-text-disabled-default-on-information-subtle-level-1); --dk-surface-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-600); --dk-surface-disabled-default-on-information-subtle-level-2: var(--dk-color-information-500); --dk-border-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-500); --dk-border-disabled-default-on-information-subtle-level-2: var(--dk-color-information-400); --dk-text-disabled-subtle-on-information-subtle-level-2: var(--dk-color-information-300); --dk-text-disabled-default-on-information-subtle-level-2: var(--dk-color-information-200); --dk-icon-disabled-subtle-on-information-subtle-level-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2); --dk-icon-disabled-default-on-information-subtle-level-2: var(--dk-text-disabled-default-on-information-subtle-level-2); --dk-surface-disabled-subtle-on-information-solid: var(--dk-color-information-800); --dk-surface-disabled-default-on-information-solid: var(--dk-color-information-900); --dk-border-disabled-subtle-on-information-solid: var(--dk-color-information-800); --dk-border-disabled-default-on-information-solid: var(--dk-color-information-900); --dk-text-disabled-subtle-on-information-solid: var(--dk-color-information-400); --dk-text-disabled-default-on-information-solid: var(--dk-color-information-300); --dk-icon-disabled-subtle-on-information-solid: var(--dk-text-disabled-subtle-on-information-solid); --dk-icon-disabled-default-on-information-solid: var(--dk-text-disabled-default-on-information-solid); /* success is jade — aliases primary, as the rest of the success ramp does */ --dk-surface-disabled-subtle-on-success-subtle-level-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0); --dk-surface-disabled-default-on-success-subtle-level-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0); --dk-border-disabled-subtle-on-success-subtle-level-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0); --dk-border-disabled-default-on-success-subtle-level-0: var(--dk-border-disabled-default-on-primary-subtle-level-0); --dk-text-disabled-subtle-on-success-subtle-level-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0); --dk-text-disabled-default-on-success-subtle-level-0: var(--dk-text-disabled-default-on-primary-subtle-level-0); --dk-icon-disabled-subtle-on-success-subtle-level-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0); --dk-icon-disabled-default-on-success-subtle-level-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0); --dk-surface-disabled-subtle-on-success-subtle-level-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1); --dk-surface-disabled-default-on-success-subtle-level-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1); --dk-border-disabled-subtle-on-success-subtle-level-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1); --dk-border-disabled-default-on-success-subtle-level-1: var(--dk-border-disabled-default-on-primary-subtle-level-1); --dk-text-disabled-subtle-on-success-subtle-level-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1); --dk-text-disabled-default-on-success-subtle-level-1: var(--dk-text-disabled-default-on-primary-subtle-level-1); --dk-icon-disabled-subtle-on-success-subtle-level-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1); --dk-icon-disabled-default-on-success-subtle-level-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1); --dk-surface-disabled-subtle-on-success-subtle-level-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2); --dk-surface-disabled-default-on-success-subtle-level-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2); --dk-border-disabled-subtle-on-success-subtle-level-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2); --dk-border-disabled-default-on-success-subtle-level-2: var(--dk-border-disabled-default-on-primary-subtle-level-2); --dk-text-disabled-subtle-on-success-subtle-level-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2); --dk-text-disabled-default-on-success-subtle-level-2: var(--dk-text-disabled-default-on-primary-subtle-level-2); --dk-icon-disabled-subtle-on-success-subtle-level-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2); --dk-icon-disabled-default-on-success-subtle-level-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2); --dk-surface-disabled-subtle-on-success-solid: var(--dk-surface-disabled-subtle-on-primary-solid); --dk-surface-disabled-default-on-success-solid: var(--dk-surface-disabled-default-on-primary-solid); --dk-border-disabled-subtle-on-success-solid: var(--dk-border-disabled-subtle-on-primary-solid); --dk-border-disabled-default-on-success-solid: var(--dk-border-disabled-default-on-primary-solid); --dk-text-disabled-subtle-on-success-solid: var(--dk-text-disabled-subtle-on-primary-solid); --dk-text-disabled-default-on-success-solid: var(--dk-text-disabled-default-on-primary-solid); --dk-icon-disabled-subtle-on-success-solid: var(--dk-icon-disabled-subtle-on-primary-solid); --dk-icon-disabled-default-on-success-solid: var(--dk-icon-disabled-default-on-primary-solid); /* inverse — disabled controls on an inverse panel. The panel is the OTHER theme's page colour, so this is the other theme's disabled ramp. */ --dk-surface-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-25); --dk-surface-disabled-default-on-inverse-level-0: var(--dk-color-neutral-300); --dk-border-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-100); --dk-border-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400); --dk-text-disabled-subtle-on-inverse-level-0: var(--dk-color-neutral-200); --dk-text-disabled-default-on-inverse-level-0: var(--dk-color-neutral-400); --dk-icon-disabled-subtle-on-inverse-level-0: var(--dk-text-disabled-subtle-on-inverse-level-0); --dk-icon-disabled-default-on-inverse-level-0: var(--dk-text-disabled-default-on-inverse-level-0); --dk-surface-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-50); --dk-surface-disabled-default-on-inverse-level-1: var(--dk-color-neutral-300); --dk-border-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-200); --dk-border-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400); --dk-text-disabled-subtle-on-inverse-level-1: var(--dk-color-neutral-300); --dk-text-disabled-default-on-inverse-level-1: var(--dk-color-neutral-400); --dk-icon-disabled-subtle-on-inverse-level-1: var(--dk-text-disabled-subtle-on-inverse-level-1); --dk-icon-disabled-default-on-inverse-level-1: var(--dk-text-disabled-default-on-inverse-level-1); --dk-surface-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-100); --dk-surface-disabled-default-on-inverse-level-2: var(--dk-color-neutral-300); --dk-border-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-300); --dk-border-disabled-default-on-inverse-level-2: var(--dk-color-neutral-400); --dk-text-disabled-subtle-on-inverse-level-2: var(--dk-color-neutral-400); --dk-text-disabled-default-on-inverse-level-2: var(--dk-color-neutral-500); --dk-icon-disabled-subtle-on-inverse-level-2: var(--dk-text-disabled-subtle-on-inverse-level-2); --dk-icon-disabled-default-on-inverse-level-2: var(--dk-text-disabled-default-on-inverse-level-2); } /* ── 2a. Per-status wiring — which ramp feeds the --tone-* slots ────────── */ [data-theme] [data-tone="primary"]:not([data-theme]), [data-theme][data-tone="primary"] { --_tone-surface-subtle-0: var(--dk-surface-primary-subtle-level-0); --_tone-surface-subtle-1: var(--dk-surface-primary-subtle-level-1); --_tone-surface-subtle-2: var(--dk-surface-primary-subtle-level-2); --_tone-surface-solid: var(--dk-surface-primary-solid); --_tone-surface-solid-1: var(--dk-surface-primary-solid-level-1); --_tone-surface-solid-2: var(--dk-surface-primary-solid-level-2); --_tone-border-structural-0: var(--dk-border-primary-structural-on-subtle); --_tone-border-structural-1: var(--dk-border-primary-structural-on-subtle); --_tone-border-structural-2: var(--dk-border-primary-structural-on-subtle-level-2); --_tone-border-hairline-on-subtle-0: var(--dk-border-primary-hairline-on-subtle); --_tone-border-hairline-on-subtle-1: var(--dk-border-primary-hairline-on-subtle); --_tone-border-hairline-on-subtle-2: var(--dk-border-primary-hairline-on-subtle-level-2); --_tone-border-hairline-on-solid: var(--dk-border-primary-hairline-on-solid); --_tone-text-on-subtle-0: var(--dk-text-primary-on-subtle-level-0); --_tone-icon-on-subtle-0: var(--dk-icon-primary-on-subtle-level-0); --_tone-text-on-subtle-1: var(--dk-text-primary-on-subtle-level-1); --_tone-icon-on-subtle-1: var(--dk-icon-primary-on-subtle-level-1); --_tone-text-on-subtle-2: var(--dk-text-primary-on-subtle-level-2); --_tone-icon-on-subtle-2: var(--dk-icon-primary-on-subtle-level-2); --_tone-text-on-solid: var(--dk-text-primary-on-solid); --_tone-icon-on-solid: var(--dk-icon-primary-on-solid); --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-primary-solid); --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-primary-solid); /* the remap that answers "what does primary text look like on a primary surface" */ --dk-text-primary-default: var(--_tone-text); /* disabled family (1b) */ --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-primary-subtle-level-0); --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-primary-subtle-level-0); --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-primary-subtle-level-0); --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-primary-subtle-level-0); --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-primary-subtle-level-0); --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-primary-subtle-level-0); --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-primary-subtle-level-0); --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-primary-subtle-level-0); --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-primary-subtle-level-1); --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-primary-subtle-level-1); --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-primary-subtle-level-1); --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-primary-subtle-level-1); --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-primary-subtle-level-1); --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-primary-subtle-level-1); --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-primary-subtle-level-1); --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-primary-subtle-level-1); --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-primary-subtle-level-2); --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-primary-subtle-level-2); --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-primary-subtle-level-2); --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-primary-subtle-level-2); --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-primary-subtle-level-2); --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-primary-subtle-level-2); --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-primary-subtle-level-2); --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-primary-subtle-level-2); --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-primary-solid); --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-primary-solid); --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-primary-solid); --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-primary-solid); --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-primary-solid); --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-primary-solid); --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-primary-solid); --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-primary-solid); --dk-icon-primary-default: var(--_tone-icon); } [data-theme] [data-tone="success"]:not([data-theme]), [data-theme][data-tone="success"] { --_tone-surface-subtle-0: var(--dk-surface-success-subtle-level-0); --_tone-surface-subtle-1: var(--dk-surface-success-subtle-level-1); --_tone-surface-subtle-2: var(--dk-surface-success-subtle-level-2); --_tone-surface-solid: var(--dk-surface-success-solid); --_tone-surface-solid-1: var(--dk-surface-success-solid-level-1); --_tone-surface-solid-2: var(--dk-surface-success-solid-level-2); --_tone-border-structural-0: var(--dk-border-success-structural-on-subtle); --_tone-border-structural-1: var(--dk-border-success-structural-on-subtle); --_tone-border-structural-2: var(--dk-border-success-structural-on-subtle-level-2); --_tone-border-hairline-on-subtle-0: var(--dk-border-success-hairline-on-subtle); --_tone-border-hairline-on-subtle-1: var(--dk-border-success-hairline-on-subtle); --_tone-border-hairline-on-subtle-2: var(--dk-border-success-hairline-on-subtle-level-2); --_tone-border-hairline-on-solid: var(--dk-border-success-hairline-on-solid); --_tone-text-on-subtle-0: var(--dk-text-success-on-subtle-level-0); --_tone-icon-on-subtle-0: var(--dk-icon-success-on-subtle-level-0); --_tone-text-on-subtle-1: var(--dk-text-success-on-subtle-level-1); --_tone-icon-on-subtle-1: var(--dk-icon-success-on-subtle-level-1); --_tone-text-on-subtle-2: var(--dk-text-success-on-subtle-level-2); --_tone-icon-on-subtle-2: var(--dk-icon-success-on-subtle-level-2); --_tone-text-on-solid: var(--dk-text-success-on-solid); --_tone-icon-on-solid: var(--dk-icon-success-on-solid); --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-success-solid); --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-success-solid); /* the remap that answers "what does success text look like on a success surface" */ --dk-text-success-default: var(--_tone-text); /* disabled family (1b) */ --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-success-subtle-level-0); --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-success-subtle-level-0); --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-success-subtle-level-0); --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-success-subtle-level-0); --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-success-subtle-level-0); --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-success-subtle-level-0); --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-success-subtle-level-0); --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-success-subtle-level-0); --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-success-subtle-level-1); --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-success-subtle-level-1); --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-success-subtle-level-1); --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-success-subtle-level-1); --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-success-subtle-level-1); --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-success-subtle-level-1); --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-success-subtle-level-1); --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-success-subtle-level-1); --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-success-subtle-level-2); --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-success-subtle-level-2); --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-success-subtle-level-2); --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-success-subtle-level-2); --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-success-subtle-level-2); --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-success-subtle-level-2); --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-success-subtle-level-2); --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-success-subtle-level-2); --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-success-solid); --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-success-solid); --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-success-solid); --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-success-solid); --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-success-solid); --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-success-solid); --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-success-solid); --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-success-solid); --dk-icon-success-default: var(--_tone-icon); } [data-theme] [data-tone="error"]:not([data-theme]), [data-theme][data-tone="error"] { --_tone-surface-subtle-0: var(--dk-surface-error-subtle-level-0); --_tone-surface-subtle-1: var(--dk-surface-error-subtle-level-1); --_tone-surface-subtle-2: var(--dk-surface-error-subtle-level-2); --_tone-surface-solid: var(--dk-surface-error-solid); --_tone-surface-solid-1: var(--dk-surface-error-solid-level-1); --_tone-surface-solid-2: var(--dk-surface-error-solid-level-2); --_tone-border-structural-0: var(--dk-border-error-structural-on-subtle); --_tone-border-structural-1: var(--dk-border-error-structural-on-subtle); --_tone-border-structural-2: var(--dk-border-error-structural-on-subtle-level-2); --_tone-border-hairline-on-subtle-0: var(--dk-border-error-hairline-on-subtle); --_tone-border-hairline-on-subtle-1: var(--dk-border-error-hairline-on-subtle); --_tone-border-hairline-on-subtle-2: var(--dk-border-error-hairline-on-subtle-level-2); --_tone-border-hairline-on-solid: var(--dk-border-error-hairline-on-solid); --_tone-text-on-subtle-0: var(--dk-text-error-on-subtle-level-0); --_tone-icon-on-subtle-0: var(--dk-icon-error-on-subtle-level-0); --_tone-text-on-subtle-1: var(--dk-text-error-on-subtle-level-1); --_tone-icon-on-subtle-1: var(--dk-icon-error-on-subtle-level-1); --_tone-text-on-subtle-2: var(--dk-text-error-on-subtle-level-2); --_tone-icon-on-subtle-2: var(--dk-icon-error-on-subtle-level-2); --_tone-text-on-solid: var(--dk-text-error-on-solid); --_tone-icon-on-solid: var(--dk-icon-error-on-solid); --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-error-solid); --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-error-solid); /* the remap that answers "what does error text look like on a error surface" */ --dk-text-error-default: var(--_tone-text); /* disabled family (1b) */ --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-error-subtle-level-0); --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-error-subtle-level-0); --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-error-subtle-level-0); --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-error-subtle-level-0); --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-error-subtle-level-0); --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-error-subtle-level-0); --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-error-subtle-level-0); --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-error-subtle-level-0); --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-error-subtle-level-1); --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-error-subtle-level-1); --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-error-subtle-level-1); --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-error-subtle-level-1); --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-error-subtle-level-1); --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-error-subtle-level-1); --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-error-subtle-level-1); --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-error-subtle-level-1); --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-error-subtle-level-2); --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-error-subtle-level-2); --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-error-subtle-level-2); --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-error-subtle-level-2); --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-error-subtle-level-2); --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-error-subtle-level-2); --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-error-subtle-level-2); --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-error-subtle-level-2); --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-error-solid); --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-error-solid); --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-error-solid); --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-error-solid); --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-error-solid); --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-error-solid); --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-error-solid); --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-error-solid); --dk-icon-error-default: var(--_tone-icon); } [data-theme] [data-tone="warning"]:not([data-theme]), [data-theme][data-tone="warning"] { --_tone-surface-subtle-0: var(--dk-surface-warning-subtle-level-0); --_tone-surface-subtle-1: var(--dk-surface-warning-subtle-level-1); --_tone-surface-subtle-2: var(--dk-surface-warning-subtle-level-2); --_tone-surface-solid: var(--dk-surface-warning-solid); --_tone-surface-solid-1: var(--dk-surface-warning-solid-level-1); --_tone-surface-solid-2: var(--dk-surface-warning-solid-level-2); --_tone-border-structural-0: var(--dk-border-warning-structural-on-subtle); --_tone-border-structural-1: var(--dk-border-warning-structural-on-subtle); --_tone-border-structural-2: var(--dk-border-warning-structural-on-subtle-level-2); --_tone-border-hairline-on-subtle-0: var(--dk-border-warning-hairline-on-subtle); --_tone-border-hairline-on-subtle-1: var(--dk-border-warning-hairline-on-subtle); --_tone-border-hairline-on-subtle-2: var(--dk-border-warning-hairline-on-subtle-level-2); --_tone-border-hairline-on-solid: var(--dk-border-warning-hairline-on-solid); --_tone-text-on-subtle-0: var(--dk-text-warning-on-subtle-level-0); --_tone-icon-on-subtle-0: var(--dk-icon-warning-on-subtle-level-0); --_tone-text-on-subtle-1: var(--dk-text-warning-on-subtle-level-1); --_tone-icon-on-subtle-1: var(--dk-icon-warning-on-subtle-level-1); --_tone-text-on-subtle-2: var(--dk-text-warning-on-subtle-level-2); --_tone-icon-on-subtle-2: var(--dk-icon-warning-on-subtle-level-2); --_tone-text-on-solid: var(--dk-text-warning-on-solid); --_tone-icon-on-solid: var(--dk-icon-warning-on-solid); --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-warning-solid); --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-warning-solid); /* the remap that answers "what does warning text look like on a warning surface" */ --dk-text-warning-default: var(--_tone-text); /* disabled family (1b) */ --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-warning-subtle-level-0); --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-warning-subtle-level-0); --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-warning-subtle-level-0); --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-warning-subtle-level-0); --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-warning-subtle-level-0); --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-warning-subtle-level-0); --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-warning-subtle-level-0); --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-warning-subtle-level-0); --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-warning-subtle-level-1); --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-warning-subtle-level-1); --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-warning-subtle-level-1); --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-warning-subtle-level-1); --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-warning-subtle-level-1); --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-warning-subtle-level-1); --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-warning-subtle-level-1); --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-warning-subtle-level-1); --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-warning-subtle-level-2); --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-warning-subtle-level-2); --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-warning-subtle-level-2); --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-warning-subtle-level-2); --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-warning-subtle-level-2); --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-warning-subtle-level-2); --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-warning-subtle-level-2); --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-warning-subtle-level-2); --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-warning-solid); --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-warning-solid); --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-warning-solid); --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-warning-solid); --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-warning-solid); --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-warning-solid); --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-warning-solid); --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-warning-solid); --dk-icon-warning-default: var(--_tone-icon); } [data-theme] [data-tone="information"]:not([data-theme]), [data-theme][data-tone="information"] { --_tone-surface-subtle-0: var(--dk-surface-information-subtle-level-0); --_tone-surface-subtle-1: var(--dk-surface-information-subtle-level-1); --_tone-surface-subtle-2: var(--dk-surface-information-subtle-level-2); --_tone-surface-solid: var(--dk-surface-information-solid); --_tone-surface-solid-1: var(--dk-surface-information-solid-level-1); --_tone-surface-solid-2: var(--dk-surface-information-solid-level-2); --_tone-border-structural-0: var(--dk-border-information-structural-on-subtle); --_tone-border-structural-1: var(--dk-border-information-structural-on-subtle); --_tone-border-structural-2: var(--dk-border-information-structural-on-subtle-level-2); --_tone-border-hairline-on-subtle-0: var(--dk-border-information-hairline-on-subtle); --_tone-border-hairline-on-subtle-1: var(--dk-border-information-hairline-on-subtle); --_tone-border-hairline-on-subtle-2: var(--dk-border-information-hairline-on-subtle-level-2); --_tone-border-hairline-on-solid: var(--dk-border-information-hairline-on-solid); --_tone-text-on-subtle-0: var(--dk-text-information-on-subtle-level-0); --_tone-icon-on-subtle-0: var(--dk-icon-information-on-subtle-level-0); --_tone-text-on-subtle-1: var(--dk-text-information-on-subtle-level-1); --_tone-icon-on-subtle-1: var(--dk-icon-information-on-subtle-level-1); --_tone-text-on-subtle-2: var(--dk-text-information-on-subtle-level-2); --_tone-icon-on-subtle-2: var(--dk-icon-information-on-subtle-level-2); --_tone-text-on-solid: var(--dk-text-information-on-solid); --_tone-icon-on-solid: var(--dk-icon-information-on-solid); --_tone-text-neutral-on-solid: var(--dk-text-neutral-on-information-solid); --_tone-icon-neutral-on-solid: var(--dk-icon-neutral-on-information-solid); /* the remap that answers "what does information text look like on a information surface" */ --dk-text-information-default: var(--_tone-text); /* disabled family (1b) */ --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-information-subtle-level-0); --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-information-subtle-level-0); --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-information-subtle-level-0); --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-information-subtle-level-0); --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-information-subtle-level-0); --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-information-subtle-level-0); --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-information-subtle-level-0); --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-information-subtle-level-0); --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-information-subtle-level-1); --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-information-subtle-level-1); --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-information-subtle-level-1); --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-information-subtle-level-1); --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-information-subtle-level-1); --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-information-subtle-level-1); --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-information-subtle-level-1); --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-information-subtle-level-1); --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-information-subtle-level-2); --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-information-subtle-level-2); --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-information-subtle-level-2); --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-information-subtle-level-2); --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-information-subtle-level-2); --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-information-subtle-level-2); --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-information-subtle-level-2); --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-information-subtle-level-2); --_tone-surface-disabled-subtle-solid: var(--dk-surface-disabled-subtle-on-information-solid); --_tone-surface-disabled-default-solid: var(--dk-surface-disabled-default-on-information-solid); --_tone-border-disabled-subtle-solid: var(--dk-border-disabled-subtle-on-information-solid); --_tone-border-disabled-default-solid: var(--dk-border-disabled-default-on-information-solid); --_tone-text-disabled-subtle-solid: var(--dk-text-disabled-subtle-on-information-solid); --_tone-text-disabled-default-solid: var(--dk-text-disabled-default-on-information-solid); --_tone-icon-disabled-subtle-solid: var(--dk-icon-disabled-subtle-on-information-solid); --_tone-icon-disabled-default-solid: var(--dk-icon-disabled-default-on-information-solid); --dk-icon-information-default: var(--_tone-icon); } /* ── INVERSE, a tone that is not a status (5.5.0) ─────────────────────────── Until now the only way to make an inverse container was to paint --dk-surface-inverse-default by hand, after which everything inside was wrong: measured in light mode, default body copy rendered BLACK on the near-black panel at 1.31:1, a plain divider drew the light hairline at 13.41:1, and --dk-surface-current still reported #ffffff — the panel lied about what it was sitting on. There were no inverse levels at all, so a nested card had nothing to step to. This widens a tone from "a status-coloured container" to "a container whose colour is not the page's", which is the smaller change: every mechanism below (2b's level/fill picker, --dk-surface-current, --dk-border-hairline-current) is already status-agnostic, so inverse only has to fill the slots. It remaps DEFAULT text and icon rather than a status's, because default is what breaks — that is the whole bug. Neutral copy inverts with it. The disabled slots are deliberately left unset: an unset private slot makes the public token invalid-at-computed-value-time, so it INHERITS the page's value, and the shared disabled family is a mid grey that already reads on an inverse panel (5.57:1 on the light-mode one). A disabled-on-inverse ramp can follow if that stops being true. SCOPE: this is for CONTENT, not controls. It remaps surfaces, default and neutral text, icons and borders. It does NOT remap component tokens, so a button, input, select or checkbox inside an inverse panel still renders in the PAGE's theme. Measured in light mode: a raised button paints its near-white #f4f5f5 fill and a subtle button its pale mint, both of them bright blobs on a near-black panel. For a panel that contains controls, use data-theme instead. A nested data-theme="dark" on a light page resolves to #1e2223, the same colour this tone paints, and every component inside is correct because the whole token set flips rather than a slice of it. That is what the Surfaces page's "Nesting and themes" section demonstrates. Remapping components per tone was considered and rejected: the button alone has 262 tokens, input, select, checkbox, switch, card, tabs and toast have the same problem, and a tone has to flip RELATIVE to the current theme (inverse-in-dark is light), so it would be two full component sets per tone. That is re-implementing theming, worse, inside the tone layer. */ [data-theme] [data-tone="inverse"]:not([data-theme]), [data-theme][data-tone="inverse"] { --_tone-surface-subtle-0: var(--dk-surface-inverse-level-0); --_tone-surface-subtle-1: var(--dk-surface-inverse-level-1); --_tone-surface-subtle-2: var(--dk-surface-inverse-level-2); /* An inverse surface has no tint/solid distinction — it is already the strongest thing on the page — so a solid fill is level 0. Its levels are the inverse ladder it already owns, rather than a second one. */ --_tone-surface-solid: var(--dk-surface-inverse-level-0); --_tone-surface-solid-1: var(--dk-surface-inverse-level-1); --_tone-surface-solid-2: var(--dk-surface-inverse-level-2); --_tone-text-on-subtle-0: var(--dk-text-inverse-default); --_tone-text-on-subtle-1: var(--dk-text-inverse-default); --_tone-text-on-subtle-2: var(--dk-text-inverse-default); --_tone-icon-on-subtle-0: var(--dk-icon-inverse-default); --_tone-icon-on-subtle-1: var(--dk-icon-inverse-default); --_tone-icon-on-subtle-2: var(--dk-icon-inverse-default); --_tone-text-on-solid: var(--dk-text-inverse-default); --_tone-icon-on-solid: var(--dk-icon-inverse-default); /* Steps at level 2, as the status tones do. Every tone's fill moves with the level, so a held hairline converges on it: measured before stepping, inverse ran 1.70 → 1.54 → 1.36 and error's tint ran 1.57 → 1.47 → 1.28. Inverse moves furthest, so it takes the larger step. */ --_tone-border-structural-0: var(--dk-border-inverse-structural); --_tone-border-structural-1: var(--dk-border-inverse-structural); --_tone-border-structural-2: var(--dk-border-inverse-structural-level-2); --_tone-border-hairline-on-subtle-0: var(--dk-border-inverse-hairline); --_tone-border-hairline-on-subtle-1: var(--dk-border-inverse-hairline-level-1); --_tone-border-hairline-on-subtle-2: var(--dk-border-inverse-hairline-level-2); --_tone-border-hairline-on-solid: var(--dk-border-inverse-hairline); /* the remap that answers "what does DEFAULT text look like on an inverse surface" — the status tones remap their own status here instead */ --dk-text-default: var(--_tone-text); --dk-icon-default: var(--_tone-icon); --dk-text-neutral-default: var(--dk-text-inverse-neutral); --dk-icon-neutral-default: var(--dk-icon-inverse-neutral); /* Disabled, filled in at last. 5.5.0 left these unset on the reasoning that an unset private slot makes the public token invalid so it INHERITS the page value. It does not: declaring it from an unset slot makes it guaranteed-invalid for the whole subtree, so every disabled token read nothing inside an inverse panel. Measured: --dk-text-disabled-subtle came back empty there while every status tone returned its own ramp. That is also why check:vars fired the moment a data-tone="inverse" element existed on a docs page, which is how it was found. */ --_tone-surface-disabled-subtle-0: var(--dk-surface-disabled-subtle-on-inverse-level-0); --_tone-surface-disabled-default-0: var(--dk-surface-disabled-default-on-inverse-level-0); --_tone-border-disabled-subtle-0: var(--dk-border-disabled-subtle-on-inverse-level-0); --_tone-border-disabled-default-0: var(--dk-border-disabled-default-on-inverse-level-0); --_tone-text-disabled-subtle-0: var(--dk-text-disabled-subtle-on-inverse-level-0); --_tone-text-disabled-default-0: var(--dk-text-disabled-default-on-inverse-level-0); --_tone-icon-disabled-subtle-0: var(--dk-icon-disabled-subtle-on-inverse-level-0); --_tone-icon-disabled-default-0: var(--dk-icon-disabled-default-on-inverse-level-0); --_tone-surface-disabled-subtle-1: var(--dk-surface-disabled-subtle-on-inverse-level-1); --_tone-surface-disabled-default-1: var(--dk-surface-disabled-default-on-inverse-level-1); --_tone-border-disabled-subtle-1: var(--dk-border-disabled-subtle-on-inverse-level-1); --_tone-border-disabled-default-1: var(--dk-border-disabled-default-on-inverse-level-1); --_tone-text-disabled-subtle-1: var(--dk-text-disabled-subtle-on-inverse-level-1); --_tone-text-disabled-default-1: var(--dk-text-disabled-default-on-inverse-level-1); --_tone-icon-disabled-subtle-1: var(--dk-icon-disabled-subtle-on-inverse-level-1); --_tone-icon-disabled-default-1: var(--dk-icon-disabled-default-on-inverse-level-1); --_tone-surface-disabled-subtle-2: var(--dk-surface-disabled-subtle-on-inverse-level-2); --_tone-surface-disabled-default-2: var(--dk-surface-disabled-default-on-inverse-level-2); --_tone-border-disabled-subtle-2: var(--dk-border-disabled-subtle-on-inverse-level-2); --_tone-border-disabled-default-2: var(--dk-border-disabled-default-on-inverse-level-2); --_tone-text-disabled-subtle-2: var(--dk-text-disabled-subtle-on-inverse-level-2); --_tone-text-disabled-default-2: var(--dk-text-disabled-default-on-inverse-level-2); --_tone-icon-disabled-subtle-2: var(--dk-icon-disabled-subtle-on-inverse-level-2); --_tone-icon-disabled-default-2: var(--dk-icon-disabled-default-on-inverse-level-2); --_tone-surface-disabled-subtle-solid: var(--_tone-surface-disabled-subtle-0); --_tone-surface-disabled-default-solid: var(--_tone-surface-disabled-default-0); --_tone-border-disabled-subtle-solid: var(--_tone-border-disabled-subtle-0); --_tone-border-disabled-default-solid: var(--_tone-border-disabled-default-0); --_tone-text-disabled-subtle-solid: var(--_tone-text-disabled-subtle-0); --_tone-text-disabled-default-solid: var(--_tone-text-disabled-default-0); --_tone-icon-disabled-subtle-solid: var(--_tone-icon-disabled-subtle-0); --_tone-icon-disabled-default-solid: var(--_tone-icon-disabled-default-0); } /* The one property declaration in this file, and it earns its place. A type primitive with no data-color INHERITS by design ("omission inherits"), which is fine for a status tone — the page's black text still reads on a pale tint — and broken for inverse, where the panel is near-black. Measured before this rule existed: default body copy rendered black on the light-mode inverse panel at 1.31:1 even though every token on it resolved correctly to #ffffff. The alternative is making every element inside carry data-color="inverse", which is the exact pattern tones exist to remove. */ [data-theme] [data-tone="inverse"]:not([data-theme]), [data-theme][data-tone="inverse"] { color: var(--dk-text-default); } /* Every selector below names the six tones explicitly rather than matching any [data-tone]. A generic match meant an UNKNOWN value — a prototype using its own word, e.g. data-tone="enquiry" — entered these blocks and read private slots that only the six known tones fill, leaving them empty. An empty custom property is invalid at computed-value time. Where a consumer declares its edge with a shorthand — border: solid var(--dk-border-raised-default) — the empty colour invalidates the WHOLE declaration, so it is dropped, border-style stays at its initial 'none', and the edge computes to 0px and VANISHES. Found 2026-09-11 on customer-comms: all 44 of its data-tone="enquiry" elements measured a 0px border, and the 28 that declare one measure 1px again now. Naming the values makes an unknown tone a no-op, which is the right failure: the element keeps the page's own surface and borders. */ /* ── 2b. Level and fill — theme-agnostic, pick the slot ────────────────── */ [data-theme] [data-tone="primary"]:not([data-theme]), [data-theme] [data-tone="success"]:not([data-theme]), [data-theme] [data-tone="error"]:not([data-theme]), [data-theme] [data-tone="warning"]:not([data-theme]), [data-theme] [data-tone="information"]:not([data-theme]), [data-theme] [data-tone="inverse"]:not([data-theme]), [data-theme][data-tone="primary"], [data-theme][data-tone="success"], [data-theme][data-tone="error"], [data-theme][data-tone="warning"], [data-theme][data-tone="information"], [data-theme][data-tone="inverse"] { --dk-surface-current: var(--_tone-surface-subtle-0); --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-0); /* Structural edges follow the tone too, one rung quieter than the rule: an edge bounds a box, a rule asks to be noticed. Measured, a card inside an error panel drew grey at 1.09:1 before this — wrong hue and nearly invisible. Remapping what components already read means card, modal, tabs, toast, search-input and button need no change. */ --dk-border-raised-default: var(--_tone-border-structural-0); --dk-border-nested-default: var(--_tone-border-structural-0); --_tone-text: var(--_tone-text-on-subtle-0); --_tone-icon: var(--_tone-icon-on-subtle-0); --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-0); --dk-surface-disabled-default: var(--_tone-surface-disabled-default-0); --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-0); --dk-border-disabled-default: var(--_tone-border-disabled-default-0); --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-0); --dk-text-disabled-default: var(--_tone-text-disabled-default-0); --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-0); --dk-icon-disabled-default: var(--_tone-icon-disabled-default-0); } [data-theme] [data-tone="primary"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="1"]:not([data-theme]), [data-theme][data-tone="primary"][data-surface="1"], [data-theme][data-tone="success"][data-surface="1"], [data-theme][data-tone="error"][data-surface="1"], [data-theme][data-tone="warning"][data-surface="1"], [data-theme][data-tone="information"][data-surface="1"], [data-theme][data-tone="inverse"][data-surface="1"] { --dk-surface-current: var(--_tone-surface-subtle-1); --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-1); --dk-border-raised-default: var(--_tone-border-structural-1); --dk-border-nested-default: var(--_tone-border-structural-1); --_tone-text: var(--_tone-text-on-subtle-1); --_tone-icon: var(--_tone-icon-on-subtle-1); --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-1); --dk-surface-disabled-default: var(--_tone-surface-disabled-default-1); --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-1); --dk-border-disabled-default: var(--_tone-border-disabled-default-1); --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-1); --dk-text-disabled-default: var(--_tone-text-disabled-default-1); --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-1); --dk-icon-disabled-default: var(--_tone-icon-disabled-default-1); } [data-theme] [data-tone="primary"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="2"]:not([data-theme]), [data-theme][data-tone="primary"][data-surface="2"], [data-theme][data-tone="success"][data-surface="2"], [data-theme][data-tone="error"][data-surface="2"], [data-theme][data-tone="warning"][data-surface="2"], [data-theme][data-tone="information"][data-surface="2"], [data-theme][data-tone="inverse"][data-surface="2"] { --dk-surface-current: var(--_tone-surface-subtle-2); --dk-border-hairline-current: var(--_tone-border-hairline-on-subtle-2); --dk-border-raised-default: var(--_tone-border-structural-2); --dk-border-nested-default: var(--_tone-border-structural-2); --_tone-text: var(--_tone-text-on-subtle-2); --_tone-icon: var(--_tone-icon-on-subtle-2); --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-2); --dk-surface-disabled-default: var(--_tone-surface-disabled-default-2); --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-2); --dk-border-disabled-default: var(--_tone-border-disabled-default-2); --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-2); --dk-text-disabled-default: var(--_tone-text-disabled-default-2); --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-2); --dk-icon-disabled-default: var(--_tone-icon-disabled-default-2); } /* A SUBTLE TONE PUTS THE PAGE'S OWN TEXT BACK. Only the solid block and inverse ever SET --dk-text-default and the neutral text and icon tokens, so a subtle tone nested inside a solid one inherited the solid values and drew white copy on a pale tint: measured 1.10:1 on the Divider page, an error card inside a solid primary panel, and 1.00:1 on Body. Custom properties inherit, so not setting a token is not the same as leaving it alone. INVERSE IS DELIBERATELY NOT IN THESE SELECTORS. It sets --dk-text-default itself, to the OPPOSITE theme's value, which is the whole point of it. The first cut of this reset reused the level blocks above, whose selector lists include inverse, and overwrote that: check:conformance caught it immediately, 668 readings at 1.09:1 to 1.63:1, every one of them tone:inverse. */ [data-theme] [data-tone="primary"]:not([data-theme]), [data-theme] [data-tone="success"]:not([data-theme]), [data-theme] [data-tone="error"]:not([data-theme]), [data-theme] [data-tone="warning"]:not([data-theme]), [data-theme] [data-tone="information"]:not([data-theme]), [data-theme][data-tone="primary"], [data-theme][data-tone="success"], [data-theme][data-tone="error"], [data-theme][data-tone="warning"], [data-theme][data-tone="information"] { --dk-text-default: var(--_page-text); --dk-icon-default-body: var(--_page-icon-body); --dk-text-neutral-default: var(--_page-text-neutral-default); --dk-text-neutral-subtle: var(--_page-text-neutral-subtle); --dk-icon-neutral-default: var(--_page-icon-neutral-default); --dk-icon-neutral-subtle: var(--_page-icon-neutral-subtle); } [data-theme] [data-tone="primary"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="1"]:not([data-theme]), [data-theme][data-tone="primary"][data-surface="1"], [data-theme][data-tone="success"][data-surface="1"], [data-theme][data-tone="error"][data-surface="1"], [data-theme][data-tone="warning"][data-surface="1"], [data-theme][data-tone="information"][data-surface="1"] { --dk-text-default: var(--_page-text); --dk-icon-default-body: var(--_page-icon-body); --dk-text-neutral-default: var(--dk-text-neutral-default-level-1); --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-1); --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-1); --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-1); } [data-theme] [data-tone="primary"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="2"]:not([data-theme]), [data-theme][data-tone="primary"][data-surface="2"], [data-theme][data-tone="success"][data-surface="2"], [data-theme][data-tone="error"][data-surface="2"], [data-theme][data-tone="warning"][data-surface="2"], [data-theme][data-tone="information"][data-surface="2"] { --dk-text-default: var(--_page-text); --dk-icon-default-body: var(--_page-icon-body); --dk-text-neutral-default: var(--dk-text-neutral-default-level-2); --dk-text-neutral-subtle: var(--dk-text-neutral-subtle-level-2); --dk-icon-neutral-default: var(--dk-icon-neutral-default-level-2); --dk-icon-neutral-subtle: var(--dk-icon-neutral-subtle-level-2); } /* Solid: status text goes on-colour, and so do default and neutral copy — nothing dark survives on a saturated fill. (0,4,0) so it also beats the level blocks' neutral remaps when data-surface is present. */ [data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"], [data-theme][data-tone="success"][data-tone-fill="solid"], [data-theme][data-tone="error"][data-tone-fill="solid"], [data-theme][data-tone="warning"][data-tone-fill="solid"], [data-theme][data-tone="information"][data-tone-fill="solid"] { /* INVERSE IS NOT IN THESE SELECTORS, and that is not an omission. A solid fill is a status at full strength; inverse is not a status, it is "the opposite theme", and there is no such thing as inverse at full strength. That this file contains zero -on-inverse-solid declarations is the proof. While inverse WAS listed here, every var(--_tone-*-on-solid) below resolved to nothing for it, and an empty custom property is invalid at computed value time rather than inherited. Measured: 36 tokens went empty under data-tone="inverse" data-tone-fill="solid", including --dk-text-neutral-default and --dk-icon-neutral-default and everything downstream of them: Button's raised and plain label and icon, all four typography components' neutral colours, Alert's neutral, and the icon button's glyph. check:conformance exists to catch exactly this and could not, because its matrix is themes by levels by tones with no fill axis. Reported as "pick solid, then inverse, and the icon disappears". */ --dk-surface-current: var(--_tone-surface-solid); --dk-border-hairline-current: var(--_tone-border-hairline-on-solid); --_tone-text: var(--_tone-text-on-solid); --_tone-icon: var(--_tone-icon-on-solid); --dk-text-default: var(--_tone-text-on-solid); /* AND THE ICON'S OWN DEFAULT. --dk-icon-default-body is the icon twin of --dk-text-default and icon.css gives it the same two values, but only the text one was remapped here, so data-color="default" on an icon stayed black on a solid fill while the copy beside it went white. Light theme only: dark already has white as its base and agreed by accident. */ --dk-icon-default-body: var(--_tone-icon-on-solid); --dk-text-neutral-default: var(--_tone-text-neutral-on-solid); --dk-text-neutral-subtle: var(--_tone-text-neutral-on-solid); --dk-icon-neutral-default: var(--_tone-icon-neutral-on-solid); --dk-icon-neutral-subtle: var(--_tone-icon-neutral-on-solid); --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid); --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid); --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid); --dk-border-disabled-default: var(--_tone-border-disabled-default-solid); --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid); --dk-text-disabled-default: var(--_tone-text-disabled-default-solid); --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid); --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid); } /* An outline control on a solid fill: its border joins its label. Status borders are otherwise untouched by a tone, as the header says, and at levels 0 to 2 that is correct: the tint stays pale enough that error-500 on error-50 reads as a clean edge. On the solid fill it collapses, because the solid fill IS the 500 rung in light. The button's border and the surface behind it were the same colour, 1.00:1, an edge that does not exist. Julio found it on the Surfaces page: "it might have a border, but you can't see it". Measured before, light: error, warning and information all exactly 1.00:1, primary and success 1.51:1. Three of five were literally invisible and the other two nearly so. EVERY status is remapped now, not only the matching one. The matching status was handled here and the other four were deliberately left alone, on the reasoning that a primary outline button on an error solid banner should keep its primary border because status still has to mean something. The reasoning holds; the execution did not. Left on its own 500 rung against a saturated panel, that border and its label measured 1.57:1 at worst, and 49 of 96 combinations sat below AA. A status nobody can see means nothing either. So the hue survives and the lightness does not: a non-matching status takes rung 50 of ITS OWN ramp, the lightest tint it has. Worst reading across all 120 non-matching combinations is 5.18:1. The MATCHING status still takes the panel's own on-solid colour, so a button that agrees with its panel speaks in the panel's voice and the rest keep theirs. The value is --_tone-text-on-solid rather than a literal white, so the border and the label are the same colour by construction, and both follow whatever on-solid text decides later. 5.8.0 moved warning's on-solid text to white; this inherits that rather than restating it. Measured after, light: information 3.61:1, error 3.48:1, primary and success 2.82:1, warning 2.33:1. Warning is the weakest and is exactly the ratio its white on-solid TEXT already carries on that same fill, which was a deliberate choice in 5.8.0, so the border is no quieter than the label beside it. Dark was never broken, 2.30:1 to 2.91:1, and rises to 5.74:1 to 6.75:1. That is a real increase in weight on dark solid fills, and it is the thing to look at first if these ever read too loud. */ [data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"] { --dk-border-primary-default: var(--_tone-text-on-solid); --dk-icon-success-default: var(--dk-color-primary-50); --dk-icon-error-default: var(--dk-color-error-50); --dk-icon-warning-default: var(--dk-color-warning-50); --dk-icon-information-default: var(--dk-color-information-50); --dk-text-success-default: var(--dk-color-primary-50); --dk-border-success-default: var(--dk-color-primary-50); --dk-text-error-default: var(--dk-color-error-50); --dk-border-error-default: var(--dk-color-error-50); --dk-text-warning-default: var(--dk-color-warning-50); --dk-border-warning-default: var(--dk-color-warning-50); --dk-text-information-default: var(--dk-color-information-50); --dk-border-information-default: var(--dk-color-information-50); } [data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="success"][data-tone-fill="solid"] { --dk-border-success-default: var(--_tone-text-on-solid); --dk-icon-primary-default: var(--dk-color-primary-50); --dk-icon-error-default: var(--dk-color-error-50); --dk-icon-warning-default: var(--dk-color-warning-50); --dk-icon-information-default: var(--dk-color-information-50); --dk-text-primary-default: var(--dk-color-primary-50); --dk-border-primary-default: var(--dk-color-primary-50); --dk-text-error-default: var(--dk-color-error-50); --dk-border-error-default: var(--dk-color-error-50); --dk-text-warning-default: var(--dk-color-warning-50); --dk-border-warning-default: var(--dk-color-warning-50); --dk-text-information-default: var(--dk-color-information-50); --dk-border-information-default: var(--dk-color-information-50); } [data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="error"][data-tone-fill="solid"] { --dk-border-error-default: var(--_tone-text-on-solid); --dk-icon-primary-default: var(--dk-color-primary-50); --dk-icon-success-default: var(--dk-color-primary-50); --dk-icon-warning-default: var(--dk-color-warning-50); --dk-icon-information-default: var(--dk-color-information-50); --dk-text-primary-default: var(--dk-color-primary-50); --dk-border-primary-default: var(--dk-color-primary-50); --dk-text-success-default: var(--dk-color-primary-50); --dk-border-success-default: var(--dk-color-primary-50); --dk-text-warning-default: var(--dk-color-warning-50); --dk-border-warning-default: var(--dk-color-warning-50); --dk-text-information-default: var(--dk-color-information-50); --dk-border-information-default: var(--dk-color-information-50); } [data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="warning"][data-tone-fill="solid"] { --dk-border-warning-default: var(--_tone-text-on-solid); --dk-icon-primary-default: var(--dk-color-primary-50); --dk-icon-success-default: var(--dk-color-primary-50); --dk-icon-error-default: var(--dk-color-error-50); --dk-icon-information-default: var(--dk-color-information-50); --dk-text-primary-default: var(--dk-color-primary-50); --dk-border-primary-default: var(--dk-color-primary-50); --dk-text-success-default: var(--dk-color-primary-50); --dk-border-success-default: var(--dk-color-primary-50); --dk-text-error-default: var(--dk-color-error-50); --dk-border-error-default: var(--dk-color-error-50); --dk-text-information-default: var(--dk-color-information-50); --dk-border-information-default: var(--dk-color-information-50); } [data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="information"][data-tone-fill="solid"] { --dk-border-information-default: var(--_tone-text-on-solid); --dk-icon-primary-default: var(--dk-color-primary-50); --dk-icon-success-default: var(--dk-color-primary-50); --dk-icon-error-default: var(--dk-color-error-50); --dk-icon-warning-default: var(--dk-color-warning-50); --dk-text-primary-default: var(--dk-color-primary-50); --dk-border-primary-default: var(--dk-color-primary-50); --dk-text-success-default: var(--dk-color-primary-50); --dk-border-success-default: var(--dk-color-primary-50); --dk-text-error-default: var(--dk-color-error-50); --dk-border-error-default: var(--dk-color-error-50); --dk-text-warning-default: var(--dk-color-warning-50); --dk-border-warning-default: var(--dk-color-warning-50); } /* SOLID FILLS STEP WITH LEVELS, and only downward. The header note records levels being taken OFF solid after measuring: deepening in light and lightening in dark took white text from 4.7:1 to 3.5:1. That was a ladder running opposite ways per theme. This one does not, because a solid fill is the SAME rung in both themes, 700, which the subtle fills are not. So its ladder is the same in both, and it deepens: 700, 800, 900. White text reads 5.74 at the lightest level and 16.70 at the deepest, so each level sits further above AA than the one before rather than closer to it. LIGHTENING WAS ASKED FOR FIRST and three lighter ladders were built and measured before this one was kept. The panel's own text is only half the question and the easier half; the CONTROL sitting on the panel is the other. On a solid fill a control lifts LIGHTER than its panel, so once the panel is itself light the lift runs out of ramp and the control's glyph has nowhere to sit. Measured on the rendered components, button and icon button, every variant and state: ladder panel text below AA control readings below 3:1 700/800/900 0 of 12 0 of 720 650/700/800 1 of 12 40 of 576 600/700/800 3 of 12 40 of 576 500/600/700 7 of 12 220 of 576 500/600/700 also forces the foreground to invert: white on warning-600 is 3.57 and only black clears AA there, so the panel would carry dark text at one level and light at another. Deepening costs none of this. Level 0 is today's fill, so nothing that does not ask for a level moves. The slot re-assertions below were always here: the (0,4,0) level scopes above would otherwise re-tint a solid panel. */ [data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="1"] { --dk-surface-current: var(--_tone-surface-solid-1); --dk-border-hairline-current: var(--_tone-border-hairline-on-solid); --_tone-text: var(--_tone-text-on-solid); --_tone-icon: var(--_tone-icon-on-solid); --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid); --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid); --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid); --dk-border-disabled-default: var(--_tone-border-disabled-default-solid); --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid); --dk-text-disabled-default: var(--_tone-text-disabled-default-solid); --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid); --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid); } [data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="2"] { --dk-surface-current: var(--_tone-surface-solid-2); --dk-border-hairline-current: var(--_tone-border-hairline-on-solid); --_tone-text: var(--_tone-text-on-solid); --_tone-icon: var(--_tone-icon-on-solid); --dk-surface-disabled-subtle: var(--_tone-surface-disabled-subtle-solid); --dk-surface-disabled-default: var(--_tone-surface-disabled-default-solid); --dk-border-disabled-subtle: var(--_tone-border-disabled-subtle-solid); --dk-border-disabled-default: var(--_tone-border-disabled-default-solid); --dk-text-disabled-subtle: var(--_tone-text-disabled-subtle-solid); --dk-text-disabled-default: var(--_tone-text-disabled-default-solid); --dk-icon-disabled-subtle: var(--_tone-icon-disabled-subtle-solid); --dk-icon-disabled-default: var(--_tone-icon-disabled-default-solid); } /* ── The link ramp on a status tone (29 Sep 2026) ──────────────────────── A link on a tone takes the tone's own text colour, which the tone layer has already measured against its fill at every level and on solid. Jade on an error tint was never measured and would not be the tone's colour anyway. Hover and active share it: on a tone the step is carried by the underline, which thickens and takes currentColor. The resting underline is the tone's hairline, one rung quieter than the text, as it is on the page. THE FIVE STATUS TONES ARE NAMED rather than matched as [data-tone], so an unknown tone value is a no-op instead of an empty slot (status-border-ladder test). INVERSE IS EXCLUDED on purpose. text.css is mirrored into inverse by the build, so an inverse panel already gets the opposite theme's ramp with real hover and active steps; this rule at the same specificity and later in the bundle would flatten that. */ [data-theme] [data-tone="primary"]:not([data-theme]), [data-theme] [data-tone="success"]:not([data-theme]), [data-theme] [data-tone="error"]:not([data-theme]), [data-theme] [data-tone="warning"]:not([data-theme]), [data-theme] [data-tone="information"]:not([data-theme]), [data-theme][data-tone="primary"], [data-theme][data-tone="success"], [data-theme][data-tone="error"], [data-theme][data-tone="warning"], [data-theme][data-tone="information"] { --dk-text-link-default: var(--_tone-text); --dk-text-link-hover: var(--_tone-text); --dk-text-link-active: var(--_tone-text); --dk-text-link-underline: var(--dk-border-hairline-current); } /* ═══════════════════════════════════════════ drift-kit:layer tokens/mapped/hue.css ═══════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Hue (categorical colour) — Karmo, 2026-09-29 ─────────────────────────────────────────────────────────── NINE ON-BRAND HUES for things that are categories rather than statuses: a report's department, a chart's series, a filter chip. Primary and its eight neighbours (primitives/primary-neighbours.css), yellow-green through jade to blue, all at one lightness and chroma per rung so they read as one family. THE RUNGS ARE PRIMARY'S OWN PATTERN, so a hue tag sits beside a status tag built identically: subtle 50 / 850, text on it 700 / 200, hairline 300 / 800, dot 500 / 400. The solid fill is 600 in both themes, Tag's solid rung, where white text is 4.25:1 on every hue because they share a lightness. A HUE IS NOT A STATUS. next4 sits about 15 degrees from the information blue and prev1 on success's hue; that is fine for a category and wrong for a meaning. Tones do not remap these: a category keeps its colour on any panel. The build mirrors this file into inverse like every other mapped file. */ [data-theme="light"] { --dk-surface-hue-prev4-subtle: var(--dk-primitive-color-primary-prev4-50); --dk-text-hue-prev4-on-subtle: var(--dk-primitive-color-primary-prev4-700); --dk-border-hue-prev4-hairline: var(--dk-primitive-color-primary-prev4-300); --dk-icon-hue-prev4-default: var(--dk-primitive-color-primary-prev4-500); --dk-surface-hue-prev4-solid: var(--dk-primitive-color-primary-prev4-600); --dk-surface-hue-prev3-subtle: var(--dk-primitive-color-primary-prev3-50); --dk-text-hue-prev3-on-subtle: var(--dk-primitive-color-primary-prev3-700); --dk-border-hue-prev3-hairline: var(--dk-primitive-color-primary-prev3-300); --dk-icon-hue-prev3-default: var(--dk-primitive-color-primary-prev3-500); --dk-surface-hue-prev3-solid: var(--dk-primitive-color-primary-prev3-600); --dk-surface-hue-prev2-subtle: var(--dk-primitive-color-primary-prev2-50); --dk-text-hue-prev2-on-subtle: var(--dk-primitive-color-primary-prev2-700); --dk-border-hue-prev2-hairline: var(--dk-primitive-color-primary-prev2-300); --dk-icon-hue-prev2-default: var(--dk-primitive-color-primary-prev2-500); --dk-surface-hue-prev2-solid: var(--dk-primitive-color-primary-prev2-600); --dk-surface-hue-prev1-subtle: var(--dk-primitive-color-primary-prev1-50); --dk-text-hue-prev1-on-subtle: var(--dk-primitive-color-primary-prev1-700); --dk-border-hue-prev1-hairline: var(--dk-primitive-color-primary-prev1-300); --dk-icon-hue-prev1-default: var(--dk-primitive-color-primary-prev1-500); --dk-surface-hue-prev1-solid: var(--dk-primitive-color-primary-prev1-600); --dk-surface-hue-primary-subtle: var(--dk-color-primary-50); --dk-text-hue-primary-on-subtle: var(--dk-color-primary-700); --dk-border-hue-primary-hairline: var(--dk-color-primary-300); --dk-icon-hue-primary-default: var(--dk-color-primary-500); --dk-surface-hue-primary-solid: var(--dk-color-primary-600); --dk-surface-hue-next1-subtle: var(--dk-primitive-color-primary-next1-50); --dk-text-hue-next1-on-subtle: var(--dk-primitive-color-primary-next1-700); --dk-border-hue-next1-hairline: var(--dk-primitive-color-primary-next1-300); --dk-icon-hue-next1-default: var(--dk-primitive-color-primary-next1-500); --dk-surface-hue-next1-solid: var(--dk-primitive-color-primary-next1-600); --dk-surface-hue-next2-subtle: var(--dk-primitive-color-primary-next2-50); --dk-text-hue-next2-on-subtle: var(--dk-primitive-color-primary-next2-700); --dk-border-hue-next2-hairline: var(--dk-primitive-color-primary-next2-300); --dk-icon-hue-next2-default: var(--dk-primitive-color-primary-next2-500); --dk-surface-hue-next2-solid: var(--dk-primitive-color-primary-next2-600); --dk-surface-hue-next3-subtle: var(--dk-primitive-color-primary-next3-50); --dk-text-hue-next3-on-subtle: var(--dk-primitive-color-primary-next3-700); --dk-border-hue-next3-hairline: var(--dk-primitive-color-primary-next3-300); --dk-icon-hue-next3-default: var(--dk-primitive-color-primary-next3-500); --dk-surface-hue-next3-solid: var(--dk-primitive-color-primary-next3-600); --dk-surface-hue-next4-subtle: var(--dk-primitive-color-primary-next4-50); --dk-text-hue-next4-on-subtle: var(--dk-primitive-color-primary-next4-700); --dk-border-hue-next4-hairline: var(--dk-primitive-color-primary-next4-300); --dk-icon-hue-next4-default: var(--dk-primitive-color-primary-next4-500); --dk-surface-hue-next4-solid: var(--dk-primitive-color-primary-next4-600); --dk-text-hue-on-solid: var(--dk-text-base-white); } [data-theme="dark"] { --dk-surface-hue-prev4-subtle: var(--dk-primitive-color-primary-prev4-850); --dk-text-hue-prev4-on-subtle: var(--dk-primitive-color-primary-prev4-200); --dk-border-hue-prev4-hairline: var(--dk-primitive-color-primary-prev4-800); --dk-icon-hue-prev4-default: var(--dk-primitive-color-primary-prev4-400); --dk-surface-hue-prev4-solid: var(--dk-primitive-color-primary-prev4-600); --dk-surface-hue-prev3-subtle: var(--dk-primitive-color-primary-prev3-850); --dk-text-hue-prev3-on-subtle: var(--dk-primitive-color-primary-prev3-200); --dk-border-hue-prev3-hairline: var(--dk-primitive-color-primary-prev3-800); --dk-icon-hue-prev3-default: var(--dk-primitive-color-primary-prev3-400); --dk-surface-hue-prev3-solid: var(--dk-primitive-color-primary-prev3-600); --dk-surface-hue-prev2-subtle: var(--dk-primitive-color-primary-prev2-850); --dk-text-hue-prev2-on-subtle: var(--dk-primitive-color-primary-prev2-200); --dk-border-hue-prev2-hairline: var(--dk-primitive-color-primary-prev2-800); --dk-icon-hue-prev2-default: var(--dk-primitive-color-primary-prev2-400); --dk-surface-hue-prev2-solid: var(--dk-primitive-color-primary-prev2-600); --dk-surface-hue-prev1-subtle: var(--dk-primitive-color-primary-prev1-850); --dk-text-hue-prev1-on-subtle: var(--dk-primitive-color-primary-prev1-200); --dk-border-hue-prev1-hairline: var(--dk-primitive-color-primary-prev1-800); --dk-icon-hue-prev1-default: var(--dk-primitive-color-primary-prev1-400); --dk-surface-hue-prev1-solid: var(--dk-primitive-color-primary-prev1-600); --dk-surface-hue-primary-subtle: var(--dk-color-primary-850); --dk-text-hue-primary-on-subtle: var(--dk-color-primary-200); --dk-border-hue-primary-hairline: var(--dk-color-primary-800); --dk-icon-hue-primary-default: var(--dk-color-primary-400); --dk-surface-hue-primary-solid: var(--dk-color-primary-600); --dk-surface-hue-next1-subtle: var(--dk-primitive-color-primary-next1-850); --dk-text-hue-next1-on-subtle: var(--dk-primitive-color-primary-next1-200); --dk-border-hue-next1-hairline: var(--dk-primitive-color-primary-next1-800); --dk-icon-hue-next1-default: var(--dk-primitive-color-primary-next1-400); --dk-surface-hue-next1-solid: var(--dk-primitive-color-primary-next1-600); --dk-surface-hue-next2-subtle: var(--dk-primitive-color-primary-next2-850); --dk-text-hue-next2-on-subtle: var(--dk-primitive-color-primary-next2-200); --dk-border-hue-next2-hairline: var(--dk-primitive-color-primary-next2-800); --dk-icon-hue-next2-default: var(--dk-primitive-color-primary-next2-400); --dk-surface-hue-next2-solid: var(--dk-primitive-color-primary-next2-600); --dk-surface-hue-next3-subtle: var(--dk-primitive-color-primary-next3-850); --dk-text-hue-next3-on-subtle: var(--dk-primitive-color-primary-next3-200); --dk-border-hue-next3-hairline: var(--dk-primitive-color-primary-next3-800); --dk-icon-hue-next3-default: var(--dk-primitive-color-primary-next3-400); --dk-surface-hue-next3-solid: var(--dk-primitive-color-primary-next3-600); --dk-surface-hue-next4-subtle: var(--dk-primitive-color-primary-next4-850); --dk-text-hue-next4-on-subtle: var(--dk-primitive-color-primary-next4-200); --dk-border-hue-next4-hairline: var(--dk-primitive-color-primary-next4-800); --dk-icon-hue-next4-default: var(--dk-primitive-color-primary-next4-400); --dk-surface-hue-next4-solid: var(--dk-primitive-color-primary-next4-600); --dk-text-hue-on-solid: var(--dk-text-base-white); } /* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/control.css ═══════════════════════════════════════ */ /* ============================================================================ Control surfaces and edges, on a tone ---------------------------------------------------------------------------- THE QUESTION THIS ANSWERS: what colour is a control that is SITTING ON a toned surface? Not a control that IS the status, which is what --dk-surface-primary-* already covers, but a neutral control that has to belong to the panel under it: an icon button on an error card, a chip on a solid primary banner. Nothing answered it before. Of 576 surface, border and icon tokens, only fourteen tracked tone, level AND solid fill together, and the only one whose values suited an enabled control's fill was named --dk-surface-disabled-*. Components reaching for a neutral fill therefore got a fixed grey and stayed grey on every tone, which is what made an icon button a grey square on a mint panel and a near-white square on a solid green one. TWO LAYERS, the same pattern tone.css uses and for the same reason: ramp tokens declared per theme so they inherit from the nearest themed ancestor, then a remap per tone and level that points the public name at them. HOW THE RUNGS WERE CHOSEN, since a design system should not carry numbers nobody can re-derive. For every tone, level and fill, the panel's own colour was measured, located on its ramp, and each state given the rung whose contrast against that panel came closest to a target, constrained three ways: it must travel at least one rung, so a control always lifts off its surface; at most three, so it cannot cross into a different colour entirely; and the three states must land on different rungs, so they stay distinguishable. Targets come from the neutral case that was already approved on screen, a white panel with a neutral-25 fill: 1.12, 1.30 and 1.55 for the fill, and 1.30, 1.55 and 1.90 for the edge. "Lifted" means DARKER on a light panel and LIGHTER on a dark one, decided per panel from its measured luminance rather than from the theme, which is what makes solid fills and inverse come out right without a special case. The spread that remains is the ramps', not the rule's: one rung on a dark tinted ramp is a bigger luminance step than one rung near white, so a dark panel's control lifts harder. Medians land at 1.22, 1.71 and 2.30. NOT GENERATED AT BUILD TIME. The values are written out because a token you cannot read in the file is a token nobody can review. ============================================================================ */ /* ── The untoned case: a control on a plain surface. ─────────────────────── Light level 0 is neutral-25 / 50 / 100, which is exactly what the icon button already looked like before any of this. The point of the exercise was to make every OTHER surface behave like this one, not to restyle this one. Measured 1.09 / 1.20 / 1.45 against a white panel: the readings the targets above were taken from. */ [data-theme="light"] { --dk-surface-control-default: var(--dk-color-neutral-25); --dk-surface-control-hover: var(--dk-color-neutral-50); --dk-surface-control-active: var(--dk-color-neutral-100); --dk-surface-control-default-level-1: var(--dk-color-neutral-50); --dk-surface-control-hover-level-1: var(--dk-color-neutral-100); --dk-surface-control-active-level-1: var(--dk-color-neutral-200); --dk-surface-control-default-level-2: var(--dk-color-neutral-100); --dk-surface-control-hover-level-2: var(--dk-color-neutral-200); --dk-surface-control-active-level-2: var(--dk-color-neutral-300); } [data-theme="dark"] { --dk-surface-control-default: var(--dk-color-neutral-1000); --dk-surface-control-hover: var(--dk-color-neutral-900); --dk-surface-control-active: var(--dk-color-neutral-800); --dk-surface-control-default-level-1: var(--dk-color-neutral-900); --dk-surface-control-hover-level-1: var(--dk-color-neutral-800); --dk-surface-control-active-level-1: var(--dk-color-neutral-700); --dk-surface-control-default-level-2: var(--dk-color-neutral-800); --dk-surface-control-hover-level-2: var(--dk-color-neutral-700); --dk-surface-control-active-level-2: var(--dk-color-neutral-600); } /* THE UNTONED GLYPH, AS AN EXPLICIT LADDER. It read --dk-icon-neutral-default and --dk-text-neutral-default, on the reasoning that pointing at the tokens the component already used meant the neutral look could not have moved. Two things forced the change. The neutral family SATURATES: at light level 2 both of those resolve to #37494c, so a pressed glyph had nowhere to go; and in DARK they are the same colour as each other at every level, #bcc2c3 at 0 and 1 and #d3d7d7 at 2, so the untoned hover glyph had never changed at all. The light rungs below are the measured values of the tokens they replace -- 500/600/700 for default and 600/700/800 for hover, checked in the browser -- so the light look is unmoved by construction. Dark keeps its default rungs and gains a hover and a press that are actually different. Disabled stays the token it already read, so the neutral disabled look cannot have moved. Only a status tone overrides any of this. */ [data-theme="light"] { --dk-icon-control-default: var(--dk-color-neutral-500); --dk-icon-control-hover: var(--dk-color-neutral-600); --dk-icon-control-active: var(--dk-color-neutral-700); --dk-icon-control-default-level-1: var(--dk-color-neutral-600); --dk-icon-control-hover-level-1: var(--dk-color-neutral-700); --dk-icon-control-active-level-1: var(--dk-color-neutral-800); --dk-icon-control-default-level-2: var(--dk-color-neutral-700); --dk-icon-control-hover-level-2: var(--dk-color-neutral-800); --dk-icon-control-active-level-2: var(--dk-color-neutral-900); } [data-theme="dark"] { --dk-icon-control-default: var(--dk-color-neutral-200); --dk-icon-control-hover: var(--dk-color-neutral-100); --dk-icon-control-active: var(--dk-color-neutral-50); --dk-icon-control-default-level-1: var(--dk-color-neutral-200); --dk-icon-control-hover-level-1: var(--dk-color-neutral-100); --dk-icon-control-active-level-1: var(--dk-color-neutral-50); --dk-icon-control-default-level-2: var(--dk-color-neutral-100); --dk-icon-control-hover-level-2: var(--dk-color-neutral-50); --dk-icon-control-active-level-2: var(--dk-color-neutral-25); } /* THE UNTONED LABEL. Button has one and the icon button did not, which is why the family had no text member until now. The light rungs are the measured values of --dk-text-neutral-default, 600/700/800, so a plain or raised button on an untoned page is unmoved; dark is pinned to 200/200/100 for the same reason, even though the derivation used for TONED panels would step it, because upstream's own text and icon coincide there. Hover and press step one rung further, the relationship --dk-text-neutral-default already has to --dk-icon-neutral-default at every light level. */ [data-theme="light"] { --dk-text-control-default: var(--dk-color-neutral-600); --dk-text-control-hover: var(--dk-color-neutral-700); --dk-text-control-active: var(--dk-color-neutral-800); --dk-text-control-default-level-1: var(--dk-color-neutral-700); --dk-text-control-hover-level-1: var(--dk-color-neutral-800); --dk-text-control-active-level-1: var(--dk-color-neutral-900); --dk-text-control-default-level-2: var(--dk-color-neutral-800); --dk-text-control-hover-level-2: var(--dk-color-neutral-900); --dk-text-control-active-level-2: var(--dk-color-neutral-1000); } [data-theme="dark"] { --dk-text-control-default: var(--dk-color-neutral-200); --dk-text-control-hover: var(--dk-color-neutral-100); --dk-text-control-active: var(--dk-color-neutral-50); --dk-text-control-default-level-1: var(--dk-color-neutral-200); --dk-text-control-hover-level-1: var(--dk-color-neutral-100); --dk-text-control-active-level-1: var(--dk-color-neutral-50); --dk-text-control-default-level-2: var(--dk-color-neutral-100); --dk-text-control-hover-level-2: var(--dk-color-neutral-50); --dk-text-control-active-level-2: var(--dk-color-neutral-25); } [data-theme="light"], [data-theme="dark"] { --dk-icon-control-disabled: var(--dk-icon-disabled-subtle); --dk-text-control-disabled: var(--dk-text-disabled-subtle); --dk-surface-control-disabled: var(--dk-surface-disabled-subtle); } /* The untoned ladder, the same shape surface.css uses for its own families. */ [data-theme] [data-surface="1"]:not([data-theme]), [data-theme][data-surface="1"] { --dk-surface-control-default: var(--dk-surface-control-default-level-1); --dk-surface-control-hover: var(--dk-surface-control-hover-level-1); --dk-surface-control-active: var(--dk-surface-control-active-level-1); --dk-icon-control-default: var(--dk-icon-control-default-level-1); --dk-icon-control-hover: var(--dk-icon-control-hover-level-1); --dk-icon-control-active: var(--dk-icon-control-active-level-1); --dk-text-control-default: var(--dk-text-control-default-level-1); --dk-text-control-hover: var(--dk-text-control-hover-level-1); --dk-text-control-active: var(--dk-text-control-active-level-1); } [data-theme] [data-surface="2"]:not([data-theme]), [data-theme][data-surface="2"] { --dk-surface-control-default: var(--dk-surface-control-default-level-2); --dk-surface-control-hover: var(--dk-surface-control-hover-level-2); --dk-surface-control-active: var(--dk-surface-control-active-level-2); --dk-icon-control-default: var(--dk-icon-control-default-level-2); --dk-icon-control-hover: var(--dk-icon-control-hover-level-2); --dk-icon-control-active: var(--dk-icon-control-active-level-2); --dk-text-control-default: var(--dk-text-control-default-level-2); --dk-text-control-hover: var(--dk-text-control-hover-level-2); --dk-text-control-active: var(--dk-text-control-active-level-2); } [data-theme="light"] { /* primary */ --dk-surface-control-default-on-primary-subtle-level-0: var(--dk-color-primary-100); --dk-surface-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200); --dk-surface-control-active-on-primary-subtle-level-0: var(--dk-color-primary-300); --dk-border-control-default-on-primary-subtle-level-0: var(--dk-color-primary-200); --dk-border-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-300); --dk-border-control-active-on-primary-subtle-level-0: var(--dk-color-primary-400); --dk-icon-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-300); --dk-surface-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-100); --dk-icon-control-default-on-primary-subtle-level-0: var(--dk-color-primary-700); --dk-icon-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800); --dk-icon-control-active-on-primary-subtle-level-0: var(--dk-color-primary-850); --dk-text-control-default-on-primary-subtle-level-0: var(--dk-color-primary-850); --dk-text-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800); --dk-text-control-active-on-primary-subtle-level-0: var(--dk-color-primary-850); --dk-text-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-400); --dk-surface-control-default-on-primary-subtle-level-1: var(--dk-color-primary-200); --dk-surface-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-300); --dk-surface-control-active-on-primary-subtle-level-1: var(--dk-color-primary-400); --dk-border-control-default-on-primary-subtle-level-1: var(--dk-color-primary-300); --dk-border-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-400); --dk-border-control-active-on-primary-subtle-level-1: var(--dk-color-primary-500); --dk-icon-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-400); --dk-surface-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-200); --dk-icon-control-default-on-primary-subtle-level-1: var(--dk-color-primary-800); --dk-icon-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-850); --dk-icon-control-active-on-primary-subtle-level-1: var(--dk-color-primary-900); --dk-text-control-default-on-primary-subtle-level-1: var(--dk-color-primary-900); --dk-text-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-850); --dk-text-control-active-on-primary-subtle-level-1: var(--dk-color-primary-900); --dk-text-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-500); --dk-surface-control-default-on-primary-subtle-level-2: var(--dk-color-primary-300); --dk-surface-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-400); --dk-surface-control-active-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-border-control-default-on-primary-subtle-level-2: var(--dk-color-primary-400); --dk-border-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-border-control-active-on-primary-subtle-level-2: var(--dk-color-primary-550); --dk-icon-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-surface-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-300); --dk-icon-control-default-on-primary-subtle-level-2: var(--dk-color-primary-850); --dk-icon-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-900); --dk-icon-control-active-on-primary-subtle-level-2: var(--dk-color-primary-800); --dk-text-control-default-on-primary-subtle-level-2: var(--dk-color-primary-850); --dk-text-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-900); --dk-text-control-active-on-primary-subtle-level-2: var(--dk-color-primary-900); --dk-text-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-550); --dk-surface-control-default-on-primary-solid: var(--dk-color-primary-650); --dk-surface-control-hover-on-primary-solid: var(--dk-color-primary-600); --dk-surface-control-active-on-primary-solid: var(--dk-color-primary-550); --dk-border-control-default-on-primary-solid: var(--dk-color-primary-600); --dk-border-control-hover-on-primary-solid: var(--dk-color-primary-550); --dk-border-control-active-on-primary-solid: var(--dk-color-primary-500); --dk-icon-control-disabled-on-primary-solid: var(--dk-color-primary-400); --dk-surface-control-disabled-on-primary-solid: var(--dk-color-primary-650); --dk-icon-control-default-on-primary-solid: var(--dk-color-primary-100); --dk-icon-control-hover-on-primary-solid: var(--dk-color-primary-50); --dk-icon-control-active-on-primary-solid: var(--dk-color-primary-25); --dk-text-control-default-on-primary-solid: var(--dk-color-primary-25); --dk-text-control-hover-on-primary-solid: var(--dk-color-primary-50); --dk-text-control-active-on-primary-solid: var(--dk-color-primary-25); --dk-text-control-disabled-on-primary-solid: var(--dk-color-primary-300); --dk-surface-control-default-on-primary-solid-level-1: var(--dk-color-primary-700); --dk-surface-control-hover-on-primary-solid-level-1: var(--dk-color-primary-650); --dk-surface-control-active-on-primary-solid-level-1: var(--dk-color-primary-600); --dk-border-control-default-on-primary-solid-level-1: var(--dk-color-primary-650); --dk-border-control-hover-on-primary-solid-level-1: var(--dk-color-primary-600); --dk-border-control-active-on-primary-solid-level-1: var(--dk-color-primary-550); --dk-icon-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-500); --dk-surface-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-700); --dk-icon-control-default-on-primary-solid-level-1: var(--dk-color-primary-200); --dk-icon-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100); --dk-icon-control-active-on-primary-solid-level-1: var(--dk-color-primary-50); --dk-text-control-default-on-primary-solid-level-1: var(--dk-color-primary-50); --dk-text-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100); --dk-text-control-active-on-primary-solid-level-1: var(--dk-color-primary-50); --dk-text-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-400); --dk-surface-control-default-on-primary-solid-level-2: var(--dk-color-primary-850); --dk-surface-control-hover-on-primary-solid-level-2: var(--dk-color-primary-800); --dk-surface-control-active-on-primary-solid-level-2: var(--dk-color-primary-700); --dk-border-control-default-on-primary-solid-level-2: var(--dk-color-primary-800); --dk-border-control-hover-on-primary-solid-level-2: var(--dk-color-primary-700); --dk-border-control-active-on-primary-solid-level-2: var(--dk-color-primary-650); --dk-icon-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-700); --dk-surface-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-850); --dk-icon-control-default-on-primary-solid-level-2: var(--dk-color-primary-550); --dk-icon-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500); --dk-icon-control-active-on-primary-solid-level-2: var(--dk-color-primary-300); --dk-text-control-default-on-primary-solid-level-2: var(--dk-color-primary-400); --dk-text-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500); --dk-text-control-active-on-primary-solid-level-2: var(--dk-color-primary-300); --dk-text-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-650); /* success */ --dk-surface-control-default-on-success-subtle-level-0: var(--dk-color-primary-100); --dk-surface-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200); --dk-surface-control-active-on-success-subtle-level-0: var(--dk-color-primary-300); --dk-border-control-default-on-success-subtle-level-0: var(--dk-color-primary-200); --dk-border-control-hover-on-success-subtle-level-0: var(--dk-color-primary-300); --dk-border-control-active-on-success-subtle-level-0: var(--dk-color-primary-400); --dk-icon-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-300); --dk-surface-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-100); --dk-icon-control-default-on-success-subtle-level-0: var(--dk-color-primary-700); --dk-icon-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800); --dk-icon-control-active-on-success-subtle-level-0: var(--dk-color-primary-850); --dk-text-control-default-on-success-subtle-level-0: var(--dk-color-primary-850); --dk-text-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800); --dk-text-control-active-on-success-subtle-level-0: var(--dk-color-primary-850); --dk-text-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-400); --dk-surface-control-default-on-success-subtle-level-1: var(--dk-color-primary-200); --dk-surface-control-hover-on-success-subtle-level-1: var(--dk-color-primary-300); --dk-surface-control-active-on-success-subtle-level-1: var(--dk-color-primary-400); --dk-border-control-default-on-success-subtle-level-1: var(--dk-color-primary-300); --dk-border-control-hover-on-success-subtle-level-1: var(--dk-color-primary-400); --dk-border-control-active-on-success-subtle-level-1: var(--dk-color-primary-500); --dk-icon-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-400); --dk-surface-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-200); --dk-icon-control-default-on-success-subtle-level-1: var(--dk-color-primary-800); --dk-icon-control-hover-on-success-subtle-level-1: var(--dk-color-primary-850); --dk-icon-control-active-on-success-subtle-level-1: var(--dk-color-primary-900); --dk-text-control-default-on-success-subtle-level-1: var(--dk-color-primary-900); --dk-text-control-hover-on-success-subtle-level-1: var(--dk-color-primary-850); --dk-text-control-active-on-success-subtle-level-1: var(--dk-color-primary-900); --dk-text-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-500); --dk-surface-control-default-on-success-subtle-level-2: var(--dk-color-primary-300); --dk-surface-control-hover-on-success-subtle-level-2: var(--dk-color-primary-400); --dk-surface-control-active-on-success-subtle-level-2: var(--dk-color-primary-500); --dk-border-control-default-on-success-subtle-level-2: var(--dk-color-primary-400); --dk-border-control-hover-on-success-subtle-level-2: var(--dk-color-primary-500); --dk-border-control-active-on-success-subtle-level-2: var(--dk-color-primary-550); --dk-icon-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-500); --dk-surface-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-300); --dk-icon-control-default-on-success-subtle-level-2: var(--dk-color-primary-850); --dk-icon-control-hover-on-success-subtle-level-2: var(--dk-color-primary-900); --dk-icon-control-active-on-success-subtle-level-2: var(--dk-color-primary-800); --dk-text-control-default-on-success-subtle-level-2: var(--dk-color-primary-850); --dk-text-control-hover-on-success-subtle-level-2: var(--dk-color-primary-900); --dk-text-control-active-on-success-subtle-level-2: var(--dk-color-primary-900); --dk-text-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-550); --dk-surface-control-default-on-success-solid: var(--dk-color-primary-650); --dk-surface-control-hover-on-success-solid: var(--dk-color-primary-600); --dk-surface-control-active-on-success-solid: var(--dk-color-primary-550); --dk-border-control-default-on-success-solid: var(--dk-color-primary-600); --dk-border-control-hover-on-success-solid: var(--dk-color-primary-550); --dk-border-control-active-on-success-solid: var(--dk-color-primary-500); --dk-icon-control-disabled-on-success-solid: var(--dk-color-primary-400); --dk-surface-control-disabled-on-success-solid: var(--dk-color-primary-650); --dk-icon-control-default-on-success-solid: var(--dk-color-primary-100); --dk-icon-control-hover-on-success-solid: var(--dk-color-primary-50); --dk-icon-control-active-on-success-solid: var(--dk-color-primary-25); --dk-text-control-default-on-success-solid: var(--dk-color-primary-25); --dk-text-control-hover-on-success-solid: var(--dk-color-primary-50); --dk-text-control-active-on-success-solid: var(--dk-color-primary-25); --dk-text-control-disabled-on-success-solid: var(--dk-color-primary-300); --dk-surface-control-default-on-success-solid-level-1: var(--dk-color-primary-700); --dk-surface-control-hover-on-success-solid-level-1: var(--dk-color-primary-650); --dk-surface-control-active-on-success-solid-level-1: var(--dk-color-primary-600); --dk-border-control-default-on-success-solid-level-1: var(--dk-color-primary-650); --dk-border-control-hover-on-success-solid-level-1: var(--dk-color-primary-600); --dk-border-control-active-on-success-solid-level-1: var(--dk-color-primary-550); --dk-icon-control-disabled-on-success-solid-level-1: var(--dk-color-primary-500); --dk-surface-control-disabled-on-success-solid-level-1: var(--dk-color-primary-700); --dk-icon-control-default-on-success-solid-level-1: var(--dk-color-primary-200); --dk-icon-control-hover-on-success-solid-level-1: var(--dk-color-primary-100); --dk-icon-control-active-on-success-solid-level-1: var(--dk-color-primary-50); --dk-text-control-default-on-success-solid-level-1: var(--dk-color-primary-50); --dk-text-control-hover-on-success-solid-level-1: var(--dk-color-primary-100); --dk-text-control-active-on-success-solid-level-1: var(--dk-color-primary-50); --dk-text-control-disabled-on-success-solid-level-1: var(--dk-color-primary-400); --dk-surface-control-default-on-success-solid-level-2: var(--dk-color-primary-850); --dk-surface-control-hover-on-success-solid-level-2: var(--dk-color-primary-800); --dk-surface-control-active-on-success-solid-level-2: var(--dk-color-primary-700); --dk-border-control-default-on-success-solid-level-2: var(--dk-color-primary-800); --dk-border-control-hover-on-success-solid-level-2: var(--dk-color-primary-700); --dk-border-control-active-on-success-solid-level-2: var(--dk-color-primary-650); --dk-icon-control-disabled-on-success-solid-level-2: var(--dk-color-primary-700); --dk-surface-control-disabled-on-success-solid-level-2: var(--dk-color-primary-850); --dk-icon-control-default-on-success-solid-level-2: var(--dk-color-primary-550); --dk-icon-control-hover-on-success-solid-level-2: var(--dk-color-primary-500); --dk-icon-control-active-on-success-solid-level-2: var(--dk-color-primary-300); --dk-text-control-default-on-success-solid-level-2: var(--dk-color-primary-400); --dk-text-control-hover-on-success-solid-level-2: var(--dk-color-primary-500); --dk-text-control-active-on-success-solid-level-2: var(--dk-color-primary-300); --dk-text-control-disabled-on-success-solid-level-2: var(--dk-color-primary-650); /* error */ --dk-surface-control-default-on-error-subtle-level-0: var(--dk-color-error-100); --dk-surface-control-hover-on-error-subtle-level-0: var(--dk-color-error-200); --dk-surface-control-active-on-error-subtle-level-0: var(--dk-color-error-300); --dk-border-control-default-on-error-subtle-level-0: var(--dk-color-error-200); --dk-border-control-hover-on-error-subtle-level-0: var(--dk-color-error-300); --dk-border-control-active-on-error-subtle-level-0: var(--dk-color-error-400); --dk-icon-control-disabled-on-error-subtle-level-0: var(--dk-color-error-300); --dk-surface-control-disabled-on-error-subtle-level-0: var(--dk-color-error-100); --dk-icon-control-default-on-error-subtle-level-0: var(--dk-color-error-800); --dk-icon-control-hover-on-error-subtle-level-0: var(--dk-color-error-900); --dk-icon-control-active-on-error-subtle-level-0: var(--dk-color-error-700); --dk-text-control-default-on-error-subtle-level-0: var(--dk-color-error-800); --dk-text-control-hover-on-error-subtle-level-0: var(--dk-color-error-900); --dk-text-control-active-on-error-subtle-level-0: var(--dk-color-error-800); --dk-text-control-disabled-on-error-subtle-level-0: var(--dk-color-error-400); --dk-surface-control-default-on-error-subtle-level-1: var(--dk-color-error-50); --dk-surface-control-hover-on-error-subtle-level-1: var(--dk-color-error-25); --dk-surface-control-active-on-error-subtle-level-1: var(--dk-color-error-200); --dk-border-control-default-on-error-subtle-level-1: var(--dk-color-error-25); --dk-border-control-hover-on-error-subtle-level-1: var(--dk-color-error-300); --dk-border-control-active-on-error-subtle-level-1: var(--dk-color-error-400); --dk-icon-control-disabled-on-error-subtle-level-1: var(--dk-color-error-300); --dk-surface-control-disabled-on-error-subtle-level-1: var(--dk-color-error-50); --dk-icon-control-default-on-error-subtle-level-1: var(--dk-color-error-800); --dk-icon-control-hover-on-error-subtle-level-1: var(--dk-color-error-900); --dk-icon-control-active-on-error-subtle-level-1: var(--dk-color-error-700); --dk-text-control-default-on-error-subtle-level-1: var(--dk-color-error-800); --dk-text-control-hover-on-error-subtle-level-1: var(--dk-color-error-900); --dk-text-control-active-on-error-subtle-level-1: var(--dk-color-error-800); --dk-text-control-disabled-on-error-subtle-level-1: var(--dk-color-error-400); --dk-surface-control-default-on-error-subtle-level-2: var(--dk-color-error-100); --dk-surface-control-hover-on-error-subtle-level-2: var(--dk-color-error-50); --dk-surface-control-active-on-error-subtle-level-2: var(--dk-color-error-25); --dk-border-control-default-on-error-subtle-level-2: var(--dk-color-error-25); --dk-border-control-hover-on-error-subtle-level-2: var(--dk-color-error-100); --dk-border-control-active-on-error-subtle-level-2: var(--dk-color-error-400); --dk-icon-control-disabled-on-error-subtle-level-2: var(--dk-color-error-300); --dk-surface-control-disabled-on-error-subtle-level-2: var(--dk-color-error-100); --dk-icon-control-default-on-error-subtle-level-2: var(--dk-color-error-900); --dk-icon-control-hover-on-error-subtle-level-2: var(--dk-color-error-800); --dk-icon-control-active-on-error-subtle-level-2: var(--dk-color-error-700); --dk-text-control-default-on-error-subtle-level-2: var(--dk-color-error-900); --dk-text-control-hover-on-error-subtle-level-2: var(--dk-color-error-800); --dk-text-control-active-on-error-subtle-level-2: var(--dk-color-error-700); --dk-text-control-disabled-on-error-subtle-level-2: var(--dk-color-error-400); --dk-surface-control-default-on-error-solid: var(--dk-color-error-650); --dk-surface-control-hover-on-error-solid: var(--dk-color-error-600); --dk-surface-control-active-on-error-solid: var(--dk-color-error-550); --dk-border-control-default-on-error-solid: var(--dk-color-error-550); --dk-border-control-hover-on-error-solid: var(--dk-color-error-500); --dk-border-control-active-on-error-solid: var(--dk-color-error-400); --dk-icon-control-disabled-on-error-solid: var(--dk-color-error-400); --dk-surface-control-disabled-on-error-solid: var(--dk-color-error-650); --dk-icon-control-default-on-error-solid: var(--dk-color-error-100); --dk-icon-control-hover-on-error-solid: var(--dk-color-error-50); --dk-icon-control-active-on-error-solid: var(--dk-color-error-25); --dk-text-control-default-on-error-solid: var(--dk-color-error-25); --dk-text-control-hover-on-error-solid: var(--dk-color-error-50); --dk-text-control-active-on-error-solid: var(--dk-color-error-25); --dk-text-control-disabled-on-error-solid: var(--dk-color-error-300); --dk-surface-control-default-on-error-solid-level-1: var(--dk-color-error-700); --dk-surface-control-hover-on-error-solid-level-1: var(--dk-color-error-650); --dk-surface-control-active-on-error-solid-level-1: var(--dk-color-error-600); --dk-border-control-default-on-error-solid-level-1: var(--dk-color-error-650); --dk-border-control-hover-on-error-solid-level-1: var(--dk-color-error-600); --dk-border-control-active-on-error-solid-level-1: var(--dk-color-error-550); --dk-icon-control-disabled-on-error-solid-level-1: var(--dk-color-error-400); --dk-surface-control-disabled-on-error-solid-level-1: var(--dk-color-error-700); --dk-icon-control-default-on-error-solid-level-1: var(--dk-color-error-200); --dk-icon-control-hover-on-error-solid-level-1: var(--dk-color-error-100); --dk-icon-control-active-on-error-solid-level-1: var(--dk-color-error-50); --dk-text-control-default-on-error-solid-level-1: var(--dk-color-error-50); --dk-text-control-hover-on-error-solid-level-1: var(--dk-color-error-100); --dk-text-control-active-on-error-solid-level-1: var(--dk-color-error-50); --dk-text-control-disabled-on-error-solid-level-1: var(--dk-color-error-300); --dk-surface-control-default-on-error-solid-level-2: var(--dk-color-error-800); --dk-surface-control-hover-on-error-solid-level-2: var(--dk-color-error-700); --dk-surface-control-active-on-error-solid-level-2: var(--dk-color-error-650); --dk-border-control-default-on-error-solid-level-2: var(--dk-color-error-700); --dk-border-control-hover-on-error-solid-level-2: var(--dk-color-error-650); --dk-border-control-active-on-error-solid-level-2: var(--dk-color-error-600); --dk-icon-control-disabled-on-error-solid-level-2: var(--dk-color-error-500); --dk-surface-control-disabled-on-error-solid-level-2: var(--dk-color-error-800); --dk-icon-control-default-on-error-solid-level-2: var(--dk-color-error-300); --dk-icon-control-hover-on-error-solid-level-2: var(--dk-color-error-200); --dk-icon-control-active-on-error-solid-level-2: var(--dk-color-error-100); --dk-text-control-default-on-error-solid-level-2: var(--dk-color-error-100); --dk-text-control-hover-on-error-solid-level-2: var(--dk-color-error-200); --dk-text-control-active-on-error-solid-level-2: var(--dk-color-error-100); --dk-text-control-disabled-on-error-solid-level-2: var(--dk-color-error-400); /* warning */ --dk-surface-control-default-on-warning-subtle-level-0: var(--dk-color-warning-100); --dk-surface-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-200); --dk-surface-control-active-on-warning-subtle-level-0: var(--dk-color-warning-300); --dk-border-control-default-on-warning-subtle-level-0: var(--dk-color-warning-200); --dk-border-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-400); --dk-border-control-active-on-warning-subtle-level-0: var(--dk-color-warning-500); --dk-icon-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-300); --dk-surface-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-100); --dk-icon-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800); --dk-icon-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-900); --dk-icon-control-active-on-warning-subtle-level-0: var(--dk-color-warning-700); --dk-text-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800); --dk-text-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-900); --dk-text-control-active-on-warning-subtle-level-0: var(--dk-color-warning-800); --dk-text-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-400); --dk-surface-control-default-on-warning-subtle-level-1: var(--dk-color-warning-200); --dk-surface-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-300); --dk-surface-control-active-on-warning-subtle-level-1: var(--dk-color-warning-400); --dk-border-control-default-on-warning-subtle-level-1: var(--dk-color-warning-300); --dk-border-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-400); --dk-border-control-active-on-warning-subtle-level-1: var(--dk-color-warning-500); --dk-icon-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-400); --dk-surface-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-200); --dk-icon-control-default-on-warning-subtle-level-1: var(--dk-color-warning-800); --dk-icon-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-900); --dk-icon-control-active-on-warning-subtle-level-1: var(--dk-color-warning-800); --dk-text-control-default-on-warning-subtle-level-1: var(--dk-color-warning-800); --dk-text-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-900); --dk-text-control-active-on-warning-subtle-level-1: var(--dk-color-warning-800); --dk-text-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-500); --dk-surface-control-default-on-warning-subtle-level-2: var(--dk-color-warning-300); --dk-surface-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-400); --dk-surface-control-active-on-warning-subtle-level-2: var(--dk-color-warning-550); --dk-border-control-default-on-warning-subtle-level-2: var(--dk-color-warning-400); --dk-border-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-border-control-active-on-warning-subtle-level-2: var(--dk-color-warning-600); --dk-icon-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-surface-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-300); --dk-icon-control-default-on-warning-subtle-level-2: var(--dk-color-warning-800); --dk-icon-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900); --dk-icon-control-active-on-warning-subtle-level-2: var(--dk-color-warning-800); --dk-text-control-default-on-warning-subtle-level-2: var(--dk-color-warning-800); --dk-text-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900); --dk-text-control-active-on-warning-subtle-level-2: var(--dk-color-warning-900); --dk-text-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-550); --dk-surface-control-default-on-warning-solid: var(--dk-color-warning-650); --dk-surface-control-hover-on-warning-solid: var(--dk-color-warning-600); --dk-surface-control-active-on-warning-solid: var(--dk-color-warning-600); --dk-border-control-default-on-warning-solid: var(--dk-color-warning-600); --dk-border-control-hover-on-warning-solid: var(--dk-color-warning-550); --dk-border-control-active-on-warning-solid: var(--dk-color-warning-500); --dk-icon-control-disabled-on-warning-solid: var(--dk-color-warning-400); --dk-surface-control-disabled-on-warning-solid: var(--dk-color-warning-650); --dk-icon-control-default-on-warning-solid: var(--dk-color-warning-100); --dk-icon-control-hover-on-warning-solid: var(--dk-color-warning-50); --dk-icon-control-active-on-warning-solid: var(--dk-color-warning-25); --dk-text-control-default-on-warning-solid: var(--dk-color-warning-25); --dk-text-control-hover-on-warning-solid: var(--dk-color-warning-50); --dk-text-control-active-on-warning-solid: var(--dk-color-warning-25); --dk-text-control-disabled-on-warning-solid: var(--dk-color-warning-300); --dk-surface-control-default-on-warning-solid-level-1: var(--dk-color-warning-700); --dk-surface-control-hover-on-warning-solid-level-1: var(--dk-color-warning-650); --dk-surface-control-active-on-warning-solid-level-1: var(--dk-color-warning-600); --dk-border-control-default-on-warning-solid-level-1: var(--dk-color-warning-650); --dk-border-control-hover-on-warning-solid-level-1: var(--dk-color-warning-600); --dk-border-control-active-on-warning-solid-level-1: var(--dk-color-warning-550); --dk-icon-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-550); --dk-surface-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-700); --dk-icon-control-default-on-warning-solid-level-1: var(--dk-color-warning-200); --dk-icon-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100); --dk-icon-control-active-on-warning-solid-level-1: var(--dk-color-warning-50); --dk-text-control-default-on-warning-solid-level-1: var(--dk-color-warning-50); --dk-text-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100); --dk-text-control-active-on-warning-solid-level-1: var(--dk-color-warning-50); --dk-text-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-500); --dk-surface-control-default-on-warning-solid-level-2: var(--dk-color-warning-800); --dk-surface-control-hover-on-warning-solid-level-2: var(--dk-color-warning-700); --dk-surface-control-active-on-warning-solid-level-2: var(--dk-color-warning-700); --dk-border-control-default-on-warning-solid-level-2: var(--dk-color-warning-700); --dk-border-control-hover-on-warning-solid-level-2: var(--dk-color-warning-650); --dk-border-control-active-on-warning-solid-level-2: var(--dk-color-warning-600); --dk-icon-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-650); --dk-surface-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-800); --dk-icon-control-default-on-warning-solid-level-2: var(--dk-color-warning-500); --dk-icon-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300); --dk-icon-control-active-on-warning-solid-level-2: var(--dk-color-warning-200); --dk-text-control-default-on-warning-solid-level-2: var(--dk-color-warning-400); --dk-text-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300); --dk-text-control-active-on-warning-solid-level-2: var(--dk-color-warning-200); --dk-text-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-600); /* information */ --dk-surface-control-default-on-information-subtle-level-0: var(--dk-color-information-100); --dk-surface-control-hover-on-information-subtle-level-0: var(--dk-color-information-200); --dk-surface-control-active-on-information-subtle-level-0: var(--dk-color-information-300); --dk-border-control-default-on-information-subtle-level-0: var(--dk-color-information-200); --dk-border-control-hover-on-information-subtle-level-0: var(--dk-color-information-300); --dk-border-control-active-on-information-subtle-level-0: var(--dk-color-information-400); --dk-icon-control-disabled-on-information-subtle-level-0: var(--dk-color-information-300); --dk-surface-control-disabled-on-information-subtle-level-0: var(--dk-color-information-100); --dk-icon-control-default-on-information-subtle-level-0: var(--dk-color-information-800); --dk-icon-control-hover-on-information-subtle-level-0: var(--dk-color-information-900); --dk-icon-control-active-on-information-subtle-level-0: var(--dk-color-information-700); --dk-text-control-default-on-information-subtle-level-0: var(--dk-color-information-800); --dk-text-control-hover-on-information-subtle-level-0: var(--dk-color-information-900); --dk-text-control-active-on-information-subtle-level-0: var(--dk-color-information-800); --dk-text-control-disabled-on-information-subtle-level-0: var(--dk-color-information-400); --dk-surface-control-default-on-information-subtle-level-1: var(--dk-color-information-50); --dk-surface-control-hover-on-information-subtle-level-1: var(--dk-color-information-25); --dk-surface-control-active-on-information-subtle-level-1: var(--dk-color-information-200); --dk-border-control-default-on-information-subtle-level-1: var(--dk-color-information-25); --dk-border-control-hover-on-information-subtle-level-1: var(--dk-color-information-300); --dk-border-control-active-on-information-subtle-level-1: var(--dk-color-information-400); --dk-icon-control-disabled-on-information-subtle-level-1: var(--dk-color-information-300); --dk-surface-control-disabled-on-information-subtle-level-1: var(--dk-color-information-50); --dk-icon-control-default-on-information-subtle-level-1: var(--dk-color-information-800); --dk-icon-control-hover-on-information-subtle-level-1: var(--dk-color-information-900); --dk-icon-control-active-on-information-subtle-level-1: var(--dk-color-information-700); --dk-text-control-default-on-information-subtle-level-1: var(--dk-color-information-800); --dk-text-control-hover-on-information-subtle-level-1: var(--dk-color-information-900); --dk-text-control-active-on-information-subtle-level-1: var(--dk-color-information-800); --dk-text-control-disabled-on-information-subtle-level-1: var(--dk-color-information-400); --dk-surface-control-default-on-information-subtle-level-2: var(--dk-color-information-100); --dk-surface-control-hover-on-information-subtle-level-2: var(--dk-color-information-50); --dk-surface-control-active-on-information-subtle-level-2: var(--dk-color-information-25); --dk-border-control-default-on-information-subtle-level-2: var(--dk-color-information-25); --dk-border-control-hover-on-information-subtle-level-2: var(--dk-color-information-100); --dk-border-control-active-on-information-subtle-level-2: var(--dk-color-information-400); --dk-icon-control-disabled-on-information-subtle-level-2: var(--dk-color-information-300); --dk-surface-control-disabled-on-information-subtle-level-2: var(--dk-color-information-100); --dk-icon-control-default-on-information-subtle-level-2: var(--dk-color-information-800); --dk-icon-control-hover-on-information-subtle-level-2: var(--dk-color-information-900); --dk-icon-control-active-on-information-subtle-level-2: var(--dk-color-information-700); --dk-text-control-default-on-information-subtle-level-2: var(--dk-color-information-800); --dk-text-control-hover-on-information-subtle-level-2: var(--dk-color-information-900); --dk-text-control-active-on-information-subtle-level-2: var(--dk-color-information-700); --dk-text-control-disabled-on-information-subtle-level-2: var(--dk-color-information-400); --dk-surface-control-default-on-information-solid: var(--dk-color-information-650); --dk-surface-control-hover-on-information-solid: var(--dk-color-information-600); --dk-surface-control-active-on-information-solid: var(--dk-color-information-550); --dk-border-control-default-on-information-solid: var(--dk-color-information-550); --dk-border-control-hover-on-information-solid: var(--dk-color-information-500); --dk-border-control-active-on-information-solid: var(--dk-color-information-400); --dk-icon-control-disabled-on-information-solid: var(--dk-color-information-400); --dk-surface-control-disabled-on-information-solid: var(--dk-color-information-650); --dk-icon-control-default-on-information-solid: var(--dk-color-information-200); --dk-icon-control-hover-on-information-solid: var(--dk-color-information-100); --dk-icon-control-active-on-information-solid: var(--dk-color-information-50); --dk-text-control-default-on-information-solid: var(--dk-color-information-50); --dk-text-control-hover-on-information-solid: var(--dk-color-information-100); --dk-text-control-active-on-information-solid: var(--dk-color-information-50); --dk-text-control-disabled-on-information-solid: var(--dk-color-information-300); --dk-surface-control-default-on-information-solid-level-1: var(--dk-color-information-700); --dk-surface-control-hover-on-information-solid-level-1: var(--dk-color-information-650); --dk-surface-control-active-on-information-solid-level-1: var(--dk-color-information-600); --dk-border-control-default-on-information-solid-level-1: var(--dk-color-information-650); --dk-border-control-hover-on-information-solid-level-1: var(--dk-color-information-600); --dk-border-control-active-on-information-solid-level-1: var(--dk-color-information-550); --dk-icon-control-disabled-on-information-solid-level-1: var(--dk-color-information-400); --dk-surface-control-disabled-on-information-solid-level-1: var(--dk-color-information-700); --dk-icon-control-default-on-information-solid-level-1: var(--dk-color-information-200); --dk-icon-control-hover-on-information-solid-level-1: var(--dk-color-information-100); --dk-icon-control-active-on-information-solid-level-1: var(--dk-color-information-50); --dk-text-control-default-on-information-solid-level-1: var(--dk-color-information-50); --dk-text-control-hover-on-information-solid-level-1: var(--dk-color-information-100); --dk-text-control-active-on-information-solid-level-1: var(--dk-color-information-50); --dk-text-control-disabled-on-information-solid-level-1: var(--dk-color-information-300); --dk-surface-control-default-on-information-solid-level-2: var(--dk-color-information-800); --dk-surface-control-hover-on-information-solid-level-2: var(--dk-color-information-700); --dk-surface-control-active-on-information-solid-level-2: var(--dk-color-information-650); --dk-border-control-default-on-information-solid-level-2: var(--dk-color-information-700); --dk-border-control-hover-on-information-solid-level-2: var(--dk-color-information-650); --dk-border-control-active-on-information-solid-level-2: var(--dk-color-information-600); --dk-icon-control-disabled-on-information-solid-level-2: var(--dk-color-information-550); --dk-surface-control-disabled-on-information-solid-level-2: var(--dk-color-information-800); --dk-icon-control-default-on-information-solid-level-2: var(--dk-color-information-300); --dk-icon-control-hover-on-information-solid-level-2: var(--dk-color-information-200); --dk-icon-control-active-on-information-solid-level-2: var(--dk-color-information-100); --dk-text-control-default-on-information-solid-level-2: var(--dk-color-information-100); --dk-text-control-hover-on-information-solid-level-2: var(--dk-color-information-200); --dk-text-control-active-on-information-solid-level-2: var(--dk-color-information-100); --dk-text-control-disabled-on-information-solid-level-2: var(--dk-color-information-500); /* inverse */ --dk-surface-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-1000); --dk-surface-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-900); --dk-surface-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-800); --dk-surface-control-default-on-inverse-solid: var(--dk-color-neutral-1000); --dk-surface-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-900); --dk-surface-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-800); --dk-surface-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-900); --dk-surface-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-800); --dk-surface-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-700); --dk-surface-control-hover-on-inverse-solid: var(--dk-color-neutral-900); --dk-surface-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-800); --dk-surface-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-700); --dk-surface-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-800); --dk-surface-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-700); --dk-surface-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-600); --dk-surface-control-active-on-inverse-solid: var(--dk-color-neutral-800); --dk-surface-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-700); --dk-surface-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-600); --dk-border-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-800); --dk-border-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-800); --dk-border-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-700); --dk-border-control-default-on-inverse-solid: var(--dk-color-neutral-800); --dk-border-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-800); --dk-border-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-700); --dk-border-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-700); --dk-border-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-700); --dk-border-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-600); --dk-border-control-hover-on-inverse-solid: var(--dk-color-neutral-700); --dk-border-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-700); --dk-border-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-600); --dk-border-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-600); --dk-border-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-600); --dk-border-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-500); --dk-border-control-active-on-inverse-solid: var(--dk-color-neutral-600); --dk-border-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-600); --dk-border-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-500); --dk-icon-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-200); --dk-icon-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-200); --dk-icon-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-100); --dk-icon-control-default-on-inverse-solid: var(--dk-color-neutral-200); --dk-icon-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-200); --dk-icon-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-100); --dk-icon-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-100); --dk-icon-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-100); --dk-icon-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-50); --dk-icon-control-hover-on-inverse-solid: var(--dk-color-neutral-100); --dk-icon-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-100); --dk-icon-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-50); --dk-icon-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-50); --dk-icon-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-50); --dk-icon-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-25); --dk-icon-control-active-on-inverse-solid: var(--dk-color-neutral-50); --dk-icon-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-50); --dk-icon-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-25); --dk-text-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-200); --dk-text-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-200); --dk-text-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-100); --dk-text-control-default-on-inverse-solid: var(--dk-color-neutral-200); --dk-text-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-200); --dk-text-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-100); --dk-text-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-100); --dk-text-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-100); --dk-text-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-50); --dk-text-control-hover-on-inverse-solid: var(--dk-color-neutral-100); --dk-text-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-100); --dk-text-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-50); --dk-text-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-50); --dk-text-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-50); --dk-text-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-25); --dk-text-control-active-on-inverse-solid: var(--dk-color-neutral-50); --dk-text-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-50); --dk-text-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-25); --dk-icon-control-disabled-on-inverse-subtle-level-0: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-subtle-level-0: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-subtle-level-0: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-subtle-level-1: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-subtle-level-1: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-subtle-level-1: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-subtle-level-2: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-subtle-level-2: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-subtle-level-2: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-solid: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-solid: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-solid: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-solid-level-1: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-solid-level-1: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-solid-level-1: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-solid-level-2: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-solid-level-2: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-solid-level-2: var(--dk-surface-disabled-subtle); } [data-theme="dark"] { /* primary */ --dk-surface-control-default-on-primary-subtle-level-0: var(--dk-color-primary-850); --dk-surface-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-800); --dk-surface-control-active-on-primary-subtle-level-0: var(--dk-color-primary-700); --dk-border-control-default-on-primary-subtle-level-0: var(--dk-color-primary-800); --dk-border-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-700); --dk-border-control-active-on-primary-subtle-level-0: var(--dk-color-primary-650); --dk-icon-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-800); --dk-surface-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-850); --dk-icon-control-default-on-primary-subtle-level-0: var(--dk-color-primary-300); --dk-icon-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200); --dk-icon-control-active-on-primary-subtle-level-0: var(--dk-color-primary-100); --dk-text-control-default-on-primary-subtle-level-0: var(--dk-color-primary-100); --dk-text-control-hover-on-primary-subtle-level-0: var(--dk-color-primary-200); --dk-text-control-active-on-primary-subtle-level-0: var(--dk-color-primary-100); --dk-text-control-disabled-on-primary-subtle-level-0: var(--dk-color-primary-700); --dk-surface-control-default-on-primary-subtle-level-1: var(--dk-color-primary-850); --dk-surface-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-900); --dk-surface-control-active-on-primary-subtle-level-1: var(--dk-color-primary-700); --dk-border-control-default-on-primary-subtle-level-1: var(--dk-color-primary-900); --dk-border-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-700); --dk-border-control-active-on-primary-subtle-level-1: var(--dk-color-primary-650); --dk-icon-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-800); --dk-surface-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-850); --dk-icon-control-default-on-primary-subtle-level-1: var(--dk-color-primary-200); --dk-icon-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-100); --dk-icon-control-active-on-primary-subtle-level-1: var(--dk-color-primary-50); --dk-text-control-default-on-primary-subtle-level-1: var(--dk-color-primary-50); --dk-text-control-hover-on-primary-subtle-level-1: var(--dk-color-primary-100); --dk-text-control-active-on-primary-subtle-level-1: var(--dk-color-primary-50); --dk-text-control-disabled-on-primary-subtle-level-1: var(--dk-color-primary-700); --dk-surface-control-default-on-primary-subtle-level-2: var(--dk-color-primary-650); --dk-surface-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-600); --dk-surface-control-active-on-primary-subtle-level-2: var(--dk-color-primary-550); --dk-border-control-default-on-primary-subtle-level-2: var(--dk-color-primary-600); --dk-border-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-550); --dk-border-control-active-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-icon-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-550); --dk-surface-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-650); --dk-icon-control-default-on-primary-subtle-level-2: var(--dk-color-primary-25); --dk-icon-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-50); --dk-icon-control-active-on-primary-subtle-level-2: var(--dk-color-primary-850); --dk-text-control-default-on-primary-subtle-level-2: var(--dk-color-primary-25); --dk-text-control-hover-on-primary-subtle-level-2: var(--dk-color-primary-25); --dk-text-control-active-on-primary-subtle-level-2: var(--dk-color-primary-900); --dk-text-control-disabled-on-primary-subtle-level-2: var(--dk-color-primary-500); --dk-surface-control-default-on-primary-solid: var(--dk-color-primary-650); --dk-surface-control-hover-on-primary-solid: var(--dk-color-primary-600); --dk-surface-control-active-on-primary-solid: var(--dk-color-primary-550); --dk-border-control-default-on-primary-solid: var(--dk-color-primary-600); --dk-border-control-hover-on-primary-solid: var(--dk-color-primary-550); --dk-border-control-active-on-primary-solid: var(--dk-color-primary-500); --dk-icon-control-disabled-on-primary-solid: var(--dk-color-primary-400); --dk-surface-control-disabled-on-primary-solid: var(--dk-color-primary-650); --dk-icon-control-default-on-primary-solid: var(--dk-color-primary-100); --dk-icon-control-hover-on-primary-solid: var(--dk-color-primary-50); --dk-icon-control-active-on-primary-solid: var(--dk-color-primary-25); --dk-text-control-default-on-primary-solid: var(--dk-color-primary-25); --dk-text-control-hover-on-primary-solid: var(--dk-color-primary-50); --dk-text-control-active-on-primary-solid: var(--dk-color-primary-25); --dk-text-control-disabled-on-primary-solid: var(--dk-color-primary-300); --dk-surface-control-default-on-primary-solid-level-1: var(--dk-color-primary-700); --dk-surface-control-hover-on-primary-solid-level-1: var(--dk-color-primary-650); --dk-surface-control-active-on-primary-solid-level-1: var(--dk-color-primary-600); --dk-border-control-default-on-primary-solid-level-1: var(--dk-color-primary-650); --dk-border-control-hover-on-primary-solid-level-1: var(--dk-color-primary-600); --dk-border-control-active-on-primary-solid-level-1: var(--dk-color-primary-550); --dk-icon-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-500); --dk-surface-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-700); --dk-icon-control-default-on-primary-solid-level-1: var(--dk-color-primary-200); --dk-icon-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100); --dk-icon-control-active-on-primary-solid-level-1: var(--dk-color-primary-50); --dk-text-control-default-on-primary-solid-level-1: var(--dk-color-primary-50); --dk-text-control-hover-on-primary-solid-level-1: var(--dk-color-primary-100); --dk-text-control-active-on-primary-solid-level-1: var(--dk-color-primary-50); --dk-text-control-disabled-on-primary-solid-level-1: var(--dk-color-primary-400); --dk-surface-control-default-on-primary-solid-level-2: var(--dk-color-primary-850); --dk-surface-control-hover-on-primary-solid-level-2: var(--dk-color-primary-800); --dk-surface-control-active-on-primary-solid-level-2: var(--dk-color-primary-700); --dk-border-control-default-on-primary-solid-level-2: var(--dk-color-primary-800); --dk-border-control-hover-on-primary-solid-level-2: var(--dk-color-primary-700); --dk-border-control-active-on-primary-solid-level-2: var(--dk-color-primary-650); --dk-icon-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-700); --dk-surface-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-850); --dk-icon-control-default-on-primary-solid-level-2: var(--dk-color-primary-550); --dk-icon-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500); --dk-icon-control-active-on-primary-solid-level-2: var(--dk-color-primary-300); --dk-text-control-default-on-primary-solid-level-2: var(--dk-color-primary-400); --dk-text-control-hover-on-primary-solid-level-2: var(--dk-color-primary-500); --dk-text-control-active-on-primary-solid-level-2: var(--dk-color-primary-300); --dk-text-control-disabled-on-primary-solid-level-2: var(--dk-color-primary-650); /* success */ --dk-surface-control-default-on-success-subtle-level-0: var(--dk-color-primary-850); --dk-surface-control-hover-on-success-subtle-level-0: var(--dk-color-primary-800); --dk-surface-control-active-on-success-subtle-level-0: var(--dk-color-primary-700); --dk-border-control-default-on-success-subtle-level-0: var(--dk-color-primary-800); --dk-border-control-hover-on-success-subtle-level-0: var(--dk-color-primary-700); --dk-border-control-active-on-success-subtle-level-0: var(--dk-color-primary-650); --dk-icon-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-800); --dk-surface-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-850); --dk-icon-control-default-on-success-subtle-level-0: var(--dk-color-primary-300); --dk-icon-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200); --dk-icon-control-active-on-success-subtle-level-0: var(--dk-color-primary-100); --dk-text-control-default-on-success-subtle-level-0: var(--dk-color-primary-100); --dk-text-control-hover-on-success-subtle-level-0: var(--dk-color-primary-200); --dk-text-control-active-on-success-subtle-level-0: var(--dk-color-primary-100); --dk-text-control-disabled-on-success-subtle-level-0: var(--dk-color-primary-700); --dk-surface-control-default-on-success-subtle-level-1: var(--dk-color-primary-850); --dk-surface-control-hover-on-success-subtle-level-1: var(--dk-color-primary-900); --dk-surface-control-active-on-success-subtle-level-1: var(--dk-color-primary-700); --dk-border-control-default-on-success-subtle-level-1: var(--dk-color-primary-900); --dk-border-control-hover-on-success-subtle-level-1: var(--dk-color-primary-700); --dk-border-control-active-on-success-subtle-level-1: var(--dk-color-primary-650); --dk-icon-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-800); --dk-surface-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-850); --dk-icon-control-default-on-success-subtle-level-1: var(--dk-color-primary-200); --dk-icon-control-hover-on-success-subtle-level-1: var(--dk-color-primary-100); --dk-icon-control-active-on-success-subtle-level-1: var(--dk-color-primary-50); --dk-text-control-default-on-success-subtle-level-1: var(--dk-color-primary-50); --dk-text-control-hover-on-success-subtle-level-1: var(--dk-color-primary-100); --dk-text-control-active-on-success-subtle-level-1: var(--dk-color-primary-50); --dk-text-control-disabled-on-success-subtle-level-1: var(--dk-color-primary-700); --dk-surface-control-default-on-success-subtle-level-2: var(--dk-color-primary-650); --dk-surface-control-hover-on-success-subtle-level-2: var(--dk-color-primary-600); --dk-surface-control-active-on-success-subtle-level-2: var(--dk-color-primary-550); --dk-border-control-default-on-success-subtle-level-2: var(--dk-color-primary-600); --dk-border-control-hover-on-success-subtle-level-2: var(--dk-color-primary-550); --dk-border-control-active-on-success-subtle-level-2: var(--dk-color-primary-500); --dk-icon-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-550); --dk-surface-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-650); --dk-icon-control-default-on-success-subtle-level-2: var(--dk-color-primary-25); --dk-icon-control-hover-on-success-subtle-level-2: var(--dk-color-primary-50); --dk-icon-control-active-on-success-subtle-level-2: var(--dk-color-primary-850); --dk-text-control-default-on-success-subtle-level-2: var(--dk-color-primary-25); --dk-text-control-hover-on-success-subtle-level-2: var(--dk-color-primary-25); --dk-text-control-active-on-success-subtle-level-2: var(--dk-color-primary-900); --dk-text-control-disabled-on-success-subtle-level-2: var(--dk-color-primary-500); --dk-surface-control-default-on-success-solid: var(--dk-color-primary-650); --dk-surface-control-hover-on-success-solid: var(--dk-color-primary-600); --dk-surface-control-active-on-success-solid: var(--dk-color-primary-550); --dk-border-control-default-on-success-solid: var(--dk-color-primary-600); --dk-border-control-hover-on-success-solid: var(--dk-color-primary-550); --dk-border-control-active-on-success-solid: var(--dk-color-primary-500); --dk-icon-control-disabled-on-success-solid: var(--dk-color-primary-400); --dk-surface-control-disabled-on-success-solid: var(--dk-color-primary-650); --dk-icon-control-default-on-success-solid: var(--dk-color-primary-100); --dk-icon-control-hover-on-success-solid: var(--dk-color-primary-50); --dk-icon-control-active-on-success-solid: var(--dk-color-primary-25); --dk-text-control-default-on-success-solid: var(--dk-color-primary-25); --dk-text-control-hover-on-success-solid: var(--dk-color-primary-50); --dk-text-control-active-on-success-solid: var(--dk-color-primary-25); --dk-text-control-disabled-on-success-solid: var(--dk-color-primary-300); --dk-surface-control-default-on-success-solid-level-1: var(--dk-color-primary-700); --dk-surface-control-hover-on-success-solid-level-1: var(--dk-color-primary-650); --dk-surface-control-active-on-success-solid-level-1: var(--dk-color-primary-600); --dk-border-control-default-on-success-solid-level-1: var(--dk-color-primary-650); --dk-border-control-hover-on-success-solid-level-1: var(--dk-color-primary-600); --dk-border-control-active-on-success-solid-level-1: var(--dk-color-primary-550); --dk-icon-control-disabled-on-success-solid-level-1: var(--dk-color-primary-500); --dk-surface-control-disabled-on-success-solid-level-1: var(--dk-color-primary-700); --dk-icon-control-default-on-success-solid-level-1: var(--dk-color-primary-200); --dk-icon-control-hover-on-success-solid-level-1: var(--dk-color-primary-100); --dk-icon-control-active-on-success-solid-level-1: var(--dk-color-primary-50); --dk-text-control-default-on-success-solid-level-1: var(--dk-color-primary-50); --dk-text-control-hover-on-success-solid-level-1: var(--dk-color-primary-100); --dk-text-control-active-on-success-solid-level-1: var(--dk-color-primary-50); --dk-text-control-disabled-on-success-solid-level-1: var(--dk-color-primary-400); --dk-surface-control-default-on-success-solid-level-2: var(--dk-color-primary-850); --dk-surface-control-hover-on-success-solid-level-2: var(--dk-color-primary-800); --dk-surface-control-active-on-success-solid-level-2: var(--dk-color-primary-700); --dk-border-control-default-on-success-solid-level-2: var(--dk-color-primary-800); --dk-border-control-hover-on-success-solid-level-2: var(--dk-color-primary-700); --dk-border-control-active-on-success-solid-level-2: var(--dk-color-primary-650); --dk-icon-control-disabled-on-success-solid-level-2: var(--dk-color-primary-700); --dk-surface-control-disabled-on-success-solid-level-2: var(--dk-color-primary-850); --dk-icon-control-default-on-success-solid-level-2: var(--dk-color-primary-550); --dk-icon-control-hover-on-success-solid-level-2: var(--dk-color-primary-500); --dk-icon-control-active-on-success-solid-level-2: var(--dk-color-primary-300); --dk-text-control-default-on-success-solid-level-2: var(--dk-color-primary-400); --dk-text-control-hover-on-success-solid-level-2: var(--dk-color-primary-500); --dk-text-control-active-on-success-solid-level-2: var(--dk-color-primary-300); --dk-text-control-disabled-on-success-solid-level-2: var(--dk-color-primary-650); /* error */ --dk-surface-control-default-on-error-subtle-level-0: var(--dk-color-error-800); --dk-surface-control-hover-on-error-subtle-level-0: var(--dk-color-error-700); --dk-surface-control-active-on-error-subtle-level-0: var(--dk-color-error-650); --dk-border-control-default-on-error-subtle-level-0: var(--dk-color-error-700); --dk-border-control-hover-on-error-subtle-level-0: var(--dk-color-error-650); --dk-border-control-active-on-error-subtle-level-0: var(--dk-color-error-600); --dk-icon-control-disabled-on-error-subtle-level-0: var(--dk-color-error-700); --dk-surface-control-disabled-on-error-subtle-level-0: var(--dk-color-error-800); --dk-icon-control-default-on-error-subtle-level-0: var(--dk-color-error-100); --dk-icon-control-hover-on-error-subtle-level-0: var(--dk-color-error-50); --dk-icon-control-active-on-error-subtle-level-0: var(--dk-color-error-25); --dk-text-control-default-on-error-subtle-level-0: var(--dk-color-error-25); --dk-text-control-hover-on-error-subtle-level-0: var(--dk-color-error-50); --dk-text-control-active-on-error-subtle-level-0: var(--dk-color-error-25); --dk-text-control-disabled-on-error-subtle-level-0: var(--dk-color-error-650); --dk-surface-control-default-on-error-subtle-level-1: var(--dk-color-error-900); --dk-surface-control-hover-on-error-subtle-level-1: var(--dk-color-error-700); --dk-surface-control-active-on-error-subtle-level-1: var(--dk-color-error-650); --dk-border-control-default-on-error-subtle-level-1: var(--dk-color-error-700); --dk-border-control-hover-on-error-subtle-level-1: var(--dk-color-error-600); --dk-border-control-active-on-error-subtle-level-1: var(--dk-color-error-550); --dk-icon-control-disabled-on-error-subtle-level-1: var(--dk-color-error-800); --dk-surface-control-disabled-on-error-subtle-level-1: var(--dk-color-error-900); --dk-icon-control-default-on-error-subtle-level-1: var(--dk-color-error-100); --dk-icon-control-hover-on-error-subtle-level-1: var(--dk-color-error-50); --dk-icon-control-active-on-error-subtle-level-1: var(--dk-color-error-25); --dk-text-control-default-on-error-subtle-level-1: var(--dk-color-error-25); --dk-text-control-hover-on-error-subtle-level-1: var(--dk-color-error-50); --dk-text-control-active-on-error-subtle-level-1: var(--dk-color-error-25); --dk-text-control-disabled-on-error-subtle-level-1: var(--dk-color-error-700); --dk-surface-control-default-on-error-subtle-level-2: var(--dk-color-error-650); --dk-surface-control-hover-on-error-subtle-level-2: var(--dk-color-error-600); --dk-surface-control-active-on-error-subtle-level-2: var(--dk-color-error-550); --dk-border-control-default-on-error-subtle-level-2: var(--dk-color-error-550); --dk-border-control-hover-on-error-subtle-level-2: var(--dk-color-error-500); --dk-border-control-active-on-error-subtle-level-2: var(--dk-color-error-400); --dk-icon-control-disabled-on-error-subtle-level-2: var(--dk-color-error-500); --dk-surface-control-disabled-on-error-subtle-level-2: var(--dk-color-error-650); --dk-icon-control-default-on-error-subtle-level-2: var(--dk-color-error-25); --dk-icon-control-hover-on-error-subtle-level-2: var(--dk-color-error-50); --dk-icon-control-active-on-error-subtle-level-2: var(--dk-color-error-100); --dk-text-control-default-on-error-subtle-level-2: var(--dk-color-error-25); --dk-text-control-hover-on-error-subtle-level-2: var(--dk-color-error-25); --dk-text-control-active-on-error-subtle-level-2: var(--dk-color-error-25); --dk-text-control-disabled-on-error-subtle-level-2: var(--dk-color-error-400); --dk-surface-control-default-on-error-solid: var(--dk-color-error-650); --dk-surface-control-hover-on-error-solid: var(--dk-color-error-600); --dk-surface-control-active-on-error-solid: var(--dk-color-error-550); --dk-border-control-default-on-error-solid: var(--dk-color-error-550); --dk-border-control-hover-on-error-solid: var(--dk-color-error-500); --dk-border-control-active-on-error-solid: var(--dk-color-error-400); --dk-icon-control-disabled-on-error-solid: var(--dk-color-error-400); --dk-surface-control-disabled-on-error-solid: var(--dk-color-error-650); --dk-icon-control-default-on-error-solid: var(--dk-color-error-100); --dk-icon-control-hover-on-error-solid: var(--dk-color-error-50); --dk-icon-control-active-on-error-solid: var(--dk-color-error-25); --dk-text-control-default-on-error-solid: var(--dk-color-error-25); --dk-text-control-hover-on-error-solid: var(--dk-color-error-50); --dk-text-control-active-on-error-solid: var(--dk-color-error-25); --dk-text-control-disabled-on-error-solid: var(--dk-color-error-300); --dk-surface-control-default-on-error-solid-level-1: var(--dk-color-error-700); --dk-surface-control-hover-on-error-solid-level-1: var(--dk-color-error-650); --dk-surface-control-active-on-error-solid-level-1: var(--dk-color-error-600); --dk-border-control-default-on-error-solid-level-1: var(--dk-color-error-650); --dk-border-control-hover-on-error-solid-level-1: var(--dk-color-error-600); --dk-border-control-active-on-error-solid-level-1: var(--dk-color-error-550); --dk-icon-control-disabled-on-error-solid-level-1: var(--dk-color-error-400); --dk-surface-control-disabled-on-error-solid-level-1: var(--dk-color-error-700); --dk-icon-control-default-on-error-solid-level-1: var(--dk-color-error-200); --dk-icon-control-hover-on-error-solid-level-1: var(--dk-color-error-100); --dk-icon-control-active-on-error-solid-level-1: var(--dk-color-error-50); --dk-text-control-default-on-error-solid-level-1: var(--dk-color-error-50); --dk-text-control-hover-on-error-solid-level-1: var(--dk-color-error-100); --dk-text-control-active-on-error-solid-level-1: var(--dk-color-error-50); --dk-text-control-disabled-on-error-solid-level-1: var(--dk-color-error-300); --dk-surface-control-default-on-error-solid-level-2: var(--dk-color-error-800); --dk-surface-control-hover-on-error-solid-level-2: var(--dk-color-error-700); --dk-surface-control-active-on-error-solid-level-2: var(--dk-color-error-650); --dk-border-control-default-on-error-solid-level-2: var(--dk-color-error-700); --dk-border-control-hover-on-error-solid-level-2: var(--dk-color-error-650); --dk-border-control-active-on-error-solid-level-2: var(--dk-color-error-600); --dk-icon-control-disabled-on-error-solid-level-2: var(--dk-color-error-500); --dk-surface-control-disabled-on-error-solid-level-2: var(--dk-color-error-800); --dk-icon-control-default-on-error-solid-level-2: var(--dk-color-error-300); --dk-icon-control-hover-on-error-solid-level-2: var(--dk-color-error-200); --dk-icon-control-active-on-error-solid-level-2: var(--dk-color-error-100); --dk-text-control-default-on-error-solid-level-2: var(--dk-color-error-100); --dk-text-control-hover-on-error-solid-level-2: var(--dk-color-error-200); --dk-text-control-active-on-error-solid-level-2: var(--dk-color-error-100); --dk-text-control-disabled-on-error-solid-level-2: var(--dk-color-error-400); /* warning */ --dk-surface-control-default-on-warning-subtle-level-0: var(--dk-color-warning-800); --dk-surface-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-700); --dk-surface-control-active-on-warning-subtle-level-0: var(--dk-color-warning-650); --dk-border-control-default-on-warning-subtle-level-0: var(--dk-color-warning-700); --dk-border-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-650); --dk-border-control-active-on-warning-subtle-level-0: var(--dk-color-warning-600); --dk-icon-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-700); --dk-surface-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-800); --dk-icon-control-default-on-warning-subtle-level-0: var(--dk-color-warning-200); --dk-icon-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-100); --dk-icon-control-active-on-warning-subtle-level-0: var(--dk-color-warning-50); --dk-text-control-default-on-warning-subtle-level-0: var(--dk-color-warning-50); --dk-text-control-hover-on-warning-subtle-level-0: var(--dk-color-warning-100); --dk-text-control-active-on-warning-subtle-level-0: var(--dk-color-base-white); --dk-text-control-disabled-on-warning-subtle-level-0: var(--dk-color-warning-650); --dk-surface-control-default-on-warning-subtle-level-1: var(--dk-color-warning-900); --dk-surface-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-700); --dk-surface-control-active-on-warning-subtle-level-1: var(--dk-color-warning-650); --dk-border-control-default-on-warning-subtle-level-1: var(--dk-color-warning-700); --dk-border-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-650); --dk-border-control-active-on-warning-subtle-level-1: var(--dk-color-warning-600); --dk-icon-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-800); --dk-surface-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-900); --dk-icon-control-default-on-warning-subtle-level-1: var(--dk-color-warning-200); --dk-icon-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-100); --dk-icon-control-active-on-warning-subtle-level-1: var(--dk-color-warning-50); --dk-text-control-default-on-warning-subtle-level-1: var(--dk-color-warning-50); --dk-text-control-hover-on-warning-subtle-level-1: var(--dk-color-warning-100); --dk-text-control-active-on-warning-subtle-level-1: var(--dk-color-base-white); --dk-text-control-disabled-on-warning-subtle-level-1: var(--dk-color-warning-700); --dk-surface-control-default-on-warning-subtle-level-2: var(--dk-color-warning-650); --dk-surface-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-600); --dk-surface-control-active-on-warning-subtle-level-2: var(--dk-color-warning-550); --dk-border-control-default-on-warning-subtle-level-2: var(--dk-color-warning-600); --dk-border-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-550); --dk-border-control-active-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-icon-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-550); --dk-surface-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-650); --dk-icon-control-default-on-warning-subtle-level-2: var(--dk-color-warning-25); --dk-icon-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900); --dk-icon-control-active-on-warning-subtle-level-2: var(--dk-color-warning-800); --dk-text-control-default-on-warning-subtle-level-2: var(--dk-color-base-white); --dk-text-control-hover-on-warning-subtle-level-2: var(--dk-color-warning-900); --dk-text-control-active-on-warning-subtle-level-2: var(--dk-color-warning-900); --dk-text-control-disabled-on-warning-subtle-level-2: var(--dk-color-warning-500); --dk-surface-control-default-on-warning-solid: var(--dk-color-warning-650); --dk-surface-control-hover-on-warning-solid: var(--dk-color-warning-600); --dk-surface-control-active-on-warning-solid: var(--dk-color-warning-600); --dk-border-control-default-on-warning-solid: var(--dk-color-warning-600); --dk-border-control-hover-on-warning-solid: var(--dk-color-warning-550); --dk-border-control-active-on-warning-solid: var(--dk-color-warning-500); --dk-icon-control-disabled-on-warning-solid: var(--dk-color-warning-400); --dk-surface-control-disabled-on-warning-solid: var(--dk-color-warning-650); --dk-icon-control-default-on-warning-solid: var(--dk-color-warning-100); --dk-icon-control-hover-on-warning-solid: var(--dk-color-warning-50); --dk-icon-control-active-on-warning-solid: var(--dk-color-warning-25); --dk-text-control-default-on-warning-solid: var(--dk-color-warning-25); --dk-text-control-hover-on-warning-solid: var(--dk-color-warning-50); --dk-text-control-active-on-warning-solid: var(--dk-color-warning-25); --dk-text-control-disabled-on-warning-solid: var(--dk-color-warning-300); --dk-surface-control-default-on-warning-solid-level-1: var(--dk-color-warning-700); --dk-surface-control-hover-on-warning-solid-level-1: var(--dk-color-warning-650); --dk-surface-control-active-on-warning-solid-level-1: var(--dk-color-warning-600); --dk-border-control-default-on-warning-solid-level-1: var(--dk-color-warning-650); --dk-border-control-hover-on-warning-solid-level-1: var(--dk-color-warning-600); --dk-border-control-active-on-warning-solid-level-1: var(--dk-color-warning-550); --dk-icon-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-550); --dk-surface-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-700); --dk-icon-control-default-on-warning-solid-level-1: var(--dk-color-warning-200); --dk-icon-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100); --dk-icon-control-active-on-warning-solid-level-1: var(--dk-color-warning-50); --dk-text-control-default-on-warning-solid-level-1: var(--dk-color-warning-50); --dk-text-control-hover-on-warning-solid-level-1: var(--dk-color-warning-100); --dk-text-control-active-on-warning-solid-level-1: var(--dk-color-warning-50); --dk-text-control-disabled-on-warning-solid-level-1: var(--dk-color-warning-500); --dk-surface-control-default-on-warning-solid-level-2: var(--dk-color-warning-800); --dk-surface-control-hover-on-warning-solid-level-2: var(--dk-color-warning-700); --dk-surface-control-active-on-warning-solid-level-2: var(--dk-color-warning-700); --dk-border-control-default-on-warning-solid-level-2: var(--dk-color-warning-700); --dk-border-control-hover-on-warning-solid-level-2: var(--dk-color-warning-650); --dk-border-control-active-on-warning-solid-level-2: var(--dk-color-warning-600); --dk-icon-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-650); --dk-surface-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-800); --dk-icon-control-default-on-warning-solid-level-2: var(--dk-color-warning-500); --dk-icon-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300); --dk-icon-control-active-on-warning-solid-level-2: var(--dk-color-warning-200); --dk-text-control-default-on-warning-solid-level-2: var(--dk-color-warning-400); --dk-text-control-hover-on-warning-solid-level-2: var(--dk-color-warning-300); --dk-text-control-active-on-warning-solid-level-2: var(--dk-color-warning-200); --dk-text-control-disabled-on-warning-solid-level-2: var(--dk-color-warning-600); /* information */ --dk-surface-control-default-on-information-subtle-level-0: var(--dk-color-information-800); --dk-surface-control-hover-on-information-subtle-level-0: var(--dk-color-information-700); --dk-surface-control-active-on-information-subtle-level-0: var(--dk-color-information-650); --dk-border-control-default-on-information-subtle-level-0: var(--dk-color-information-700); --dk-border-control-hover-on-information-subtle-level-0: var(--dk-color-information-650); --dk-border-control-active-on-information-subtle-level-0: var(--dk-color-information-600); --dk-icon-control-disabled-on-information-subtle-level-0: var(--dk-color-information-700); --dk-surface-control-disabled-on-information-subtle-level-0: var(--dk-color-information-800); --dk-icon-control-default-on-information-subtle-level-0: var(--dk-color-information-200); --dk-icon-control-hover-on-information-subtle-level-0: var(--dk-color-information-100); --dk-icon-control-active-on-information-subtle-level-0: var(--dk-color-information-50); --dk-text-control-default-on-information-subtle-level-0: var(--dk-color-information-50); --dk-text-control-hover-on-information-subtle-level-0: var(--dk-color-information-100); --dk-text-control-active-on-information-subtle-level-0: var(--dk-color-information-50); --dk-text-control-disabled-on-information-subtle-level-0: var(--dk-color-information-650); --dk-surface-control-default-on-information-subtle-level-1: var(--dk-color-information-900); --dk-surface-control-hover-on-information-subtle-level-1: var(--dk-color-information-700); --dk-surface-control-active-on-information-subtle-level-1: var(--dk-color-information-650); --dk-border-control-default-on-information-subtle-level-1: var(--dk-color-information-700); --dk-border-control-hover-on-information-subtle-level-1: var(--dk-color-information-600); --dk-border-control-active-on-information-subtle-level-1: var(--dk-color-information-550); --dk-icon-control-disabled-on-information-subtle-level-1: var(--dk-color-information-800); --dk-surface-control-disabled-on-information-subtle-level-1: var(--dk-color-information-900); --dk-icon-control-default-on-information-subtle-level-1: var(--dk-color-information-200); --dk-icon-control-hover-on-information-subtle-level-1: var(--dk-color-information-100); --dk-icon-control-active-on-information-subtle-level-1: var(--dk-color-information-50); --dk-text-control-default-on-information-subtle-level-1: var(--dk-color-information-50); --dk-text-control-hover-on-information-subtle-level-1: var(--dk-color-information-100); --dk-text-control-active-on-information-subtle-level-1: var(--dk-color-information-50); --dk-text-control-disabled-on-information-subtle-level-1: var(--dk-color-information-700); --dk-surface-control-default-on-information-subtle-level-2: var(--dk-color-information-650); --dk-surface-control-hover-on-information-subtle-level-2: var(--dk-color-information-600); --dk-surface-control-active-on-information-subtle-level-2: var(--dk-color-information-550); --dk-border-control-default-on-information-subtle-level-2: var(--dk-color-information-550); --dk-border-control-hover-on-information-subtle-level-2: var(--dk-color-information-500); --dk-border-control-active-on-information-subtle-level-2: var(--dk-color-information-400); --dk-icon-control-disabled-on-information-subtle-level-2: var(--dk-color-information-500); --dk-surface-control-disabled-on-information-subtle-level-2: var(--dk-color-information-650); --dk-icon-control-default-on-information-subtle-level-2: var(--dk-color-information-25); --dk-icon-control-hover-on-information-subtle-level-2: var(--dk-color-information-50); --dk-icon-control-active-on-information-subtle-level-2: var(--dk-color-information-100); --dk-text-control-default-on-information-subtle-level-2: var(--dk-color-information-25); --dk-text-control-hover-on-information-subtle-level-2: var(--dk-color-information-50); --dk-text-control-active-on-information-subtle-level-2: var(--dk-color-information-25); --dk-text-control-disabled-on-information-subtle-level-2: var(--dk-color-information-400); --dk-surface-control-default-on-information-solid: var(--dk-color-information-650); --dk-surface-control-hover-on-information-solid: var(--dk-color-information-600); --dk-surface-control-active-on-information-solid: var(--dk-color-information-550); --dk-border-control-default-on-information-solid: var(--dk-color-information-550); --dk-border-control-hover-on-information-solid: var(--dk-color-information-500); --dk-border-control-active-on-information-solid: var(--dk-color-information-400); --dk-icon-control-disabled-on-information-solid: var(--dk-color-information-400); --dk-surface-control-disabled-on-information-solid: var(--dk-color-information-650); --dk-icon-control-default-on-information-solid: var(--dk-color-information-200); --dk-icon-control-hover-on-information-solid: var(--dk-color-information-100); --dk-icon-control-active-on-information-solid: var(--dk-color-information-50); --dk-text-control-default-on-information-solid: var(--dk-color-information-50); --dk-text-control-hover-on-information-solid: var(--dk-color-information-100); --dk-text-control-active-on-information-solid: var(--dk-color-information-50); --dk-text-control-disabled-on-information-solid: var(--dk-color-information-300); --dk-surface-control-default-on-information-solid-level-1: var(--dk-color-information-700); --dk-surface-control-hover-on-information-solid-level-1: var(--dk-color-information-650); --dk-surface-control-active-on-information-solid-level-1: var(--dk-color-information-600); --dk-border-control-default-on-information-solid-level-1: var(--dk-color-information-650); --dk-border-control-hover-on-information-solid-level-1: var(--dk-color-information-600); --dk-border-control-active-on-information-solid-level-1: var(--dk-color-information-550); --dk-icon-control-disabled-on-information-solid-level-1: var(--dk-color-information-400); --dk-surface-control-disabled-on-information-solid-level-1: var(--dk-color-information-700); --dk-icon-control-default-on-information-solid-level-1: var(--dk-color-information-200); --dk-icon-control-hover-on-information-solid-level-1: var(--dk-color-information-100); --dk-icon-control-active-on-information-solid-level-1: var(--dk-color-information-50); --dk-text-control-default-on-information-solid-level-1: var(--dk-color-information-50); --dk-text-control-hover-on-information-solid-level-1: var(--dk-color-information-100); --dk-text-control-active-on-information-solid-level-1: var(--dk-color-information-50); --dk-text-control-disabled-on-information-solid-level-1: var(--dk-color-information-300); --dk-surface-control-default-on-information-solid-level-2: var(--dk-color-information-800); --dk-surface-control-hover-on-information-solid-level-2: var(--dk-color-information-700); --dk-surface-control-active-on-information-solid-level-2: var(--dk-color-information-650); --dk-border-control-default-on-information-solid-level-2: var(--dk-color-information-700); --dk-border-control-hover-on-information-solid-level-2: var(--dk-color-information-650); --dk-border-control-active-on-information-solid-level-2: var(--dk-color-information-600); --dk-icon-control-disabled-on-information-solid-level-2: var(--dk-color-information-550); --dk-surface-control-disabled-on-information-solid-level-2: var(--dk-color-information-800); --dk-icon-control-default-on-information-solid-level-2: var(--dk-color-information-300); --dk-icon-control-hover-on-information-solid-level-2: var(--dk-color-information-200); --dk-icon-control-active-on-information-solid-level-2: var(--dk-color-information-100); --dk-text-control-default-on-information-solid-level-2: var(--dk-color-information-100); --dk-text-control-hover-on-information-solid-level-2: var(--dk-color-information-200); --dk-text-control-active-on-information-solid-level-2: var(--dk-color-information-100); --dk-text-control-disabled-on-information-solid-level-2: var(--dk-color-information-500); /* inverse */ --dk-surface-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-25); --dk-surface-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-50); --dk-surface-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-100); --dk-surface-control-default-on-inverse-solid: var(--dk-color-neutral-25); --dk-surface-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-50); --dk-surface-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-100); --dk-surface-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-50); --dk-surface-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-100); --dk-surface-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-200); --dk-surface-control-hover-on-inverse-solid: var(--dk-color-neutral-50); --dk-surface-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-100); --dk-surface-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-200); --dk-surface-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-100); --dk-surface-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-200); --dk-surface-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-300); --dk-surface-control-active-on-inverse-solid: var(--dk-color-neutral-100); --dk-surface-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-200); --dk-surface-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-300); --dk-border-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-100); --dk-border-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-100); --dk-border-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-200); --dk-border-control-default-on-inverse-solid: var(--dk-color-neutral-100); --dk-border-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-100); --dk-border-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-200); --dk-border-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-200); --dk-border-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-200); --dk-border-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-300); --dk-border-control-hover-on-inverse-solid: var(--dk-color-neutral-200); --dk-border-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-200); --dk-border-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-300); --dk-border-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-300); --dk-border-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-300); --dk-border-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-400); --dk-border-control-active-on-inverse-solid: var(--dk-color-neutral-300); --dk-border-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-300); --dk-border-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-400); --dk-icon-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-500); --dk-icon-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-600); --dk-icon-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-700); --dk-icon-control-default-on-inverse-solid: var(--dk-color-neutral-500); --dk-icon-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-600); --dk-icon-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-700); --dk-icon-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-600); --dk-icon-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-700); --dk-icon-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-800); --dk-icon-control-hover-on-inverse-solid: var(--dk-color-neutral-600); --dk-icon-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-700); --dk-icon-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-800); --dk-icon-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-700); --dk-icon-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-800); --dk-icon-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-900); --dk-icon-control-active-on-inverse-solid: var(--dk-color-neutral-700); --dk-icon-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-800); --dk-icon-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-900); --dk-text-control-default-on-inverse-subtle-level-0: var(--dk-color-neutral-600); --dk-text-control-default-on-inverse-subtle-level-1: var(--dk-color-neutral-700); --dk-text-control-default-on-inverse-subtle-level-2: var(--dk-color-neutral-800); --dk-text-control-default-on-inverse-solid: var(--dk-color-neutral-600); --dk-text-control-default-on-inverse-solid-level-1: var(--dk-color-neutral-700); --dk-text-control-default-on-inverse-solid-level-2: var(--dk-color-neutral-800); --dk-text-control-hover-on-inverse-subtle-level-0: var(--dk-color-neutral-700); --dk-text-control-hover-on-inverse-subtle-level-1: var(--dk-color-neutral-800); --dk-text-control-hover-on-inverse-subtle-level-2: var(--dk-color-neutral-900); --dk-text-control-hover-on-inverse-solid: var(--dk-color-neutral-700); --dk-text-control-hover-on-inverse-solid-level-1: var(--dk-color-neutral-800); --dk-text-control-hover-on-inverse-solid-level-2: var(--dk-color-neutral-900); --dk-text-control-active-on-inverse-subtle-level-0: var(--dk-color-neutral-800); --dk-text-control-active-on-inverse-subtle-level-1: var(--dk-color-neutral-900); --dk-text-control-active-on-inverse-subtle-level-2: var(--dk-color-neutral-1000); --dk-text-control-active-on-inverse-solid: var(--dk-color-neutral-800); --dk-text-control-active-on-inverse-solid-level-1: var(--dk-color-neutral-900); --dk-text-control-active-on-inverse-solid-level-2: var(--dk-color-neutral-1000); --dk-icon-control-disabled-on-inverse-subtle-level-0: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-subtle-level-0: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-subtle-level-0: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-subtle-level-1: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-subtle-level-1: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-subtle-level-1: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-subtle-level-2: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-subtle-level-2: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-subtle-level-2: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-solid: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-solid: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-solid: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-solid-level-1: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-solid-level-1: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-solid-level-1: var(--dk-surface-disabled-subtle); --dk-icon-control-disabled-on-inverse-solid-level-2: var(--dk-icon-disabled-subtle); --dk-text-control-disabled-on-inverse-solid-level-2: var(--dk-text-disabled-subtle); --dk-surface-control-disabled-on-inverse-solid-level-2: var(--dk-surface-disabled-subtle); } /* The per-tone layer: which ramp a tone reads. */ [data-theme] [data-tone="primary"]:not([data-theme]), [data-theme][data-tone="primary"] { --_tone-surface-control-default-0: var(--dk-surface-control-default-on-primary-subtle-level-0); --_tone-surface-control-default-1: var(--dk-surface-control-default-on-primary-subtle-level-1); --_tone-surface-control-default-2: var(--dk-surface-control-default-on-primary-subtle-level-2); --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-primary-solid); --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-primary-solid-level-1); --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-primary-solid-level-2); --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-primary-subtle-level-0); --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-primary-subtle-level-1); --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-primary-subtle-level-2); --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-primary-solid); --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-primary-solid-level-1); --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-primary-solid-level-2); --_tone-surface-control-active-0: var(--dk-surface-control-active-on-primary-subtle-level-0); --_tone-surface-control-active-1: var(--dk-surface-control-active-on-primary-subtle-level-1); --_tone-surface-control-active-2: var(--dk-surface-control-active-on-primary-subtle-level-2); --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-primary-solid); --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-primary-solid-level-1); --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-primary-solid-level-2); --_tone-border-control-default-0: var(--dk-border-control-default-on-primary-subtle-level-0); --_tone-border-control-default-1: var(--dk-border-control-default-on-primary-subtle-level-1); --_tone-border-control-default-2: var(--dk-border-control-default-on-primary-subtle-level-2); --_tone-border-control-default-solid: var(--dk-border-control-default-on-primary-solid); --_tone-border-control-default-solid1: var(--dk-border-control-default-on-primary-solid-level-1); --_tone-border-control-default-solid2: var(--dk-border-control-default-on-primary-solid-level-2); --_tone-border-control-hover-0: var(--dk-border-control-hover-on-primary-subtle-level-0); --_tone-border-control-hover-1: var(--dk-border-control-hover-on-primary-subtle-level-1); --_tone-border-control-hover-2: var(--dk-border-control-hover-on-primary-subtle-level-2); --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-primary-solid); --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-primary-solid-level-1); --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-primary-solid-level-2); --_tone-border-control-active-0: var(--dk-border-control-active-on-primary-subtle-level-0); --_tone-border-control-active-1: var(--dk-border-control-active-on-primary-subtle-level-1); --_tone-border-control-active-2: var(--dk-border-control-active-on-primary-subtle-level-2); --_tone-border-control-active-solid: var(--dk-border-control-active-on-primary-solid); --_tone-border-control-active-solid1: var(--dk-border-control-active-on-primary-solid-level-1); --_tone-border-control-active-solid2: var(--dk-border-control-active-on-primary-solid-level-2); --_tone-icon-control-default-0: var(--dk-icon-control-default-on-primary-subtle-level-0); --_tone-icon-control-default-1: var(--dk-icon-control-default-on-primary-subtle-level-1); --_tone-icon-control-default-2: var(--dk-icon-control-default-on-primary-subtle-level-2); --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-primary-solid); --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-primary-solid-level-1); --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-primary-solid-level-2); --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-primary-subtle-level-0); --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-primary-subtle-level-1); --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-primary-subtle-level-2); --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-primary-solid); --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-primary-solid-level-1); --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-primary-solid-level-2); --_tone-icon-control-active-0: var(--dk-icon-control-active-on-primary-subtle-level-0); --_tone-icon-control-active-1: var(--dk-icon-control-active-on-primary-subtle-level-1); --_tone-icon-control-active-2: var(--dk-icon-control-active-on-primary-subtle-level-2); --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-primary-solid); --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-primary-solid-level-1); --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-primary-solid-level-2); --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-primary-subtle-level-0); --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-primary-subtle-level-1); --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-primary-subtle-level-2); --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-primary-solid); --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-primary-solid-level-1); --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-primary-solid-level-2); --_tone-text-control-default-0: var(--dk-text-control-default-on-primary-subtle-level-0); --_tone-text-control-default-1: var(--dk-text-control-default-on-primary-subtle-level-1); --_tone-text-control-default-2: var(--dk-text-control-default-on-primary-subtle-level-2); --_tone-text-control-default-solid: var(--dk-text-control-default-on-primary-solid); --_tone-text-control-default-solid1: var(--dk-text-control-default-on-primary-solid-level-1); --_tone-text-control-default-solid2: var(--dk-text-control-default-on-primary-solid-level-2); --_tone-text-control-hover-0: var(--dk-text-control-hover-on-primary-subtle-level-0); --_tone-text-control-hover-1: var(--dk-text-control-hover-on-primary-subtle-level-1); --_tone-text-control-hover-2: var(--dk-text-control-hover-on-primary-subtle-level-2); --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-primary-solid); --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-primary-solid-level-1); --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-primary-solid-level-2); --_tone-text-control-active-0: var(--dk-text-control-active-on-primary-subtle-level-0); --_tone-text-control-active-1: var(--dk-text-control-active-on-primary-subtle-level-1); --_tone-text-control-active-2: var(--dk-text-control-active-on-primary-subtle-level-2); --_tone-text-control-active-solid: var(--dk-text-control-active-on-primary-solid); --_tone-text-control-active-solid1: var(--dk-text-control-active-on-primary-solid-level-1); --_tone-text-control-active-solid2: var(--dk-text-control-active-on-primary-solid-level-2); --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-primary-subtle-level-0); --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-primary-subtle-level-1); --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-primary-subtle-level-2); --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-primary-solid); --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-primary-solid-level-1); --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-primary-solid-level-2); --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-primary-subtle-level-0); --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-primary-subtle-level-1); --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-primary-subtle-level-2); --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-primary-solid); --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-primary-solid-level-1); --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-primary-solid-level-2); } [data-theme] [data-tone="success"]:not([data-theme]), [data-theme][data-tone="success"] { --_tone-surface-control-default-0: var(--dk-surface-control-default-on-success-subtle-level-0); --_tone-surface-control-default-1: var(--dk-surface-control-default-on-success-subtle-level-1); --_tone-surface-control-default-2: var(--dk-surface-control-default-on-success-subtle-level-2); --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-success-solid); --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-success-solid-level-1); --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-success-solid-level-2); --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-success-subtle-level-0); --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-success-subtle-level-1); --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-success-subtle-level-2); --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-success-solid); --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-success-solid-level-1); --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-success-solid-level-2); --_tone-surface-control-active-0: var(--dk-surface-control-active-on-success-subtle-level-0); --_tone-surface-control-active-1: var(--dk-surface-control-active-on-success-subtle-level-1); --_tone-surface-control-active-2: var(--dk-surface-control-active-on-success-subtle-level-2); --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-success-solid); --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-success-solid-level-1); --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-success-solid-level-2); --_tone-border-control-default-0: var(--dk-border-control-default-on-success-subtle-level-0); --_tone-border-control-default-1: var(--dk-border-control-default-on-success-subtle-level-1); --_tone-border-control-default-2: var(--dk-border-control-default-on-success-subtle-level-2); --_tone-border-control-default-solid: var(--dk-border-control-default-on-success-solid); --_tone-border-control-default-solid1: var(--dk-border-control-default-on-success-solid-level-1); --_tone-border-control-default-solid2: var(--dk-border-control-default-on-success-solid-level-2); --_tone-border-control-hover-0: var(--dk-border-control-hover-on-success-subtle-level-0); --_tone-border-control-hover-1: var(--dk-border-control-hover-on-success-subtle-level-1); --_tone-border-control-hover-2: var(--dk-border-control-hover-on-success-subtle-level-2); --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-success-solid); --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-success-solid-level-1); --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-success-solid-level-2); --_tone-border-control-active-0: var(--dk-border-control-active-on-success-subtle-level-0); --_tone-border-control-active-1: var(--dk-border-control-active-on-success-subtle-level-1); --_tone-border-control-active-2: var(--dk-border-control-active-on-success-subtle-level-2); --_tone-border-control-active-solid: var(--dk-border-control-active-on-success-solid); --_tone-border-control-active-solid1: var(--dk-border-control-active-on-success-solid-level-1); --_tone-border-control-active-solid2: var(--dk-border-control-active-on-success-solid-level-2); --_tone-icon-control-default-0: var(--dk-icon-control-default-on-success-subtle-level-0); --_tone-icon-control-default-1: var(--dk-icon-control-default-on-success-subtle-level-1); --_tone-icon-control-default-2: var(--dk-icon-control-default-on-success-subtle-level-2); --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-success-solid); --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-success-solid-level-1); --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-success-solid-level-2); --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-success-subtle-level-0); --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-success-subtle-level-1); --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-success-subtle-level-2); --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-success-solid); --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-success-solid-level-1); --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-success-solid-level-2); --_tone-icon-control-active-0: var(--dk-icon-control-active-on-success-subtle-level-0); --_tone-icon-control-active-1: var(--dk-icon-control-active-on-success-subtle-level-1); --_tone-icon-control-active-2: var(--dk-icon-control-active-on-success-subtle-level-2); --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-success-solid); --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-success-solid-level-1); --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-success-solid-level-2); --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-success-subtle-level-0); --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-success-subtle-level-1); --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-success-subtle-level-2); --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-success-solid); --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-success-solid-level-1); --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-success-solid-level-2); --_tone-text-control-default-0: var(--dk-text-control-default-on-success-subtle-level-0); --_tone-text-control-default-1: var(--dk-text-control-default-on-success-subtle-level-1); --_tone-text-control-default-2: var(--dk-text-control-default-on-success-subtle-level-2); --_tone-text-control-default-solid: var(--dk-text-control-default-on-success-solid); --_tone-text-control-default-solid1: var(--dk-text-control-default-on-success-solid-level-1); --_tone-text-control-default-solid2: var(--dk-text-control-default-on-success-solid-level-2); --_tone-text-control-hover-0: var(--dk-text-control-hover-on-success-subtle-level-0); --_tone-text-control-hover-1: var(--dk-text-control-hover-on-success-subtle-level-1); --_tone-text-control-hover-2: var(--dk-text-control-hover-on-success-subtle-level-2); --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-success-solid); --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-success-solid-level-1); --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-success-solid-level-2); --_tone-text-control-active-0: var(--dk-text-control-active-on-success-subtle-level-0); --_tone-text-control-active-1: var(--dk-text-control-active-on-success-subtle-level-1); --_tone-text-control-active-2: var(--dk-text-control-active-on-success-subtle-level-2); --_tone-text-control-active-solid: var(--dk-text-control-active-on-success-solid); --_tone-text-control-active-solid1: var(--dk-text-control-active-on-success-solid-level-1); --_tone-text-control-active-solid2: var(--dk-text-control-active-on-success-solid-level-2); --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-success-subtle-level-0); --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-success-subtle-level-1); --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-success-subtle-level-2); --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-success-solid); --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-success-solid-level-1); --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-success-solid-level-2); --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-success-subtle-level-0); --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-success-subtle-level-1); --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-success-subtle-level-2); --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-success-solid); --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-success-solid-level-1); --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-success-solid-level-2); } [data-theme] [data-tone="error"]:not([data-theme]), [data-theme][data-tone="error"] { --_tone-surface-control-default-0: var(--dk-surface-control-default-on-error-subtle-level-0); --_tone-surface-control-default-1: var(--dk-surface-control-default-on-error-subtle-level-1); --_tone-surface-control-default-2: var(--dk-surface-control-default-on-error-subtle-level-2); --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-error-solid); --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-error-solid-level-1); --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-error-solid-level-2); --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-error-subtle-level-0); --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-error-subtle-level-1); --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-error-subtle-level-2); --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-error-solid); --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-error-solid-level-1); --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-error-solid-level-2); --_tone-surface-control-active-0: var(--dk-surface-control-active-on-error-subtle-level-0); --_tone-surface-control-active-1: var(--dk-surface-control-active-on-error-subtle-level-1); --_tone-surface-control-active-2: var(--dk-surface-control-active-on-error-subtle-level-2); --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-error-solid); --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-error-solid-level-1); --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-error-solid-level-2); --_tone-border-control-default-0: var(--dk-border-control-default-on-error-subtle-level-0); --_tone-border-control-default-1: var(--dk-border-control-default-on-error-subtle-level-1); --_tone-border-control-default-2: var(--dk-border-control-default-on-error-subtle-level-2); --_tone-border-control-default-solid: var(--dk-border-control-default-on-error-solid); --_tone-border-control-default-solid1: var(--dk-border-control-default-on-error-solid-level-1); --_tone-border-control-default-solid2: var(--dk-border-control-default-on-error-solid-level-2); --_tone-border-control-hover-0: var(--dk-border-control-hover-on-error-subtle-level-0); --_tone-border-control-hover-1: var(--dk-border-control-hover-on-error-subtle-level-1); --_tone-border-control-hover-2: var(--dk-border-control-hover-on-error-subtle-level-2); --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-error-solid); --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-error-solid-level-1); --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-error-solid-level-2); --_tone-border-control-active-0: var(--dk-border-control-active-on-error-subtle-level-0); --_tone-border-control-active-1: var(--dk-border-control-active-on-error-subtle-level-1); --_tone-border-control-active-2: var(--dk-border-control-active-on-error-subtle-level-2); --_tone-border-control-active-solid: var(--dk-border-control-active-on-error-solid); --_tone-border-control-active-solid1: var(--dk-border-control-active-on-error-solid-level-1); --_tone-border-control-active-solid2: var(--dk-border-control-active-on-error-solid-level-2); --_tone-icon-control-default-0: var(--dk-icon-control-default-on-error-subtle-level-0); --_tone-icon-control-default-1: var(--dk-icon-control-default-on-error-subtle-level-1); --_tone-icon-control-default-2: var(--dk-icon-control-default-on-error-subtle-level-2); --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-error-solid); --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-error-solid-level-1); --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-error-solid-level-2); --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-error-subtle-level-0); --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-error-subtle-level-1); --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-error-subtle-level-2); --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-error-solid); --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-error-solid-level-1); --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-error-solid-level-2); --_tone-icon-control-active-0: var(--dk-icon-control-active-on-error-subtle-level-0); --_tone-icon-control-active-1: var(--dk-icon-control-active-on-error-subtle-level-1); --_tone-icon-control-active-2: var(--dk-icon-control-active-on-error-subtle-level-2); --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-error-solid); --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-error-solid-level-1); --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-error-solid-level-2); --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-error-subtle-level-0); --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-error-subtle-level-1); --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-error-subtle-level-2); --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-error-solid); --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-error-solid-level-1); --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-error-solid-level-2); --_tone-text-control-default-0: var(--dk-text-control-default-on-error-subtle-level-0); --_tone-text-control-default-1: var(--dk-text-control-default-on-error-subtle-level-1); --_tone-text-control-default-2: var(--dk-text-control-default-on-error-subtle-level-2); --_tone-text-control-default-solid: var(--dk-text-control-default-on-error-solid); --_tone-text-control-default-solid1: var(--dk-text-control-default-on-error-solid-level-1); --_tone-text-control-default-solid2: var(--dk-text-control-default-on-error-solid-level-2); --_tone-text-control-hover-0: var(--dk-text-control-hover-on-error-subtle-level-0); --_tone-text-control-hover-1: var(--dk-text-control-hover-on-error-subtle-level-1); --_tone-text-control-hover-2: var(--dk-text-control-hover-on-error-subtle-level-2); --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-error-solid); --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-error-solid-level-1); --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-error-solid-level-2); --_tone-text-control-active-0: var(--dk-text-control-active-on-error-subtle-level-0); --_tone-text-control-active-1: var(--dk-text-control-active-on-error-subtle-level-1); --_tone-text-control-active-2: var(--dk-text-control-active-on-error-subtle-level-2); --_tone-text-control-active-solid: var(--dk-text-control-active-on-error-solid); --_tone-text-control-active-solid1: var(--dk-text-control-active-on-error-solid-level-1); --_tone-text-control-active-solid2: var(--dk-text-control-active-on-error-solid-level-2); --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-error-subtle-level-0); --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-error-subtle-level-1); --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-error-subtle-level-2); --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-error-solid); --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-error-solid-level-1); --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-error-solid-level-2); --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-error-subtle-level-0); --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-error-subtle-level-1); --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-error-subtle-level-2); --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-error-solid); --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-error-solid-level-1); --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-error-solid-level-2); } [data-theme] [data-tone="warning"]:not([data-theme]), [data-theme][data-tone="warning"] { --_tone-surface-control-default-0: var(--dk-surface-control-default-on-warning-subtle-level-0); --_tone-surface-control-default-1: var(--dk-surface-control-default-on-warning-subtle-level-1); --_tone-surface-control-default-2: var(--dk-surface-control-default-on-warning-subtle-level-2); --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-warning-solid); --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-warning-solid-level-1); --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-warning-solid-level-2); --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-warning-subtle-level-0); --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-warning-subtle-level-1); --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-warning-subtle-level-2); --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-warning-solid); --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-warning-solid-level-1); --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-warning-solid-level-2); --_tone-surface-control-active-0: var(--dk-surface-control-active-on-warning-subtle-level-0); --_tone-surface-control-active-1: var(--dk-surface-control-active-on-warning-subtle-level-1); --_tone-surface-control-active-2: var(--dk-surface-control-active-on-warning-subtle-level-2); --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-warning-solid); --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-warning-solid-level-1); --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-warning-solid-level-2); --_tone-border-control-default-0: var(--dk-border-control-default-on-warning-subtle-level-0); --_tone-border-control-default-1: var(--dk-border-control-default-on-warning-subtle-level-1); --_tone-border-control-default-2: var(--dk-border-control-default-on-warning-subtle-level-2); --_tone-border-control-default-solid: var(--dk-border-control-default-on-warning-solid); --_tone-border-control-default-solid1: var(--dk-border-control-default-on-warning-solid-level-1); --_tone-border-control-default-solid2: var(--dk-border-control-default-on-warning-solid-level-2); --_tone-border-control-hover-0: var(--dk-border-control-hover-on-warning-subtle-level-0); --_tone-border-control-hover-1: var(--dk-border-control-hover-on-warning-subtle-level-1); --_tone-border-control-hover-2: var(--dk-border-control-hover-on-warning-subtle-level-2); --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-warning-solid); --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-warning-solid-level-1); --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-warning-solid-level-2); --_tone-border-control-active-0: var(--dk-border-control-active-on-warning-subtle-level-0); --_tone-border-control-active-1: var(--dk-border-control-active-on-warning-subtle-level-1); --_tone-border-control-active-2: var(--dk-border-control-active-on-warning-subtle-level-2); --_tone-border-control-active-solid: var(--dk-border-control-active-on-warning-solid); --_tone-border-control-active-solid1: var(--dk-border-control-active-on-warning-solid-level-1); --_tone-border-control-active-solid2: var(--dk-border-control-active-on-warning-solid-level-2); --_tone-icon-control-default-0: var(--dk-icon-control-default-on-warning-subtle-level-0); --_tone-icon-control-default-1: var(--dk-icon-control-default-on-warning-subtle-level-1); --_tone-icon-control-default-2: var(--dk-icon-control-default-on-warning-subtle-level-2); --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-warning-solid); --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-warning-solid-level-1); --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-warning-solid-level-2); --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-warning-subtle-level-0); --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-warning-subtle-level-1); --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-warning-subtle-level-2); --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-warning-solid); --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-warning-solid-level-1); --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-warning-solid-level-2); --_tone-icon-control-active-0: var(--dk-icon-control-active-on-warning-subtle-level-0); --_tone-icon-control-active-1: var(--dk-icon-control-active-on-warning-subtle-level-1); --_tone-icon-control-active-2: var(--dk-icon-control-active-on-warning-subtle-level-2); --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-warning-solid); --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-warning-solid-level-1); --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-warning-solid-level-2); --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-warning-subtle-level-0); --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-warning-subtle-level-1); --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-warning-subtle-level-2); --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-warning-solid); --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-warning-solid-level-1); --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-warning-solid-level-2); --_tone-text-control-default-0: var(--dk-text-control-default-on-warning-subtle-level-0); --_tone-text-control-default-1: var(--dk-text-control-default-on-warning-subtle-level-1); --_tone-text-control-default-2: var(--dk-text-control-default-on-warning-subtle-level-2); --_tone-text-control-default-solid: var(--dk-text-control-default-on-warning-solid); --_tone-text-control-default-solid1: var(--dk-text-control-default-on-warning-solid-level-1); --_tone-text-control-default-solid2: var(--dk-text-control-default-on-warning-solid-level-2); --_tone-text-control-hover-0: var(--dk-text-control-hover-on-warning-subtle-level-0); --_tone-text-control-hover-1: var(--dk-text-control-hover-on-warning-subtle-level-1); --_tone-text-control-hover-2: var(--dk-text-control-hover-on-warning-subtle-level-2); --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-warning-solid); --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-warning-solid-level-1); --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-warning-solid-level-2); --_tone-text-control-active-0: var(--dk-text-control-active-on-warning-subtle-level-0); --_tone-text-control-active-1: var(--dk-text-control-active-on-warning-subtle-level-1); --_tone-text-control-active-2: var(--dk-text-control-active-on-warning-subtle-level-2); --_tone-text-control-active-solid: var(--dk-text-control-active-on-warning-solid); --_tone-text-control-active-solid1: var(--dk-text-control-active-on-warning-solid-level-1); --_tone-text-control-active-solid2: var(--dk-text-control-active-on-warning-solid-level-2); --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-warning-subtle-level-0); --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-warning-subtle-level-1); --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-warning-subtle-level-2); --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-warning-solid); --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-warning-solid-level-1); --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-warning-solid-level-2); --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-warning-subtle-level-0); --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-warning-subtle-level-1); --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-warning-subtle-level-2); --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-warning-solid); --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-warning-solid-level-1); --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-warning-solid-level-2); } [data-theme] [data-tone="information"]:not([data-theme]), [data-theme][data-tone="information"] { --_tone-surface-control-default-0: var(--dk-surface-control-default-on-information-subtle-level-0); --_tone-surface-control-default-1: var(--dk-surface-control-default-on-information-subtle-level-1); --_tone-surface-control-default-2: var(--dk-surface-control-default-on-information-subtle-level-2); --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-information-solid); --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-information-solid-level-1); --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-information-solid-level-2); --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-information-subtle-level-0); --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-information-subtle-level-1); --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-information-subtle-level-2); --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-information-solid); --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-information-solid-level-1); --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-information-solid-level-2); --_tone-surface-control-active-0: var(--dk-surface-control-active-on-information-subtle-level-0); --_tone-surface-control-active-1: var(--dk-surface-control-active-on-information-subtle-level-1); --_tone-surface-control-active-2: var(--dk-surface-control-active-on-information-subtle-level-2); --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-information-solid); --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-information-solid-level-1); --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-information-solid-level-2); --_tone-border-control-default-0: var(--dk-border-control-default-on-information-subtle-level-0); --_tone-border-control-default-1: var(--dk-border-control-default-on-information-subtle-level-1); --_tone-border-control-default-2: var(--dk-border-control-default-on-information-subtle-level-2); --_tone-border-control-default-solid: var(--dk-border-control-default-on-information-solid); --_tone-border-control-default-solid1: var(--dk-border-control-default-on-information-solid-level-1); --_tone-border-control-default-solid2: var(--dk-border-control-default-on-information-solid-level-2); --_tone-border-control-hover-0: var(--dk-border-control-hover-on-information-subtle-level-0); --_tone-border-control-hover-1: var(--dk-border-control-hover-on-information-subtle-level-1); --_tone-border-control-hover-2: var(--dk-border-control-hover-on-information-subtle-level-2); --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-information-solid); --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-information-solid-level-1); --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-information-solid-level-2); --_tone-border-control-active-0: var(--dk-border-control-active-on-information-subtle-level-0); --_tone-border-control-active-1: var(--dk-border-control-active-on-information-subtle-level-1); --_tone-border-control-active-2: var(--dk-border-control-active-on-information-subtle-level-2); --_tone-border-control-active-solid: var(--dk-border-control-active-on-information-solid); --_tone-border-control-active-solid1: var(--dk-border-control-active-on-information-solid-level-1); --_tone-border-control-active-solid2: var(--dk-border-control-active-on-information-solid-level-2); --_tone-icon-control-default-0: var(--dk-icon-control-default-on-information-subtle-level-0); --_tone-icon-control-default-1: var(--dk-icon-control-default-on-information-subtle-level-1); --_tone-icon-control-default-2: var(--dk-icon-control-default-on-information-subtle-level-2); --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-information-solid); --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-information-solid-level-1); --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-information-solid-level-2); --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-information-subtle-level-0); --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-information-subtle-level-1); --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-information-subtle-level-2); --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-information-solid); --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-information-solid-level-1); --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-information-solid-level-2); --_tone-icon-control-active-0: var(--dk-icon-control-active-on-information-subtle-level-0); --_tone-icon-control-active-1: var(--dk-icon-control-active-on-information-subtle-level-1); --_tone-icon-control-active-2: var(--dk-icon-control-active-on-information-subtle-level-2); --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-information-solid); --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-information-solid-level-1); --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-information-solid-level-2); --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-information-subtle-level-0); --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-information-subtle-level-1); --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-information-subtle-level-2); --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-information-solid); --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-information-solid-level-1); --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-information-solid-level-2); --_tone-text-control-default-0: var(--dk-text-control-default-on-information-subtle-level-0); --_tone-text-control-default-1: var(--dk-text-control-default-on-information-subtle-level-1); --_tone-text-control-default-2: var(--dk-text-control-default-on-information-subtle-level-2); --_tone-text-control-default-solid: var(--dk-text-control-default-on-information-solid); --_tone-text-control-default-solid1: var(--dk-text-control-default-on-information-solid-level-1); --_tone-text-control-default-solid2: var(--dk-text-control-default-on-information-solid-level-2); --_tone-text-control-hover-0: var(--dk-text-control-hover-on-information-subtle-level-0); --_tone-text-control-hover-1: var(--dk-text-control-hover-on-information-subtle-level-1); --_tone-text-control-hover-2: var(--dk-text-control-hover-on-information-subtle-level-2); --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-information-solid); --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-information-solid-level-1); --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-information-solid-level-2); --_tone-text-control-active-0: var(--dk-text-control-active-on-information-subtle-level-0); --_tone-text-control-active-1: var(--dk-text-control-active-on-information-subtle-level-1); --_tone-text-control-active-2: var(--dk-text-control-active-on-information-subtle-level-2); --_tone-text-control-active-solid: var(--dk-text-control-active-on-information-solid); --_tone-text-control-active-solid1: var(--dk-text-control-active-on-information-solid-level-1); --_tone-text-control-active-solid2: var(--dk-text-control-active-on-information-solid-level-2); --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-information-subtle-level-0); --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-information-subtle-level-1); --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-information-subtle-level-2); --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-information-solid); --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-information-solid-level-1); --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-information-solid-level-2); --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-information-subtle-level-0); --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-information-subtle-level-1); --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-information-subtle-level-2); --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-information-solid); --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-information-solid-level-1); --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-information-solid-level-2); } [data-theme] [data-tone="inverse"]:not([data-theme]), [data-theme][data-tone="inverse"] { --_tone-surface-control-default-0: var(--dk-surface-control-default-on-inverse-subtle-level-0); --_tone-surface-control-default-1: var(--dk-surface-control-default-on-inverse-subtle-level-1); --_tone-surface-control-default-2: var(--dk-surface-control-default-on-inverse-subtle-level-2); --_tone-surface-control-default-solid: var(--dk-surface-control-default-on-inverse-solid); --_tone-surface-control-default-solid1: var(--dk-surface-control-default-on-inverse-solid-level-1); --_tone-surface-control-default-solid2: var(--dk-surface-control-default-on-inverse-solid-level-2); --_tone-surface-control-hover-0: var(--dk-surface-control-hover-on-inverse-subtle-level-0); --_tone-surface-control-hover-1: var(--dk-surface-control-hover-on-inverse-subtle-level-1); --_tone-surface-control-hover-2: var(--dk-surface-control-hover-on-inverse-subtle-level-2); --_tone-surface-control-hover-solid: var(--dk-surface-control-hover-on-inverse-solid); --_tone-surface-control-hover-solid1: var(--dk-surface-control-hover-on-inverse-solid-level-1); --_tone-surface-control-hover-solid2: var(--dk-surface-control-hover-on-inverse-solid-level-2); --_tone-surface-control-active-0: var(--dk-surface-control-active-on-inverse-subtle-level-0); --_tone-surface-control-active-1: var(--dk-surface-control-active-on-inverse-subtle-level-1); --_tone-surface-control-active-2: var(--dk-surface-control-active-on-inverse-subtle-level-2); --_tone-surface-control-active-solid: var(--dk-surface-control-active-on-inverse-solid); --_tone-surface-control-active-solid1: var(--dk-surface-control-active-on-inverse-solid-level-1); --_tone-surface-control-active-solid2: var(--dk-surface-control-active-on-inverse-solid-level-2); --_tone-border-control-default-0: var(--dk-border-control-default-on-inverse-subtle-level-0); --_tone-border-control-default-1: var(--dk-border-control-default-on-inverse-subtle-level-1); --_tone-border-control-default-2: var(--dk-border-control-default-on-inverse-subtle-level-2); --_tone-border-control-default-solid: var(--dk-border-control-default-on-inverse-solid); --_tone-border-control-default-solid1: var(--dk-border-control-default-on-inverse-solid-level-1); --_tone-border-control-default-solid2: var(--dk-border-control-default-on-inverse-solid-level-2); --_tone-border-control-hover-0: var(--dk-border-control-hover-on-inverse-subtle-level-0); --_tone-border-control-hover-1: var(--dk-border-control-hover-on-inverse-subtle-level-1); --_tone-border-control-hover-2: var(--dk-border-control-hover-on-inverse-subtle-level-2); --_tone-border-control-hover-solid: var(--dk-border-control-hover-on-inverse-solid); --_tone-border-control-hover-solid1: var(--dk-border-control-hover-on-inverse-solid-level-1); --_tone-border-control-hover-solid2: var(--dk-border-control-hover-on-inverse-solid-level-2); --_tone-border-control-active-0: var(--dk-border-control-active-on-inverse-subtle-level-0); --_tone-border-control-active-1: var(--dk-border-control-active-on-inverse-subtle-level-1); --_tone-border-control-active-2: var(--dk-border-control-active-on-inverse-subtle-level-2); --_tone-border-control-active-solid: var(--dk-border-control-active-on-inverse-solid); --_tone-border-control-active-solid1: var(--dk-border-control-active-on-inverse-solid-level-1); --_tone-border-control-active-solid2: var(--dk-border-control-active-on-inverse-solid-level-2); --_tone-icon-control-default-0: var(--dk-icon-control-default-on-inverse-subtle-level-0); --_tone-icon-control-default-1: var(--dk-icon-control-default-on-inverse-subtle-level-1); --_tone-icon-control-default-2: var(--dk-icon-control-default-on-inverse-subtle-level-2); --_tone-icon-control-default-solid: var(--dk-icon-control-default-on-inverse-solid); --_tone-icon-control-default-solid1: var(--dk-icon-control-default-on-inverse-solid-level-1); --_tone-icon-control-default-solid2: var(--dk-icon-control-default-on-inverse-solid-level-2); --_tone-icon-control-hover-0: var(--dk-icon-control-hover-on-inverse-subtle-level-0); --_tone-icon-control-hover-1: var(--dk-icon-control-hover-on-inverse-subtle-level-1); --_tone-icon-control-hover-2: var(--dk-icon-control-hover-on-inverse-subtle-level-2); --_tone-icon-control-hover-solid: var(--dk-icon-control-hover-on-inverse-solid); --_tone-icon-control-hover-solid1: var(--dk-icon-control-hover-on-inverse-solid-level-1); --_tone-icon-control-hover-solid2: var(--dk-icon-control-hover-on-inverse-solid-level-2); --_tone-icon-control-active-0: var(--dk-icon-control-active-on-inverse-subtle-level-0); --_tone-icon-control-active-1: var(--dk-icon-control-active-on-inverse-subtle-level-1); --_tone-icon-control-active-2: var(--dk-icon-control-active-on-inverse-subtle-level-2); --_tone-icon-control-active-solid: var(--dk-icon-control-active-on-inverse-solid); --_tone-icon-control-active-solid1: var(--dk-icon-control-active-on-inverse-solid-level-1); --_tone-icon-control-active-solid2: var(--dk-icon-control-active-on-inverse-solid-level-2); --_tone-icon-control-disabled-0: var(--dk-icon-control-disabled-on-inverse-subtle-level-0); --_tone-icon-control-disabled-1: var(--dk-icon-control-disabled-on-inverse-subtle-level-1); --_tone-icon-control-disabled-2: var(--dk-icon-control-disabled-on-inverse-subtle-level-2); --_tone-icon-control-disabled-solid: var(--dk-icon-control-disabled-on-inverse-solid); --_tone-icon-control-disabled-solid1: var(--dk-icon-control-disabled-on-inverse-solid-level-1); --_tone-icon-control-disabled-solid2: var(--dk-icon-control-disabled-on-inverse-solid-level-2); --_tone-text-control-default-0: var(--dk-text-control-default-on-inverse-subtle-level-0); --_tone-text-control-default-1: var(--dk-text-control-default-on-inverse-subtle-level-1); --_tone-text-control-default-2: var(--dk-text-control-default-on-inverse-subtle-level-2); --_tone-text-control-default-solid: var(--dk-text-control-default-on-inverse-solid); --_tone-text-control-default-solid1: var(--dk-text-control-default-on-inverse-solid-level-1); --_tone-text-control-default-solid2: var(--dk-text-control-default-on-inverse-solid-level-2); --_tone-text-control-hover-0: var(--dk-text-control-hover-on-inverse-subtle-level-0); --_tone-text-control-hover-1: var(--dk-text-control-hover-on-inverse-subtle-level-1); --_tone-text-control-hover-2: var(--dk-text-control-hover-on-inverse-subtle-level-2); --_tone-text-control-hover-solid: var(--dk-text-control-hover-on-inverse-solid); --_tone-text-control-hover-solid1: var(--dk-text-control-hover-on-inverse-solid-level-1); --_tone-text-control-hover-solid2: var(--dk-text-control-hover-on-inverse-solid-level-2); --_tone-text-control-active-0: var(--dk-text-control-active-on-inverse-subtle-level-0); --_tone-text-control-active-1: var(--dk-text-control-active-on-inverse-subtle-level-1); --_tone-text-control-active-2: var(--dk-text-control-active-on-inverse-subtle-level-2); --_tone-text-control-active-solid: var(--dk-text-control-active-on-inverse-solid); --_tone-text-control-active-solid1: var(--dk-text-control-active-on-inverse-solid-level-1); --_tone-text-control-active-solid2: var(--dk-text-control-active-on-inverse-solid-level-2); --_tone-text-control-disabled-0: var(--dk-text-control-disabled-on-inverse-subtle-level-0); --_tone-text-control-disabled-1: var(--dk-text-control-disabled-on-inverse-subtle-level-1); --_tone-text-control-disabled-2: var(--dk-text-control-disabled-on-inverse-subtle-level-2); --_tone-text-control-disabled-solid: var(--dk-text-control-disabled-on-inverse-solid); --_tone-text-control-disabled-solid1: var(--dk-text-control-disabled-on-inverse-solid-level-1); --_tone-text-control-disabled-solid2: var(--dk-text-control-disabled-on-inverse-solid-level-2); --_tone-surface-control-disabled-0: var(--dk-surface-control-disabled-on-inverse-subtle-level-0); --_tone-surface-control-disabled-1: var(--dk-surface-control-disabled-on-inverse-subtle-level-1); --_tone-surface-control-disabled-2: var(--dk-surface-control-disabled-on-inverse-subtle-level-2); --_tone-surface-control-disabled-solid: var(--dk-surface-control-disabled-on-inverse-solid); --_tone-surface-control-disabled-solid1: var(--dk-surface-control-disabled-on-inverse-solid-level-1); --_tone-surface-control-disabled-solid2: var(--dk-surface-control-disabled-on-inverse-solid-level-2); } /* The public names, per level. Level 0 is the bare tone. */ [data-theme] [data-tone="primary"]:not([data-theme]), [data-theme] [data-tone="success"]:not([data-theme]), [data-theme] [data-tone="error"]:not([data-theme]), [data-theme] [data-tone="warning"]:not([data-theme]), [data-theme] [data-tone="information"]:not([data-theme]), [data-theme] [data-tone="inverse"]:not([data-theme]), [data-theme][data-tone="primary"], [data-theme][data-tone="success"], [data-theme][data-tone="error"], [data-theme][data-tone="warning"], [data-theme][data-tone="information"], [data-theme][data-tone="inverse"] { --dk-surface-control-default: var(--_tone-surface-control-default-0); --dk-surface-control-hover: var(--_tone-surface-control-hover-0); --dk-surface-control-active: var(--_tone-surface-control-active-0); --dk-border-control-default: var(--_tone-border-control-default-0); --dk-border-control-hover: var(--_tone-border-control-hover-0); --dk-border-control-active: var(--_tone-border-control-active-0); --dk-icon-control-default: var(--_tone-icon-control-default-0); --dk-icon-control-hover: var(--_tone-icon-control-hover-0); --dk-icon-control-active: var(--_tone-icon-control-active-0); --dk-icon-control-disabled: var(--_tone-icon-control-disabled-0); --dk-text-control-default: var(--_tone-text-control-default-0); --dk-text-control-hover: var(--_tone-text-control-hover-0); --dk-text-control-active: var(--_tone-text-control-active-0); --dk-text-control-disabled: var(--_tone-text-control-disabled-0); --dk-surface-control-disabled: var(--_tone-surface-control-disabled-0); } [data-theme] [data-tone="primary"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="1"]:not([data-theme]), [data-theme][data-tone="primary"][data-surface="1"], [data-theme][data-tone="success"][data-surface="1"], [data-theme][data-tone="error"][data-surface="1"], [data-theme][data-tone="warning"][data-surface="1"], [data-theme][data-tone="information"][data-surface="1"], [data-theme][data-tone="inverse"][data-surface="1"] { --dk-surface-control-default: var(--_tone-surface-control-default-1); --dk-surface-control-hover: var(--_tone-surface-control-hover-1); --dk-surface-control-active: var(--_tone-surface-control-active-1); --dk-border-control-default: var(--_tone-border-control-default-1); --dk-border-control-hover: var(--_tone-border-control-hover-1); --dk-border-control-active: var(--_tone-border-control-active-1); --dk-icon-control-default: var(--_tone-icon-control-default-1); --dk-icon-control-hover: var(--_tone-icon-control-hover-1); --dk-icon-control-active: var(--_tone-icon-control-active-1); --dk-icon-control-disabled: var(--_tone-icon-control-disabled-1); --dk-text-control-default: var(--_tone-text-control-default-1); --dk-text-control-hover: var(--_tone-text-control-hover-1); --dk-text-control-active: var(--_tone-text-control-active-1); --dk-text-control-disabled: var(--_tone-text-control-disabled-1); --dk-surface-control-disabled: var(--_tone-surface-control-disabled-1); } [data-theme] [data-tone="primary"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="success"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="error"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="warning"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="information"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="inverse"][data-surface="2"]:not([data-theme]), [data-theme][data-tone="primary"][data-surface="2"], [data-theme][data-tone="success"][data-surface="2"], [data-theme][data-tone="error"][data-surface="2"], [data-theme][data-tone="warning"][data-surface="2"], [data-theme][data-tone="information"][data-surface="2"], [data-theme][data-tone="inverse"][data-surface="2"] { --dk-surface-control-default: var(--_tone-surface-control-default-2); --dk-surface-control-hover: var(--_tone-surface-control-hover-2); --dk-surface-control-active: var(--_tone-surface-control-active-2); --dk-border-control-default: var(--_tone-border-control-default-2); --dk-border-control-hover: var(--_tone-border-control-hover-2); --dk-border-control-active: var(--_tone-border-control-active-2); --dk-icon-control-default: var(--_tone-icon-control-default-2); --dk-icon-control-hover: var(--_tone-icon-control-hover-2); --dk-icon-control-active: var(--_tone-icon-control-active-2); --dk-icon-control-disabled: var(--_tone-icon-control-disabled-2); --dk-text-control-default: var(--_tone-text-control-default-2); --dk-text-control-hover: var(--_tone-text-control-hover-2); --dk-text-control-active: var(--_tone-text-control-active-2); --dk-text-control-disabled: var(--_tone-text-control-disabled-2); --dk-surface-control-disabled: var(--_tone-surface-control-disabled-2); } /* Solid fills do not step with levels, the same rule tone.css records: a solid fill is already the top of its ramp, so deepening it costs legibility rather than buying hierarchy. This block therefore carries no [data-surface] variants and is placed last so it wins over the level blocks above. */ [data-theme] [data-tone="primary"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"], [data-theme][data-tone="success"][data-tone-fill="solid"], [data-theme][data-tone="error"][data-tone-fill="solid"], [data-theme][data-tone="warning"][data-tone-fill="solid"], [data-theme][data-tone="information"][data-tone-fill="solid"] { --dk-surface-control-default: var(--_tone-surface-control-default-solid); --dk-surface-control-hover: var(--_tone-surface-control-hover-solid); --dk-surface-control-active: var(--_tone-surface-control-active-solid); --dk-border-control-default: var(--_tone-border-control-default-solid); --dk-border-control-hover: var(--_tone-border-control-hover-solid); --dk-border-control-active: var(--_tone-border-control-active-solid); --dk-icon-control-default: var(--_tone-icon-control-default-solid); --dk-icon-control-hover: var(--_tone-icon-control-hover-solid); --dk-icon-control-active: var(--_tone-icon-control-active-solid); --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid); --dk-text-control-default: var(--_tone-text-control-default-solid); --dk-text-control-hover: var(--_tone-text-control-hover-solid); --dk-text-control-active: var(--_tone-text-control-active-solid); --dk-text-control-disabled: var(--_tone-text-control-disabled-solid); --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid); } /* Solid levels. The header above used to say a solid fill does not step with levels; it does now, downward, 700/800/900. A control on a deeper solid panel therefore needs its own rungs, or it keeps level 0's and sits on a panel two steps darker than the one it was chosen against. These come last for the same reason the block above does: they have to win over the per-level blocks that assume a subtle fill. */ [data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="1"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="1"], [data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="1"] { --dk-surface-control-default: var(--_tone-surface-control-default-solid1); --dk-surface-control-hover: var(--_tone-surface-control-hover-solid1); --dk-surface-control-active: var(--_tone-surface-control-active-solid1); --dk-border-control-default: var(--_tone-border-control-default-solid1); --dk-border-control-hover: var(--_tone-border-control-hover-solid1); --dk-border-control-active: var(--_tone-border-control-active-solid1); --dk-icon-control-default: var(--_tone-icon-control-default-solid1); --dk-icon-control-hover: var(--_tone-icon-control-hover-solid1); --dk-icon-control-active: var(--_tone-icon-control-active-solid1); --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid1); --dk-text-control-default: var(--_tone-text-control-default-solid1); --dk-text-control-hover: var(--_tone-text-control-hover-solid1); --dk-text-control-active: var(--_tone-text-control-active-solid1); --dk-text-control-disabled: var(--_tone-text-control-disabled-solid1); --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid1); } [data-theme] [data-tone="primary"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="success"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="error"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="warning"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme] [data-tone="information"][data-tone-fill="solid"][data-surface="2"]:not([data-theme]), [data-theme][data-tone="primary"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="success"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="error"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="warning"][data-tone-fill="solid"][data-surface="2"], [data-theme][data-tone="information"][data-tone-fill="solid"][data-surface="2"] { --dk-surface-control-default: var(--_tone-surface-control-default-solid2); --dk-surface-control-hover: var(--_tone-surface-control-hover-solid2); --dk-surface-control-active: var(--_tone-surface-control-active-solid2); --dk-border-control-default: var(--_tone-border-control-default-solid2); --dk-border-control-hover: var(--_tone-border-control-hover-solid2); --dk-border-control-active: var(--_tone-border-control-active-solid2); --dk-icon-control-default: var(--_tone-icon-control-default-solid2); --dk-icon-control-hover: var(--_tone-icon-control-hover-solid2); --dk-icon-control-active: var(--_tone-icon-control-active-solid2); --dk-icon-control-disabled: var(--_tone-icon-control-disabled-solid2); --dk-text-control-default: var(--_tone-text-control-default-solid2); --dk-text-control-hover: var(--_tone-text-control-hover-solid2); --dk-text-control-active: var(--_tone-text-control-active-solid2); --dk-text-control-disabled: var(--_tone-text-control-disabled-solid2); --dk-surface-control-disabled: var(--_tone-surface-control-disabled-solid2); } /* ── A FORCED STATUS, still following the level ──────────────────────────── Everything above answers "what colour is a control sitting on a toned panel", and the answer is read from the panel: the ambient data-tone picks the ramp. A button with data-status="error" is asking the opposite question. It wants error's ramp whatever the panel says, and it still wants the rung that belongs to the level it is standing on. The names below are the same family with the level segment removed, and the level scopes put it back. That is the grammar the rest of the kit already uses: --dk-text-primary-default is the level-aware name and --dk-text-primary-default-level-1 is the rung it points at on a level 1 panel. WHY THIS EXISTS AT ALL. Button's subtle, plain, ghost and outline take their fills from --dk-surface--subtle-hover and their label from --dk-text--hover. The fill half of that pair is level-aware; the label half is not, so on a level 2 panel the fill had climbed two rungs and the label had not moved. Measured across the button family, 117 of 558 rendered readings sat under their bar, worst 1.86:1 for a pressed primary outline on level 2 dark. The control family already carries a measured rung for every status, level and state, and the icon button has been reading it since it was built, which is why the icon button had none. Statuses only, no inverse: inverse is not a status a component can force, it is the panel saying "the opposite theme", and nothing carries data-status="inverse". */ [data-theme="light"], [data-theme="dark"] { /* primary */ --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-0); --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-0); --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-0); --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-0); --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-0); --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-0); --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-0); --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-0); --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-0); --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-0); --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-0); --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-0); --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-0); --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-0); --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-0); /* success */ --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-0); --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-0); --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-0); --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-0); --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-0); --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-0); --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-0); --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-0); --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-0); --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-0); --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-0); --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-0); --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-0); --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-0); --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-0); /* error */ --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-0); --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-0); --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-0); --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-0); --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-0); --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-0); --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-0); --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-0); --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-0); --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-0); --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-0); --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-0); --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-0); --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-0); --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-0); /* warning */ --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-0); --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-0); --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-0); --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-0); --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-0); --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-0); --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-0); --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-0); --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-0); --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-0); --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-0); --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-0); --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-0); --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-0); --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-0); /* information */ --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-0); --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-0); --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-0); --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-0); --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-0); --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-0); --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-0); --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-0); --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-0); --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-0); --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-0); --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-0); --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-0); --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-0); --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-0); } [data-theme] [data-surface="1"]:not([data-theme]), [data-theme][data-surface="1"] { /* primary */ --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-1); --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-1); --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-1); --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-1); --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-1); --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-1); --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-1); --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-1); --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-1); --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-1); --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-1); --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-1); --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-1); --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-1); --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-1); /* success */ --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-1); --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-1); --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-1); --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-1); --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-1); --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-1); --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-1); --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-1); --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-1); --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-1); --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-1); --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-1); --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-1); --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-1); --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-1); /* error */ --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-1); --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-1); --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-1); --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-1); --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-1); --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-1); --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-1); --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-1); --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-1); --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-1); --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-1); --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-1); --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-1); --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-1); --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-1); /* warning */ --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-1); --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-1); --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-1); --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-1); --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-1); --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-1); --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-1); --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-1); --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-1); --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-1); --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-1); --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-1); --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-1); --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-1); --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-1); /* information */ --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-1); --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-1); --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-1); --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-1); --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-1); --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-1); --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-1); --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-1); --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-1); --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-1); --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-1); --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-1); --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-1); --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-1); --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-1); } [data-theme] [data-surface="2"]:not([data-theme]), [data-theme][data-surface="2"] { /* primary */ --dk-surface-control-default-on-primary-subtle: var(--dk-surface-control-default-on-primary-subtle-level-2); --dk-surface-control-hover-on-primary-subtle: var(--dk-surface-control-hover-on-primary-subtle-level-2); --dk-surface-control-active-on-primary-subtle: var(--dk-surface-control-active-on-primary-subtle-level-2); --dk-surface-control-disabled-on-primary-subtle: var(--dk-surface-control-disabled-on-primary-subtle-level-2); --dk-border-control-default-on-primary-subtle: var(--dk-border-control-default-on-primary-subtle-level-2); --dk-border-control-hover-on-primary-subtle: var(--dk-border-control-hover-on-primary-subtle-level-2); --dk-border-control-active-on-primary-subtle: var(--dk-border-control-active-on-primary-subtle-level-2); --dk-icon-control-default-on-primary-subtle: var(--dk-icon-control-default-on-primary-subtle-level-2); --dk-icon-control-hover-on-primary-subtle: var(--dk-icon-control-hover-on-primary-subtle-level-2); --dk-icon-control-active-on-primary-subtle: var(--dk-icon-control-active-on-primary-subtle-level-2); --dk-icon-control-disabled-on-primary-subtle: var(--dk-icon-control-disabled-on-primary-subtle-level-2); --dk-text-control-default-on-primary-subtle: var(--dk-text-control-default-on-primary-subtle-level-2); --dk-text-control-hover-on-primary-subtle: var(--dk-text-control-hover-on-primary-subtle-level-2); --dk-text-control-active-on-primary-subtle: var(--dk-text-control-active-on-primary-subtle-level-2); --dk-text-control-disabled-on-primary-subtle: var(--dk-text-control-disabled-on-primary-subtle-level-2); /* success */ --dk-surface-control-default-on-success-subtle: var(--dk-surface-control-default-on-success-subtle-level-2); --dk-surface-control-hover-on-success-subtle: var(--dk-surface-control-hover-on-success-subtle-level-2); --dk-surface-control-active-on-success-subtle: var(--dk-surface-control-active-on-success-subtle-level-2); --dk-surface-control-disabled-on-success-subtle: var(--dk-surface-control-disabled-on-success-subtle-level-2); --dk-border-control-default-on-success-subtle: var(--dk-border-control-default-on-success-subtle-level-2); --dk-border-control-hover-on-success-subtle: var(--dk-border-control-hover-on-success-subtle-level-2); --dk-border-control-active-on-success-subtle: var(--dk-border-control-active-on-success-subtle-level-2); --dk-icon-control-default-on-success-subtle: var(--dk-icon-control-default-on-success-subtle-level-2); --dk-icon-control-hover-on-success-subtle: var(--dk-icon-control-hover-on-success-subtle-level-2); --dk-icon-control-active-on-success-subtle: var(--dk-icon-control-active-on-success-subtle-level-2); --dk-icon-control-disabled-on-success-subtle: var(--dk-icon-control-disabled-on-success-subtle-level-2); --dk-text-control-default-on-success-subtle: var(--dk-text-control-default-on-success-subtle-level-2); --dk-text-control-hover-on-success-subtle: var(--dk-text-control-hover-on-success-subtle-level-2); --dk-text-control-active-on-success-subtle: var(--dk-text-control-active-on-success-subtle-level-2); --dk-text-control-disabled-on-success-subtle: var(--dk-text-control-disabled-on-success-subtle-level-2); /* error */ --dk-surface-control-default-on-error-subtle: var(--dk-surface-control-default-on-error-subtle-level-2); --dk-surface-control-hover-on-error-subtle: var(--dk-surface-control-hover-on-error-subtle-level-2); --dk-surface-control-active-on-error-subtle: var(--dk-surface-control-active-on-error-subtle-level-2); --dk-surface-control-disabled-on-error-subtle: var(--dk-surface-control-disabled-on-error-subtle-level-2); --dk-border-control-default-on-error-subtle: var(--dk-border-control-default-on-error-subtle-level-2); --dk-border-control-hover-on-error-subtle: var(--dk-border-control-hover-on-error-subtle-level-2); --dk-border-control-active-on-error-subtle: var(--dk-border-control-active-on-error-subtle-level-2); --dk-icon-control-default-on-error-subtle: var(--dk-icon-control-default-on-error-subtle-level-2); --dk-icon-control-hover-on-error-subtle: var(--dk-icon-control-hover-on-error-subtle-level-2); --dk-icon-control-active-on-error-subtle: var(--dk-icon-control-active-on-error-subtle-level-2); --dk-icon-control-disabled-on-error-subtle: var(--dk-icon-control-disabled-on-error-subtle-level-2); --dk-text-control-default-on-error-subtle: var(--dk-text-control-default-on-error-subtle-level-2); --dk-text-control-hover-on-error-subtle: var(--dk-text-control-hover-on-error-subtle-level-2); --dk-text-control-active-on-error-subtle: var(--dk-text-control-active-on-error-subtle-level-2); --dk-text-control-disabled-on-error-subtle: var(--dk-text-control-disabled-on-error-subtle-level-2); /* warning */ --dk-surface-control-default-on-warning-subtle: var(--dk-surface-control-default-on-warning-subtle-level-2); --dk-surface-control-hover-on-warning-subtle: var(--dk-surface-control-hover-on-warning-subtle-level-2); --dk-surface-control-active-on-warning-subtle: var(--dk-surface-control-active-on-warning-subtle-level-2); --dk-surface-control-disabled-on-warning-subtle: var(--dk-surface-control-disabled-on-warning-subtle-level-2); --dk-border-control-default-on-warning-subtle: var(--dk-border-control-default-on-warning-subtle-level-2); --dk-border-control-hover-on-warning-subtle: var(--dk-border-control-hover-on-warning-subtle-level-2); --dk-border-control-active-on-warning-subtle: var(--dk-border-control-active-on-warning-subtle-level-2); --dk-icon-control-default-on-warning-subtle: var(--dk-icon-control-default-on-warning-subtle-level-2); --dk-icon-control-hover-on-warning-subtle: var(--dk-icon-control-hover-on-warning-subtle-level-2); --dk-icon-control-active-on-warning-subtle: var(--dk-icon-control-active-on-warning-subtle-level-2); --dk-icon-control-disabled-on-warning-subtle: var(--dk-icon-control-disabled-on-warning-subtle-level-2); --dk-text-control-default-on-warning-subtle: var(--dk-text-control-default-on-warning-subtle-level-2); --dk-text-control-hover-on-warning-subtle: var(--dk-text-control-hover-on-warning-subtle-level-2); --dk-text-control-active-on-warning-subtle: var(--dk-text-control-active-on-warning-subtle-level-2); --dk-text-control-disabled-on-warning-subtle: var(--dk-text-control-disabled-on-warning-subtle-level-2); /* information */ --dk-surface-control-default-on-information-subtle: var(--dk-surface-control-default-on-information-subtle-level-2); --dk-surface-control-hover-on-information-subtle: var(--dk-surface-control-hover-on-information-subtle-level-2); --dk-surface-control-active-on-information-subtle: var(--dk-surface-control-active-on-information-subtle-level-2); --dk-surface-control-disabled-on-information-subtle: var(--dk-surface-control-disabled-on-information-subtle-level-2); --dk-border-control-default-on-information-subtle: var(--dk-border-control-default-on-information-subtle-level-2); --dk-border-control-hover-on-information-subtle: var(--dk-border-control-hover-on-information-subtle-level-2); --dk-border-control-active-on-information-subtle: var(--dk-border-control-active-on-information-subtle-level-2); --dk-icon-control-default-on-information-subtle: var(--dk-icon-control-default-on-information-subtle-level-2); --dk-icon-control-hover-on-information-subtle: var(--dk-icon-control-hover-on-information-subtle-level-2); --dk-icon-control-active-on-information-subtle: var(--dk-icon-control-active-on-information-subtle-level-2); --dk-icon-control-disabled-on-information-subtle: var(--dk-icon-control-disabled-on-information-subtle-level-2); --dk-text-control-default-on-information-subtle: var(--dk-text-control-default-on-information-subtle-level-2); --dk-text-control-hover-on-information-subtle: var(--dk-text-control-hover-on-information-subtle-level-2); --dk-text-control-active-on-information-subtle: var(--dk-text-control-active-on-information-subtle-level-2); --dk-text-control-disabled-on-information-subtle: var(--dk-text-control-disabled-on-information-subtle-level-2); } /* ═══════════════════════════════════════ drift-kit:layer tokens/mapped/success.css ═══════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Success (brand override) — moved out of primitives/transform.css 2026-09-09: these are Mapped-tier aliases, and the tier of a token is decided by its file. ─────────────────────────────────────────────────────────── */ /* ── SUCCESS ramp → JADE (BRAND OVERRIDE) ───────────────────────────────────── Core Drift's success green sits noticeably outside our jade brand green, so the two clash whenever they appear together (e.g. a success toast on a page full of primary-jade chrome). Remap the ENTIRE success semantic set (all 34 surface/border/text/icon tokens) onto the corresponding primary tokens — success IS jade here. One block covers both themes: each override references a primary token that is itself theme-scoped, so light/dark resolve automatically at usage time. (--dk-text-success-body has no primary counterpart; mapped to --dk-text-primary-default as the closest role.) */ [data-theme="light"], [data-theme="dark"] { --dk-surface-success-default: var(--dk-surface-primary-default); --dk-surface-success-hover: var(--dk-surface-primary-hover); --dk-surface-success-focus: var(--dk-surface-primary-focus); --dk-surface-success-subtle: var(--dk-surface-primary-subtle); --dk-surface-success-subtle-hover: var(--dk-surface-primary-subtle-hover); --dk-surface-success-subtle-focus: var(--dk-surface-primary-subtle-focus); --dk-border-success-default: var(--dk-border-primary-default); --dk-border-success-hover: var(--dk-border-primary-hover); --dk-border-success-focus: var(--dk-border-primary-focus); --dk-border-success-subtle: var(--dk-border-primary-subtle); --dk-border-success-subtle-hover: var(--dk-border-primary-subtle-hover); --dk-border-success-subtle-focus: var(--dk-border-primary-subtle-focus); --dk-border-success-hairline: var(--dk-border-primary-hairline); --dk-border-success-elevation: var(--dk-border-primary-elevation); --dk-border-success-elevation-hover: var(--dk-border-primary-elevation-hover); --dk-border-success-elevation-focus: var(--dk-border-primary-elevation-focus); --dk-text-success-default: var(--dk-text-primary-default); --dk-text-success-hover: var(--dk-text-primary-hover); /* -active added 2026-08-18 with the button per-state text work. It MUST go through this remap like its siblings: referencing --dk-color-success-700 direct (as it first did) resolved to core's true green #2e9856 and put green text on a jade fill — 1.58:1 on a pressed outline-success button. */ --dk-text-success-active: var(--dk-text-primary-active); --dk-icon-success-active: var(--dk-icon-primary-active); /* -on-subtle added 2026-09-13 with Alert's title/body colour: same reason as -active just above, green text would land on Alert's jade tint. */ --dk-text-success-on-subtle: var(--dk-text-primary-on-subtle); --dk-text-success-focus: var(--dk-text-primary-focus); --dk-text-success-subtle: var(--dk-text-primary-subtle); --dk-text-success-subtle-hover: var(--dk-text-primary-subtle-hover); --dk-text-success-subtle-focus: var(--dk-text-primary-subtle-focus); --dk-text-success-on-color: var(--dk-text-primary-on-color); --dk-text-success-on-color-hover: var(--dk-text-primary-on-color-hover); --dk-text-success-on-color-focus: var(--dk-text-primary-on-color-focus); --dk-text-success-body: var(--dk-text-primary-default); --dk-icon-success-default: var(--dk-icon-primary-default); --dk-icon-success-hover: var(--dk-icon-primary-hover); --dk-icon-success-focus: var(--dk-icon-primary-focus); --dk-icon-success-subtle: var(--dk-icon-primary-subtle); --dk-icon-success-subtle-hover: var(--dk-icon-primary-subtle-hover); --dk-icon-success-subtle-focus: var(--dk-icon-primary-subtle-focus); --dk-icon-success-on-color: var(--dk-icon-primary-on-color); --dk-icon-success-on-color-hover: var(--dk-icon-primary-on-color-hover); --dk-icon-success-on-color-focus: var(--dk-icon-primary-on-color-focus); } /* ════════════════════════════════════════ drift-kit:layer tokens/mapped/shadow.css ════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/shadow ═══ */ :root, [data-theme="light"] { --dk-shadow-drop-2xl: color-mix(in srgb, var(--dk-color-base-black) 18%, transparent); /* Black with ~18% opacity */ --dk-shadow-drop-3xl: color-mix(in srgb, var(--dk-color-base-black) 14%, transparent); /* Black with ~14% opacity */ --dk-shadow-drop-lg-1: color-mix(in srgb, var(--dk-color-base-black) 8%, transparent); /* Black with ~8% opacity */ --dk-shadow-drop-lg-2: color-mix(in srgb, var(--dk-color-base-black) 3%, transparent); /* Black with ~3% opacity */ --dk-shadow-drop-md-1: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */ --dk-shadow-drop-md-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */ --dk-shadow-drop-sm-1: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */ --dk-shadow-drop-sm-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */ --dk-shadow-drop-xl-1: color-mix(in srgb, var(--dk-color-base-black) 8%, transparent); /* Black with ~8% opacity */ --dk-shadow-drop-xl-2: color-mix(in srgb, var(--dk-color-base-black) 3%, transparent); /* Black with ~3% opacity */ --dk-shadow-drop-xs: color-mix(in srgb, var(--dk-color-base-black) 5%, transparent); /* Black with ~5% opacity */ --dk-shadow-inner-lg: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */ --dk-shadow-inner-md: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */ --dk-shadow-inner-sm: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */ } [data-theme="dark"] { --dk-shadow-drop-2xl: color-mix(in srgb, var(--dk-color-base-black) 36%, transparent); /* Black with ~36% opacity */ --dk-shadow-drop-3xl: color-mix(in srgb, var(--dk-color-base-black) 28%, transparent); /* Black with ~28% opacity */ --dk-shadow-drop-lg-1: color-mix(in srgb, var(--dk-color-base-black) 16%, transparent); /* Black with ~16% opacity */ --dk-shadow-drop-lg-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */ --dk-shadow-drop-md-1: color-mix(in srgb, var(--dk-color-base-black) 20%, transparent); /* Black with ~20% opacity */ --dk-shadow-drop-md-2: color-mix(in srgb, var(--dk-color-base-black) 12%, transparent); /* Black with ~12% opacity */ --dk-shadow-drop-sm-1: color-mix(in srgb, var(--dk-color-base-black) 20%, transparent); /* Black with ~20% opacity */ --dk-shadow-drop-sm-2: color-mix(in srgb, var(--dk-color-base-black) 12%, transparent); /* Black with ~12% opacity */ --dk-shadow-drop-xl-1: color-mix(in srgb, var(--dk-color-base-black) 16%, transparent); /* Black with ~16% opacity */ --dk-shadow-drop-xl-2: color-mix(in srgb, var(--dk-color-base-black) 6%, transparent); /* Black with ~6% opacity */ --dk-shadow-drop-xs: color-mix(in srgb, var(--dk-color-base-black) 10%, transparent); /* Black with ~10% opacity */ --dk-shadow-inner-lg: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent); /* Black with 60% opacity */ --dk-shadow-inner-md: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent); /* Black with 60% opacity */ --dk-shadow-inner-sm: color-mix(in srgb, var(--dk-color-base-black) 60%, transparent); /* Black with 60% opacity */ } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Mapped GROUP: Shadow (rebuilt 7.0.0) ONE ramp, named for the JOB rather than the look, because a token called "card" was already doing the work for toasts, menus and a search field. Five rungs, and every one is in use across the kit and Forge: raised a thing resting on the page card, tab lifted the same thing picked up card hover, search field floating a layer above the page toast, menu, dropdown overlay a layer above everything modal, tooltip on-color any of the above on a coloured fill What this replaced: nineteen tokens of which thirteen had never been used anywhere. The upstream drop-* and inner-* families are COLOURS, not shadows (color-mix with no offset or blur), so they cannot be used without writing the geometry yourself, and only one thing in the kit ever did. They still exist above the fence because upstream owns that block and a refresh would put them back; they are simply no longer part of this system, and the Shadows page no longer presents them as if they were. DARK IS NOT LIGHT WITH MORE ALPHA. Black falling on a dark surface has almost no range, which is why the old dark values read as nothing at all. Two things fix it: roughly double the alpha again, and on the two rungs that are genuinely floating, a hairline of light along the top edge, which is how a raised surface catches light in a dark room. The lower rungs skip the hairline: a tab or a resting card is not floating, and a bright line across its top edge reads as a seam rather than elevation. All rungs share a 4px Y-offset for one consistent light direction; they differ in blur, spread and opacity. ─────────────────────────────────────────────────────────── */ /* --dk-shadow-raised A panel or card at rest on the page. The quietest rung: it should read as "sitting on" rather than "floating above". Light → 0 4px 8px 0 rgba(0, 0, 0, 0.04) Dark → same geometry at 0.36, where 0.16 was invisible */ [data-theme="light"] { --dk-shadow-raised: 0 4px 8px 0 rgba(0, 0, 0, 0.04); } [data-theme="dark"] { --dk-shadow-raised: 0 4px 8px 0 rgba(0, 0, 0, 0.36); } /* --dk-shadow-lifted The same element picked up: a card on hover, a search field at rest. One step of blur and opacity above raised, not a different kind of shadow. Light → 0 4px 10px 0 rgba(0, 0, 0, 0.08) Dark → 0 4px 12px 0 rgba(0, 0, 0, 0.44) */ [data-theme="light"] { --dk-shadow-lifted: 0 4px 10px 0 rgba(0, 0, 0, 0.08); } [data-theme="dark"] { --dk-shadow-lifted: 0 4px 12px 0 rgba(0, 0, 0, 0.44); } /* --dk-shadow-floating A layer that has left the page: a toast, a dropdown menu, a select's list. First rung with the dark hairline, because this one is genuinely above the surface rather than resting on it. Light → 0 4px 20px 0 rgba(0, 0, 0, 0.08) Dark → 0 6px 24px 0 rgba(0, 0, 0, 0.48) + a 6% top edge */ [data-theme="light"] { --dk-shadow-floating: 0 4px 20px 0 rgba(0, 0, 0, 0.08); } [data-theme="dark"] { --dk-shadow-floating: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 6px 24px 0 rgba(0, 0, 0, 0.48); } /* --dk-shadow-overlay The top of the stack: a modal, a tooltip. Two dark layers, a tight one for the contact edge and a wide one for the cast, so it separates from whatever it covers. The modal used to hardcode 0 4px 8px -2px rgba(0,0,0,.1) and did not theme at all, which left the most elevated thing in the system with a lighter shadow than a card on hover. Light → 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22) Dark → 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64) + an 8% top edge */ [data-theme="light"] { --dk-shadow-overlay: 0 2px 6px 0 rgba(0, 0, 0, 0.10), 0 12px 32px 0 rgba(0, 0, 0, 0.22); } [data-theme="dark"] { --dk-shadow-overlay: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px 0 rgba(0, 0, 0, 0.40), 0 16px 40px 0 rgba(0, 0, 0, 0.64); } /* --dk-shadow-on-color For an element sitting on a coloured fill (primary, success, information and the rest). IDENTICAL in both themes on purpose: those fills are mid-range and barely shift between themes, so the shadow that works on one works on the other. It is the one rung that does not get deeper in dark. Light → 0 4px 20px 0 rgba(0, 0, 0, 0.16) Dark → 0 4px 20px 0 rgba(0, 0, 0, 0.16) */ [data-theme="light"] { --dk-shadow-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16); } [data-theme="dark"] { --dk-shadow-on-color: 0 4px 20px 0 rgba(0, 0, 0, 0.16); } /* --dk-shadow-focus-ring Not elevation, but it is a box-shadow and it was written out raw in four components (card, checkbox, switch, select), so it is a token now. Button keeps its own, since its ring width and colour are already component tokens that vary by variant. Both themes → 0 0 0 4px var(--dk-color-primary-300) */ [data-theme="light"] { --dk-shadow-focus-ring: 0 0 0 4px var(--dk-color-primary-300); } [data-theme="dark"] { --dk-shadow-focus-ring: 0 0 0 4px var(--dk-color-primary-300); } /* --text-primary-* / --icon-primary-* (DARK ramp lift + ACTIVE tokens) Primary text AND icons on dark backgrounds. Core Drift's dark ramp (default 500 → hover 400 → focus 300) reads a touch dim on the deep dark canvas, so we lift the whole ramp one step lighter for legibility — keeping text and icons in lockstep (they share the same core ramp). We also add the missing --dk-text-primary-active / --dk-icon-primary-active tokens (core Drift has no 'active' primary state); each is pinned to that theme's focus value. Light mode keeps the core ramp and just gains the two active tokens. Light : default 500 → hover 600 → focus 700 ; active = 700 Dark : default 400 → hover 300 → focus 200 ; active = 200 (lifted) */ [data-theme="light"] { --dk-text-primary-active: var(--dk-color-primary-700); --dk-icon-primary-active: var(--dk-color-primary-700); } [data-theme="dark"] { --dk-text-primary-default: var(--dk-color-primary-400); --dk-text-primary-hover: var(--dk-color-primary-300); --dk-text-primary-focus: var(--dk-color-primary-200); --dk-text-primary-active: var(--dk-color-primary-200); --dk-icon-primary-default: var(--dk-color-primary-400); --dk-icon-primary-hover: var(--dk-color-primary-300); --dk-icon-primary-focus: var(--dk-color-primary-200); --dk-icon-primary-active: var(--dk-color-primary-200); } /* --dk-surface-primary-disabled-* / --dk-border-primary-disabled-* (NEW hover/active) Core Drift has primary-disabled REST values (surface L200/D800, border L300/D700) but no hover/active steps. The out-of-scope page eyebrow needs them (an OOS page is still interactive — you can drill it). We anchor on the disabled rest value and step in the same direction as the surface-primary ramp — darken in light, lighten in dark — one primitive step per state. surface Light: 200 → 300 → 400 ; Dark: 800 → 700 → 600 border Light: 300 → 400 → 500 ; Dark: 700 → 600 → 500 */ [data-theme="light"] { --dk-surface-primary-disabled-hover: var(--dk-color-primary-300); --dk-surface-primary-disabled-active: var(--dk-color-primary-400); --dk-border-primary-disabled-hover: var(--dk-color-primary-400); --dk-border-primary-disabled-active: var(--dk-color-primary-500); } [data-theme="dark"] { --dk-surface-primary-disabled-hover: var(--dk-color-primary-700); --dk-surface-primary-disabled-active: var(--dk-color-primary-600); --dk-border-primary-disabled-hover: var(--dk-color-primary-600); --dk-border-primary-disabled-active: var(--dk-color-primary-500); } /* --dk-text-primary-disabled-on-color / --dk-icon-primary-disabled-on-color (NEW) Foreground (text + icon) placed ON the --dk-surface-primary-disabled fill — i.e. the out-of-scope page eyebrow. The non-disabled on-color foreground is plain white (--dk-color-base-white); this muted variant keeps it legible on the pale (light) / deep (dark) disabled-teal surface. Named with the established -on-color suffix (cf. --dk-shadow-card-on-color). Light → color-primary-50 Dark → color-primary-600 */ [data-theme="light"] { --dk-text-primary-disabled-on-color: var(--dk-color-primary-50); --dk-icon-primary-disabled-on-color: var(--dk-color-primary-50); } [data-theme="dark"] { --dk-text-primary-disabled-on-color: var(--dk-color-primary-600); --dk-icon-primary-disabled-on-color: var(--dk-color-primary-600); } /* --text/icon-primary-disabled-on-color -hover / -active Interaction steps for the on-color disabled foreground (the OOS page eyebrow). Each step brightens the foreground by ONE tone of the primary ramp relative to its rest value, tracking the surface as it lightens on hover/press — never jumping straight to white. LIGHT rests at the pale end (50) and steps DOWN the ramp (50 → 100 → 200); DARK rests mid-ramp (600) and steps UP toward lighter tones (600 → 500 → 400). Light : rest 50 ; hover → primary-100 ; active → primary-200 Dark : rest 600 ; hover → primary-500 ; active → primary-400 */ [data-theme="light"] { --dk-text-primary-disabled-on-color-hover: var(--dk-color-primary-100); --dk-text-primary-disabled-on-color-active: var(--dk-color-primary-200); --dk-icon-primary-disabled-on-color-hover: var(--dk-color-primary-100); --dk-icon-primary-disabled-on-color-active: var(--dk-color-primary-200); } [data-theme="dark"] { --dk-text-primary-disabled-on-color-hover: var(--dk-color-primary-500); --dk-text-primary-disabled-on-color-active: var(--dk-color-primary-400); --dk-icon-primary-disabled-on-color-hover: var(--dk-color-primary-500); --dk-icon-primary-disabled-on-color-active: var(--dk-color-primary-400); } /* --dk-border-primary-subtle-active (NEW) Core Drift's subtle primary border family stops at -hover/-focus with no -active step (rest 100 → hover 200 → focus 300 in light; 800 → 700 → 600 in dark). Pressed states (e.g. the action node) need an active step; pinned to the focus value per theme, matching how our other -active tokens were added. */ [data-theme="light"] { --dk-border-primary-subtle-active: var(--dk-color-primary-300); } [data-theme="dark"] { --dk-border-primary-subtle-active: var(--dk-color-primary-600); } /* --text/icon-primary-disabled -hover / -active (NEW) Interaction steps for the disabled-primary foreground (OOS action label/icon, OOS section eyebrow icon). One primary tone per step from the rest value (light rest is our 200 override; dark rest is core 700), darkening in light / lightening in dark — same direction as the disabled surface ramp. Light: 200 → 300 → 400 Dark: 700 → 600 → 500 */ [data-theme="light"] { --dk-text-primary-disabled-hover: var(--dk-color-primary-300); --dk-text-primary-disabled-active: var(--dk-color-primary-400); --dk-icon-primary-disabled-hover: var(--dk-color-primary-300); --dk-icon-primary-disabled-active: var(--dk-color-primary-400); } [data-theme="dark"] { --dk-text-primary-disabled-hover: var(--dk-color-primary-600); --dk-text-primary-disabled-active: var(--dk-color-primary-500); --dk-icon-primary-disabled-hover: var(--dk-color-primary-600); --dk-icon-primary-disabled-active: var(--dk-color-primary-500); } /* --dk-text-neutral-active (NEW) Core Drift's neutral text family has -hover/-focus but no -active; pressed states (section nodes) need one. Pinned to the focus value per theme. */ [data-theme="light"] { --dk-text-neutral-active: var(--dk-color-neutral-800); } [data-theme="dark"] { --dk-text-neutral-active: var(--dk-color-neutral-100); } /* --dk-surface-nested-hover / -active (NEW) Interaction steps for the nested item-box surface, one neutral tone per step in each family's direction (darken in light, lighten in dark) — same stride as the raised surface ramp. Light: 25 → 50 → 100 Dark: 900 → 800 → 700 */ [data-theme="light"] { --dk-surface-nested-hover: var(--dk-color-neutral-50); --dk-surface-nested-active: var(--dk-color-neutral-100); } [data-theme="dark"] { --dk-surface-nested-hover: var(--dk-color-neutral-800); --dk-surface-nested-active: var(--dk-color-neutral-700); } /* --dk-surface-inset-default / -hover / -active (NEW) The RECESSED control fill — continues the elevation ladder downward (canvas → raised → nested → inset): toggle tracks, and later slider rails / progress troughs, that sit ON a raised or nested surface and must read as sunk into it. Strong enough to contrast the nested card it sits on; steps one neutral tone per state, darkening in light / lightening in dark. Light: neutral 100 → 200 → 300 Dark: neutral 700 → 600 → 500 */ [data-theme="light"] { --dk-surface-inset-default: var(--dk-color-neutral-100); --dk-surface-inset-hover: var(--dk-color-neutral-200); --dk-surface-inset-active: var(--dk-color-neutral-300); } [data-theme="dark"] { --dk-surface-inset-default: var(--dk-color-neutral-700); --dk-surface-inset-hover: var(--dk-color-neutral-600); --dk-surface-inset-active: var(--dk-color-neutral-500); } /* --dk-border-nested-hover / -active (NEW) Companion borders for the nested surface steps — hairline ramp positions 2 and 3, continuing from nested-default at pos 1 (see the ramp table on --dk-border-raised-default). */ [data-theme="light"] { --dk-border-nested-hover: var(--dk-color-neutral-200); --dk-border-nested-active: var(--dk-color-neutral-300); } [data-theme="dark"] { --dk-border-nested-hover: var(--dk-color-neutral-600); --dk-border-nested-active: var(--dk-color-neutral-500); } /* --dk-text-nested-hover / -active (NEW) Text steps inside nested item boxes — one neutral tone per step from the nested default (700 light / 200 dark), same stride as the neutral text ramp. Light: 700 → 800 → 900 Dark: 200 → 100 → 50 */ [data-theme="light"] { --dk-text-nested-hover: var(--dk-color-neutral-800); --dk-text-nested-active: var(--dk-color-neutral-900); } [data-theme="dark"] { --dk-text-nested-hover: var(--dk-color-neutral-100); --dk-text-nested-active: var(--dk-color-neutral-50); } /* --dk-surface-primary-oos / --dk-border-primary-oos / --dk-text-primary-oos / --dk-icon-primary-oos (NEW) The OUT-OF-SCOPE treatment of the focal "you-are-here" node — an active page that has been set out of scope. The in-scope focal is a solid primary-500 fill with white text; this variant keeps the primary identity but MUTES it, going in OPPOSITE directions per theme so it always reads as a dimmed teal against its canvas: Light: a LIGHTER fill (primary-400) with a light primary-200 text/icon AND border (incl. the eyebrow's bottom rule) — close enough to the fill that the label reads disabled. Dark: a DARKER fill (primary-700) with text/icon one step lighter (primary-600) — equally close to the fill, equally disabled-looking. The dashed border in dark steps one tone toward contrast from the fill so the rim stays visible (primary-600). */ [data-theme="light"] { --dk-surface-primary-oos: var(--dk-color-primary-400); --dk-border-primary-oos: var(--dk-color-primary-200); --dk-text-primary-oos: var(--dk-color-primary-200); --dk-icon-primary-oos: var(--dk-color-primary-200); } [data-theme="dark"] { --dk-surface-primary-oos: var(--dk-color-primary-700); --dk-border-primary-oos: var(--dk-color-primary-600); --dk-text-primary-oos: var(--dk-color-primary-600); --dk-icon-primary-oos: var(--dk-color-primary-600); } /* ══════════════════════════════════════ drift-kit:layer tokens/mapped/gradient.css ══════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/gradient ═══ */ :root, [data-theme="light"] { --dk-gradient-default-body-stop-1: var(--dk-primitive-color-foundation-white); --dk-gradient-default-body-stop-2: var(--dk-primitive-color-foundation-white-0); --dk-gradient-error-top-right-default-stop-1: var(--dk-color-error-100); --dk-gradient-error-top-right-default-stop-2: var(--dk-color-error-400); --dk-gradient-error-top-right-default-stop-3: var(--dk-color-error-600); --dk-gradient-error-top-right-focus-stop-1: var(--dk-color-error-50); --dk-gradient-error-top-right-focus-stop-2: var(--dk-color-error-300); --dk-gradient-error-top-right-focus-stop-3: var(--dk-color-error-500); --dk-gradient-error-top-right-hover-stop-1: var(--dk-color-error-50); --dk-gradient-error-top-right-hover-stop-2: var(--dk-color-error-300); --dk-gradient-error-top-right-hover-stop-3: var(--dk-color-error-500); --dk-gradient-information-top-right-default-stop-1: var(--dk-color-information-100); --dk-gradient-information-top-right-default-stop-2: var(--dk-color-information-500); --dk-gradient-information-top-right-default-stop-3: var(--dk-color-information-700); --dk-gradient-information-top-right-focus-stop-1: var(--dk-color-information-50); --dk-gradient-information-top-right-focus-stop-2: var(--dk-color-information-400); --dk-gradient-information-top-right-focus-stop-3: var(--dk-color-information-600); --dk-gradient-information-top-right-hover-stop-1: var(--dk-color-information-50); --dk-gradient-information-top-right-hover-stop-2: var(--dk-color-information-400); --dk-gradient-information-top-right-hover-stop-3: var(--dk-color-information-600); --dk-gradient-neutral-top-right-default-stop-1: var(--dk-color-neutral-25); --dk-gradient-neutral-top-right-default-stop-2: var(--dk-color-neutral-400); --dk-gradient-neutral-top-right-default-stop-3: var(--dk-color-neutral-600); --dk-gradient-neutral-top-right-focus-stop-1: var(--dk-color-neutral-25); --dk-gradient-neutral-top-right-focus-stop-2: var(--dk-color-neutral-300); --dk-gradient-neutral-top-right-focus-stop-3: var(--dk-color-neutral-400); --dk-gradient-neutral-top-right-hover-stop-1: var(--dk-color-neutral-25); --dk-gradient-neutral-top-right-hover-stop-2: var(--dk-color-neutral-300); --dk-gradient-neutral-top-right-hover-stop-3: var(--dk-color-neutral-400); --dk-gradient-primary-top-right-default-stop-1: var(--dk-color-secondary-300); --dk-gradient-primary-top-right-default-stop-2: var(--dk-color-primary-500); --dk-gradient-primary-top-right-default-stop-3: var(--dk-color-primary-600); --dk-gradient-primary-top-right-focus-stop-1: var(--dk-color-secondary-100); --dk-gradient-primary-top-right-focus-stop-2: var(--dk-color-primary-400); --dk-gradient-primary-top-right-focus-stop-3: var(--dk-color-primary-600); --dk-gradient-primary-top-right-hover-stop-1: var(--dk-color-secondary-100); --dk-gradient-primary-top-right-hover-stop-2: var(--dk-color-primary-400); --dk-gradient-primary-top-right-hover-stop-3: var(--dk-color-primary-600); --dk-gradient-primary-transparent-stop-1: var(--dk-color-primary-500); --dk-gradient-primary-transparent-stop-2: var(--dk-color-primary-200); --dk-gradient-primary-transparent-stop-3: var(--dk-color-base-white); --dk-gradient-success-top-right-default-stop-1: var(--dk-color-success-100); --dk-gradient-success-top-right-default-stop-2: var(--dk-color-success-400); --dk-gradient-success-top-right-default-stop-3: var(--dk-color-success-600); --dk-gradient-success-top-right-focus-stop-1: var(--dk-color-success-50); --dk-gradient-success-top-right-focus-stop-2: var(--dk-color-success-300); --dk-gradient-success-top-right-focus-stop-3: var(--dk-color-success-500); --dk-gradient-success-top-right-hover-stop-1: var(--dk-color-success-50); --dk-gradient-success-top-right-hover-stop-2: var(--dk-color-success-300); --dk-gradient-success-top-right-hover-stop-3: var(--dk-color-success-500); --dk-gradient-warning-top-right-default-stop-1: var(--dk-color-warning-100); --dk-gradient-warning-top-right-default-stop-2: var(--dk-color-warning-400); --dk-gradient-warning-top-right-default-stop-3: var(--dk-color-warning-500); --dk-gradient-warning-top-right-focus-stop-1: var(--dk-color-warning-50); --dk-gradient-warning-top-right-focus-stop-2: var(--dk-color-warning-300); --dk-gradient-warning-top-right-focus-stop-3: var(--dk-color-warning-400); --dk-gradient-warning-top-right-hover-stop-1: var(--dk-color-warning-50); --dk-gradient-warning-top-right-hover-stop-2: var(--dk-color-warning-300); --dk-gradient-warning-top-right-hover-stop-3: var(--dk-color-warning-400); } [data-theme="dark"] { --dk-gradient-default-body-stop-1: var(--dk-primitive-color-gray-1000); --dk-gradient-default-body-stop-2: var(--dk-primitive-color-gray-1000-0); --dk-gradient-error-top-right-default-stop-1: var(--dk-color-error-100); --dk-gradient-error-top-right-default-stop-2: var(--dk-color-error-400); --dk-gradient-error-top-right-default-stop-3: var(--dk-color-error-600); --dk-gradient-error-top-right-focus-stop-1: var(--dk-color-error-50); --dk-gradient-error-top-right-focus-stop-2: var(--dk-color-error-300); --dk-gradient-error-top-right-focus-stop-3: var(--dk-color-error-500); --dk-gradient-error-top-right-hover-stop-1: var(--dk-color-error-50); --dk-gradient-error-top-right-hover-stop-2: var(--dk-color-error-300); --dk-gradient-error-top-right-hover-stop-3: var(--dk-color-error-500); --dk-gradient-information-top-right-default-stop-1: var(--dk-color-information-100); --dk-gradient-information-top-right-default-stop-2: var(--dk-color-information-500); --dk-gradient-information-top-right-default-stop-3: var(--dk-color-information-700); --dk-gradient-information-top-right-focus-stop-1: var(--dk-color-information-50); --dk-gradient-information-top-right-focus-stop-2: var(--dk-color-information-400); --dk-gradient-information-top-right-focus-stop-3: var(--dk-color-information-600); --dk-gradient-information-top-right-hover-stop-1: var(--dk-color-information-50); --dk-gradient-information-top-right-hover-stop-2: var(--dk-color-information-400); --dk-gradient-information-top-right-hover-stop-3: var(--dk-color-information-600); --dk-gradient-neutral-top-right-default-stop-1: var(--dk-color-neutral-25); --dk-gradient-neutral-top-right-default-stop-2: var(--dk-color-neutral-400); --dk-gradient-neutral-top-right-default-stop-3: var(--dk-color-neutral-600); --dk-gradient-neutral-top-right-focus-stop-1: var(--dk-color-neutral-25); --dk-gradient-neutral-top-right-focus-stop-2: var(--dk-color-neutral-300); --dk-gradient-neutral-top-right-focus-stop-3: var(--dk-color-neutral-400); --dk-gradient-neutral-top-right-hover-stop-1: var(--dk-color-neutral-25); --dk-gradient-neutral-top-right-hover-stop-2: var(--dk-color-neutral-300); --dk-gradient-neutral-top-right-hover-stop-3: var(--dk-color-neutral-400); --dk-gradient-primary-top-right-default-stop-1: var(--dk-color-secondary-300); --dk-gradient-primary-top-right-default-stop-2: var(--dk-color-primary-500); --dk-gradient-primary-top-right-default-stop-3: var(--dk-color-primary-600); --dk-gradient-primary-top-right-focus-stop-1: var(--dk-color-secondary-100); --dk-gradient-primary-top-right-focus-stop-2: var(--dk-color-primary-400); --dk-gradient-primary-top-right-focus-stop-3: var(--dk-color-primary-600); --dk-gradient-primary-top-right-hover-stop-1: var(--dk-color-secondary-100); --dk-gradient-primary-top-right-hover-stop-2: var(--dk-color-primary-400); --dk-gradient-primary-top-right-hover-stop-3: var(--dk-color-primary-600); --dk-gradient-primary-transparent-stop-1: var(--dk-color-primary-500); --dk-gradient-primary-transparent-stop-2: var(--dk-color-primary-800); --dk-gradient-primary-transparent-stop-3: var(--dk-primitive-color-gray-1000-0); --dk-gradient-success-top-right-default-stop-1: var(--dk-color-success-100); --dk-gradient-success-top-right-default-stop-2: var(--dk-color-success-400); --dk-gradient-success-top-right-default-stop-3: var(--dk-color-success-600); --dk-gradient-success-top-right-focus-stop-1: var(--dk-color-success-50); --dk-gradient-success-top-right-focus-stop-2: var(--dk-color-success-300); --dk-gradient-success-top-right-focus-stop-3: var(--dk-color-success-500); --dk-gradient-success-top-right-hover-stop-1: var(--dk-color-success-50); --dk-gradient-success-top-right-hover-stop-2: var(--dk-color-success-300); --dk-gradient-success-top-right-hover-stop-3: var(--dk-color-success-500); --dk-gradient-warning-top-right-default-stop-1: var(--dk-color-warning-100); --dk-gradient-warning-top-right-default-stop-2: var(--dk-color-warning-400); --dk-gradient-warning-top-right-default-stop-3: var(--dk-color-warning-500); --dk-gradient-warning-top-right-focus-stop-1: var(--dk-color-warning-50); --dk-gradient-warning-top-right-focus-stop-2: var(--dk-color-warning-300); --dk-gradient-warning-top-right-focus-stop-3: var(--dk-color-warning-400); --dk-gradient-warning-top-right-hover-stop-1: var(--dk-color-warning-50); --dk-gradient-warning-top-right-hover-stop-2: var(--dk-color-warning-300); --dk-gradient-warning-top-right-hover-stop-3: var(--dk-color-warning-400); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ══════════════════════════════════════════ drift-kit:layer tokens/mapped/logo.css ══════════════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/logo ═══ */ :root, [data-theme="light"] { --dk-logo-neutral-default: var(--dk-color-neutral-100); --dk-logo-neutral-subtle: var(--dk-color-neutral-300); --dk-logo-primary-default: var(--dk-color-primary-500); --dk-logo-secondary-default: var(--dk-color-neutral-900); --dk-logo-tertiary-default: var(--dk-color-base-white); } [data-theme="dark"] { --dk-logo-neutral-default: var(--dk-color-neutral-500); --dk-logo-neutral-subtle: var(--dk-color-neutral-700); --dk-logo-primary-default: var(--dk-color-primary-500); --dk-logo-secondary-default: var(--dk-color-base-white); --dk-logo-tertiary-default: var(--dk-color-neutral-900); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════════ drift-kit:layer tokens/mapped/placeholder.css ═══════════════════════════════════ */ /* ═══ UPSTREAM · component-library@1a8ad6af · mapped/placeholder ═══ */ :root, [data-theme="light"] { --dk-placeholder-border-default: var(--dk-primitive-color-purple-500); --dk-placeholder-border-shadow: var(--dk-primitive-color-purple-500); --dk-placeholder-border-subtle: var(--dk-primitive-color-purple-500); --dk-placeholder-icon-default: var(--dk-primitive-color-purple-500); --dk-placeholder-text-default: var(--dk-primitive-color-purple-500); } [data-theme="dark"] { --dk-placeholder-border-default: var(--dk-primitive-color-purple-300); --dk-placeholder-border-shadow: var(--dk-primitive-color-purple-300); --dk-placeholder-border-subtle: var(--dk-primitive-color-purple-300); --dk-placeholder-icon-default: var(--dk-primitive-color-purple-300); --dk-placeholder-text-default: var(--dk-primitive-color-purple-300); } /* ═══ END UPSTREAM — everything below is Karmo's, refresh never touches it ═══ */ /* ═══════════════════════════════════ drift-kit:layer tokens/primitives/opacity.css ═══════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Primitive GROUP: Opacity ─────────────────────────────────────────────────────────── */ /* --dk-primitive-opacity-glass / --dk-primitive-opacity-hairline-subtle Named alpha steps, so a translucent Mapped token can be expressed as "some other token, at this opacity" instead of a flattened rgba() literal (2026-08-18). Every glass token used to hard-code the ALREADY-KNOWN rgb of its opaque counterpart — six of the eight matched it exactly — which meant they silently stopped tracking their base: a glass panel inside data-surface="2" kept the level-0 tint, and a brand switch left them on karmo's greys. Expressed as relative colours they follow theme, brand and surface level for free. Unitless numbers, usable in any colour function. Retune the frostiness of every glass surface from ONE place here. */ :root { --dk-primitive-opacity-glass: 0.72; --dk-primitive-opacity-hairline-subtle: 0.025; /* light: a whisper of black */ --dk-primitive-opacity-hairline-subtle-inverse: 0.05; /* dark: a whisper of white, needs more */ /* Press feedback laid OVER a fill that already has a colour, for the case where no token ladder can express it. Alert's solid dismiss button is the first: --dk-surface--focus is byte-identical to --dk-surface--solid in light for all five statuses, and in dark --dk-surface-error-default collides with it the same way, so neither the -focus nor the -default rung gives two distinct steps above a solid fill in both themes. Measured, 14 Sep, before minting these. The colour comes from the caller (the on-solid text colour, so it is white over a status fill and black over the neutral one); only the strength lives here. */ --dk-primitive-opacity-scrim-hover: 0.14; --dk-primitive-opacity-scrim-active: 0.24; } /* ══════════════════════════════════════ drift-kit:layer tokens/primitives/blur.css ══════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Primitive GROUP: Blur ─────────────────────────────────────────────────────────── */ /* --dk-primitive-blur-glass The other half of the glass recipe. The kit already shipped the translucent FILL (--dk-surface-*-glass, at --dk-primitive-opacity-glass) but never the blur behind it, so every consumer picked its own and glass came to mean something different on almost every surface that used it. Counted across Forge on 2026-09-12: nine distinct blur values in use, 12px on the top nav and toolbars, 20px on the sidebars and panels, and 2 to 10px on things that are not glass at all. 20px because that is what the two places already using a NAMED variable had settled on (--forge-glass-blur in the Forge sidebar, --glass-blur in Disko), so pointing them here repaints nothing. Blur is a length, not a colour, so it is theme-independent and lives at :root like the opacity it pairs with. Retune the frostiness of every glass surface from these two tokens. NOT for two neighbouring jobs that also use backdrop-filter, because they are different things and want different values: - a SCRIM behind a modal or lightbox, blurring the page underneath - a decorative GLOW, a blurred shape used as artwork (60px and up) Neither is a surface treatment; give them their own token when one is wanted. */ :root { --dk-primitive-blur-glass: 20px; } /* ════════════════════════ drift-kit:layer tokens/primitives/primary-neighbours.css ════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Primitive GROUP: Primary neighbours ─────────────────────────────────────────────────────────── */ /* --color-primary-{prev2,prev1,next1,next2}-{50…900} Eight analogous-hue sibling palettes derived from the primary scale, four to each side on the colour wheel (prev3/prev4/next3/next4 added 29 Sep 2026 for DriveIQ categories and charts) — for accents, categorical encodings, and multi-series charts that need to stay on-brand. HOW THEY'RE BUILT (the whole point): Each step is the matching --color-primary-{step} with its LIGHTNESS and CHROMA held constant and only its HUE rotated, via OKLCH relative colour. Locking l + c means every family carries the same tone/weight at a given step and differs ONLY in hue — close enough to read as one harmonious family, far enough apart to be recognisably distinct colours. DYNAMIC: because the values reference var(--color-primary-{step}), changing the primary scale flows through to all 88 tokens automatically. SCOPING (fixed 2026-08-17): the family MUST live on `:root [data-brand]`, not bare `:root` — var() substitutes at the DECLARING element, and the primary scale is declared on `:root [data-brand=…]` (the body), so at the html element var(--color-primary-*) is undefined and every token computed to guaranteed-invalid/unset. Only the two tuning controls (plain numbers, no var refs) stay at :root and inherit down. RETUNING: edit the two controls below — nothing else. --dk-primitive-color-primary-neighbour-step hue rotation per step, in degrees. prev/next-N = ±N×step, N = 1 to 4. --dk-primitive-color-primary-neighbour-chroma chroma multiplier (1 = identical to primary). prev = anticlockwise (greener); next = clockwise (bluer). Default 18° gives ±18°/±36° — harmonious but distinct (tuned in the neighbour-tuner prototype). */ :root { --dk-primitive-color-primary-neighbour-step: 18; --dk-primitive-color-primary-neighbour-chroma: 1; } :root [data-brand] { /* prev-2 — hue −2×step (greener) */ --dk-primitive-color-primary-prev2-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev2-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 2 * var(--dk-primitive-color-primary-neighbour-step))); /* prev-1 — hue −1×step (greener) */ --dk-primitive-color-primary-prev1-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev1-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - var(--dk-primitive-color-primary-neighbour-step))); /* next-1 — hue +1×step (bluer) */ --dk-primitive-color-primary-next1-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next1-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + var(--dk-primitive-color-primary-neighbour-step))); /* next-2 — hue +2×step (bluer) */ --dk-primitive-color-primary-next2-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next2-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 2 * var(--dk-primitive-color-primary-neighbour-step))); /* prev-3 — hue −3×step (greener) */ --dk-primitive-color-primary-prev3-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev3-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 3 * var(--dk-primitive-color-primary-neighbour-step))); /* prev-4 — hue −4×step (greener) */ --dk-primitive-color-primary-prev4-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-prev4-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h - 4 * var(--dk-primitive-color-primary-neighbour-step))); /* next-3 — hue +3×step (bluer) */ --dk-primitive-color-primary-next3-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next3-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 3 * var(--dk-primitive-color-primary-neighbour-step))); /* next-4 — hue +4×step (bluer) */ --dk-primitive-color-primary-next4-50: oklch(from var(--dk-color-primary-50) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-100: oklch(from var(--dk-color-primary-100) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-200: oklch(from var(--dk-color-primary-200) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-300: oklch(from var(--dk-color-primary-300) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-400: oklch(from var(--dk-color-primary-400) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-500: oklch(from var(--dk-color-primary-500) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-600: oklch(from var(--dk-color-primary-600) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-700: oklch(from var(--dk-color-primary-700) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-800: oklch(from var(--dk-color-primary-800) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-850: oklch(from var(--dk-color-primary-850) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); --dk-primitive-color-primary-next4-900: oklch(from var(--dk-color-primary-900) l calc(c * var(--dk-primitive-color-primary-neighbour-chroma)) calc(h + 4 * var(--dk-primitive-color-primary-neighbour-step))); } /* ════════════════════════════════════ drift-kit:layer tokens/primitives/motion.css ════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Primitive GROUP: Motion Numeric duration steps in Drift primitive style — the step name IS the ms value (matching how --scale-* primitives are named after their px value, not their semantic use). Semantics live in the component tokens that consume them (e.g. --dk-component-button-transition-duration references --dk-primitive-motion-duration-125). Theme-independent, hence :root rather than [data-theme=...]. Upstream-promotion candidate, same as the --surface- raised-* family: validate here, promote into core Drift once proven. ─────────────────────────────────────────────────────────── */ /* --dk-primitive-motion-duration-125 The standard control-transition duration — hover/surface/border morphs (buttons, cards, nav items, and every raised-chrome hover step in this file). Gives the value that's already used ad hoc across component transitions a primitive home, so every consumer references the same token instead of repeating the raw number. Value → 0.125s */ /* --dk-primitive-motion-duration-250 Transform + shadow morphs, which need longer than a colour swap to read as movement rather than a jump (the accent button's press lift and every scale-down press). Added 2026-08-18 to give the 0.25s that was hard-coded in the button's transition list a primitive home. Value → 0.25s */ :root { --dk-primitive-motion-duration-250: 0.25s; } :root { --dk-primitive-motion-duration-125: 0.125s; } /* --dk-primitive-motion-duration-500 A long-morph duration for slow, deliberate transitions — e.g. the accent button's gradient cross-fade on hover, which needs more time to read as a smooth colour shift rather than a snap. Value → 0.5s */ :root { --dk-primitive-motion-duration-500: 0.5s; } /* --dk-primitive-motion-easing-standard The kit's one easing curve (the Forge chrome's --forge-motion-easing, adopted 2026-09-09 when tabs and search-input stopped reaching for Forge's app-level variable). Ease-out with a soft landing; pairs with the -duration-* steps. */ :root { --dk-primitive-motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1); } /* --dk-primitive-motion-duration-150 / -200 / -300 / -400 Added 2026-09-18 with the alias tier below. These four were the durations components had been writing as bare literals, .15s sixteen times and .2s seventeen, with .3s on the tabs indicator and .4s on a toast. They get primitive homes at their EXISTING values rather than being rounded onto the 125/250/500 steps already here, so the motion tier is a pure refactor: no timing moves, and what was inconsistent becomes visible in the token browser instead of scattered through thirty-three transition declarations. Values → 0.15s / 0.2s / 0.3s / 0.4s */ :root { --dk-primitive-motion-duration-150: 0.15s; --dk-primitive-motion-duration-200: 0.2s; --dk-primitive-motion-duration-300: 0.3s; --dk-primitive-motion-duration-400: 0.4s; } /* --dk-primitive-motion-easing-in-out / -out / -linear The CSS keywords components were writing inline: ease-in-out twenty-two times, ease ten, ease-out seven. Named here so the alias tier can point at them and so the kit's own claim to have "one easing curve" can be measured against what it actually ships. Consolidating the four onto one is a design decision, not a refactor, so it is deliberately not made here. */ :root { --dk-primitive-motion-easing-in-out: ease-in-out; --dk-primitive-motion-easing-out: ease-out; --dk-primitive-motion-easing-ease: ease; } /* ═════════════════════════════════════════ drift-kit:layer tokens/alias/motion.css ═════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Alias GROUP: Motion THE TIER THAT MAKES prefers-reduced-motion WORK. Before this, every transition wrote its own duration and kit/reduced-motion.css switched motion off by NAMING COMPONENT CLASSES, eighteen of them, with !important. A list like that cannot be kept correct by discipline: it has to be remembered on every new component and every new part, and audited 2026-09-18 it had already missed Search bar entirely, both Tabs classes, Tooltip, Toast, and at least one part each of Button, Card, Dropzone, Select, Icon button and Input, including the field's own action buttons. With motion resolved through tokens, the preference is ONE override at the bottom of this file and nothing can fall off a list, because nothing is listed. BRAND-INVARIANT, hence this file sits beside the brand folders rather than inside them: motion does not change between Karmo and Volvo. It is alias tier all the same, being the semantic, suffix-free layer components consume; per-brand is what alias mostly HOLDS, not what defines it. Durations are named for their job rather than their milliseconds, which is what separates this from the primitives it points at. ─────────────────────────────────────────────────────────── */ :root { /* SEVEN DURATIONS, because seven is what the kit ships. They are named for their job here, but the values are exactly what components were already using, so adding this tier retimes nothing. THE REDUNDANCY IS THE POINT OF LISTING THEM. snap against fast is 25ms and default against moderate is 50ms, differences at or under what anyone can see in a UI transition, and a design system with seven transition speeds has not decided how fast it moves. Consolidating is a DESIGN decision about how the product feels, not a refactor, so it is not taken here; this tier makes the choice visible and cheap to act on, since it is now one file rather than thirty-four call sites. */ --dk-motion-duration-snap: var(--dk-primitive-motion-duration-125); --dk-motion-duration-fast: var(--dk-primitive-motion-duration-150); --dk-motion-duration-default: var(--dk-primitive-motion-duration-200); --dk-motion-duration-moderate: var(--dk-primitive-motion-duration-250); --dk-motion-duration-slow: var(--dk-primitive-motion-duration-300); --dk-motion-duration-slower: var(--dk-primitive-motion-duration-400); --dk-motion-duration-slowest: var(--dk-primitive-motion-duration-500); /* Four easings, preserved exactly as components were writing them. The motion primitives claim the kit has "one easing curve" and it ships four; naming them is what makes that visible. Same reasoning as the durations: the consolidation is a design call, not this change. */ --dk-motion-easing-standard: var(--dk-primitive-motion-easing-standard); --dk-motion-easing-in-out: var(--dk-primitive-motion-easing-in-out); --dk-motion-easing-out: var(--dk-primitive-motion-easing-out); --dk-motion-easing-ease: var(--dk-primitive-motion-easing-ease); } /* ONE OVERRIDE, REPLACING A LIST OF EIGHTEEN SELECTORS. Every transition that resolves its duration through these tokens becomes effectively instant, with no component needing to know it exists and none able to be forgotten. 0.01ms rather than 0: a zero-duration transition does not fire transitionend, and code that waits for it would hang. This is the same value the selector list used, for the same reason. NOT EVERYTHING lives here. Press feedback (a transform) and the keyframe animations on modal and toast are not durations on a transition, so kit/reduced-motion.css keeps those rules; what it no longer carries is the per-component transition list. */ @media (prefers-reduced-motion: reduce) { :root { --dk-motion-duration-snap: 0.01ms; --dk-motion-duration-fast: 0.01ms; --dk-motion-duration-default: 0.01ms; --dk-motion-duration-moderate: 0.01ms; --dk-motion-duration-slow: 0.01ms; --dk-motion-duration-slower: 0.01ms; --dk-motion-duration-slowest: 0.01ms; } } /* ═════════════════════════════════ drift-kit:layer tokens/primitives/transform.css ═════════════════════════════════ */ /* ─────────────────────────────────────────────────────────── COLLECTION: Primitive GROUP: Transform Theme-independent, unitless geometry ratios consumed by component tokens further down the chain (e.g. --dk-component-button-transform-scale-active). Another upstream-promotion candidate, same as the raised family above. NOTE: these are consumed by component tokens, not by component rules — with one temporary exception (.dk-component-tab, flagged in components.css) that resolves when tabs get their own Components-collection pass. ─────────────────────────────────────────────────────────── */ /* --transform-scale-{hover,active}-{control,surface} The press/lift ramp, in two rungs because the SAME ratio does not read the same on a 32px icon button and on a 320px card: scale() is proportional, so a card at 1.075 travels ~24px at its corner and lurches, while a small button at 1.02 moves under a pixel and reads as nothing happening. Step by perception, not by index — small controls take the wide ratios, large surfaces take the narrow ones. control — pressables up to ~48px: buttons, tabs, kebabs, icon buttons surface — cards, panels, tiles; anything whose corner is far from centre Unitless ratios; no matching Drift primitive exists for any of them. hover-control → 1.075 (clear grow on a small target) active-control → 0.95 (definite press) hover-surface → 1.02 (subtle lift; ~3px on a 320px card) active-surface → 0.99 (subtle settle) */ :root { --dk-primitive-transform-scale-hover-control: 1.075; --dk-primitive-transform-scale-active-control: 0.95; --dk-primitive-transform-scale-hover-surface: 1.02; --dk-primitive-transform-scale-active-surface: 0.99; } /* ════════════════════════════════════ drift-kit:layer components/button/tokens.css ════════════════════════════════════ */ /* ============================================================================ Drift Components — component token collection for the forge repo ---------------------------------------------------------------------------- The Components collection: a new token tier that sits above the Mapped collection and fully describes each component's visual spec (colour, spacing, sizing, radius, typography, shadows, gaps — everything the component sets, down to single-consumer values). This file holds the collection for every component, sectioned per component with the same boxed-header + per-token comment conventions as drift-extensions.css. Button is the pilot — currently the only component in this file. STATUSES — default / subtle support primary / error ONLY. ACCENT is single-status (the primary CTA; error removed 2026-08-18 — a glossy gradient must never be the destructive action) so its status axis is OMITTED from names and markup entirely, like plain/raised. OUTLINE is the full-spectrum status variant: primary / error / success / warning / information — s/w/i re-added 2026-08-18 for exactly one documented reason (action buttons inside status alerts; outline's transparent fill composes with tinted containers by construction). `neutral` exists on NO variant (2026-08-18: neutral is the absence of semantic colour, not a status — grey actions are `plain` (flat, in-flow) or `raised` (floating) instead). Solid/tinted s/w/i remain non-things. Unsupported combos FAIL LOUD (no tokens → no fill), never silently fall back. (Spec decision #7, twice amended.) NAMING GRAMMAR (selector-mirror): --{component}-{variant}-{status}-{size}-{property}-{state} Axes appear in HTML-attribute order (data-variant, data-status, data-size), then the property, then the interaction state. A generator reads the data-* attributes off the element, appends property and state — that string is the token name. Axes a token does not vary on are omitted entirely: radius is global → --dk-component-button-border-radius; gap varies only by size → --dk-component-button-extra-large-gap; `raised` is status-agnostic → --dk-component-button-raised-surface-hover. LOAD ORDER — this file loads THIRD: after drift-ui.css and drift-extensions.css, before drift-components.css. (drift-kit core.css) (drift-kit tokens.css) SCOPING — tokens are declared on .dk-component-button, one shared block, NOT :root and no longer the four legs. Custom-property var() references substitute at the element where the custom property is DECLARED, not where it is consumed, and Drift's mapped layer is scoped only under [data-theme], never on :root or html. Declaring these at :root would therefore resolve most of their references against a scope where those aliases do not exist, computing to empty and inheriting everywhere, ignoring the theme. The four legs, [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone], solved that by re-declaring the whole collection at every theme, level and tone boundary, so substitution happened again at each one. It worked, and it put all 322 of these on and on every panel, where custom properties inherit them to every element in the document. Declaring on .dk-component-button puts substitution where the button is, which has the same theme, level and tone above it by definition. Same values, one element instead of the whole tree. REFERENCE RULES (spec § 3.2): - surface / text / icon / border colours → Mapped tokens. - gradient stops (accent) → Mapped gradient tokens. - focus ring colours → Primitive colour steps, matching v2 (--color-{status}-300). - spacing / sizing / gaps → FIXED --scale-* primitives (see Responsiveness below), never the responsive --spacing-* aliases. - radius → --border-radius-* aliases (keeps the dynamic layer's sharp/normal/bubbly personality working). - font size / weight / line-height → alias font tokens where a match exists, --scale-* or --font-weight-* otherwise. Raw values are used only where no primitive exists, each with a justification comment (same rule as drift-extensions.css). RESPONSIVENESS — component-owned (spec § 5): component spacing/sizing tokens reference fixed --scale-* primitives and are constant across breakpoints by default (controls hold their desktop size on every breakpoint — deliberate; Drift's global responsive chain shrinking controls on mobile is backwards for touch targets). When a token genuinely should adapt, it is redefined per breakpoint inside this file, inside the component's own section, via @media — the mode lives in @media scoping, never in the token name. Drift's global responsive --spacing-* aliases are unchanged and remain the right tool for layout. Specs (in this repo): docs/superpowers/specs/ 2026-08-14-drift-components-collection-design.md 2026-08-18-drift-surface-levels-design.md ========================================================================== */ /* ══ COLLECTION: Components · GROUP: button — global (no axes) ══ */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 322 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-button { --dk-component-button-font-family: var(--dk-font-family-primary); --dk-component-button-font-weight: var(--dk-primitive-font-weight-semi-bold); /* 600 — bold read heavy at label sizes; ALL variants share it (2026-08-18) */ /* Motion resolves through the ALIAS tier, not the primitive. That is what puts these under the prefers-reduced-motion override in tokens/alias/motion.css: a component token pointing straight at a primitive would keep its full duration with the preference set, which is the failure mode the old hand-kept selector list existed to patch. */ --dk-component-button-transition-duration: var(--dk-motion-duration-snap); /* extension primitive: standard control-transition duration */ --dk-component-button-transform-scale-active: var(--dk-primitive-transform-scale-active-control); /* extension primitive: pressed-control shrink ratio */ /* GEOMETRY, tokenised 2026-08-18 — these were the last raw values in the button spec, which meant the component was not fully machine-readable (full-coverage doctrine, spec decision #2). */ --dk-component-button-focus-ring-width: var(--dk-primitive-scale-1); /* 4px halo, all variants */ --dk-component-button-content-alignment: center; /* data-alignment overrides per instance */ --dk-component-button-state-transition-duration: var(--dk-motion-duration-moderate); /* transform + shadow */ --dk-component-button-spinner-size: var(--dk-primitive-scale-4-5); /* 18px — bumped twice from scale-3-5 (14px), design call 2026-08-14 */ --dk-component-button-spinner-border-width: var(--dk-primitive-scale-0-5); --dk-component-button-spinner-track: var(--dk-border-raised-default); --dk-component-button-spinner-head: var(--dk-surface-primary-default); } /* ── size axis — FIXED scale primitives (component-owned responsiveness: controls hold their desktop size on every breakpoint; deliberate). Values = v2 Button.module.scss size blocks resolved at desktop. Gap is uniform across sizes — this IS the former Forge gap override, now canonical. ── */ .dk-component-button { /* small was retuned on 15 Sep (Julio: the icons read too big and the box too rectangular). Both were measurable, and they compounded at this size only. ICON 18px → 16px. The icon-to-font ratio ran 1.50 / 1.43 / 1.38 / 1.20 from small to extra-large, so the SMALLEST button carried the largest glyph relative to its words. Measured against the line box it is starker: small and medium set icon EXACTLY equal to line-height (18/18, 20/20) while large and extra-large sit below it (22/24, 24/28). 16px puts small at 0.89 of its line box, in the band large and extra-large already use. Medium is deliberately left alone: it is the default size, its ratio is not the outlier, and this was a small-button complaint. PADDING-Y 8px → 10px. Vertical padding as a share of height ran 24% / 27% / 29% / 28%, so small was also the tightest. 10px brings it to 26% and the height from 34px to 38px, which is still under the 44px touch guidance the README records as a known limit, but closer to it. */ --dk-component-button-small-padding-y: var(--dk-primitive-scale-2-5); --dk-component-button-small-padding-x: var(--dk-primitive-scale-4); --dk-component-button-small-gap: var(--dk-primitive-scale-1-5); --dk-component-button-small-border-radius: var(--dk-border-radius-100); --dk-component-button-small-font-size: var(--dk-font-body-xsm-text-size); --dk-component-button-small-line-height: var(--dk-font-body-xsm-line-height); --dk-component-button-small-icon-size: var(--dk-primitive-scale-4); --dk-component-button-medium-padding-y: var(--dk-primitive-scale-3); --dk-component-button-medium-padding-x: var(--dk-primitive-scale-5); --dk-component-button-medium-gap: var(--dk-primitive-scale-1-5); --dk-component-button-medium-border-radius: var(--dk-border-radius-150); --dk-component-button-medium-font-size: var(--dk-font-body-sm-text-size); --dk-component-button-medium-line-height: var(--dk-font-body-sm-line-height); --dk-component-button-medium-icon-size: var(--dk-primitive-scale-5); --dk-component-button-large-padding-y: var(--dk-primitive-scale-4); --dk-component-button-large-padding-x: var(--dk-primitive-scale-6); --dk-component-button-large-gap: var(--dk-primitive-scale-1-5); --dk-component-button-large-border-radius: var(--dk-border-radius-200); --dk-component-button-large-font-size: var(--dk-font-body-md-text-size); --dk-component-button-large-line-height: var(--dk-font-body-md-line-height); --dk-component-button-large-icon-size: var(--dk-primitive-scale-5-5); --dk-component-button-extra-large-padding-y: var(--dk-primitive-scale-4-5); --dk-component-button-extra-large-padding-x: var(--dk-primitive-scale-7); --dk-component-button-extra-large-gap: var(--dk-primitive-scale-1-5); --dk-component-button-extra-large-border-radius: var(--dk-border-radius-200); --dk-component-button-extra-large-font-size: var(--dk-font-body-lg-text-size); --dk-component-button-extra-large-line-height: var(--dk-font-body-lg-line-height); --dk-component-button-extra-large-icon-size: var(--dk-primitive-scale-6); } /* ── default (filled): white-fixed content, coloured surface per status ── */ .dk-component-button { --dk-component-button-default-text-default: var(--dk-text-base-white); --dk-component-button-default-icon-default: var(--dk-text-base-white); --dk-component-button-default-surface-disabled: var(--dk-surface-disabled-subtle); --dk-component-button-default-text-disabled: var(--dk-text-disabled-subtle); --dk-component-button-default-icon-disabled: var(--dk-icon-disabled-subtle); } /* default · primary */ .dk-component-button { --dk-component-button-default-primary-surface-default: var(--dk-surface-primary-default); --dk-component-button-default-primary-surface-hover: var(--dk-surface-primary-hover); --dk-component-button-default-primary-surface-focus: var(--dk-surface-primary-focus); --dk-component-button-default-primary-surface-active: var(--dk-surface-primary-focus); /* v2: active shares focus */ --dk-component-button-default-primary-ring: var(--dk-color-primary-300); } /* default · error */ .dk-component-button { --dk-component-button-default-error-surface-default: var(--dk-surface-error-default); --dk-component-button-default-error-surface-hover: var(--dk-surface-error-hover); --dk-component-button-default-error-surface-focus: var(--dk-surface-error-focus); --dk-component-button-default-error-surface-active: var(--dk-surface-error-focus); /* v2: active shares focus */ --dk-component-button-default-error-ring: var(--dk-color-error-300); } /* default · success / warning / information (2026-09-13) — added so an Alert's primary action can be a `default` Button carrying the alert's own status, matching how outline already covers all five. Same shape as default-primary / default-error above: solid surface default/hover/focus (active shares focus, v2) plus a focus ring, sourced from the same Mapped surface/color tokens the other default-status families use. */ /* default · success */ .dk-component-button { --dk-component-button-default-success-surface-default: var(--dk-surface-success-default); --dk-component-button-default-success-surface-hover: var(--dk-surface-success-hover); --dk-component-button-default-success-surface-focus: var(--dk-surface-success-focus); --dk-component-button-default-success-surface-active: var(--dk-surface-success-focus); /* v2: active shares focus */ --dk-component-button-default-success-ring: var(--dk-color-success-300); } /* default · warning */ .dk-component-button { --dk-component-button-default-warning-surface-default: var(--dk-surface-warning-default); --dk-component-button-default-warning-surface-hover: var(--dk-surface-warning-hover); --dk-component-button-default-warning-surface-focus: var(--dk-surface-warning-focus); --dk-component-button-default-warning-surface-active: var(--dk-surface-warning-focus); /* v2: active shares focus */ --dk-component-button-default-warning-ring: var(--dk-color-warning-300); } /* default · information */ .dk-component-button { --dk-component-button-default-information-surface-default: var(--dk-surface-information-default); --dk-component-button-default-information-surface-hover: var(--dk-surface-information-hover); --dk-component-button-default-information-surface-focus: var(--dk-surface-information-focus); --dk-component-button-default-information-surface-active: var(--dk-surface-information-focus); /* v2: active shares focus */ --dk-component-button-default-information-ring: var(--dk-color-information-300); } /* ── accent: 3-stop 257° gradient + physical elevation + engraved text shadow ── */ .dk-component-button { --dk-component-button-accent-text-default: var(--dk-text-base-white); --dk-component-button-accent-icon-default: var(--dk-text-base-white); --dk-component-button-accent-transition-duration: var(--dk-motion-duration-slowest); /* Gradient + elevation geometry (was hard-coded in the CSS rule). */ --dk-component-button-accent-gradient-angle: 257deg; --dk-component-button-accent-gradient-stop-1-position: -27.22%; --dk-component-button-accent-gradient-stop-2-position: 25.42%; --dk-component-button-accent-gradient-stop-3-position: 104.56%; --dk-component-button-accent-elevation-height: var(--dk-primitive-scale-0-5); /* 2px lift, most sizes */ --dk-component-button-accent-elevation-height-small: var(--dk-primitive-scale-0-25); /* 1px at the small size */ /* extension primitive: long-morph duration for the gradient cross-fade */ --dk-component-button-accent-gradient-stop-1-disabled: var(--dk-color-neutral-50); --dk-component-button-accent-gradient-stop-2-disabled: var(--dk-color-neutral-100); --dk-component-button-accent-gradient-stop-3-disabled: var(--dk-color-neutral-200); --dk-component-button-accent-elevation-disabled: var(--dk-border-disabled-elevation); --dk-component-button-accent-text-shadow-disabled: var(--dk-text-disabled-default); } /* accent — single-status (the primary CTA; status axis OMITTED per the grammar, 2026-08-18: error was removed — a glossy gradient must never be the destructive action — leaving one status, and axes a variant does not vary on drop out of names and markup entirely). data-status on an accent button is ignored, as on plain/raised. */ .dk-component-button { --dk-component-button-accent-gradient-stop-1-default: var(--dk-gradient-primary-top-right-default-stop-1); --dk-component-button-accent-gradient-stop-2-default: var(--dk-gradient-primary-top-right-default-stop-2); --dk-component-button-accent-gradient-stop-3-default: var(--dk-gradient-primary-top-right-default-stop-3); --dk-component-button-accent-gradient-stop-1-hover: var(--dk-gradient-primary-top-right-hover-stop-1); --dk-component-button-accent-gradient-stop-2-hover: var(--dk-gradient-primary-top-right-hover-stop-2); --dk-component-button-accent-gradient-stop-3-hover: var(--dk-gradient-primary-top-right-hover-stop-3); --dk-component-button-accent-elevation-default: var(--dk-border-primary-elevation); --dk-component-button-accent-elevation-hover: var(--dk-border-primary-elevation-hover); --dk-component-button-accent-text-shadow: var(--dk-color-primary-700); --dk-component-button-accent-ring: var(--dk-color-primary-300); } /* ── outline: transparent surface, status border, coloured content ── */ .dk-component-button { --dk-component-button-outline-surface-default: transparent; /* raw: no transparent primitive */ --dk-component-button-outline-border-width: var(--dk-border-width-25); --dk-component-button-outline-border-disabled: var(--dk-border-disabled-subtle); --dk-component-button-outline-text-disabled: var(--dk-text-disabled-subtle); --dk-component-button-outline-icon-disabled: var(--dk-icon-disabled-subtle); } /* outline · primary */ .dk-component-button { --dk-component-button-outline-primary-border-default: var(--dk-border-primary-default); --dk-component-button-outline-primary-border-hover: var(--dk-border-primary-hover); --dk-component-button-outline-primary-border-focus: var(--dk-border-primary-focus); --dk-component-button-outline-primary-border-active: var(--dk-border-primary-focus); --dk-component-button-outline-primary-surface-hover: var(--dk-surface-control-hover-on-primary-subtle); --dk-component-button-outline-primary-surface-focus: var(--dk-surface-control-active-on-primary-subtle); --dk-component-button-outline-primary-surface-active: var(--dk-surface-control-active-on-primary-subtle); --dk-component-button-outline-primary-text-default: var(--dk-text-primary-default); --dk-component-button-outline-primary-icon-default: var(--dk-icon-primary-default); --dk-component-button-outline-primary-text-hover: var(--dk-text-control-hover-on-primary-subtle); --dk-component-button-outline-primary-text-focus: var(--dk-text-control-active-on-primary-subtle); --dk-component-button-outline-primary-text-active: var(--dk-text-control-active-on-primary-subtle); --dk-component-button-outline-primary-icon-hover: var(--dk-icon-control-hover-on-primary-subtle); --dk-component-button-outline-primary-icon-focus: var(--dk-icon-control-active-on-primary-subtle); --dk-component-button-outline-primary-icon-active: var(--dk-icon-control-active-on-primary-subtle); --dk-component-button-outline-primary-ring: var(--dk-color-primary-300); } /* outline · success / warning / information (2026-08-18) — outline is the FULL-SPECTRUM status variant, re-adding v2's s/w/i for exactly one documented reason: action buttons inside status alerts. Outline's transparent fill composes with a tinted alert container by construction (the tint shows through; border/text carry the status). Solid (default) and tinted (subtle) s/w/i remain non-things — see the STATUSES header. */ .dk-component-button { --dk-component-button-outline-success-border-default: var(--dk-border-success-default); --dk-component-button-outline-success-border-hover: var(--dk-border-success-hover); --dk-component-button-outline-success-border-focus: var(--dk-border-success-focus); --dk-component-button-outline-success-border-active: var(--dk-border-success-focus); --dk-component-button-outline-success-surface-hover: var(--dk-surface-control-hover-on-success-subtle); --dk-component-button-outline-success-surface-focus: var(--dk-surface-control-active-on-success-subtle); --dk-component-button-outline-success-surface-active: var(--dk-surface-control-active-on-success-subtle); --dk-component-button-outline-success-text-default: var(--dk-text-success-default); --dk-component-button-outline-success-icon-default: var(--dk-icon-success-default); --dk-component-button-outline-success-text-hover: var(--dk-text-control-hover-on-success-subtle); --dk-component-button-outline-success-text-focus: var(--dk-text-control-active-on-success-subtle); --dk-component-button-outline-success-text-active: var(--dk-text-control-active-on-success-subtle); --dk-component-button-outline-success-icon-hover: var(--dk-icon-control-hover-on-success-subtle); --dk-component-button-outline-success-icon-focus: var(--dk-icon-control-active-on-success-subtle); --dk-component-button-outline-success-icon-active: var(--dk-icon-control-active-on-success-subtle); --dk-component-button-outline-success-ring: var(--dk-color-success-300); --dk-component-button-outline-warning-border-default: var(--dk-border-warning-default); --dk-component-button-outline-warning-border-hover: var(--dk-border-warning-hover); --dk-component-button-outline-warning-border-focus: var(--dk-border-warning-focus); --dk-component-button-outline-warning-border-active: var(--dk-border-warning-focus); --dk-component-button-outline-warning-surface-hover: var(--dk-surface-control-hover-on-warning-subtle); --dk-component-button-outline-warning-surface-focus: var(--dk-surface-control-active-on-warning-subtle); --dk-component-button-outline-warning-surface-active: var(--dk-surface-control-active-on-warning-subtle); --dk-component-button-outline-warning-text-default: var(--dk-text-warning-default); --dk-component-button-outline-warning-icon-default: var(--dk-icon-warning-default); --dk-component-button-outline-warning-text-hover: var(--dk-text-control-hover-on-warning-subtle); --dk-component-button-outline-warning-text-focus: var(--dk-text-control-active-on-warning-subtle); --dk-component-button-outline-warning-text-active: var(--dk-text-control-active-on-warning-subtle); --dk-component-button-outline-warning-icon-hover: var(--dk-icon-control-hover-on-warning-subtle); --dk-component-button-outline-warning-icon-focus: var(--dk-icon-control-active-on-warning-subtle); --dk-component-button-outline-warning-icon-active: var(--dk-icon-control-active-on-warning-subtle); --dk-component-button-outline-warning-ring: var(--dk-color-warning-300); --dk-component-button-outline-information-border-default: var(--dk-border-information-default); --dk-component-button-outline-information-border-hover: var(--dk-border-information-hover); --dk-component-button-outline-information-border-focus: var(--dk-border-information-focus); --dk-component-button-outline-information-border-active: var(--dk-border-information-focus); --dk-component-button-outline-information-surface-hover: var(--dk-surface-control-hover-on-information-subtle); --dk-component-button-outline-information-surface-focus: var(--dk-surface-control-active-on-information-subtle); --dk-component-button-outline-information-surface-active: var(--dk-surface-control-active-on-information-subtle); --dk-component-button-outline-information-text-default: var(--dk-text-information-default); --dk-component-button-outline-information-icon-default: var(--dk-icon-information-default); --dk-component-button-outline-information-text-hover: var(--dk-text-control-hover-on-information-subtle); --dk-component-button-outline-information-text-focus: var(--dk-text-control-active-on-information-subtle); --dk-component-button-outline-information-text-active: var(--dk-text-control-active-on-information-subtle); --dk-component-button-outline-information-icon-hover: var(--dk-icon-control-hover-on-information-subtle); --dk-component-button-outline-information-icon-focus: var(--dk-icon-control-active-on-information-subtle); --dk-component-button-outline-information-icon-active: var(--dk-icon-control-active-on-information-subtle); --dk-component-button-outline-information-ring: var(--dk-color-information-300); } /* outline · error */ .dk-component-button { --dk-component-button-outline-error-border-default: var(--dk-border-error-default); --dk-component-button-outline-error-border-hover: var(--dk-border-error-hover); --dk-component-button-outline-error-border-focus: var(--dk-border-error-focus); --dk-component-button-outline-error-border-active: var(--dk-border-error-focus); --dk-component-button-outline-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle); --dk-component-button-outline-error-surface-focus: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-outline-error-surface-active: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-outline-error-text-default: var(--dk-text-error-default); --dk-component-button-outline-error-icon-default: var(--dk-icon-error-default); --dk-component-button-outline-error-text-hover: var(--dk-text-control-hover-on-error-subtle); --dk-component-button-outline-error-text-focus: var(--dk-text-control-active-on-error-subtle); --dk-component-button-outline-error-text-active: var(--dk-text-control-active-on-error-subtle); --dk-component-button-outline-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle); --dk-component-button-outline-error-icon-focus: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-outline-error-icon-active: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-outline-error-ring: var(--dk-color-error-300); } /* ── subtle: soft status surface, coloured content ── */ .dk-component-button { /* ── subtle, NEUTRAL: the statusless default the variant never had. Written without a status segment, the way plain and raised are, because it is what the variant looks like when nobody asks for a status. It reads the control family end to end, so a subtle button takes the colour of whatever surface it is sitting on -- tone, level and fill -- exactly as the icon button's subtle variant does. data-status="primary" and "error" still force those ramps through every surface, which is what they are for. */ --dk-component-button-subtle-surface-default: var(--dk-surface-control-default); --dk-component-button-subtle-surface-hover: var(--dk-surface-control-hover); --dk-component-button-subtle-surface-focus: var(--dk-surface-control-active); --dk-component-button-subtle-surface-active: var(--dk-surface-control-active); --dk-component-button-subtle-text-default: var(--dk-text-control-default); --dk-component-button-subtle-text-hover: var(--dk-text-control-hover); --dk-component-button-subtle-text-focus: var(--dk-text-control-active); --dk-component-button-subtle-text-active: var(--dk-text-control-active); --dk-component-button-subtle-icon-default: var(--dk-icon-control-default); --dk-component-button-subtle-icon-hover: var(--dk-icon-control-hover); --dk-component-button-subtle-icon-focus: var(--dk-icon-control-active); --dk-component-button-subtle-icon-active: var(--dk-icon-control-active); --dk-component-button-subtle-ring: var(--dk-border-control-hover); --dk-component-button-subtle-surface-disabled: var(--dk-surface-control-disabled); --dk-component-button-subtle-text-disabled: var(--dk-text-control-disabled); --dk-component-button-subtle-icon-disabled: var(--dk-icon-control-disabled); } /* subtle · primary */ .dk-component-button { --dk-component-button-subtle-primary-surface-default: var(--dk-surface-control-default-on-primary-subtle); --dk-component-button-subtle-primary-surface-hover: var(--dk-surface-control-hover-on-primary-subtle); --dk-component-button-subtle-primary-surface-focus: var(--dk-surface-control-active-on-primary-subtle); --dk-component-button-subtle-primary-surface-active: var(--dk-surface-control-active-on-primary-subtle); --dk-component-button-subtle-primary-text-default: var(--dk-text-control-default-on-primary-subtle); --dk-component-button-subtle-primary-icon-default: var(--dk-icon-control-default-on-primary-subtle); --dk-component-button-subtle-primary-text-hover: var(--dk-text-control-hover-on-primary-subtle); --dk-component-button-subtle-primary-text-focus: var(--dk-text-control-active-on-primary-subtle); --dk-component-button-subtle-primary-text-active: var(--dk-text-control-active-on-primary-subtle); --dk-component-button-subtle-primary-icon-hover: var(--dk-icon-control-hover-on-primary-subtle); --dk-component-button-subtle-primary-icon-focus: var(--dk-icon-control-active-on-primary-subtle); --dk-component-button-subtle-primary-icon-active: var(--dk-icon-control-active-on-primary-subtle); --dk-component-button-subtle-primary-ring: var(--dk-color-primary-300); } /* subtle · error */ .dk-component-button { --dk-component-button-subtle-error-surface-default: var(--dk-surface-control-default-on-error-subtle); --dk-component-button-subtle-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle); --dk-component-button-subtle-error-surface-focus: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-subtle-error-surface-active: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-subtle-error-text-default: var(--dk-text-control-default-on-error-subtle); --dk-component-button-subtle-error-icon-default: var(--dk-icon-control-default-on-error-subtle); --dk-component-button-subtle-error-text-hover: var(--dk-text-control-hover-on-error-subtle); --dk-component-button-subtle-error-text-focus: var(--dk-text-control-active-on-error-subtle); --dk-component-button-subtle-error-text-active: var(--dk-text-control-active-on-error-subtle); --dk-component-button-subtle-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle); --dk-component-button-subtle-error-icon-focus: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-subtle-error-icon-active: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-subtle-error-ring: var(--dk-color-error-300); } /* ── raised: Forge floating-chrome neutral (docs: DRIFT-OVERRIDES.md, spec § 6) ── */ .dk-component-button { --dk-component-button-raised-border-width: var(--dk-border-width-25); /* Fill = --surface-lifted-* (extensions): one contrast step off --dk-surface-current in both themes, so the control reads lifted AT REST on every rung — white-on-white read as `subtle` (design call 2026-08-18). Dark values are unchanged by this (lifted = the raised ramp there); light steps 25/50/100 at level 0. */ /* Same move as plain, and here it covers the RESTING fill too, because raised is lifted at rest by definition. --dk-surface-lifted-default and --dk-surface-control-default are the same colour on an untoned page at every level and in both themes, measured, so raised is unmoved there and gains the tone everywhere else. */ --dk-component-button-raised-surface-default: var(--dk-surface-control-default); --dk-component-button-raised-surface-hover: var(--dk-surface-control-hover); --dk-component-button-raised-surface-focus: var(--dk-surface-control-active); --dk-component-button-raised-surface-active: var(--dk-surface-control-active); --dk-component-button-raised-border-default: var(--dk-border-control-default); /* no resting shadow → the stronger hairline */ --dk-component-button-raised-border-hover: var(--dk-border-control-hover); --dk-component-button-raised-border-focus: var(--dk-border-control-active); --dk-component-button-raised-border-active: var(--dk-border-control-active); --dk-component-button-raised-text-default: var(--dk-text-control-default); --dk-component-button-raised-icon-default: var(--dk-icon-control-default); /* Per-state label/icon colour (added 2026-08-18 — every variant used to hold ONE text colour across rest/hover/active). Only the neutral variants get this: default/accent/inverse keep white (the fill carries the state) and outline/subtle keep their status colour (it IS their identity). Focus mirrors active, matching how the surface tokens pair. */ --dk-component-button-raised-text-hover: var(--dk-text-control-hover); --dk-component-button-raised-text-focus: var(--dk-text-control-active); --dk-component-button-raised-text-active: var(--dk-text-control-active); --dk-component-button-raised-icon-hover: var(--dk-icon-control-hover); --dk-component-button-raised-icon-focus: var(--dk-icon-control-active); --dk-component-button-raised-icon-active: var(--dk-icon-control-active); --dk-component-button-raised-ring: var(--dk-color-neutral-300); --dk-component-button-raised-surface-disabled: var(--dk-surface-control-disabled); --dk-component-button-raised-border-disabled: var(--dk-border-disabled-subtle); --dk-component-button-raised-text-disabled: var(--dk-text-control-disabled); --dk-component-button-raised-icon-disabled: var(--dk-icon-control-disabled); } /* ── plain: Forge-only. The classic secondary button, defined as FLAT (Julio, 2026-08-18): its fill MATCHES the surface it sits on (--dk-surface-current — white on the white body, the rung colour on deeper rungs, the dark body colour in dark), so at rest it is distinguishable by border alone. Hover/active walk one and two steps off the current surface via the --surface-lifted-* ladder — the same ladder the raised variant RESTS on, which is exactly the role split: plain sits IN the surface, raised floats one step above it. Status-agnostic; base bold weight. ── */ .dk-component-button { /* ── ghost: plain with the edge taken off, and nothing at all at rest. Added so Button and the icon button carry the same neutral ladder: ghost, subtle, plain, raised, meaning the same thing in both. Button had no borderless rung before. accent looks like one and is not: it paints on-solid text for a coloured backdrop, so on an ordinary page it is invisible rather than quiet. Transparent at rest rather than the panel's own colour, which is what plain paints. On a flat surface the two are identical; over anything that is not flat, a ghost is the one that genuinely disappears. From hover on it is plain exactly, because a ghost is only a ghost until you touch it. */ --dk-component-button-ghost-surface-default: transparent; /* HOVER AND PRESS ARE THE FAMILY'S OWN, unshifted. Starting a state late at REST does not mean running a state behind for the rest of the interaction: read one state back and every label is sitting on a fill it was not chosen for. Measured on dark warning level 2, where the ladder legitimately flips from a light rung to a dark one between rest and hover, a press label picked for surface-control-active landed on surface-control-hover at 2.76:1. ghost and plain now differ from subtle and raised at rest and nowhere else, so every state's label answers to the fill it paints. */ --dk-component-button-ghost-surface-hover: var(--dk-surface-control-hover); --dk-component-button-ghost-surface-focus: var(--dk-surface-control-active); --dk-component-button-ghost-surface-active: var(--dk-surface-control-active); --dk-component-button-ghost-text-default: var(--dk-text-control-default); --dk-component-button-ghost-icon-default: var(--dk-icon-control-default); --dk-component-button-ghost-text-hover: var(--dk-text-control-hover); --dk-component-button-ghost-text-focus: var(--dk-text-control-active); --dk-component-button-ghost-text-active: var(--dk-text-control-active); --dk-component-button-ghost-icon-hover: var(--dk-icon-control-hover); --dk-component-button-ghost-icon-focus: var(--dk-icon-control-active); --dk-component-button-ghost-icon-active: var(--dk-icon-control-active); --dk-component-button-ghost-ring: var(--dk-border-control-hover); --dk-component-button-ghost-surface-disabled: var(--dk-surface-control-disabled); --dk-component-button-ghost-text-disabled: var(--dk-text-control-disabled); --dk-component-button-ghost-icon-disabled: var(--dk-icon-control-disabled); --dk-component-button-plain-border-width: var(--dk-border-width-25); --dk-component-button-plain-surface-default: var(--dk-surface-current); /* THE LIFT COMES FROM THE CONTROL FAMILY, not from --dk-surface-lifted-*. That token tracks the LEVEL but not the TONE: measured on a primary panel it stays #f4f5f5, the same grey it is on a white one, which is the "grey button on a mint card" the control family exists to fix. Untoned the two are byte-identical, so nothing moves on a plain page. The RESTING fill stays on --dk-surface-current, because plain is the control that sits flat ON the surface and is read by its edge, and that token already follows the tone. That is also what keeps plain and raised distinct. */ --dk-component-button-plain-surface-hover: var(--dk-surface-control-hover); --dk-component-button-plain-surface-focus: var(--dk-surface-control-active); --dk-component-button-plain-surface-active: var(--dk-surface-control-active); --dk-component-button-plain-border-default: var(--dk-border-control-default); /* no resting shadow → the stronger hairline */ --dk-component-button-plain-border-hover: var(--dk-border-control-hover); --dk-component-button-plain-border-focus: var(--dk-border-control-active); --dk-component-button-plain-border-active: var(--dk-border-control-active); /* Label and glyph take the tone too, via the family's text and icon halves. --dk-text-neutral-* tracks level and goes on-solid but stays GREY on a tinted panel, which is the same fault the surface had. Untoned these resolve to the values those tokens already had. */ --dk-component-button-plain-text-default: var(--dk-text-control-default); --dk-component-button-plain-icon-default: var(--dk-icon-control-default); /* Per-state label/icon colour — see the raised block above for the which-variants-and-why note. Matters most on plain: its fill moves only one ramp position per state, so the text step is what makes the feedback read. */ --dk-component-button-plain-text-hover: var(--dk-text-control-hover); --dk-component-button-plain-text-focus: var(--dk-text-control-active); --dk-component-button-plain-text-active: var(--dk-text-control-active); --dk-component-button-plain-icon-hover: var(--dk-icon-control-hover); --dk-component-button-plain-icon-focus: var(--dk-icon-control-active); --dk-component-button-plain-icon-active: var(--dk-icon-control-active); --dk-component-button-plain-ring: var(--dk-color-neutral-300); --dk-component-button-plain-surface-disabled: var(--dk-surface-control-disabled); --dk-component-button-plain-border-disabled: var(--dk-border-disabled-subtle); --dk-component-button-plain-text-disabled: var(--dk-text-control-disabled); --dk-component-button-plain-icon-disabled: var(--dk-icon-control-disabled); /* plain · error — the destructive secondary. Julio, 2026-09-12, after seeing the shape work in Disko's inspector: a delete sitting in a row of ordinary controls should look ordinary until you read it, so the BORDER STAYS NEUTRAL at rest and only the label carries the status. Hover and active commit, and everything goes red together. That is the opposite of outline-error, which is red-bordered from the start. Both are correct for their job: outline announces a destructive action you are being offered, plain-error is a destructive action sitting quietly among its neighbours. Disabled is NOT redefined: it is a state, and plain's disabled palette already wins over any status (5.0.0). */ /* ── ghost · error: the destructive lowest-emphasis action. The same ladder subtle and plain carry, minus the resting fill and minus the edge, which is what ghost is. Transparent at rest with an error label and glyph, then one step of the error ramp on hover and two on press, so the button only becomes a coloured shape once you touch it. This was missing entirely: the playground offered the status and the CSS had no rule for it, so selecting error on a ghost button changed nothing. Reported. */ --dk-component-button-ghost-error-surface-default: transparent; --dk-component-button-ghost-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle); --dk-component-button-ghost-error-surface-focus: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-ghost-error-surface-active: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-ghost-error-text-default: var(--dk-text-error-default); --dk-component-button-ghost-error-icon-default: var(--dk-icon-error-default); --dk-component-button-ghost-error-text-hover: var(--dk-text-control-hover-on-error-subtle); --dk-component-button-ghost-error-text-focus: var(--dk-text-control-active-on-error-subtle); --dk-component-button-ghost-error-text-active: var(--dk-text-control-active-on-error-subtle); --dk-component-button-ghost-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle); --dk-component-button-ghost-error-icon-focus: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-ghost-error-icon-active: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-ghost-error-ring: var(--dk-color-error-300); --dk-component-button-plain-error-border-default: var(--dk-border-control-default); /* neutral on purpose */ --dk-component-button-plain-error-border-hover: var(--dk-border-error-hover); --dk-component-button-plain-error-border-focus: var(--dk-border-error-focus); --dk-component-button-plain-error-border-active: var(--dk-border-error-focus); --dk-component-button-plain-error-surface-hover: var(--dk-surface-control-hover-on-error-subtle); --dk-component-button-plain-error-surface-focus: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-plain-error-surface-active: var(--dk-surface-control-active-on-error-subtle); --dk-component-button-plain-error-text-default: var(--dk-text-error-default); --dk-component-button-plain-error-icon-default: var(--dk-icon-error-default); --dk-component-button-plain-error-text-hover: var(--dk-text-control-hover-on-error-subtle); --dk-component-button-plain-error-text-focus: var(--dk-text-control-active-on-error-subtle); --dk-component-button-plain-error-text-active: var(--dk-text-control-active-on-error-subtle); --dk-component-button-plain-error-icon-hover: var(--dk-icon-control-hover-on-error-subtle); --dk-component-button-plain-error-icon-focus: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-plain-error-icon-active: var(--dk-icon-control-active-on-error-subtle); --dk-component-button-plain-error-ring: var(--dk-color-error-300); } /* ── inverse: Forge-only. The neutral family's MAXIMUM-emphasis rung (plain = flat → raised = lifted → inverse = full contrast): borrows the opposite theme's surface — near-black in light, near-white in dark — flipping with the theme. USE-WHEN doctrine (2026-08-18): for contexts where semantic colour is unavailable, exhausted, or reserved (CTAs over photography, dark hero panels, marketing moments, inverse chrome like toasts) — NEVER as an alternative CTA beside a semantic one (a black button next to the teal CTA reads as two primaries). Status-agnostic by definition — statusing it would just rebuild `default` in the dark (design call: alerts keep their outline+status / plain recipe). Level-static across surface rungs: near-black clears every light rung and near-white every dark rung by construction. ── */ .dk-component-button { --dk-component-button-inverse-surface-default: var(--dk-surface-inverse-default); --dk-component-button-inverse-surface-hover: var(--dk-surface-inverse-hover); --dk-component-button-inverse-surface-focus: var(--dk-surface-inverse-active); --dk-component-button-inverse-surface-active: var(--dk-surface-inverse-active); --dk-component-button-inverse-text-default: var(--dk-text-inverse-default); --dk-component-button-inverse-icon-default: var(--dk-icon-inverse-default); --dk-component-button-inverse-ring: var(--dk-color-neutral-300); --dk-component-button-inverse-surface-disabled: var(--dk-surface-disabled-subtle); --dk-component-button-inverse-text-disabled: var(--dk-text-disabled-subtle); --dk-component-button-inverse-icon-disabled: var(--dk-icon-disabled-subtle); } /* ══════════════════════════════════════ drift-kit:layer components/link/tokens.css ══════════════════════════════════════ */ /* ============================================================================ Link: component token collection (--dk-component-link-*) ---------------------------------------------------------------------------- SCOPED TO THE COMPONENT AND TO THE BARE LINK. A bare inside Body, Heading, Eyebrow, Alert, Tooltip or Table text has no dk-component-link class, so tokens scoped to the class alone would resolve to nothing on it. Both selectors carry the same declarations; the bare one is wholly inside :where so it adds no specificity. INLINE HAS NO TYPE TOKENS, and that is the component. A link in a sentence is the sentence's size and weight; only standalone links carry type. ============================================================================ */ .dk-component-link, :where(:is(.dk-component-body, .dk-component-heading, .dk-component-eyebrow, .dk-component-alert, .dk-component-tooltip, .dk-component-table) a:not([class])) { --dk-component-link-color-default: var(--dk-text-link-default); --dk-component-link-color-hover: var(--dk-text-link-hover); --dk-component-link-color-active: var(--dk-text-link-active); --dk-component-link-underline-color-default: var(--dk-text-link-underline); /* Neutral: grey at rest for footers, legal copy and table meta, and the link ramp on hover and active so it still answers the pointer as a link. */ --dk-component-link-neutral-color-default: var(--dk-text-neutral-default); --dk-component-link-neutral-underline-color: var(--dk-border-neutral-hairline); /* Visited is a hue shift rather than a muted teal: nothing on the jade ramp reads as visited and still clears the page. The underline stays teal so a visited link is still plainly a link. */ --dk-component-link-visited-color: var(--dk-text-neutral-default); --dk-component-link-disabled-color: var(--dk-text-disabled-default); --dk-component-link-underline-thickness-default: var(--dk-border-width-25); --dk-component-link-underline-thickness-hover: var(--dk-border-width-50); /* In em so it scales with whatever size the link inherits. */ --dk-component-link-underline-offset: 0.2em; --dk-component-link-small-font-size: var(--dk-font-scale-body-small-text-size); --dk-component-link-small-line-height: var(--dk-font-scale-body-small-line-height); --dk-component-link-medium-font-size: var(--dk-font-scale-body-medium-text-size); --dk-component-link-medium-line-height: var(--dk-font-scale-body-medium-line-height); --dk-component-link-large-font-size: var(--dk-font-scale-body-large-text-size); --dk-component-link-large-line-height: var(--dk-font-scale-body-large-line-height); --dk-component-link-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-link-small-icon-size: var(--dk-primitive-scale-4); --dk-component-link-medium-icon-size: var(--dk-primitive-scale-4-5); --dk-component-link-large-icon-size: var(--dk-primitive-scale-5); --dk-component-link-gap: var(--dk-spacing-1-5); --dk-component-link-icon-travel: var(--dk-primitive-scale-0-5); --dk-component-link-focus-ring-width: var(--dk-primitive-scale-0-5); --dk-component-link-focus-ring-offset: var(--dk-primitive-scale-0-5); --dk-component-link-focus-ring-radius: var(--dk-border-radius-100); --dk-component-link-external-icon-size: 0.875em; --dk-component-link-external-icon-gap: 0.15em; /* Lucide arrow-up-right, painted through a mask so it takes currentColor. */ --dk-component-link-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); --dk-component-link-motion-duration: var(--dk-motion-duration-default); --dk-component-link-motion-easing: var(--dk-motion-easing-in-out); } /* ══════════════════════════════════════ drift-kit:layer components/body/tokens.css ══════════════════════════════════════ */ /* ============================================================================ Body — component token collection (--dk-component-body-*) ---------------------------------------------------------------------------- The body-copy primitive: dk-component-body. Ports component-library's Text (src/components/base/v2/primitives/typography/Text) with two changes that are the reason it exists here at all: 1. SURFACE-AWARE. Every colour token below references a Mapped --text-* token, and the [data-surface] leg on the selector re-substitutes those references inside each surface scope. Neutral and the five statuses step per level in tokens/mapped/surface.css (2026-09-07); `default` is deliberately fixed — black is black on any grey. 2. TWO COLOUR AXES. data-color says WHICH palette, data-emphasis says HOW STRONG within it. The CL's twelve-value `color` prop mixed palette, strength and theme-relation; `pseudoClass` (hover/focus/subtle) is gone — text is non-interactive here, and hosts own their label colour. Renames vs the CL: white-fixed → white, black-fixed → black, default-reverse → inverse, disabled-subtle → the disabled state (5.0.0), textStyle="italics" → data-style="italic". `id` is `body`, NOT `text`: --text-* is the Mapped colour family and a component collection one word apart from it would read as a typo. NAMING GRAMMAR (selector-mirror, Components Collection spec § 4): --dk-component-body-{color}-{emphasis}-{property} e.g. --dk-component-body-neutral-subtle-color Axes a token does not vary on are omitted: --dk-component-body-error-color (statuses have no emphasis axis — their -subtle Mapped tokens are on-fill tints, not lower emphasis), --dk-component-body-large-font-size (size axis only), --dk-component-body-font-family (no axes). SCOPING — .dk-component-body, never :root and no longer the four legs [data-theme="light"], [data-theme="dark"], [data-surface], [data-tone]. var() substitutes where a property is DECLARED, which is what the four legs were for: they re-declared the collection on every themed, levelled or toned element so the remaps could reach it. Declared on the component instead, it is declared where the component is, so the remaps reach it by being the nearest ancestors rather than by being re-run. Same answer, and it stops all of these inheriting to every element in the document. REFERENCE RULES — colours → Mapped; font size / line-height / weight → alias font tokens; duration → motion primitive. No raw values. Sizes use the NON-responsive body tokens, as the CL does and as the collection spec § 5 prescribes (component-owned, constant per breakpoint). ============================================================================ */ /* ── Family, motion ─────────────────────────────────────────────────────── */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 38 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-body { --dk-component-body-font-family: var(--dk-font-family-primary); /* The CL eases colour over 0.125s; keeps a theme or surface change from snapping. Reduced motion collapses it kit-wide (kit/reduced-motion.css). */ /* Motion resolves through the ALIAS tier, not the primitive. That is what puts these under the prefers-reduced-motion override in tokens/alias/motion.css: a component token pointing straight at a primitive would keep its full duration with the preference set, which is the failure mode the old hand-kept selector list existed to patch. */ --dk-component-body-transition-duration: var(--dk-motion-duration-snap); } /* ── Sizes — 20/28 · 18/26 · 16/24 · 14/20 · 12/18, fixed at every breakpoint 4.0.0 adds the 18px reading rung the ramp used to skip (16 jumped straight to 20) and moves onto the shared t-shirt vocabulary. WATCH THE RENAME: `large` was 20px and is now 18px; the old 20px rung is `xlarge`. That is the one value in this release whose meaning changed rather than its name, which is why migrations/4.0.0-type-scale.json calls it out on its own line. ── */ .dk-component-body { --dk-component-body-xlarge-font-size: var(--dk-font-scale-body-xlarge-text-size); --dk-component-body-xlarge-line-height: var(--dk-font-scale-body-xlarge-line-height); --dk-component-body-large-font-size: var(--dk-font-scale-body-large-text-size); --dk-component-body-large-line-height: var(--dk-font-scale-body-large-line-height); --dk-component-body-medium-font-size: var(--dk-font-scale-body-medium-text-size); --dk-component-body-medium-line-height: var(--dk-font-scale-body-medium-line-height); --dk-component-body-small-font-size: var(--dk-font-scale-body-small-text-size); --dk-component-body-small-line-height: var(--dk-font-scale-body-small-line-height); --dk-component-body-xsmall-font-size: var(--dk-font-scale-body-xsmall-text-size); --dk-component-body-xsmall-line-height: var(--dk-font-scale-body-xsmall-line-height); } /* ── Weights — the eight Inter carries ─────────────────────────────────── */ .dk-component-body { --dk-component-body-thin-font-weight: var(--dk-primitive-font-weight-thin); --dk-component-body-extra-light-font-weight: var(--dk-primitive-font-weight-extra-light); --dk-component-body-light-font-weight: var(--dk-primitive-font-weight-light); --dk-component-body-regular-font-weight: var(--dk-primitive-font-weight-regular); --dk-component-body-medium-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-body-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-body-bold-font-weight: var(--dk-primitive-font-weight-bold); --dk-component-body-extra-bold-font-weight: var(--dk-primitive-font-weight-extra-bold); } /* ── Colours ────────────────────────────────────────────────────────────── */ .dk-component-body { /* Theme text. Fixed across surface levels by decision (spec A1). */ --dk-component-body-default-color: var(--dk-text-default); /* The opposite theme's text — white in light, deepest neutral in dark. Same idea as the Button's `inverse` variant. */ --dk-component-body-inverse-color: var(--dk-text-inverse-default); /* Literal, theme-independent. Only over things that don't flip either: photography, brand fills, the accent gradient. */ --dk-component-body-white-color: var(--dk-text-base-white); --dk-component-body-black-color: var(--dk-text-base-black); /* Statuses — single emphasis (see header). All five step per surface. */ --dk-component-body-primary-color: var(--dk-text-primary-default); --dk-component-body-success-color: var(--dk-text-success-default); --dk-component-body-error-color: var(--dk-text-error-default); --dk-component-body-warning-color: var(--dk-text-warning-default); --dk-component-body-information-color: var(--dk-text-information-default); /* Neutral carries the emphasis axis. Disabled does NOT, since 5.0.0: its two Mapped rungs are not two strengths of the same idea but "dim" and "unreadable" — on the light page surface -default is 2.88:1 and -subtle is 1.80:1, and in dark 5.57:1 against 2.33:1. Below 2:1 is not a quieter label, it is text nobody can read, and the kit itself never had to choose between them: every disabled CONTROL label (Button's six variants, Checkbox's description) takes -subtle, and -default was referenced exactly once outside the type primitives. Prose keeps the readable rung; controls keep theirs. --dk-text-disabled-subtle is untouched — the interactive components still read it. */ --dk-component-body-neutral-default-color: var(--dk-text-neutral-default); --dk-component-body-neutral-subtle-color: var(--dk-text-neutral-subtle); --dk-component-body-disabled-color: var(--dk-text-disabled-default); } /* ═══════════════════════════════════ drift-kit:layer components/heading/tokens.css ═══════════════════════════════════ */ /* ============================================================================ Heading — component token collection (--dk-component-heading-*) ---------------------------------------------------------------------------- The document-outline tier: Inter, six responsive sizes. Size is DECOUPLED from the element (spec D3) —

is an outline-level-2 heading that LOOKS like an H4, which is the everyday case the CL's `as` prop could not express. Sizes stay RESPONSIVE on purpose: display type is what should scale with the viewport (Body follow-ups, C3), so these reference Drift's --font-heading-h{n} ramp (desktop 48/38/28/26/24/20 → mobile 40/30/24/22/20/18). Same grammar and doctrine as Body (components/body/tokens.css): --dk-component-heading-{axes in attribute order}-{property}; axes a token does not vary on are omitted. Colours → Mapped --text-*; sizes → alias font tokens; weights → alias weight tokens; duration → motion primitive. Scoped on the component's own class rather than on the four legs it used to carry; see the note above the first block for why that is the same answer arrived at more directly. ============================================================================ */ /* ── Family, motion ─────────────────────────────────────────────────────── */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 40 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-heading { --dk-component-heading-font-family: var(--dk-font-family-primary); /* Inter ships a real italic face (tokens/brand/fonts.css declares font-style: italic at weights 100-900), so data-style="italic" selects a drawn italic, not a synthesised slant. Hero deliberately has no style axis: Syne ships normal only, and an oblique the browser invents is not a typeface decision we get to make. */ --dk-component-heading-italic-font-style: italic; /* Motion resolves through the ALIAS tier, not the primitive. That is what puts these under the prefers-reduced-motion override in tokens/alias/motion.css: a component token pointing straight at a primitive would keep its full duration with the preference set, which is the failure mode the old hand-kept selector list existed to patch. */ --dk-component-heading-transition-duration: var(--dk-motion-duration-snap); } /* ── Sizes ──────────────────────────────────────────────────────────────── */ .dk-component-heading { --dk-component-heading-xxlarge-font-size: var(--dk-font-scale-heading-xxlarge-text-size); --dk-component-heading-xxlarge-line-height: var(--dk-font-scale-heading-xxlarge-line-height); --dk-component-heading-xlarge-font-size: var(--dk-font-scale-heading-xlarge-text-size); --dk-component-heading-xlarge-line-height: var(--dk-font-scale-heading-xlarge-line-height); --dk-component-heading-large-font-size: var(--dk-font-scale-heading-large-text-size); --dk-component-heading-large-line-height: var(--dk-font-scale-heading-large-line-height); --dk-component-heading-medium-font-size: var(--dk-font-scale-heading-medium-text-size); --dk-component-heading-medium-line-height: var(--dk-font-scale-heading-medium-line-height); --dk-component-heading-small-font-size: var(--dk-font-scale-heading-small-text-size); --dk-component-heading-small-line-height: var(--dk-font-scale-heading-small-line-height); --dk-component-heading-xsmall-font-size: var(--dk-font-scale-heading-xsmall-text-size); --dk-component-heading-xsmall-line-height: var(--dk-font-scale-heading-xsmall-line-height); --dk-component-heading-xxsmall-font-size: var(--dk-font-scale-heading-xxsmall-text-size); --dk-component-heading-xxsmall-line-height: var(--dk-font-scale-heading-xxsmall-line-height); } /* ── Weights ────────────────────────────────────────────────────────────── */ .dk-component-heading { --dk-component-heading-thin-font-weight: var(--dk-primitive-font-weight-thin); --dk-component-heading-extra-light-font-weight: var(--dk-primitive-font-weight-extra-light); --dk-component-heading-light-font-weight: var(--dk-primitive-font-weight-light); --dk-component-heading-regular-font-weight: var(--dk-primitive-font-weight-regular); --dk-component-heading-medium-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-heading-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-heading-bold-font-weight: var(--dk-primitive-font-weight-bold); --dk-component-heading-extra-bold-font-weight: var(--dk-primitive-font-weight-extra-bold); --dk-component-heading-black-font-weight: var(--dk-primitive-font-weight-black); } /* ── Colours — identical set and references to Body ───────────────── */ .dk-component-heading { --dk-component-heading-default-color: var(--dk-text-default); --dk-component-heading-inverse-color: var(--dk-text-inverse-default); --dk-component-heading-white-color: var(--dk-text-base-white); --dk-component-heading-black-color: var(--dk-text-base-black); --dk-component-heading-primary-color: var(--dk-text-primary-default); --dk-component-heading-success-color: var(--dk-text-success-default); --dk-component-heading-error-color: var(--dk-text-error-default); --dk-component-heading-warning-color: var(--dk-text-warning-default); --dk-component-heading-information-color: var(--dk-text-information-default); --dk-component-heading-neutral-default-color: var(--dk-text-neutral-default); --dk-component-heading-neutral-subtle-color: var(--dk-text-neutral-subtle); --dk-component-heading-disabled-color: var(--dk-text-disabled-default); } /* ══════════════════════════════════════ drift-kit:layer components/hero/tokens.css ══════════════════════════════════════ */ /* ============================================================================ Hero — component token collection (--dk-component-hero-*) ---------------------------------------------------------------------------- The display tier: Syne (--dk-font-family-secondary) on the same responsive heading ramp, five sizes, four weights (Syne carries 400–800; extra-bold is deliberately not exposed — it reads heavy at display sizes and the CL never used it). Karmo's own word for this tier — kept over "Display" because Figma and every CL consumer say Hero (spec D2). Same grammar and doctrine as Body (components/body/tokens.css): --dk-component-hero-{axes in attribute order}-{property}; axes a token does not vary on are omitted. Colours → Mapped --text-*; sizes → alias font tokens; weights → alias weight tokens; duration → motion primitive. Scoped on the component's own class rather than on the four legs it used to carry; see the note above the first block for why that is the same answer arrived at more directly. ============================================================================ */ /* ── Family, motion ─────────────────────────────────────────────────────── */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 30 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-hero { --dk-component-hero-font-family: var(--dk-font-family-secondary); /* Motion resolves through the ALIAS tier, not the primitive. That is what puts these under the prefers-reduced-motion override in tokens/alias/motion.css: a component token pointing straight at a primitive would keep its full duration with the preference set, which is the failure mode the old hand-kept selector list existed to patch. */ --dk-component-hero-transition-duration: var(--dk-motion-duration-snap); } /* ── Sizes — the DISPLAY ramp, which is Hero's alone (4.0.0) ───────────── Until 4.0.0 Hero read --dk-font-heading-*, so the display tier topped out at the same 48px as an H1 and ran down to 24px. It now reads the display ramp (alias/karmo/font/type-scale.css): 72 · 64 · 56 · 48 · 40 on desktop, scaling down two breakpoints, always above the heading tier and never below 32px — a display face has no business at reading sizes. */ .dk-component-hero { --dk-component-hero-xxlarge-font-size: var(--dk-font-scale-display-xxlarge-text-size); --dk-component-hero-xxlarge-line-height: var(--dk-font-scale-display-xxlarge-line-height); --dk-component-hero-xlarge-font-size: var(--dk-font-scale-display-xlarge-text-size); --dk-component-hero-xlarge-line-height: var(--dk-font-scale-display-xlarge-line-height); --dk-component-hero-large-font-size: var(--dk-font-scale-display-large-text-size); --dk-component-hero-large-line-height: var(--dk-font-scale-display-large-line-height); --dk-component-hero-medium-font-size: var(--dk-font-scale-display-medium-text-size); --dk-component-hero-medium-line-height: var(--dk-font-scale-display-medium-line-height); --dk-component-hero-small-font-size: var(--dk-font-scale-display-small-text-size); --dk-component-hero-small-line-height: var(--dk-font-scale-display-small-line-height); } /* ── Weights ────────────────────────────────────────────────────────────── */ .dk-component-hero { --dk-component-hero-regular-font-weight: var(--dk-primitive-font-weight-regular); --dk-component-hero-medium-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-hero-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-hero-bold-font-weight: var(--dk-primitive-font-weight-bold); } /* ── Colours — identical set and references to Body ───────────────── */ .dk-component-hero { --dk-component-hero-default-color: var(--dk-text-default); --dk-component-hero-inverse-color: var(--dk-text-inverse-default); --dk-component-hero-white-color: var(--dk-text-base-white); --dk-component-hero-black-color: var(--dk-text-base-black); --dk-component-hero-primary-color: var(--dk-text-primary-default); --dk-component-hero-success-color: var(--dk-text-success-default); --dk-component-hero-error-color: var(--dk-text-error-default); --dk-component-hero-warning-color: var(--dk-text-warning-default); --dk-component-hero-information-color: var(--dk-text-information-default); --dk-component-hero-neutral-default-color: var(--dk-text-neutral-default); --dk-component-hero-neutral-subtle-color: var(--dk-text-neutral-subtle); --dk-component-hero-disabled-color: var(--dk-text-disabled-default); } /* ═══════════════════════════════════ drift-kit:layer components/eyebrow/tokens.css ═══════════════════════════════════ */ /* ============================================================================ Eyebrow — component token collection (--dk-component-eyebrow-*) ---------------------------------------------------------------------------- Uppercase labels — the CL's Overline, renamed (Julio, 8 Sep). FIXED at 12 / 11 / 10 px through the Karmo alias override alias/karmo/font/overline-fixed.css: Drift's responsive overline rungs are 12 / 10 / 8 px on desktop and 11 / 9 / 8 on a phone, and 8 px is what size="small" renders today. Tracking WIDENS as the size shrinks (0.08 / 0.10 / 0.12 em — spec D6); the CL had it reversed. Raw em because Drift has no letter-spacing primitive. Weight defaults to bold in the base rule. Same grammar and doctrine as Body (components/body/tokens.css): --dk-component-eyebrow-{axes in attribute order}-{property}; axes a token does not vary on are omitted. Colours → Mapped --text-*; sizes → alias font tokens; weights → alias weight tokens; duration → motion primitive. Scoped on the component's own class rather than on the four legs it used to carry; see the note above the first block for why that is the same answer arrived at more directly. ============================================================================ */ /* ── Family, motion ─────────────────────────────────────────────────────── */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 28 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-eyebrow { --dk-component-eyebrow-font-family: var(--dk-font-family-primary); /* Motion resolves through the ALIAS tier, not the primitive. That is what puts these under the prefers-reduced-motion override in tokens/alias/motion.css: a component token pointing straight at a primitive would keep its full duration with the preference set, which is the failure mode the old hand-kept selector list existed to patch. */ --dk-component-eyebrow-transition-duration: var(--dk-motion-duration-snap); } /* ── Sizes ──────────────────────────────────────────────────────────────── */ .dk-component-eyebrow { --dk-component-eyebrow-large-font-size: var(--dk-font-overline-lg-text-size); --dk-component-eyebrow-large-line-height: var(--dk-font-overline-lg-line-height); --dk-component-eyebrow-medium-font-size: var(--dk-font-overline-md-text-size); --dk-component-eyebrow-medium-line-height: var(--dk-font-overline-md-line-height); --dk-component-eyebrow-small-font-size: var(--dk-font-overline-sm-text-size); --dk-component-eyebrow-small-line-height: var(--dk-font-overline-sm-line-height); /* Tracking — no Drift primitive exists for letter-spacing; raw em by design. */ --dk-component-eyebrow-large-letter-spacing: 0.08em; --dk-component-eyebrow-medium-letter-spacing: 0.1em; --dk-component-eyebrow-small-letter-spacing: 0.12em; } /* ── Weights ────────────────────────────────────────────────────────────── */ .dk-component-eyebrow { --dk-component-eyebrow-medium-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-eyebrow-semi-bold-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-eyebrow-bold-font-weight: var(--dk-primitive-font-weight-bold); } /* ── Colours — identical set and references to Body ───────────────── */ .dk-component-eyebrow { --dk-component-eyebrow-default-color: var(--dk-text-default); --dk-component-eyebrow-inverse-color: var(--dk-text-inverse-default); --dk-component-eyebrow-white-color: var(--dk-text-base-white); --dk-component-eyebrow-black-color: var(--dk-text-base-black); --dk-component-eyebrow-primary-color: var(--dk-text-primary-default); --dk-component-eyebrow-success-color: var(--dk-text-success-default); --dk-component-eyebrow-error-color: var(--dk-text-error-default); --dk-component-eyebrow-warning-color: var(--dk-text-warning-default); --dk-component-eyebrow-information-color: var(--dk-text-information-default); --dk-component-eyebrow-neutral-default-color: var(--dk-text-neutral-default); --dk-component-eyebrow-neutral-subtle-color: var(--dk-text-neutral-subtle); --dk-component-eyebrow-disabled-color: var(--dk-text-disabled-default); } /* ══════════════════════════════════════ drift-kit:layer components/icon/tokens.css ══════════════════════════════════════ */ /* ============================================================================ Icon — component token collection (--dk-component-icon-*) ---------------------------------------------------------------------------- The icon primitive is dk-component-icon with the --dk-component-icon-* collection. Until 2026-09-09 it was dk-component-symbol, because --icon-* is the Mapped icon-colour family and a component collection under the same prefix could not be told apart from the palette. The TIER MARKER settled that for every component at once: component collections are --dk-component-{component}-*, the system tiers (brand, alias, mapped, responsive, dynamic) stay unmarked, so --dk-component-icon-error-color and --dk-icon-error-default read as two tiers, never as a typo. Icons behave like text (Julio, 8 Sep): the same colour grammar, sizes named like the body rungs and FIXED like them, weight = stroke width, and an unsized icon is 1em — a glyph in the text it sits in. Sizes pair with body copy: 12 for chips beside extra-small, 16 beside small (14), 20 beside medium (16), 24 beside large (20) and headings, 32 for empty states. Stroke widths are raw unitless numbers on the 24-unit viewBox every set shares — Lucide's native 2, one step lighter, one step bolder; no Drift primitive exists for stroke, so raw by necessity (the CL's responsive rem strokes with non-scaling-stroke made a 12px icon as heavy as a 32px one). Scoped on .dk-component-icon, as every collection is since the four legs were retired; see the note above the first block. ============================================================================ */ /* ── Motion, stroke ─────────────────────────────────────────────────────── */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 28 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-icon { /* Motion resolves through the ALIAS tier, not the primitive. That is what puts these under the prefers-reduced-motion override in tokens/alias/motion.css: a component token pointing straight at a primitive would keep its full duration with the preference set, which is the failure mode the old hand-kept selector list existed to patch. */ --dk-component-icon-transition-duration: var(--dk-motion-duration-snap); --dk-component-icon-light-stroke-width: 1.5; --dk-component-icon-regular-stroke-width: 2; --dk-component-icon-bold-stroke-width: 2.5; } /* ── Sizes — fixed, on the scale primitives ─────────────────────────────── */ .dk-component-icon { /* Sizes are the PIXEL NUMBER, not a t-shirt. Figma has always called these 12 and 24, so the kit now says the same thing and there is no translation step between a design and its markup. It also means a new rung slots in without renaming its neighbours, which is what "extra-extra-large" would have cost. Every value is an existing scale primitive; nothing new was invented. */ --dk-component-icon-12-size: var(--dk-primitive-scale-3); --dk-component-icon-14-size: var(--dk-primitive-scale-3-5); --dk-component-icon-16-size: var(--dk-primitive-scale-4); --dk-component-icon-20-size: var(--dk-primitive-scale-5); --dk-component-icon-24-size: var(--dk-primitive-scale-6); --dk-component-icon-28-size: var(--dk-primitive-scale-7); --dk-component-icon-32-size: var(--dk-primitive-scale-8); --dk-component-icon-40-size: var(--dk-primitive-scale-10); --dk-component-icon-48-size: var(--dk-primitive-scale-12); } /* ── Colours — the Mapped icon family, same names as the text collections ── */ .dk-component-icon { --dk-component-icon-default-color: var(--dk-icon-default-body); --dk-component-icon-inverse-color: var(--dk-icon-inverse-default); --dk-component-icon-white-color: var(--dk-icon-base-white); --dk-component-icon-black-color: var(--dk-icon-base-black); --dk-component-icon-primary-color: var(--dk-icon-primary-default); --dk-component-icon-success-color: var(--dk-icon-success-default); --dk-component-icon-error-color: var(--dk-icon-error-default); --dk-component-icon-warning-color: var(--dk-icon-warning-default); --dk-component-icon-information-color: var(--dk-icon-information-default); --dk-component-icon-neutral-default-color: var(--dk-icon-neutral-default); --dk-component-icon-neutral-subtle-color: var(--dk-icon-neutral-subtle); --dk-component-icon-disabled-color: var(--dk-icon-disabled-default); } /* ══════════════════════════════════════ drift-kit:layer components/logo/tokens.css ══════════════════════════════════════ */ /* ============================================================================ Logo — component token collection (--dk-component-logo-*) ---------------------------------------------------------------------------- The CL marks, LogoSymbol and LogoSymbolText, as one component with a lockup switch. Every path is one of two ROLES, which is how CL painted them: secondary (CL logoPath1, the dark letterforms) and primary (CL logoPath2, the brand colour). A mode says which mapped logo token each role takes. ============================================================================ */ .dk-component-logo { --dk-component-logo-default-secondary: var(--dk-logo-secondary-default); --dk-component-logo-default-primary: var(--dk-logo-primary-default); --dk-component-logo-reverse-secondary: var(--dk-logo-tertiary-default); --dk-component-logo-reverse-primary: var(--dk-logo-primary-default); --dk-component-logo-neutral-secondary: var(--dk-logo-neutral-subtle); --dk-component-logo-neutral-primary: var(--dk-logo-neutral-default); /* Heights for data-size. The width follows the vector's own aspect ratio; with no size the logo fills its container's width, which is CL's only behaviour. */ --dk-component-logo-small-height: var(--dk-primitive-scale-6); --dk-component-logo-medium-height: var(--dk-primitive-scale-8); --dk-component-logo-large-height: var(--dk-primitive-scale-12); --dk-component-logo-xlarge-height: var(--dk-primitive-scale-16); } /* ═══════════════════════════ drift-kit:layer components/loading-spinner/tokens.css ═══════════════════════════ */ /* ============================================================================ Loading spinner — component token collection (--dk-component-loading-spinner-*) ---------------------------------------------------------------------------- CL's LoadingSpinner: the brand symbol inside a sweeping arc. Values are CL's. Durations use the motion tier where CL's number matches one exactly and a component token otherwise; kit/reduced-motion.css zeroes the component ones, except the spin, which is the only sign that work is happening. ============================================================================ */ .dk-component-loading-spinner { --dk-component-loading-spinner-color: var(--dk-border-primary-default); /* Grayscale, for a spinner that should not draw the eye: a table loading, a panel refreshing. The glyph's own neutral, so it reads as a mark. */ --dk-component-loading-spinner-neutral-color: var(--dk-icon-neutral-default); /* THE RING ON ITS OWN (data-variant="ring"), for page and content loading and inside buttons. Each rung's diameter is the symbol variant's logo size at the same rung; xsmall is ring-only, sized for a button or a line of text, where the symbol would be too small to read. */ /* Where the arc's tail begins, as a share of the turn: transparent before it, fading up to the colour at the head. CL's 65% leaves a 35% tail, which suits the symbol's company; the ring on its own reads better with more tail, so it starts at 40% (a 60% sweep). */ /* THE MESSAGE under the spinner, "Loading reports": DriveIQ's LoadingScreen values, 16px medium neutral text 20px below. */ --dk-component-loading-spinner-message-gap: var(--dk-primitive-scale-5); --dk-component-loading-spinner-message-font-size: var(--dk-font-body-md-text-size); --dk-component-loading-spinner-message-line-height: var(--dk-font-body-md-line-height); --dk-component-loading-spinner-message-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-loading-spinner-message-color: var(--dk-text-neutral-default); --dk-component-loading-spinner-message-max-width: 400px; --dk-component-loading-spinner-tail-start: 65%; --dk-component-loading-spinner-ring-tail-start: 40%; --dk-component-loading-spinner-ring-xsmall-size: var(--dk-primitive-scale-4); --dk-component-loading-spinner-ring-xsmall-stroke: var(--dk-primitive-scale-0-5); --dk-component-loading-spinner-ring-small-size: var(--dk-primitive-scale-6); --dk-component-loading-spinner-ring-medium-size: var(--dk-primitive-scale-10); --dk-component-loading-spinner-ring-large-size: var(--dk-primitive-scale-16); --dk-component-loading-spinner-small-logo-size: var(--dk-primitive-scale-6); --dk-component-loading-spinner-small-gap: var(--dk-primitive-scale-2); --dk-component-loading-spinner-small-stroke: var(--dk-primitive-scale-0-75); --dk-component-loading-spinner-medium-logo-size: var(--dk-primitive-scale-10); --dk-component-loading-spinner-medium-gap: var(--dk-primitive-scale-3); --dk-component-loading-spinner-medium-stroke: var(--dk-primitive-scale-1); --dk-component-loading-spinner-large-logo-size: var(--dk-primitive-scale-16); --dk-component-loading-spinner-large-gap: var(--dk-primitive-scale-5); --dk-component-loading-spinner-large-stroke: var(--dk-primitive-scale-1-5); --dk-component-loading-spinner-spin-duration: 1s; /* The ring on its own turns faster: its longer tail makes each turn feel slower, and there is no mark in the middle to hold the eye. */ --dk-component-loading-spinner-ring-spin-duration: 0.8s; --dk-component-loading-spinner-enter-duration: var(--dk-motion-duration-slowest); --dk-component-loading-spinner-exit-duration: var(--dk-motion-duration-slowest); --dk-component-loading-spinner-exit-delay: 0.15s; --dk-component-loading-spinner-fade-duration: var(--dk-motion-duration-slow); --dk-component-loading-spinner-fade-delay: 0.3s; --dk-component-loading-spinner-enter-easing: cubic-bezier(0.39, 1.63, 0.55, 1.01); --dk-component-loading-spinner-exit-easing: cubic-bezier(0.45, -0.01, 0.61, -0.63); } /* ════════════════════════════════════ drift-kit:layer components/shield/tokens.css ════════════════════════════════════ */ /* ============================================================================ Shield — component token collection (--dk-component-shield-*) ---------------------------------------------------------------------------- CL IllustrationDynamicShield: a shield on a disc that scales in, shakes on error, and pulses a tick in on success. Values and curves are CL's. ============================================================================ */ .dk-component-shield { --dk-component-shield-size: var(--dk-spacing-32); --dk-component-shield-disc: var(--dk-surface-primary-subtle); --dk-component-shield-body: var(--dk-surface-primary-default); --dk-component-shield-glyph: var(--dk-surface-primary-subtle); --dk-component-shield-enter-duration: 0.65s; --dk-component-shield-enter-delay: 0.2s; --dk-component-shield-enter-easing: cubic-bezier(0.39, 1.63, 0.55, 1.01); --dk-component-shield-success-duration: 0.65s; --dk-component-shield-check-duration: 0.8s; --dk-component-shield-check-delay: 0.1s; --dk-component-shield-error-duration: 0.8s; --dk-component-shield-error-easing: cubic-bezier(0.36, 0.07, 0.19, 0.97); --dk-component-shield-glyph-fade: var(--dk-motion-duration-moderate); } /* ════════════════════════════ drift-kit:layer components/feedback-badge/tokens.css ════════════════════════════ */ /* ============================================================================ Feedback badge — component token collection (--dk-component-feedback-badge-*) ---------------------------------------------------------------------------- CL IllustrationFeedbackBadge: a status's subtle ring around its solid circle, a white glyph in the middle. Sizes are CL's. ============================================================================ */ .dk-component-feedback-badge { --dk-component-feedback-badge-small-size: var(--dk-primitive-scale-12); --dk-component-feedback-badge-small-padding: var(--dk-primitive-scale-1-5); --dk-component-feedback-badge-small-icon: var(--dk-primitive-scale-5); --dk-component-feedback-badge-medium-size: var(--dk-primitive-scale-18); --dk-component-feedback-badge-medium-padding: var(--dk-primitive-scale-2); --dk-component-feedback-badge-medium-icon: var(--dk-primitive-scale-7); --dk-component-feedback-badge-large-size: var(--dk-primitive-scale-24); --dk-component-feedback-badge-large-padding: var(--dk-primitive-scale-2-5); --dk-component-feedback-badge-large-icon: var(--dk-primitive-scale-10); --dk-component-feedback-badge-glyph: var(--dk-text-base-white); } /* ═════════════════════════════════════ drift-kit:layer components/alert/tokens.css ═════════════════════════════════════ */ /* ============================================================================ Alert — component token collection (--dk-component-alert-*) ---------------------------------------------------------------------------- An inline, persistent message in the page. The counterpart to Toast, which floats, animates and is built from JavaScript: the line between them is who creates it. An Alert is written into the markup, so it needs no factory and its only script is the dismiss button. FOUR LEGS, never :root. [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone] is what lets this collection apply inside an inverse panel, where the tokens it points at already resolve as the opposite theme. A collection on :root would be theme-blind and the component would render light colours on a dark panel. SLOTS, not a token per combination. Four variants times six statuses is twenty-four; enumerating them would be twenty-four blocks that all say the same thing. Instead each status fills four private slots with its own colours, and each variant decides which slots get painted. Six status rules plus four variant rules covers the same ground and cannot drift out of step. NO `enquiry` STATUS. It exists as a data-tone value but has no text, surface, border or icon tokens, so an enquiry alert would have rendered colourless. Checked, not assumed: the tone list looks like the status list and is not. */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 34 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-alert { /* Geometry, shared by every variant. */ --dk-component-alert-gap: var(--dk-spacing-3); /* EVEN ON ALL SIDES, one token rather than a block/inline pair (9.0.0, Julio). It was 12px vertical against 16px horizontal, which is the shape a control has, not a panel. Toast, the component Alert is the persistent half of, already sets a flat padding: var(--dk-spacing-4), so this is the pair agreeing rather than a number picked here. ONE token, not two holding the same value: two of them is an invitation to let them drift apart again, and even-on-all-sides is now a property of the component rather than a coincidence. Anything that genuinely needs to breathe on one edge does it with a longhand, the way the no-dismiss trailing rule in styles.css does. */ --dk-component-alert-padding: var(--dk-spacing-4); --dk-component-alert-radius: var(--dk-border-radius-150); --dk-component-alert-border-width: var(--dk-border-width-100); --dk-component-alert-icon-size: 20px; /* The dismiss button. Its GLYPH stays --dk-component-alert-icon-size; this padding is the ring of space around it that gives the hover background a body to be, the same way Icon button sizes its box larger than its glyph (24px glyph in a 40px box at large). Without it a background would hug the X exactly and read as a smudge rather than a target. The offset is extra space before the button, on top of the container's own gap: the words end and the control begins, and the container gap alone was too tight for a control that now paints on hover. It is the panel's own padding, so the dismiss stands as far from the words as the words stand from the edge, and it tracks the size axis with them. TRAILING-EXTRA IS NOT THE OFFSET, though both were --dk-spacing-2 when they arrived an hour apart. One is the gap before a control that is there; the other is the room an alert gets on its trailing edge when that control is NOT. Tying them looked tidy and was wrong: raising the gap before the button silently widened the padding of every alert that has no button. They are separate because they answer separate questions. */ --dk-component-alert-dismiss-padding: var(--dk-spacing-1); --dk-component-alert-dismiss-offset: var(--dk-component-alert-padding); --dk-component-alert-trailing-extra: var(--dk-spacing-2); --dk-component-alert-small-gap: var(--dk-spacing-2); --dk-component-alert-small-padding: var(--dk-spacing-3); --dk-component-alert-small-icon-size: 16px; --dk-component-alert-small-dismiss-padding: var(--dk-spacing-1); --dk-component-alert-small-dismiss-offset: var(--dk-component-alert-small-padding); --dk-component-alert-small-trailing-extra: var(--dk-spacing-1); /* Type. The Alert owns these rather than reaching into Body's collection: a component reading another component's tokens couples the two, and the solid variant needs a text colour Body cannot express. */ --dk-component-alert-title-font-size: var(--dk-font-scale-body-medium-text-size); --dk-component-alert-title-line-height: var(--dk-font-scale-body-medium-line-height); --dk-component-alert-title-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-alert-body-font-size: var(--dk-font-scale-body-small-text-size); --dk-component-alert-body-line-height: var(--dk-font-scale-body-small-line-height); --dk-component-alert-body-font-weight: var(--dk-primitive-font-weight-regular); --dk-component-alert-small-title-font-size: var(--dk-font-scale-body-small-text-size); --dk-component-alert-small-title-line-height: var(--dk-font-scale-body-small-line-height); /* Status text. ONE colour per status, shared by title and body: the two still read as title/body through size and weight (title is body-medium semi-bold, body is body-small regular), not through colour. OPT-IN SINCE 9.0.0, via data-text="tinted". 8.3.0 made these the default on subtle/outline/plain and 9.0.0 put that back: an alert's words are black-on-grey again unless asked otherwise, and the ICON carries the status either way (Julio, 14 Sep). Each status rule now writes one slot, --_alert-tint-text, and only the data-text="tinted" rule spends it into title and body; solid still overwrites both back to --_alert-on-solid afterward (see styles.css for the ordering that guarantees it). SIX, not five: neutral is a status like any other here, with its own text, description and icon colour, rather than the absence of one. Its colour is --dk-text-neutral-default, the same grey the untinted body already uses, so a tinted neutral alert reads as one deliberate colour across title and body rather than falling back to nothing. Named and shaped like every other component's per-status text family (--dk-component-body--color, --dk-component-heading--color, …) rather than inventing an alert-only pattern. Sourced from --dk-text--on-subtle (mapped/text.css), not a fixed rung off the raw --dk-color--NNN ramp: that Mapped token exists for exactly this reading — text sitting on that status's own subtle tint, which is what Alert's tint IS (--dk-surface--subtle is the same fill). Measured on that tint in light: primary 6.09, warning 5.30, error 5.23, information 5.60 — all clear AA (4.5:1). Measured in dark: primary 11.01, warning 11.35, error 7.88, information 7.94 — comfortably higher, because -on-subtle is not a fixed rung in both themes, it INVERTS (light -700, dark -200), the same way the subtle tint it sits on inverts (light -50, dark -900). A flat --dk-color--700 in both themes — tried and rejected — measured 1.79-2.77:1 in dark, because a dark rung sits almost on top of a dark tint rather than against it. tone.css has its own token for this same reading, --dk-text--on-subtle-level-0, with the same values — deliberately NOT what this reaches for. tone.css is the one mapped file the build's generated inverse mirror excludes ("the tone layer OWNS inverse and mirroring it would be circular"), so a component reading it directly resolves by the literal page theme and renders wrong the moment it is nested inside a data-tone="inverse" panel — found here first, 210 check:conformance INVERSE failures, fixed by sourcing from mapped/text.css (an ordinary both-theme file the mirror does cover) instead. Success is the exception: its OWN -700 measures 3.30 on its own subtle tint (and only 4.36 at -800), so it borrows primary's colour instead, the same precedent --dk-surface-success-solid already set by borrowing --dk-surface-primary-solid — mapped/success.css carries the alias, with the rest of that file's success-is-jade tokens. */ --dk-component-alert-neutral-color: var(--dk-text-neutral-default); --dk-component-alert-primary-color: var(--dk-text-primary-on-subtle); --dk-component-alert-warning-color: var(--dk-text-warning-on-subtle); --dk-component-alert-error-color: var(--dk-text-error-on-subtle); --dk-component-alert-information-color: var(--dk-text-information-on-subtle); --dk-component-alert-success-color: var(--dk-text-success-on-subtle); /* OWN TOKENS FOR WHAT WERE RAW PRIMITIVE READS. The Primitives collection is documented as "never consumed directly by components or pages", and six components already declare their own for exactly this (Body, Alert, Button, Heading, Eyebrow, Hero) while nine read the primitive inline. The ladder had no rung between them for weight and motion, so there was nowhere else to go; a component token is that rung, and is what the grammar already expects. */ --dk-component-alert-scrim-active-opacity: var(--dk-primitive-opacity-scrim-active); --dk-component-alert-scrim-hover-opacity: var(--dk-primitive-opacity-scrim-hover); } /* ═══════════════════════════════════ drift-kit:layer components/divider/tokens.css ═══════════════════════════════════ */ /* ============================================================================ Divider — component token collection (--dk-component-divider-*) ---------------------------------------------------------------------------- A rule between things. Added 5.2.0 because more than forty Forge prototypes were hand-rolling their own, most as `1px solid var(--dk-border-raised-default)` behind their own locally-invented token — the same rule, duplicated dozens of times instead of shared once. That is the usual shape of a missing component. Drawn as a BORDER, not a background — which is what a rule is, and what makes it inherit [data-border-width] with no special-casing. WIDTH is declared ONCE, not per [data-border-width] value. The per-attribute scoping the doctrine allows (see the design note) lets a component pick a different rung under a thick brand, but border-width's smallest non-zero rung at `thick` IS 4px — so scoping buys this component the ability to go up, never below the floor, and a hairline's only objection to `thick` is that 4px is a lot. The constraint is in the dynamic tier, not in the component's ability to choose. It still owns the token, so a brand can retarget it. COLOURS: `default` is --dk-border-raised-default — the hairline most of those forty-odd hand-rolled cases already reached for, and one of the families that already steps per surface level. There is no `subtle`: Material ships one divider colour, Polaris hands you the token scale, Spectrum makes the strong rule THICKER rather than darker, and only Fluent has a subtle — as one end of a four-way bracket. A rung below an already-quiet hairline is 5.0.0's 1.80:1 problem in a new hat. SCOPING — the four legs, never :root: var() substitutes where a property is DECLARED, and the [data-surface] / [data-tone] legs are what let the level and tone remaps reach this component. ============================================================================ */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 9 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. */ .dk-component-divider { --dk-component-divider-border-width: var(--dk-border-width-25); --dk-component-divider-default-color: var(--dk-border-hairline-current); --dk-component-divider-neutral-color: var(--dk-border-neutral-hairline); --dk-component-divider-primary-color: var(--dk-border-primary-hairline); --dk-component-divider-success-color: var(--dk-border-success-hairline); --dk-component-divider-error-color: var(--dk-border-error-hairline); --dk-component-divider-warning-color: var(--dk-border-warning-hairline); --dk-component-divider-information-color: var(--dk-border-information-hairline); } /* ═════════════════════════════════════ drift-kit:layer components/input/tokens.css ═════════════════════════════════════ */ /* ============================================================================ Input — component token collection (--dk-component-input-*) ---------------------------------------------------------------------------- FOUR LEGS, never :root. [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone] is what lets this collection apply inside an inverse panel, where the tokens it points at already resolve as the opposite theme. HEIGHTS COME FROM THE PRIMITIVE SCALE, NOT FROM BUTTON. Two of these rungs used to read --dk-component-button-*-padding-y directly, which made Input the only component in the kit reaching into another component's collection. It was wrong twice over. The tiers run primitive, alias, mapped, component; component-to-component is not one of them, so the reference skipped the ladder sideways. And it made Input's height an undeclared consequence of an edit to Button, in a file nobody editing Button would think to open. The INVARIANT behind it was real: a field and a button share rows constantly, a search box beside Search, a filter beside Apply, so at the rungs they share their heights have to agree. Measured 16 Sep, the field rendered 46px against Button's 38 / 44 / 56 and nothing lined up. What was wrong was enforcing that through a var() reference. An invariant between two components is a thing to ASSERT, not to implement by coupling: Forge's check:contract now measures a rendered Button and a rendered Input and fails if the shared rungs drift apart, which catches the same regression without either component reaching into the other. The rungs, all three from the scale, padding doubled plus the line box: small scale-2-5 (10px) x2 + body-xsm (18px) = 38 medium scale-3 (12px) x2 + body-sm (20px) = 44 large scale-3-5 (14px) x2 + input-md (24px) = 52 Small and medium match Button's first two rungs by construction. Large does not, and that is deliberate: Button's large is 56px, a 56px field was called too tall twice, and a large field usually stands alone on a login or a single-question step, so alignment buys it the least and height costs it the most. Extra large is absent. A 64px text field is not a thing. The field itself has no vertical padding; it centres its content inside min-height. So these calcs are how the NUMBER was chosen rather than a description of the box model, which is exactly why they are written out instead of left as 38px / 44px / 52px literals nobody could re-derive. */ /* SCOPED TO THE COMPONENT, not to every themed element on the page. This block used to carry four legs: [data-theme="light"], [data-theme="dark"], [data-surface] and [data-tone]. That put the whole collection on and on every panel, and custom properties inherit, so all 43 of these reached every element in the document. Across the kit that came to 2,958 custom properties on a bare , which is what makes the browser's inspector crawl. NOTHING IS LOST BY MOVING IT HERE. The four legs existed so the collection would re-resolve inside a tone, a level or an inverse panel. Declared on the component itself it resolves ON the component, against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. Proven on Button first: check:button, check:contract, check:conformance and check:contrast all pass unchanged, and the last two sweep every tone, level and theme. AND TO THREE ROOTS, NOT ONE. __field is here because a field used on its own still resolves, which this component promises a few lines down. Select is here because it reads this collection for its height, radius, gaps and slot icon sizes: that borrow predates this change and is the component-to-component reach the kit forbids, so it is now at least written down rather than working by accident. Search bar was the fourth until 14.0.0 folded it in here. The tier-correct fix is to promote those shared metrics to the mapped tier; until then this selector is the honest statement of who shares the collection. */ .dk-component-input, .dk-component-input__field, .dk-component-select, .dk-component-select__trigger { --dk-component-input-small-padding-y: var(--dk-primitive-scale-2-5); --dk-component-input-padding-y: var(--dk-primitive-scale-3); --dk-component-input-large-padding-y: var(--dk-primitive-scale-3-5); --dk-component-input-small-height: calc(var(--dk-component-input-small-padding-y) * 2 + var(--dk-font-body-xsm-line-height)); --dk-component-input-height: calc(var(--dk-component-input-padding-y) * 2 + var(--dk-font-body-sm-line-height)); --dk-component-input-large-height: calc(var(--dk-component-input-large-padding-y) * 2 + var(--dk-font-input-md-line-height)); /* THE LABEL'S OWN TYPOGRAPHY. It read --dk-component-eyebrow-* directly, which made Input the last component in the kit reaching into another's collection after Button's dependency was removed on 17 Sep for exactly the same reason: the tiers run primitive, alias, mapped, component, and component-to-component is not one of them. It also made a Karmo form label an undeclared consequence of editing Eyebrow. Four of the five resolve straight to alias tokens, so Input reads those instead. The fifth, the tracking, is a bare 0.08em literal inside Eyebrow, so it is written here as the same literal rather than borrowed through it. THE INVARIANT IS REAL AND MOVED RATHER THAN VANISHED: a form label and an Eyebrow should look identical, which is a thing to ASSERT. Forge's check:contract carries it as a look cohort, the same machinery that keeps Input and Select rendering one field. */ --dk-component-input-label-font-family: var(--dk-font-family-primary); --dk-component-input-label-font-size: var(--dk-font-overline-lg-text-size); --dk-component-input-label-line-height: var(--dk-font-overline-lg-line-height); --dk-component-input-label-letter-spacing: 0.08em; --dk-component-input-label-font-weight: var(--dk-primitive-font-weight-bold); /* DECISIONS, NOT REFERENCES, and the difference is what earns a token. Each of these was written inline against an alias: the field's border weight, the focus ring's thickness (three call sites), the action button's corner, and the caption and error type (two each). Pointing at a shared value is a reference; choosing how thick a field's focus ring is, is a decision, and a decision spread across three rules is one nobody can change in one place. The field's own corner already had --dk-component-input-radius for the same reason; its action button did not, for none. */ --dk-component-input-border-width: var(--dk-border-width-25); --dk-component-input-focus-ring-width: var(--dk-border-width-100); --dk-component-input-action-radius: var(--dk-border-radius-100); --dk-component-input-caption-font-size: var(--dk-font-body-sm-text-size); --dk-component-input-caption-line-height: var(--dk-font-body-sm-line-height); /* The control's resting weight. Body, Alert, Button, Heading, Eyebrow and Hero all declare their own; nine components read the primitive raw, which the Primitives collection documents as the one thing never to do. */ --dk-component-input-font-weight: var(--dk-primitive-font-weight-regular); --dk-component-input-padding-inline: var(--dk-spacing-2-5); /* LARGE GETS MORE AIR AT THE EDGE, 12 where the other rungs have 8. The box grows to 52 at this rung and the edge did not grow with it, so the glyph sat pinned to the border. The large rule hands this to the name every other rule reads, so a leading control's halves take the wider edge too. The gap beside the glyph stays the shared 6: a wider one was tried and read as the glyph drifting away from its text. */ --dk-component-input-large-padding-inline: var(--dk-spacing-3-5); /* ── data-raised: the field that is the first thing on the page ────────── This is the whole of what Search bar used to be. That component was documented in its own stylesheet as "a preset of Input, not a second field implementation", and by the end everything it shared resolved through --dk-component-input-*. What was left was an elevation, a roomier padding and a magnifier that tinted on focus, which is three declarations and not a component, so it is three declarations now. RAISED IS THE WORD BUTTON ALREADY USES for chrome that floats above the page, and this is the same idea: a field lifted off the surface because it is the thing you are meant to reach for first. It is a presence attribute rather than a variant because Input has no variant axis to join. IT IS THE SHADOW AND NOTHING ELSE. The bar's roomier inline padding came across with it at first and was cut on review: it made the attribute two unrelated changes wearing one name, and a field whose text starts further in than the field below it looks like a different component rather than the same one lifted. Padding belongs to the size rung, which is where every other field reads it from. It does NOT change the size either. Search bar's unmarked rung was large, which meant its default and Input's disagreed silently; a raised field that wants to be large now says data-size="large", which is the same look and one fewer thing to know. */ --dk-component-input-raised-shadow: var(--dk-shadow-lifted, 0 4px 10px 0 rgba(0, 0, 0, 0.08)); --dk-component-input-raised-shadow-hover: var(--dk-shadow-floating, 0 4px 20px 0 rgba(0, 0, 0, 0.08)); --dk-component-input-radius: var(--dk-border-radius-200); --dk-component-input-gap: var(--dk-spacing-1-5); /* Between an affix and the control. */ --dk-component-input-slot-gap: var(--dk-spacing-2); /* ── A LEADING CONTROL, which is a slot holding a control rather than a glyph ───────────────────────────────────────────────────────────────────────── A phone number is the case that asks for it: a country picker and a number, reading as one field and operated as two controls. So is a currency amount, a unit, a prefix. The kit's answer is a SHAPE rather than a component, because the only part that is genuinely design-system work is the seam — one border, one ring, one height, one type size across two controls — and that seam is the same whatever the control is choosing. The divider is what stops it being a lie: the two halves ARE two controls, they take focus separately and Tab moves between them, and a field with no line down it would promise one. */ --dk-component-input-leading-control-divider: var(--dk-border-field-default); --dk-component-input-leading-control-divider-width: var(--dk-border-width-25); /* Tighter than the field's own slot gap. A glyph and a chevron are one gesture — "this picks a thing" — and the field's 8px reads as two. */ --dk-component-input-leading-control-gap: var(--dk-spacing-1); /* Leading/trailing slot glyph. Was a bare 20px literal, justified on Alert declaring its icon size the same way, which is not a justification: it is two components making the same mistake. 20px and 16px are scale-5 and scale-4 exactly, so there was never anything to invent. It also STEPS AT SMALL now. It did not, so a small field put a 20px leading magnifier next to a 16px clear button, measured side by side and visibly mismatched. The action glyph below has always stepped; this simply agrees with it, and both land on the same two rungs. AND IT STEPS AT LARGE NOW TOO, which it did not. The box moves 44 to 52 and the type 16 to 18 between medium and large, and the glyph sat still at both, so a large field wore a medium field's icon. That is the same fault the paragraph above records fixing at the other end of the ramp, left in place at this end. 24px is scale-6, the rung after the one medium uses. */ /* THE LEADING GLYPH'S THREE COLOURS. It shared --dk-text-field-affix with a text affix like "$", which is right for a character that is part of the value and too loud for an icon that only decorates the field. At rest and under the pointer it reads the palette's quieter rungs; on focus it still takes the field's focus colour, which is the one moment it should speak. */ --dk-component-input-leading-icon-color: var(--dk-icon-field-subtle); --dk-component-input-leading-icon-color-hover: var(--dk-icon-field-subtle-hover); --dk-component-input-leading-icon-color-focus: var(--dk-border-field-focus); --dk-component-input-slot-icon-size: var(--dk-primitive-scale-5); --dk-component-input-small-slot-icon-size: var(--dk-primitive-scale-4); /* 20 at large, the same as medium, by request: 24 read heavy beside the type. The action glyph below moves with it, so the pair still matches. */ --dk-component-input-large-slot-icon-size: var(--dk-primitive-scale-5); /* IN-FIELD ACTION: the reveal toggle on a password, the clear button on a search. A hit target around a glyph, the way Alert's dismiss is a padding ring around its X, because a bare 20px glyph is a smudge to hit and gives a hover background nothing to fill. 28 around 20 at the default rung, 24 around 16 at small, which keeps the button inside a 38px field with room to spare. These read the scale primitives rather than a literal: the sizes land exactly on scale-7/6/5/4. 32 around 24 at large, for the reason the slot glyph above gained a large rung: the action had stepped at small and stopped there, so a large field would have put a 24px leading icon beside a 20px action glyph. The comment above records that exact mismatch being fixed at small, measured side by side; this is the same pair at the other end. scale-8/7/6/5/4 throughout. */ --dk-component-input-action-size: var(--dk-primitive-scale-7); --dk-component-input-action-glyph-size: var(--dk-primitive-scale-5); --dk-component-input-small-action-size: var(--dk-primitive-scale-6); --dk-component-input-small-action-glyph-size: var(--dk-primitive-scale-4); --dk-component-input-large-action-size: var(--dk-primitive-scale-8); --dk-component-input-large-action-glyph-size: var(--dk-primitive-scale-5); /* ERROR MESSAGE COLOUR, and deliberately NOT --dk-text-error-default. Measured 16 Sep against the light page: error-default is error-500 (#f05252) at 3.48:1, below AA for body text. That rung is the status FILL and GLYPH colour, not a reading colour — Alert's borders and icons resolve through it — so moving the palette to suit one message would ripple across every status in the kit. The on-subtle rung is the darker reading one (light error-700 #c81e1e, 5.74:1; dark error-200, well clear) and passes in both themes, so only light actually changes. Its name says "on the status's own tint" and this message sits on the page instead, so the name is a near fit, not an exact one: the mapped text family has no reading-grade error rung for the page background. Naming --dk-text--on-page across the five statuses is the clean fix, and this token is the single seam to repoint when that lands. mapped/success.css already borrows across families the same way. */ --dk-component-input-error-color: var(--dk-text-error-on-subtle); /* THREE RUNGS OF TYPE, one per size, 14 / 16 / 18. The first cut gave small its own size and left large sharing medium's, on the reasoning that large "only grows the box". That was an assertion, not a decision: the kit already ships an input type ramp (--dk-font-input-sm/md/lg = 16 / 18 / 20) and large was simply not using it, so a 56px field held 16px text and read as mostly empty padding. Large now takes the md rung. (The box was 56px when that was written and is 52px now, for the reasons in the header; the type was the part that was wrong either way.) lg (20px) is left for a display-sized field if one is ever wanted; 18px in a 52px box is the proportion a form actually needs. */ /* THE OBSCURED FONT, and it is a fix rather than a preference. A password field renders nothing but bullets, so its whole appearance is one glyph, U+2022, taken from whichever font wins. Measured 17 Sep in the real field at 16px: Inter draws it 5.00px tall and 46.0px wide across nine characters, system-ui (our first fallback) draws it 3.25px and 30.0px. Two thirds the height and a third narrower, for the same markup. That difference shows up as a FLICKER rather than a constant. The kit ships Inter with font-display: swap, so text paints in the fallback first, and Chrome does not re-lay-out a password field when the webfont arrives; the stale fallback metrics sit there until something forces a relayout, which focusing the field does. Reported from a real browser as dots that are tiny until you click in and normal afterwards. Pinning a locally installed font takes the download out of the path entirely, so there is no swap to miss and the dots are the same on first paint as on every later one. Menlo measures 4.75px against Inter's 5.00px, inside a quarter pixel of what the webfont was drawing, and a monospace face gives evenly spaced bullets, which is what a row of identical glyphs wants anyway. Consolas is the Windows equivalent and is UNVERIFIED here, this machine being macOS; the generic monospace keyword backstops both. No --dk-font-family-* token exists for monospace, and this does not mint one: a single component needing a local face for one glyph is not evidence of a kit-wide typeface decision. If a second component ever needs it, that is when it earns an alias-tier name. */ --dk-component-input-obscured-font-family: Menlo, Consolas, "Courier New", monospace; --dk-component-input-font-size: var(--dk-font-input-sm-text-size); --dk-component-input-line-height: var(--dk-font-input-sm-line-height); --dk-component-input-small-font-size: var(--dk-font-body-sm-text-size); --dk-component-input-small-line-height: var(--dk-font-body-sm-line-height); /* body-md, 16 on 24, for the large rung: 18 read too big for the box. The ramp has nothing between 16 and 18, so large now shares medium's type size and keeps its own 24px line box, which is what holds the box at 52. */ --dk-component-input-large-font-size: var(--dk-font-body-md-text-size); --dk-component-input-large-line-height: var(--dk-font-body-md-line-height); } /* ════════════════════════════════ drift-kit:layer components/code-input/tokens.css ════════════════════════════════ */ /* ============================================================================ Code input — component token collection (--dk-component-code-input-*) ---------------------------------------------------------------------------- SCOPED TO THE COMPONENT, not to :root and not to the four theme legs. The reasoning is Input's, measured there: custom properties inherit, so a collection declared on [data-theme] reaches every element in the document, and declared on the component it resolves against that element's own nearest theme, tone and level, which is the same answer arrived at more directly. IT DECLARES ITS OWN RUNGS RATHER THAN READING INPUT'S. Input's collection is declared on .dk-component-input, .dk-component-input__field, .dk-component-select and .dk-component-select__trigger, and nothing else resolves it; reading --dk-component-input-* from here would be the component-to-component reach the tiers forbid, and Input's own header spends two paragraphs on why that was wrong when it did it to Button. Where a value should agree with Input's, it is derived from the same primitive by the same arithmetic and written out. THE CELL IS NOT A FIELD RUNG. A text field's height is padding plus a line box, because its content is a line of prose. A code cell holds ONE character and is square, so its size is chosen as a size: 40 / 48 / 56, which is scale-10 / scale-12 / scale-14, the same 4px grid every other box here sits on. Six 48px cells and five 8px gaps come to 328px, inside the 340px column a verification step usually gets; past that the cells shrink and stay square, which is the one thing a fixed rung could not do. AND THE TYPE IS A RUNG LARGER THAN A FIELD'S. The kit ships an input ramp, --dk-font-input-sm/md/lg = 16 / 18 / 20, and Input leaves lg unused, noting it is "for a display-sized field if one is ever wanted". A code is read back character by character against a text message, which is that field. ============================================================================ */ .dk-component-code-input, .dk-component-code-input__field { /* The stack: label, field, caption, error. Input's gap by the same alias, so a code field and a text field in one form space their parts alike. */ --dk-component-code-input-gap: var(--dk-spacing-1-5); /* THE SQUARE, three rungs. See the header for why these are chosen sizes rather than padding arithmetic. */ --dk-component-code-input-cell-size: var(--dk-primitive-scale-12); --dk-component-code-input-small-cell-size: var(--dk-primitive-scale-10); --dk-component-code-input-large-cell-size: var(--dk-primitive-scale-14); /* Between cells, and the wider one between GROUPS. A grouped code reads as "123 456", so the group gap has to be clearly more than the cell gap or the grouping is a rumour: 16 against 8, one full step apart. */ --dk-component-code-input-cell-gap: var(--dk-spacing-2); --dk-component-code-input-group-gap: var(--dk-spacing-4); /* THE FALLBACK'S PADDING, and only the fallback's: once the cells are drawn the control has no padding at all, because it is a hit area rather than a box. Input's value by the same alias, so a scriptless code field and the text field above it start their text at the same place. */ --dk-component-code-input-padding-inline: var(--dk-spacing-2-5); --dk-component-code-input-radius: var(--dk-border-radius-200); --dk-component-code-input-border-width: var(--dk-border-width-25); --dk-component-code-input-focus-ring-width: var(--dk-border-width-100); /* THE CARET IS OURS TO DRAW. One real input carries the value, and it is rendered transparent so the cells can show what it holds, which takes the native caret with it. 2px because a 1px caret inside a 48px box reads as a rendering artefact rather than a cursor, and text-coloured because that is what a caret is: the ring already says which cell is live. ITS HEIGHT IS A PROPORTION OF THE TYPE, not the line box. It read the line height at first, which tied the cursor to a number chosen for the spacing between lines of text there is only ever one of here: at the large rung that is 36px in a 56px box, a cursor two thirds the height of the cell. 1.2em is the caret against the character it sits beside, and it follows the type up and down the ramp without another rung to keep in step. */ --dk-component-code-input-caret-width: var(--dk-border-width-50); --dk-component-code-input-caret-height: 1.2em; --dk-component-code-input-caret-color: var(--dk-text-field-default); /* A LITERAL, and the one in this file. The motion tier's durations are the transition rungs, 0.15s to 0.3s, and a caret blinking three times a second is a different thing than a colour easing. 1s is the platform's own rate, near enough. It is not switched off by zeroing this: a blink held at 0% would be a caret that never appears, so kit/reduced-motion.css stops the animation instead and leaves the caret solid. */ --dk-component-code-input-caret-blink-duration: 1s; /* THE PLACEHOLDER, which is a zero in every empty box rather than a word. A field's placeholder is a sample of what goes in it, and what goes in this one is one character per box, so the sample is one character per box. The glyph is a token rather than another attribute: the attribute is the decision to show a placeholder at all, and a product that wants a dash or a dot is changing what it looks like, not whether there is one. Anything valid in CSS content goes here, quotes included. */ --dk-component-code-input-placeholder-char: "0"; --dk-component-code-input-placeholder-color: var(--dk-text-field-placeholder); /* THE MASK'S DOT, drawn rather than typeset: see styles.css for why the character is never written into a masked cell. 10px is scale-2-5, which reads as a dot against an 18px digit rather than as a full stop. */ --dk-component-code-input-mask-dot-size: var(--dk-primitive-scale-2-5); /* THE VALUE'S TYPE. Semibold rather than Input's regular: a code is checked character by character against another screen, and the digits are the whole content of the control rather than a line of prose inside it. AND IT READS THE DISPLAY RAMP, NOT THE INPUT ONE, which is the one place this component parts company with the field it otherwise follows. The input ramp is built for a line of prose inside a box and tops out at 20px, so a code cell took 16 / 18 / 20 in boxes of 40 / 48 / 56: measured at 0.40, 0.375 and 0.357 of its own box, a small character in a large empty square, and the ramp had nothing left to climb at the top. A code's characters ARE the content, one per box, read back against another screen, so they take the rung the display ramp has for exactly that. 20 / 24 / 28 holds them at half the box at every size, and the sizes step by four the way the boxes do. h6, h5 and h3 rather than h6, h5, h4: h4 is 26px, which would have made the top of the ramp step by two while everything below it stepped by four. */ --dk-component-code-input-font-family: var(--dk-font-family-primary); --dk-component-code-input-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-code-input-font-size: var(--dk-font-heading-h5-text-size); --dk-component-code-input-line-height: var(--dk-font-heading-h5-line-height); --dk-component-code-input-small-font-size: var(--dk-font-heading-h6-text-size); --dk-component-code-input-small-line-height: var(--dk-font-heading-h6-line-height); --dk-component-code-input-large-font-size: var(--dk-font-heading-h3-text-size); --dk-component-code-input-large-line-height: var(--dk-font-heading-h3-line-height); /* THE LABEL AND THE MESSAGES, Input's decisions re-made rather than borrowed, for the reason in the header. Each line lands on the same alias Input's does, so a form mixing the two reads as one form; Forge's check:contract carries the they-must-match invariant as a look cohort, which is how the kit asserts an agreement instead of implementing it with a var(). */ --dk-component-code-input-label-font-family: var(--dk-font-family-primary); --dk-component-code-input-label-font-size: var(--dk-font-overline-lg-text-size); --dk-component-code-input-label-line-height: var(--dk-font-overline-lg-line-height); --dk-component-code-input-label-letter-spacing: 0.08em; --dk-component-code-input-label-font-weight: var(--dk-primitive-font-weight-bold); --dk-component-code-input-caption-font-size: var(--dk-font-body-sm-text-size); --dk-component-code-input-caption-line-height: var(--dk-font-body-sm-line-height); /* Input's measurement, and the same near-fit name: error-default is the status FILL and GLYPH rung and measures 3.48:1 on a light page, below AA for text; on-subtle is the reading rung and passes in both themes. See components/input/tokens.css for the full note and the seam to repoint when a --dk-text--on-page family lands. */ --dk-component-code-input-error-color: var(--dk-text-error-on-subtle); } /* ══════════════════════════════════ drift-kit:layer components/textarea/tokens.css ══════════════════════════════════ */ /* ============================================================================ Text area: component token collection (--dk-component-textarea-*) ---------------------------------------------------------------------------- THE SAME FIELD AS INPUT, BY CONSTRUCTION. Every colour here is the mapped field palette Input reads (tokens/mapped/field.css), not Input's own tokens: components do not reach into each other, and the palette is the shared thing. The contract gate holds the two to one look. SIZES ARE INPUT'S RUNGS. Type, inline padding and block padding match, so a one-row text area lines up with an input beside it and a form reads as one family. ============================================================================ */ .dk-component-textarea { --dk-component-textarea-gap: var(--dk-spacing-1-5); --dk-component-textarea-count-gap: var(--dk-spacing-3); --dk-component-textarea-label-font-family: var(--dk-font-family-primary); --dk-component-textarea-label-font-size: var(--dk-font-overline-lg-text-size); --dk-component-textarea-label-line-height: var(--dk-font-overline-lg-line-height); --dk-component-textarea-label-letter-spacing: 0.08em; --dk-component-textarea-label-font-weight: var(--dk-primitive-font-weight-bold); --dk-component-textarea-font-family: var(--dk-font-family-primary); --dk-component-textarea-font-weight: var(--dk-primitive-font-weight-regular); --dk-component-textarea-small-font-size: var(--dk-font-body-sm-text-size); --dk-component-textarea-small-line-height: var(--dk-font-body-sm-line-height); --dk-component-textarea-font-size: var(--dk-font-input-sm-text-size); --dk-component-textarea-line-height: var(--dk-font-input-sm-line-height); --dk-component-textarea-large-font-size: var(--dk-font-body-md-text-size); --dk-component-textarea-large-line-height: var(--dk-font-body-md-line-height); /* ONE ROW IS EXACTLY AN INPUT'S HEIGHT. Input's height is its padding doubled plus a line box that is not the one its text sits on (medium: 12 + 20 + 12 = 44 around a 22px line), so borrowing its padding made a one-row text area 46px. The block padding here is solved from Input's height formula instead: (height - this rung's line - the two borders) / 2, for 38 / 44 / 52 border to border, as Input measures (border-box). */ --dk-component-textarea-small-height: calc(var(--dk-primitive-scale-2-5) * 2 + var(--dk-font-body-xsm-line-height)); --dk-component-textarea-height: calc(var(--dk-primitive-scale-3) * 2 + var(--dk-font-body-sm-line-height)); --dk-component-textarea-large-height: calc(var(--dk-primitive-scale-3-5) * 2 + var(--dk-font-input-md-line-height)); --dk-component-textarea-small-padding-block: calc((var(--dk-component-textarea-small-height) - var(--dk-font-body-sm-line-height) - 2 * var(--dk-border-width-25)) / 2); --dk-component-textarea-padding-block: calc((var(--dk-component-textarea-height) - var(--dk-font-input-sm-line-height) - 2 * var(--dk-border-width-25)) / 2); --dk-component-textarea-large-padding-block: calc((var(--dk-component-textarea-large-height) - var(--dk-font-body-md-line-height) - 2 * var(--dk-border-width-25)) / 2); --dk-component-textarea-padding-inline: var(--dk-spacing-2-5); --dk-component-textarea-large-padding-inline: var(--dk-spacing-3-5); --dk-component-textarea-radius: var(--dk-border-radius-200); --dk-component-textarea-border-width: var(--dk-border-width-25); --dk-component-textarea-focus-ring-width: var(--dk-border-width-100); --dk-component-textarea-caption-font-size: var(--dk-font-body-sm-text-size); --dk-component-textarea-caption-line-height: var(--dk-font-body-sm-line-height); --dk-component-textarea-caption-color: var(--dk-text-neutral-default); --dk-component-textarea-error-color: var(--dk-text-error-on-subtle); /* The counter: quiet until it matters. Warning from 90% of the limit, the error colour once a soft limit is passed. The "on subtle" text rungs, not warning-default: that orange measured 2.33:1 as text on a light page. */ --dk-component-textarea-count-color: var(--dk-text-neutral-default); --dk-component-textarea-count-warning-color: var(--dk-text-warning-on-subtle); --dk-component-textarea-count-over-color: var(--dk-text-error-on-subtle); } /* ═══════════════════════════════════ drift-kit:layer components/stepper/tokens.css ═══════════════════════════════════ */ /* ============================================================================ Stepper: component token collection (--dk-component-stepper-*) ---------------------------------------------------------------------------- ONE STEPPER, THREE LOOKS (1 Oct). The component library shipped four React components for one idea (a text row, icon circles, numbered circles with descriptions, vertical cards). Here it is one structure, an ordered list in a named nav, and the look is an attribute: numbered (default), dots, segments; horizontal or vertical; labels below or beside. A STEP HAS FOUR LOOKS: complete (solid primary, a check), current (the primary ring), upcoming (a neutral outline) and error (the error family, an alert glyph). Error is its own attribute rather than a fourth state, so the current step can be the one in error and still say both. ============================================================================ */ .dk-component-stepper { /* ── Sizes: the indicator, and the type that goes with it ── */ --dk-component-stepper-small-indicator-size: var(--dk-primitive-scale-6); --dk-component-stepper-indicator-size: var(--dk-primitive-scale-8); --dk-component-stepper-large-indicator-size: var(--dk-primitive-scale-10); --dk-component-stepper-small-number-font-size: var(--dk-font-body-xsm-text-size); --dk-component-stepper-number-font-size: var(--dk-font-body-sm-text-size); --dk-component-stepper-large-number-font-size: var(--dk-font-body-md-text-size); --dk-component-stepper-small-label-font-size: var(--dk-font-body-sm-text-size); --dk-component-stepper-small-label-line-height: var(--dk-font-body-sm-line-height); --dk-component-stepper-label-font-size: var(--dk-font-body-sm-text-size); --dk-component-stepper-label-line-height: var(--dk-font-body-sm-line-height); --dk-component-stepper-large-label-font-size: var(--dk-font-body-md-text-size); --dk-component-stepper-large-label-line-height: var(--dk-font-body-md-line-height); --dk-component-stepper-description-font-size: var(--dk-font-body-xsm-text-size); --dk-component-stepper-description-line-height: var(--dk-font-body-xsm-line-height); --dk-component-stepper-font-family: var(--dk-font-family-primary); --dk-component-stepper-number-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-stepper-label-font-weight: var(--dk-primitive-font-weight-medium); --dk-component-stepper-label-font-weight-current: var(--dk-primitive-font-weight-semi-bold); --dk-component-stepper-icon-size: 55%; --dk-component-stepper-indicator-border-width: var(--dk-border-width-50); /* ── Spacing ── */ --dk-component-stepper-gap: var(--dk-spacing-2); --dk-component-stepper-text-gap: var(--dk-spacing-0-5); --dk-component-stepper-connector-thickness: var(--dk-border-width-50); --dk-component-stepper-connector-gap: var(--dk-spacing-2); --dk-component-stepper-vertical-step-gap: var(--dk-spacing-6); --dk-component-stepper-content-gap: var(--dk-spacing-3); --dk-component-stepper-target-radius: var(--dk-border-radius-200); --dk-component-stepper-target-padding: var(--dk-spacing-1); /* ── Complete: solid primary, the check on colour ── */ --dk-component-stepper-complete-surface: var(--dk-surface-primary-default); --dk-component-stepper-complete-surface-hover: var(--dk-surface-primary-hover); --dk-component-stepper-complete-surface-active: var(--dk-surface-primary-active); --dk-component-stepper-complete-icon: var(--dk-icon-primary-on-color); /* ── Current: the primary ring ── */ --dk-component-stepper-current-surface: var(--dk-surface-primary-subtle); --dk-component-stepper-current-border: var(--dk-border-primary-default); --dk-component-stepper-current-text: var(--dk-text-primary-on-subtle); /* ── Upcoming: a neutral outline on the surface it sits on ── */ --dk-component-stepper-upcoming-surface: var(--dk-surface-current); --dk-component-stepper-upcoming-border: var(--dk-border-field-default); --dk-component-stepper-upcoming-text: var(--dk-text-neutral-default); /* ── Error ── */ --dk-component-stepper-error-surface: var(--dk-surface-error-subtle); --dk-component-stepper-error-border: var(--dk-border-error-default); --dk-component-stepper-error-text: var(--dk-text-error-on-subtle); /* ── Labels ── */ --dk-component-stepper-label-color: var(--dk-text-default); --dk-component-stepper-label-color-upcoming: var(--dk-text-neutral-default); --dk-component-stepper-label-color-hover: var(--dk-text-primary-on-subtle); --dk-component-stepper-description-color: var(--dk-text-neutral-default); --dk-component-stepper-optional-color: var(--dk-text-neutral-default); --dk-component-stepper-focus-ring: var(--dk-border-field-focus-ring); --dk-component-stepper-focus-ring-width: var(--dk-border-width-100); /* ── The connector: a neutral track that fills primary as a step completes ── */ --dk-component-stepper-connector-track: var(--dk-border-field-default); --dk-component-stepper-connector-fill: var(--dk-border-primary-default); --dk-component-stepper-fill-duration: var(--dk-motion-duration-slow); --dk-component-stepper-easing: var(--dk-motion-easing-standard); --dk-component-stepper-state-duration: var(--dk-motion-duration-fast); /* ── Dots and segments ── */ --dk-component-stepper-dot-size: var(--dk-primitive-scale-3); --dk-component-stepper-segment-thickness: var(--dk-primitive-scale-1-5); --dk-component-stepper-segment-gap: var(--dk-spacing-1-5); --dk-component-stepper-segment-radius: var(--dk-border-radius-round-fixed); /* Below this width a horizontal stepper keeps its indicators and swaps the labels for one line, "Step 2 of 4: Payment". It is the stepper's own width, measured by behaviour.js, not the viewport's. */ --dk-component-stepper-narrow: 30rem; } /* ═════════════════════════════════════ drift-kit:layer components/table/tokens.css ═════════════════════════════════════ */ /* ============================================================================ Table — component token collection (--dk-component-table-*) ---------------------------------------------------------------------------- SCOPED TO THE COMPONENT, for the reason Input's collection records: custom properties inherit, so a collection declared on the theme legs reaches every element in the document, and declared on the component it resolves against that element's own nearest theme, tone and level instead. THE ROWS ARE A FIELD'S ARITHMETIC, not a number picked to look right. A table sits in the same forms and panels a field does, and a row that agrees with nothing around it is what makes a page look assembled rather than designed: padding doubled plus the line box it holds, which is how Input derives 38 / 44 / 52 and how this derives 36 / 44 / 56. small scale-2 (8px) x2 + body-sm (20px) = 36 medium scale-3 (12px) x2 + body-sm (20px) = 44 large scale-4 (16px) x2 + body-md (24px) = 56 THE TEXT IS A STEP SMALLER THAN BODY COPY (1 Oct): 14px, 16 at large. A table carries a lot, and at 16 (20 at large) little of it fit across. The rungs did not move; the padding took the difference. Medium lands on Input's own 44 exactly, which is the rung that matters: a table and a field share a page constantly, and a row the same height as the filter above it reads as one system. Small goes below Input's 38 because a dense table is a real ask and a 38px row is not dense; large goes above its 52 because the reason to reach for it is a row holding two lines or an avatar, and 52 does not hold either comfortably. THE RULE BETWEEN ROWS IS NOT IN THAT NUMBER. It is a real border rather than an inset shadow, so it survives forced-colors mode and it prints, and a border takes its own pixel: a medium row measures 45 in the box model, 44 of which is the rung. The head shares the body's line box since the text went to 14px, so it sits on the same rung as a row; the fill and the weight are what make it the heading. ============================================================================ */ .dk-component-table, .dk-component-table__scroll, .dk-component-table__ghost { /* ── The rungs ── */ --dk-component-table-small-padding-y: var(--dk-primitive-scale-2); --dk-component-table-padding-y: var(--dk-primitive-scale-3); --dk-component-table-large-padding-y: var(--dk-primitive-scale-4); /* Between a cell's text and the column beside it. One value at every rung: the row grows vertically with its size and a column does not get wider because the rows got taller. */ --dk-component-table-padding-inline: var(--dk-spacing-3); /* ── The head ── A FILL AND A HAIRLINE, not a heavy rule. --dk-surface-nested-default is one rung DOWN from whatever surface the table is sitting on, at every level and in both themes, so a header inside a card separates from the card the same way it separates from the page. The hand-rolled tables this component replaces all reached for a grey literal here and all picked a different one. THE TYPE IS SENTENCE CASE, and that is a decision rather than an omission. The kit's uppercase overline is the FORM LABEL treatment, the thing that names a control you are about to fill in; a column header names the column you are reading down. Uppercase costs legibility in the one place a table cannot afford it, a row of six or seven short headings scanned sideways, and it buys a distinction this component gets for free from the fill. */ --dk-component-table-head-surface: var(--dk-surface-nested-default); /* The header row's top corners (1 Oct): the fill is the head's shape, so it reads as one rounded bar rather than a strip cut off square. */ --dk-component-table-head-radius: var(--dk-border-radius-200); --dk-component-table-head-font-size: var(--dk-font-body-sm-text-size); --dk-component-table-head-line-height: var(--dk-font-body-sm-line-height); --dk-component-table-head-font-weight: var(--dk-primitive-font-weight-semi-bold); --dk-component-table-head-color: var(--dk-text-neutral-default); /* ── The body ── */ --dk-component-table-font-family: var(--dk-font-family-primary); --dk-component-table-font-size: var(--dk-font-body-sm-text-size); --dk-component-table-line-height: var(--dk-font-body-sm-line-height); --dk-component-table-large-font-size: var(--dk-font-body-md-text-size); --dk-component-table-large-line-height: var(--dk-font-body-md-line-height); --dk-component-table-font-weight: var(--dk-primitive-font-weight-regular); /* Default, not neutral (1 Oct): body text is what the table is for, and it read as secondary beside the head it should outrank. */ --dk-component-table-color: var(--dk-text-default); /* THE LINE BETWEEN ROWS FOLLOWS THE SURFACE. --dk-border-hairline-current is the plain hairline on the page and the tone's own hairline inside a tinted panel, which is what Divider's default reads and for the same reason: a table in an error card should not be ruled in neutral grey. */ --dk-component-table-rule: var(--dk-border-hairline-current); --dk-component-table-rule-width: var(--dk-border-width-25); /* ── Row states ── Hover and press are the NESTED ladder's own next rungs, so a hovered row steps the same distance from its surface as a hovered field does from its own. Selected is a primary tint rather than a darker neutral, because selection is a decision the reader made and the other two are feedback about the pointer. */ --dk-component-table-row-hover: var(--dk-surface-nested-hover); --dk-component-table-row-active: var(--dk-surface-nested-active); --dk-component-table-row-selected: var(--dk-surface-primary-subtle); --dk-component-table-row-selected-hover: var(--dk-surface-primary-subtle-hover); /* Rows ease between those states (1 Oct) rather than snapping. Fast, on the snappy standard curve, and motion tokens, so reduced motion makes it instant. A sticky cell's fill is inherit, so it eases with its row. */ --dk-component-table-row-duration: var(--dk-motion-duration-fast); --dk-component-table-row-easing: var(--dk-motion-easing-standard); /* THE ZEBRA STRIPE IS FAINTER THAN THE HEAD (1 Oct). It was the head's own fill, so every other row read as one more header. It is now half of that fill mixed into the surface the table sits on: an opaque mix of two tokens, so it follows the level, tone and theme, and sits between the page and the head at each of them. */ --dk-component-table-zebra-mix: 50%; --dk-component-table-zebra: color-mix(in srgb, var(--dk-component-table-head-surface) var(--dk-component-table-zebra-mix), var(--dk-surface-current)); /* ── The sort button ── A column header that sorts is a real