Mercurial

view design_system/src/styles/tokens.css @ 270:358dd5950985

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
sync production config on every deploy Always install the ignored repository .config into /etc/mrjunejune before promoting the new bundle. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 13:16:47 -0700
parents 60a876c4587a
children
line wrap: on
line source

@import url("./reference.css");
@import url("./semantic.css");
@import url("./density.css");

:root {
  color-scheme: light;

  /* Warm primitive ramps: restrained enough for large surfaces, distinct
     enough for data and status work. */
  --zen-color-neutral-50: #fffdf7;
  --zen-color-neutral-100: #f7f3e8;
  --zen-color-neutral-200: #ece5d5;
  --zen-color-neutral-300: #ddd2bd;
  --zen-color-neutral-400: #b9aa90;
  --zen-color-neutral-500: #8e8069;
  --zen-color-neutral-600: #6f6351;
  --zen-color-neutral-700: #564c3e;
  --zen-color-neutral-800: #3b352d;
  --zen-color-neutral-900: #27241f;
  --zen-color-neutral-950: #171613;

  --zen-color-red-50: #fff8f5;
  --zen-color-red-100: #f9e9e2;
  --zen-color-red-200: #efd1c5;
  --zen-color-red-300: #dda995;
  --zen-color-red-400: #c77c63;
  --zen-color-red-500: #a9553f;
  --zen-color-red-600: #8f4132;
  --zen-color-red-700: #71342a;
  --zen-color-red-800: #5b2e27;
  --zen-color-red-900: #4b2924;
  --zen-color-red-950: #291411;

  --zen-color-orange-50: #fff8ed;
  --zen-color-orange-100: #fcebd1;
  --zen-color-orange-200: #f7d4a1;
  --zen-color-orange-300: #efb670;
  --zen-color-orange-400: #de8d3f;
  --zen-color-orange-500: #c76a26;
  --zen-color-orange-600: #a94f1c;
  --zen-color-orange-700: #873d1b;
  --zen-color-orange-800: #6d331c;
  --zen-color-orange-900: #5b2d1d;
  --zen-color-orange-950: #32160c;

  --zen-color-amber-50: #fffbea;
  --zen-color-amber-100: #f6efc6;
  --zen-color-amber-200: #ebde8b;
  --zen-color-amber-300: #d9c455;
  --zen-color-amber-400: #bfa332;
  --zen-color-amber-500: #9e8124;
  --zen-color-amber-600: #80651e;
  --zen-color-amber-700: #664e1d;
  --zen-color-amber-800: #55411e;
  --zen-color-amber-900: #49391e;
  --zen-color-amber-950: #291e0c;

  --zen-color-green-50: #f6f8ed;
  --zen-color-green-100: #e9edd5;
  --zen-color-green-200: #d0d9aa;
  --zen-color-green-300: #afbf79;
  --zen-color-green-400: #8da053;
  --zen-color-green-500: #6d8139;
  --zen-color-green-600: #55672d;
  --zen-color-green-700: #424f27;
  --zen-color-green-800: #374124;
  --zen-color-green-900: #303923;
  --zen-color-green-950: #181f10;

  --zen-color-teal-50: #eff9f5;
  --zen-color-teal-100: #dcefe8;
  --zen-color-teal-200: #b9ded1;
  --zen-color-teal-300: #8cc6b4;
  --zen-color-teal-400: #5fa793;
  --zen-color-teal-500: #438878;
  --zen-color-teal-600: #356d61;
  --zen-color-teal-700: #2d574f;
  --zen-color-teal-800: #28463f;
  --zen-color-teal-900: #243b36;
  --zen-color-teal-950: #10221f;

  --zen-color-blue-50: #f3f6fa;
  --zen-color-blue-100: #e4eaf2;
  --zen-color-blue-200: #cbd7e6;
  --zen-color-blue-300: #a6bad2;
  --zen-color-blue-400: #7b99b8;
  --zen-color-blue-500: #5c7d9d;
  --zen-color-blue-600: #48647f;
  --zen-color-blue-700: #3c5167;
  --zen-color-blue-800: #354655;
  --zen-color-blue-900: #303c49;
  --zen-color-blue-950: #1c252e;

  --zen-color-violet-50: #f8f5f8;
  --zen-color-violet-100: #eee7ee;
  --zen-color-violet-200: #dfd1df;
  --zen-color-violet-300: #c9b1c8;
  --zen-color-violet-400: #ad8dad;
  --zen-color-violet-500: #916f91;
  --zen-color-violet-600: #755774;
  --zen-color-violet-700: #5e465d;
  --zen-color-violet-800: #4e3b4d;
  --zen-color-violet-900: #423541;
  --zen-color-violet-950: #281d27;

  --zen-color-rose-50: #fff6f6;
  --zen-color-rose-100: #f8e7e7;
  --zen-color-rose-200: #efcfd0;
  --zen-color-rose-300: #dfa9ad;
  --zen-color-rose-400: #ca7d84;
  --zen-color-rose-500: #ae5b65;
  --zen-color-rose-600: #924550;
  --zen-color-rose-700: #763943;
  --zen-color-rose-800: #63333b;
  --zen-color-rose-900: #552f36;
  --zen-color-rose-950: #30171c;

  --zen-color-brown-50: #faf7f2;
  --zen-color-brown-100: #efe8dd;
  --zen-color-brown-200: #ddcebb;
  --zen-color-brown-300: #c5ac91;
  --zen-color-brown-400: #a8896c;
  --zen-color-brown-500: #8d6d52;
  --zen-color-brown-600: #725641;
  --zen-color-brown-700: #5b4436;
  --zen-color-brown-800: #4d3a31;
  --zen-color-brown-900: #42332c;
  --zen-color-brown-950: #251b17;

  /* Material names are stable aliases for the palette's visual character. */
  --zen-color-paper: var(--zen-color-neutral-50);
  --zen-color-washi: var(--zen-color-neutral-100);
  --zen-color-linen: var(--zen-color-neutral-200);
  --zen-color-sumi: var(--zen-color-neutral-950);
  --zen-color-brick: var(--zen-color-red-600);
  --zen-color-persimmon: var(--zen-color-orange-500);
  --zen-color-ochre: var(--zen-color-amber-500);
  --zen-color-moss: var(--zen-color-green-600);
  --zen-color-patina: var(--zen-color-teal-600);
  --zen-color-indigo: var(--zen-color-blue-700);
  --zen-color-plum: var(--zen-color-violet-700);
  --zen-color-clay: var(--zen-color-rose-500);
  --zen-color-wood: var(--zen-color-brown-600);

  --zen-color-canvas: #f7f3e8;
  --zen-color-surface: #fffdf6;
  --zen-color-surface-raised: #ffffff;
  --zen-color-text: #171a21;
  --zen-color-text-muted: #5f6470;
  --zen-color-border: #272b35;
  --zen-color-accent: #ffb000;
  --zen-color-accent-hover: #ffca4a;
  --zen-color-on-accent: #171a21;
  --zen-color-info: #2764d7;
  --zen-color-on-info: #ffffff;
  --zen-color-success: #18794e;
  --zen-color-on-success: #ffffff;
  --zen-color-warning: #9a5b00;
  --zen-color-on-warning: #ffffff;
  --zen-color-danger: #c62f3e;
  --zen-color-on-danger: #ffffff;
  --zen-color-focus: #7c3aed;
  --zen-color-surface-muted: var(--zen-color-neutral-100);
  --zen-color-surface-sunken: var(--zen-color-neutral-200);
  --zen-color-surface-overlay: rgba(23, 22, 19, 0.56);
  --zen-color-text-subtle: var(--zen-color-neutral-600);
  --zen-color-text-inverse: var(--zen-color-neutral-50);
  --zen-color-border-muted: var(--zen-color-neutral-300);
  --zen-color-border-strong: var(--zen-color-neutral-800);
  --zen-color-accent-muted: var(--zen-color-amber-100);
  --zen-color-info-muted: var(--zen-color-blue-100);
  --zen-color-success-muted: var(--zen-color-green-100);
  --zen-color-warning-muted: var(--zen-color-orange-100);
  --zen-color-danger-muted: var(--zen-color-red-100);
  --zen-color-disabled: var(--zen-color-neutral-300);
  --zen-color-selection: var(--zen-color-amber-200);
  --zen-color-link-decoration: var(--zen-color-clay);
  --zen-color-code-surface: #111318;
  --zen-color-code-text: #f4f4f5;
  --zen-color-gridline: rgba(127, 127, 127, 0.08);

  --zen-color-data-1: var(--zen-color-indigo);
  --zen-color-data-2: var(--zen-color-persimmon);
  --zen-color-data-3: var(--zen-color-moss);
  --zen-color-data-4: var(--zen-color-plum);
  --zen-color-data-5: var(--zen-color-ochre);
  --zen-color-data-6: var(--zen-color-patina);
  --zen-color-data-7: var(--zen-color-brick);
  --zen-color-data-8: var(--zen-color-wood);
  --zen-color-data-9: var(--zen-color-clay);
  --zen-color-data-10: var(--zen-color-blue-400);

  /* Compatibility aliases. New code consumes --zenbu-sys-* tokens. */
  --zen-font-sans: var(--zenbu-sys-font-family-ui);
  --zen-font-mono: var(--zenbu-sys-font-family-code);
  --zen-font-size-xs: var(--zenbu-sys-font-size-xs);
  --zen-font-size-sm: var(--zenbu-sys-font-size-sm);
  --zen-font-size-md: var(--zenbu-sys-font-size-md);
  --zen-font-size-lg: var(--zenbu-sys-font-size-lg);
  --zen-font-size-xl: var(--zenbu-sys-font-size-xl);
  --zen-font-size-2xl: var(--zenbu-sys-font-size-2xl);
  --zen-font-size-3xl: var(--zenbu-sys-type-page-title-size);
  --zen-line-height-xs: var(--zenbu-sys-line-height-xs);
  --zen-line-height-sm: var(--zenbu-sys-line-height-sm);
  --zen-line-height-md: var(--zenbu-sys-line-height-md);
  --zen-line-height-lg: var(--zenbu-sys-line-height-lg);
  --zen-line-height-xl: var(--zenbu-sys-line-height-xl);
  --zen-line-height: var(--zenbu-sys-type-body-line-height);
  --zen-font-weight-regular: var(--zenbu-sys-font-weight-regular);
  --zen-font-weight-medium: var(--zenbu-sys-font-weight-medium);
  --zen-font-weight-strong: var(--zenbu-sys-font-weight-strong);
  --zen-font-weight-display: var(--zenbu-sys-font-weight-display);

  --zen-space-1: var(--zenbu-ref-space-1);
  --zen-space-2: var(--zenbu-ref-space-2);
  --zen-space-3: var(--zenbu-ref-space-3);
  --zen-space-4: var(--zenbu-ref-space-4);
  --zen-space-5: var(--zenbu-ref-space-6);
  --zen-space-6: var(--zenbu-ref-space-8);
  --zen-space-7: var(--zenbu-ref-space-12);

  --zen-padding-xs: var(--zenbu-sys-padding-xs);
  --zen-padding-sm: var(--zenbu-sys-padding-sm);
  --zen-padding-md: var(--zenbu-sys-padding-md);
  --zen-padding-lg: var(--zenbu-sys-padding-lg);
  --zen-padding-xl: var(--zenbu-sys-padding-xl);

  --zen-control-height-xs: var(--zenbu-sys-control-height-xs);
  --zen-control-height-sm: var(--zenbu-sys-control-height-sm);
  --zen-control-height-md: var(--zenbu-sys-control-height-md);
  --zen-control-height-lg: var(--zenbu-sys-control-height-lg);
  --zen-control-height-xl: var(--zenbu-sys-control-height-xl);
  --zen-control-padding-block-xs: var(--zenbu-sys-control-padding-block-xs);
  --zen-control-padding-block-sm: var(--zenbu-sys-control-padding-block-sm);
  --zen-control-padding-block-md: var(--zenbu-sys-control-padding-block-md);
  --zen-control-padding-block-lg: var(--zenbu-sys-control-padding-block-lg);
  --zen-control-padding-block-xl: var(--zenbu-sys-control-padding-block-xl);
  --zen-control-padding-inline-xs: var(--zenbu-sys-control-padding-inline-xs);
  --zen-control-padding-inline-sm: var(--zenbu-sys-control-padding-inline-sm);
  --zen-control-padding-inline-md: var(--zenbu-sys-control-padding-inline-md);
  --zen-control-padding-inline-lg: var(--zenbu-sys-control-padding-inline-lg);
  --zen-control-padding-inline-xl: var(--zenbu-sys-control-padding-inline-xl);
  --zen-control-gap-xs: var(--zenbu-sys-control-gap-xs);
  --zen-control-gap-sm: var(--zenbu-sys-control-gap-sm);
  --zen-control-gap-md: var(--zenbu-sys-control-gap-md);
  --zen-control-gap-lg: var(--zenbu-sys-control-gap-lg);
  --zen-control-gap-xl: var(--zenbu-sys-control-gap-xl);
  --zen-control-line-height-xs: var(--zenbu-sys-control-line-height-xs);
  --zen-control-line-height-sm: var(--zenbu-sys-control-line-height-sm);
  --zen-control-line-height-md: var(--zenbu-sys-control-line-height-md);
  --zen-control-line-height-lg: var(--zenbu-sys-control-line-height-lg);
  --zen-control-line-height-xl: var(--zenbu-sys-control-line-height-xl);
  --zen-icon-size-xs: var(--zenbu-sys-icon-size-xs);
  --zen-icon-size-sm: var(--zenbu-sys-icon-size-sm);
  --zen-icon-size-md: var(--zenbu-sys-icon-size-md);
  --zen-icon-size-lg: var(--zenbu-sys-icon-size-lg);
  --zen-icon-size-xl: var(--zenbu-sys-icon-size-xl);

  --zen-radius-sm: 0.35rem;
  --zen-radius-md: 0.7rem;
  --zen-radius-lg: 1rem;
  --zen-border-width: 2px;
  --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16);
  --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16);
  --zen-shadow-hover: 5px 5px 0 rgba(23, 26, 33, 0.18);
  --zen-shadow-lifted: 10px 10px 0 rgba(23, 26, 33, 0.18);
  --zen-motion-fast: 120ms;
  --zen-content-width: 76rem;
}

