Turkish Palette

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const TR_SERIES = [4  'var(--flat-tr-hammam-blue)', // Hammam Blue5  'var(--flat-tr-pretty-please)', // Pretty Please6  'var(--flat-tr-wintergreen)', // Wintergreen7  'var(--flat-tr-electric-blue)', // Electric Blue8  'var(--flat-tr-dorn-yellow)', // Dorn Yellow9  'var(--flat-tr-unmellow-yellow)', // Unmellow Yellow10]1112<Chart series={data} colors={TR_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Bright Lilac takes #000000 at 8.17:1.16<span style={{17  background: 'var(--flat-tr-bright-lilac)',18  color: '#000000',19}}>20  Bright Lilac21</span>

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* Turkish Palette — Tamer Köseli, Flat UI Colors 2 */
:root {
  --flat-tr-bright-lilac: #cd84f1;
  --flat-tr-pretty-please: #ffcccc;
  --flat-tr-light-red: #ff4d4d;
  --flat-tr-mandarin-sorbet: #ffaf40;
  --flat-tr-unmellow-yellow: #fffa65;
  --flat-tr-light-purple: #c56cf0;
  --flat-tr-young-salmon: #ffb8b8;
  --flat-tr-red-orange: #ff3838;
  --flat-tr-radiant-yellow: #ff9f1a;
  --flat-tr-dorn-yellow: #fff200;
  --flat-tr-wintergreen: #32ff7e;
  --flat-tr-electric-blue: #7efff5;
  --flat-tr-neon-blue: #18dcff;
  --flat-tr-light-slate-blue: #7d5fff;
  --flat-tr-shadowed-steel: #4b4b4b;
  --flat-tr-weird-green: #3ae374;
  --flat-tr-hammam-blue: #67e6dc;
  --flat-tr-spiro-disco-ball: #17c0eb;
  --flat-tr-light-indigo: #7158e2;
  --flat-tr-baltic-sea: #3d3d3d;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* Turkish Palette — a dark theme derived from the twenty.
   Tamer Köseli, 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 */
  --tr-page: #292929;                     /* derived */
  --tr-surface: #333333;                  /* derived */
  --tr-elevated: #3d3d3d;                 /* taken */
  --tr-hover: #4b4b4b;                    /* derived */
  --tr-border: #4e4e4e;                   /* derived */
  --tr-border-strong: #7c7c7c;            /* derived */

  /* text */
  --tr-text: #f5f5f5;                     /* 13.3:1 on the page */
  --tr-text-secondary: #c1c1c1;           /* 8.1:1 on the page */
  --tr-text-tertiary: #a0a0a0;            /* 5.6:1 on the page */
  --tr-text-muted: #909090;               /* 4.6:1 on the page */
  --tr-text-disabled: #686868;            /* 2.6:1 on the page */

  /* semantic */
  --tr-primary: #cd84f1;                  /* taken */
  --tr-primary-hover: #b474d4;            /* derived */
  --tr-primary-active: #9c64b7;           /* derived */
  --tr-primary-on: #292929;               /* 5.7:1 on the fill */
  --tr-success: #32ff7e;                  /* taken */
  --tr-success-hover: #3ae374;            /* taken */
  --tr-success-active: #26c260;           /* derived */
  --tr-success-on: #292929;               /* 10.9:1 on the fill */
  --tr-info: #18dcff;                     /* taken */
  --tr-info-hover: #17c0eb;               /* taken */
  --tr-info-active: #12a7c2;              /* derived */
  --tr-info-on: #292929;                  /* 8.8:1 on the fill */
  --tr-warning: #fffa65;                  /* taken */
  --tr-warning-hover: #e0dc59;            /* derived */
  --tr-warning-active: #c2be4d;           /* derived */
  --tr-warning-on: #292929;               /* 13.2:1 on the fill */
  --tr-danger: #ff4d4d;                   /* taken */
  --tr-danger-hover: #e04444;             /* derived */
  --tr-danger-active: #c23b3b;            /* derived */
  --tr-danger-on: #292929;                /* 4.4:1 on the fill */
  --tr-accent: #c56cf0;                   /* taken */
  --tr-accent-hover: #ad5fd3;             /* derived */
  --tr-accent-active: #9652b6;            /* derived */
  --tr-accent-on: #292929;                /* 4.7:1 on the fill */

  /* categorical — never status */
  --tr-chart-1: #ffcccc;                  /* Pretty Please */
  --tr-chart-2: #ffb8b8;                  /* Young Salmon */
  --tr-chart-3: #ffaf40;                  /* Mandarin Sorbet */
  --tr-chart-4: #fffa65;                  /* Unmellow Yellow */
  --tr-chart-5: #32ff7e;                  /* Wintergreen */
  --tr-chart-6: #7efff5;                  /* Electric Blue */
  --tr-chart-7: #7d5fff;                  /* Light Slate Blue */
  --tr-chart-8: #c56cf0;                  /* Light Purple */

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