Dutch Palette

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const NL_SERIES = [4  'var(--flat-nl-radiant-yellow)', // Radiant Yellow5  'var(--flat-nl-blue-martina)', // Blue Martina6  'var(--flat-nl-android-green)', // Android Green7  'var(--flat-nl-lavender-rose)', // Lavender Rose8  'var(--flat-nl-sunflower)', // Sunflower9  'var(--flat-nl-energos)', // Energos10]1112<Chart series={data} colors={NL_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Sunflower takes #000000 at 13.07:1.16<span style={{17  background: 'var(--flat-nl-sunflower)',18  color: '#000000',19}}>20  Sunflower21</span>

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* Dutch Palette — Jeroen Van Eerden, Flat UI Colors 2 */
:root {
  --flat-nl-sunflower: #ffc312;
  --flat-nl-energos: #c4e538;
  --flat-nl-blue-martina: #12cbc4;
  --flat-nl-lavender-rose: #fda7df;
  --flat-nl-bara-red: #ed4c67;
  --flat-nl-radiant-yellow: #f79f1f;
  --flat-nl-android-green: #a3cb38;
  --flat-nl-mediterranean-sea: #1289a7;
  --flat-nl-lavender-tea: #d980fa;
  --flat-nl-very-berry: #b53471;
  --flat-nl-puffins-bill: #ee5a24;
  --flat-nl-pixelated-grass: #009432;
  --flat-nl-merchant-marine-blue: #0652dd;
  --flat-nl-forgotten-purple: #9980fa;
  --flat-nl-hollyhock: #833471;
  --flat-nl-red-pigment: #ea2027;
  --flat-nl-turkish-aqua: #006266;
  --flat-nl-20000-leagues-under-the-sea: #1b1464;
  --flat-nl-circumorbital-ring: #5758bb;
  --flat-nl-magenta-purple: #6f1e51;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* Dutch Palette — a dark theme derived from the twenty.
   Jeroen Van Eerden, 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 */
  --nl-page: #120e44;                     /* derived */
  --nl-surface: #171154;                  /* derived */
  --nl-elevated: #1b1464;                 /* taken */
  --nl-hover: #2b246f;                    /* derived */
  --nl-border: #39346c;                   /* derived */
  --nl-border-strong: #67638e;            /* derived */

  /* text */
  --nl-text: #f6f4f5;                     /* 16.4:1 on the page */
  --nl-text-secondary: #aeacbd;           /* 8.1:1 on the page */
  --nl-text-tertiary: #8f8ca5;            /* 5.5:1 on the page */
  --nl-text-muted: #807d99;               /* 4.5:1 on the page */
  --nl-text-disabled: #5a567c;            /* 2.6:1 on the page */

  /* semantic */
  --nl-primary: #ffc312;                  /* taken */
  --nl-primary-hover: #f79f1f;            /* taken */
  --nl-primary-active: #c2940e;           /* derived */
  --nl-primary-on: #120e44;               /* 11.1:1 on the fill */
  --nl-success: #009432;                  /* taken */
  --nl-success-hover: #00822c;            /* derived */
  --nl-success-active: #007026;           /* derived */
  --nl-success-on: #120e44;               /* 4.5:1 on the fill */
  --nl-info: #1289a7;                     /* taken */
  --nl-info-hover: #006266;               /* taken */
  --nl-info-active: #0e687f;              /* derived */
  --nl-info-on: #120e44;                  /* 4.4:1 on the fill */
  --nl-warning: #c4e538;                  /* taken */
  --nl-warning-hover: #a3cb38;            /* taken */
  --nl-warning-active: #95ae2b;           /* derived */
  --nl-warning-on: #120e44;               /* 12.5:1 on the fill */
  --nl-danger: #ee5a24;                   /* taken */
  --nl-danger-hover: #d14f20;             /* derived */
  --nl-danger-active: #b5441b;            /* derived */
  --nl-danger-on: #120e44;                /* 5.2:1 on the fill */
  --nl-accent: #d980fa;                   /* taken */
  --nl-accent-hover: #bf71dc;             /* derived */
  --nl-accent-active: #a561be;            /* derived */
  --nl-accent-on: #120e44;                /* 7.2:1 on the fill */

  /* categorical — never status */
  --nl-chart-1: #ee5a24;                  /* Puffins Bill */
  --nl-chart-2: #ffc312;                  /* Sunflower */
  --nl-chart-3: #a3cb38;                  /* Android Green */
  --nl-chart-4: #12cbc4;                  /* Blue Martina */
  --nl-chart-5: #5758bb;                  /* Circumorbital Ring */
  --nl-chart-6: #d980fa;                  /* Lavender Tea */
  --nl-chart-7: #b53471;                  /* Very Berry */
  --nl-chart-8: #ea2027;                  /* Red Pigment */

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