French Palette

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const FR_SERIES = [4  'var(--flat-fr-spray)', // Spray5  'var(--flat-fr-squash-blossom)', // Squash Blossom6  'var(--flat-fr-aurora-green)', // Aurora Green7  'var(--flat-fr-melon-melody)', // Melon Melody8  'var(--flat-fr-flat-flesh)', // Flat Flesh9  'var(--flat-fr-paradise-green)', // Paradise Green10]1112<Chart series={data} colors={FR_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Flat Flesh takes #000000 at 14.79:1.16<span style={{17  background: 'var(--flat-fr-flat-flesh)',18  color: '#000000',19}}>20  Flat Flesh21</span>

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* French Palette — Léa Poisson, Flat UI Colors 2 */
:root {
  --flat-fr-flat-flesh: #fad390;
  --flat-fr-melon-melody: #f8c291;
  --flat-fr-livid: #6a89cc;
  --flat-fr-spray: #82ccdd;
  --flat-fr-paradise-green: #b8e994;
  --flat-fr-squash-blossom: #f6b93b;
  --flat-fr-mandarin-red: #e55039;
  --flat-fr-azraq-blue: #4a69bd;
  --flat-fr-dupain: #60a3bc;
  --flat-fr-aurora-green: #78e08f;
  --flat-fr-iceland-poppy: #fa983a;
  --flat-fr-tomato-red: #eb2f06;
  --flat-fr-yu-gu-ng-l-n-blue: #1e3799;
  --flat-fr-good-samaritan: #3c6382;
  --flat-fr-waterfall: #38ada9;
  --flat-fr-carrot-orange: #e58e26;
  --flat-fr-jalapeno-red: #b71540;
  --flat-fr-dark-sapphire: #0c2461;
  --flat-fr-forest-blues: #0a3d62;
  --flat-fr-reef-encounter: #079992;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* French Palette — a dark theme derived from the twenty.
   Léa Poisson, 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 */
  --fr-page: #081842;                     /* derived */
  --fr-surface: #0a1e51;                  /* derived */
  --fr-elevated: #0c2461;                 /* taken */
  --fr-hover: #1d336c;                    /* derived */
  --fr-border: #2c3d69;                   /* derived */
  --fr-border-strong: #5f6b8b;            /* derived */

  /* text */
  --fr-text: #f6f5f4;                     /* 15.8:1 on the page */
  --fr-text-secondary: #acb1bd;           /* 8.0:1 on the page */
  --fr-text-tertiary: #8b92a4;            /* 5.5:1 on the page */
  --fr-text-muted: #7b8298;               /* 4.5:1 on the page */
  --fr-text-disabled: #525d79;            /* 2.6:1 on the page */

  /* semantic */
  --fr-primary: #fad390;                  /* taken */
  --fr-primary-hover: #f6b93b;            /* taken */
  --fr-primary-active: #bea06d;           /* derived */
  --fr-primary-on: #081842;               /* 12.1:1 on the fill */
  --fr-success: #78e08f;                  /* taken */
  --fr-success-hover: #6ac57e;            /* derived */
  --fr-success-active: #5baa6d;           /* derived */
  --fr-success-on: #081842;               /* 10.5:1 on the fill */
  --fr-info: #60a3bc;                     /* taken */
  --fr-info-hover: #3c6382;               /* taken */
  --fr-info-active: #497c8f;              /* derived */
  --fr-info-on: #081842;                  /* 6.1:1 on the fill */
  --fr-warning: #f8c291;                  /* taken */
  --fr-warning-hover: #fa983a;            /* taken */
  --fr-warning-active: #bc936e;           /* derived */
  --fr-warning-on: #081842;               /* 10.8:1 on the fill */
  --fr-danger: #e55039;                   /* taken */
  --fr-danger-hover: #ca4632;             /* derived */
  --fr-danger-active: #ae3d2b;            /* derived */
  --fr-danger-on: #081842;                /* 4.5:1 on the fill */
  --fr-accent: #6a89cc;                   /* taken */
  --fr-accent-hover: #4a69bd;             /* taken */
  --fr-accent-active: #51689b;            /* derived */
  --fr-accent-on: #081842;                /* 5.0:1 on the fill */

  /* categorical — never status */
  --fr-chart-1: #e55039;                  /* Mandarin Red */
  --fr-chart-2: #f8c291;                  /* Melon Melody */
  --fr-chart-3: #e58e26;                  /* Carrot Orange */
  --fr-chart-4: #f6b93b;                  /* Squash Blossom */
  --fr-chart-5: #78e08f;                  /* Aurora Green */
  --fr-chart-6: #38ada9;                  /* Waterfall */
  --fr-chart-7: #60a3bc;                  /* Dupain */
  --fr-chart-8: #4a69bd;                  /* Azraq Blue */

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