Chinese Palette

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const CN_SERIES = [4  'var(--flat-cn-golden-sand)', // Golden Sand5  'var(--flat-cn-twinkle-blue)', // Twinkle Blue6  'var(--flat-cn-lime-soap)', // Lime Soap7  'var(--flat-cn-city-lights)', // City Lights8  'var(--flat-cn-anti-flash-white)', // Anti-Flash White9  'var(--flat-cn-white)', // White10]1112<Chart series={data} colors={CN_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Golden Sand takes #000000 at 13.40:1.16<span style={{17  background: 'var(--flat-cn-golden-sand)',18  color: '#000000',19}}>20  Golden Sand21</span>

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* Chinese Palette — Wenjun, Flat UI Colors 2 */
:root {
  --flat-cn-golden-sand: #eccc68;
  --flat-cn-coral: #ff7f50;
  --flat-cn-wild-watermelon: #ff6b81;
  --flat-cn-peace: #a4b0be;
  --flat-cn-grisaille: #57606f;
  --flat-cn-orange: #ffa502;
  --flat-cn-bruschetta-tomato: #ff6348;
  --flat-cn-watermelon: #ff4757;
  --flat-cn-bay-wharf: #747d8c;
  --flat-cn-prestige-blue: #2f3542;
  --flat-cn-lime-soap: #7bed9f;
  --flat-cn-french-sky-blue: #70a1ff;
  --flat-cn-saturated-sky: #5352ed;
  --flat-cn-white: #ffffff;
  --flat-cn-city-lights: #dfe4ea;
  --flat-cn-ufo-green: #2ed573;
  --flat-cn-clear-chill: #1e90ff;
  --flat-cn-bright-greek: #3742fa;
  --flat-cn-anti-flash-white: #f1f2f6;
  --flat-cn-twinkle-blue: #ced6e0;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* Chinese Palette — a dark theme derived from the twenty.
   Wenjun, Flat UI Colors 2. Values marked "taken" are the palette's own;
   everything else is computed from them by the rules on this page. */
:root {
  /* surfaces */
  --cn-page: #20242d;                     /* derived */
  --cn-surface: #272d37;                  /* derived */
  --cn-elevated: #2f3542;                 /* taken */
  --cn-hover: #3e434f;                    /* derived */
  --cn-border: #434850;                   /* derived */
  --cn-border-strong: #72757c;            /* derived */

  /* text */
  --cn-text: #f5f5f5;                     /* 14.3:1 on the page */
  --cn-text-secondary: #b9babd;           /* 8.0:1 on the page */
  --cn-text-tertiary: #989a9d;            /* 5.5:1 on the page */
  --cn-text-muted: #888b8f;               /* 4.5:1 on the page */
  --cn-text-disabled: #61646a;            /* 2.6:1 on the page */

  /* semantic */
  --cn-primary: #eccc68;                  /* taken */
  --cn-primary-hover: #ffa502;            /* taken */
  --cn-primary-active: #b39b4f;           /* derived */
  --cn-primary-on: #20242d;               /* 9.9:1 on the fill */
  --cn-success: #7bed9f;                  /* taken */
  --cn-success-hover: #2ed573;            /* taken */
  --cn-success-active: #5db479;           /* derived */
  --cn-success-on: #20242d;               /* 10.7:1 on the fill */
  --cn-info: #70a1ff;                     /* taken */
  --cn-info-hover: #1e90ff;               /* taken */
  --cn-info-active: #557ac2;              /* derived */
  --cn-info-on: #20242d;                  /* 6.1:1 on the fill */
  --cn-warning: #ff7f50;                  /* taken */
  --cn-warning-hover: #e07046;            /* derived */
  --cn-warning-active: #c2613d;           /* derived */
  --cn-warning-on: #20242d;               /* 6.2:1 on the fill */
  --cn-danger: #ff6b81;                   /* taken */
  --cn-danger-hover: #ff4757;             /* taken */
  --cn-danger-active: #c25162;            /* derived */
  --cn-danger-on: #20242d;                /* 5.7:1 on the fill */
  --cn-accent: #5352ed;                   /* taken */
  --cn-accent-hover: #4948d1;             /* derived */
  --cn-accent-active: #3f3eb4;            /* derived */
  --cn-accent-on: #ffffff;                /* 5.5:1 on the fill */

  /* categorical — never status */
  --cn-chart-1: #ff6348;                  /* Bruschetta Tomato */
  --cn-chart-2: #ffa502;                  /* Orange */
  --cn-chart-3: #eccc68;                  /* Golden Sand */
  --cn-chart-4: #2ed573;                  /* UFO Green */
  --cn-chart-5: #dfe4ea;                  /* City Lights */
  --cn-chart-6: #70a1ff;                  /* French Sky Blue */
  --cn-chart-7: #f1f2f6;                  /* Anti-Flash White */
  --cn-chart-8: #ff4757;                  /* Watermelon */

  /* elevation — black, never the brand hue */
  --cn-elevation-1: 0 1px 3px rgb(0 0 0 / 0.12);/* raised */
  --cn-elevation-2: 0 4px 6px rgb(0 0 0 / 0.16);/* hover */
  --cn-elevation-3: 0 10px 20px rgb(0 0 0 / 0.20);/* overlay */
  --cn-elevation-4: 0 16px 32px rgb(0 0 0 / 0.24);/* modal */
}