:root[data-zen-theme="dark"] {
  color-scheme: dark;
  --zen-color-canvas: #101218;
  --zen-color-surface: #181b23;
  --zen-color-surface-raised: #222631;
  --zen-color-text: #f5f1e8;
  --zen-color-text-muted: #b9bdc7;
  --zen-color-border: #f5f1e8;
  --zen-color-accent: #ffc247;
  --zen-color-accent-hover: #ffd77d;
  --zen-color-on-accent: #171a21;
  --zen-color-info: #8ab4ff;
  --zen-color-on-info: #171a21;
  --zen-color-success: #65d6a3;
  --zen-color-on-success: #171a21;
  --zen-color-warning: #ffc66d;
  --zen-color-on-warning: #171a21;
  --zen-color-danger: #ff8792;
  --zen-color-on-danger: #171a21;
  --zen-color-focus: #c4a5ff;
  --zen-color-surface-muted: var(--zen-color-neutral-800);
  --zen-color-surface-sunken: var(--zen-color-neutral-900);
  --zen-color-surface-overlay: rgba(0, 0, 0, 0.68);
  --zen-color-text-subtle: var(--zen-color-neutral-400);
  --zen-color-text-inverse: var(--zen-color-neutral-950);
  --zen-color-border-muted: var(--zen-color-neutral-700);
  --zen-color-border-strong: var(--zen-color-neutral-200);
  --zen-color-accent-muted: var(--zen-color-amber-800);
  --zen-color-info-muted: var(--zen-color-blue-800);
  --zen-color-success-muted: var(--zen-color-green-800);
  --zen-color-warning-muted: var(--zen-color-orange-800);
  --zen-color-danger-muted: var(--zen-color-red-800);
  --zen-color-disabled: var(--zen-color-neutral-700);
  --zen-color-selection: var(--zen-color-amber-800);
  --zen-color-code-surface: #0b0d12;
  --zen-color-code-text: #f4f4f5;
  --zen-color-gridline: rgba(255, 255, 255, 0.06);
  --zen-color-data-1: var(--zen-color-blue-300);
  --zen-color-data-2: var(--zen-color-orange-300);
  --zen-color-data-3: var(--zen-color-green-300);
  --zen-color-data-4: var(--zen-color-violet-300);
  --zen-color-data-5: var(--zen-color-amber-300);
  --zen-color-data-6: var(--zen-color-teal-300);
  --zen-color-data-7: var(--zen-color-red-300);
  --zen-color-data-8: var(--zen-color-brown-300);
  --zen-color-data-9: var(--zen-color-rose-300);
  --zen-color-data-10: var(--zen-color-blue-200);
  --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
  --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
  --zen-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.55);
  --zen-shadow-lifted: 10px 10px 0 rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-zen-theme]) {
    color-scheme: dark;
    --zen-color-canvas: #101218;
    --zen-color-surface: #181b23;
    --zen-color-surface-raised: #222631;
    --zen-color-text: #f5f1e8;
    --zen-color-text-muted: #b9bdc7;
    --zen-color-border: #f5f1e8;
    --zen-color-accent: #ffc247;
    --zen-color-accent-hover: #ffd77d;
    --zen-color-on-accent: #171a21;
    --zen-color-info: #8ab4ff;
    --zen-color-on-info: #171a21;
    --zen-color-success: #65d6a3;
    --zen-color-on-success: #171a21;
    --zen-color-warning: #ffc66d;
    --zen-color-on-warning: #171a21;
    --zen-color-danger: #ff8792;
    --zen-color-on-danger: #171a21;
    --zen-color-focus: #c4a5ff;
    --zen-color-surface-muted: var(--zen-color-neutral-800);
    --zen-color-surface-sunken: var(--zen-color-neutral-900);
    --zen-color-surface-overlay: rgba(0, 0, 0, 0.68);
    --zen-color-text-subtle: var(--zen-color-neutral-400);
    --zen-color-text-inverse: var(--zen-color-neutral-950);
    --zen-color-border-muted: var(--zen-color-neutral-700);
    --zen-color-border-strong: var(--zen-color-neutral-200);
    --zen-color-accent-muted: var(--zen-color-amber-800);
    --zen-color-info-muted: var(--zen-color-blue-800);
    --zen-color-success-muted: var(--zen-color-green-800);
    --zen-color-warning-muted: var(--zen-color-orange-800);
    --zen-color-danger-muted: var(--zen-color-red-800);
    --zen-color-disabled: var(--zen-color-neutral-700);
    --zen-color-selection: var(--zen-color-amber-800);
    --zen-color-code-surface: #0b0d12;
    --zen-color-code-text: #f4f4f5;
    --zen-color-gridline: rgba(255, 255, 255, 0.06);
    --zen-color-data-1: var(--zen-color-blue-300);
    --zen-color-data-2: var(--zen-color-orange-300);
    --zen-color-data-3: var(--zen-color-green-300);
    --zen-color-data-4: var(--zen-color-violet-300);
    --zen-color-data-5: var(--zen-color-amber-300);
    --zen-color-data-6: var(--zen-color-teal-300);
    --zen-color-data-7: var(--zen-color-red-300);
    --zen-color-data-8: var(--zen-color-brown-300);
    --zen-color-data-9: var(--zen-color-rose-300);
    --zen-color-data-10: var(--zen-color-blue-200);
    --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
    --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
    --zen-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.55);
    --zen-shadow-lifted: 10px 10px 0 rgba(0, 0, 0, 0.55);
  }
}