Swedish Palette

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const SE_SERIES = [4  'var(--flat-se-minty-green)', // Minty Green5  'var(--flat-se-n-renji-orange)', // Nârenji Orange6  'var(--flat-se-fresh-turquoise)', // Fresh Turquoise7  'var(--flat-se-vibrant-yellow)', // Vibrant Yellow8  'var(--flat-se-hint-of-elusive-blue)', // Hint of Elusive Blue9  'var(--flat-se-yriel-yellow)', // Yriel Yellow10]1112<Chart series={data} colors={SE_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Highlighter Pink takes #000000 at 6.30:1.16<span style={{17  background: 'var(--flat-se-highlighter-pink)',18  color: '#000000',19}}>20  Highlighter Pink21</span>

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* Swedish Palette — Jesper Dahlqvist, Flat UI Colors 2 */
:root {
  --flat-se-highlighter-pink: #ef5777;
  --flat-se-dark-periwinkle: #575fcf;
  --flat-se-megaman: #4bcffa;
  --flat-se-fresh-turquoise: #34e7e4;
  --flat-se-minty-green: #0be881;
  --flat-se-sizzling-red: #f53b57;
  --flat-se-free-speech-blue: #3c40c6;
  --flat-se-spiro-disco-ball: #0fbcf9;
  --flat-se-jade-dust: #00d8d6;
  --flat-se-green-teal: #05c46b;
  --flat-se-n-renji-orange: #ffc048;
  --flat-se-yriel-yellow: #ffdd59;
  --flat-se-sunset-orange: #ff5e57;
  --flat-se-hint-of-elusive-blue: #d2dae2;
  --flat-se-good-night: #485460;
  --flat-se-chrome-yellow: #ffa801;
  --flat-se-vibrant-yellow: #ffd32a;
  --flat-se-red-orange: #ff3f34;
  --flat-se-london-square: #808e9b;
  --flat-se-black-pearl: #1e272e;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* Swedish Palette — a dark theme derived from the twenty.
   Jesper Dahlqvist, 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 */
  --se-page: #141b1f;                     /* derived */
  --se-surface: #192127;                  /* derived */
  --se-elevated: #1e272e;                 /* taken */
  --se-hover: #2e363d;                    /* derived */
  --se-border: #373e43;                   /* derived */
  --se-border-strong: #656b6f;            /* derived */

  /* text */
  --se-text: #f4f5f6;                     /* 15.9:1 on the page */
  --se-text-secondary: #aeb0b2;           /* 8.0:1 on the page */
  --se-text-tertiary: #8e9294;            /* 5.5:1 on the page */
  --se-text-muted: #7e8385;               /* 4.5:1 on the page */
  --se-text-disabled: #575d60;            /* 2.6:1 on the page */

  /* semantic */
  --se-primary: #ef5777;                  /* taken */
  --se-primary-hover: #d24d69;            /* derived */
  --se-primary-active: #b6425a;           /* derived */
  --se-primary-on: #141b1f;               /* 5.2:1 on the fill */
  --se-success: #0be881;                  /* taken */
  --se-success-hover: #05c46b;            /* taken */
  --se-success-active: #08b062;           /* derived */
  --se-success-on: #141b1f;               /* 10.7:1 on the fill */
  --se-info: #4bcffa;                     /* taken */
  --se-info-hover: #42b6dc;               /* derived */
  --se-info-active: #399dbe;              /* derived */
  --se-info-on: #141b1f;                  /* 9.6:1 on the fill */
  --se-warning: #ffdd59;                  /* taken */
  --se-warning-hover: #ffa801;            /* taken */
  --se-warning-active: #c2a844;           /* derived */
  --se-warning-on: #141b1f;               /* 13.0:1 on the fill */
  --se-danger: #ff5e57;                   /* taken */
  --se-danger-hover: #f53b57;             /* taken */
  --se-danger-active: #c24742;            /* derived */
  --se-danger-on: #141b1f;                /* 5.8:1 on the fill */
  --se-accent: #575fcf;                   /* taken */
  --se-accent-hover: #3c40c6;             /* taken */
  --se-accent-active: #42489d;            /* derived */
  --se-accent-on: #ffffff;                /* 5.3:1 on the fill */

  /* categorical — never status */
  --se-chart-1: #ff5e57;                  /* Sunset Orange */
  --se-chart-2: #ffc048;                  /* Nârenji Orange */
  --se-chart-3: #ffd32a;                  /* Vibrant Yellow */
  --se-chart-4: #0be881;                  /* Minty Green */
  --se-chart-5: #00d8d6;                  /* Jade Dust */
  --se-chart-6: #0fbcf9;                  /* Spiro Disco Ball */
  --se-chart-7: #575fcf;                  /* Dark Periwinkle */
  --se-chart-8: #f53b57;                  /* Sizzling Red */

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