Canadian Palette

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const CA_SERIES = [4  'var(--flat-ca-wild-caribbean-green)', // Wild Caribbean Green5  'var(--flat-ca-jade-dust)', // Jade Dust6  'var(--flat-ca-jigglypuff)', // Jigglypuff7  'var(--flat-ca-megaman)', // Megaman8  'var(--flat-ca-casandora-yellow)', // Casandora Yellow9  'var(--flat-ca-light-blue-ballerina)', // Light Blue Ballerina10]1112<Chart series={data} colors={CA_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Jigglypuff takes #000000 at 11.51:1.16<span style={{17  background: 'var(--flat-ca-jigglypuff)',18  color: '#000000',19}}>20  Jigglypuff21</span>

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* Canadian Palette — Dmitri Litvinov, Flat UI Colors 2 */
:root {
  --flat-ca-jigglypuff: #ff9ff3;
  --flat-ca-casandora-yellow: #feca57;
  --flat-ca-pastel-red: #ff6b6b;
  --flat-ca-megaman: #48dbfb;
  --flat-ca-wild-caribbean-green: #1dd1a1;
  --flat-ca-li-n-h-ng-lotus-pink: #f368e0;
  --flat-ca-double-dragon-skin: #ff9f43;
  --flat-ca-amour: #ee5253;
  --flat-ca-cyanite: #0abde3;
  --flat-ca-dark-mountain-meadow: #10ac84;
  --flat-ca-jade-dust: #00d2d3;
  --flat-ca-joust-blue: #54a0ff;
  --flat-ca-nasu-purple: #5f27cd;
  --flat-ca-light-blue-ballerina: #c8d6e5;
  --flat-ca-fuel-town: #576574;
  --flat-ca-aqua-velvet: #01a3a4;
  --flat-ca-bleu-de-france: #2e86de;
  --flat-ca-bluebell: #341f97;
  --flat-ca-storm-petrel: #8395a7;
  --flat-ca-imperial-primer: #222f3e;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* Canadian Palette — a dark theme derived from the twenty.
   Dmitri Litvinov, 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 */
  --ca-page: #17202a;                     /* derived */
  --ca-surface: #1d2734;                  /* derived */
  --ca-elevated: #222f3e;                 /* taken */
  --ca-hover: #313e4c;                    /* derived */
  --ca-border: #3a434e;                   /* derived */
  --ca-border-strong: #697078;            /* derived */

  /* text */
  --ca-text: #f4f5f6;                     /* 15.1:1 on the page */
  --ca-text-secondary: #b2b6b9;           /* 8.1:1 on the page */
  --ca-text-tertiary: #91969b;            /* 5.5:1 on the page */
  --ca-text-muted: #81878c;               /* 4.5:1 on the page */
  --ca-text-disabled: #5a6168;            /* 2.6:1 on the page */

  /* semantic */
  --ca-primary: #feca57;                  /* taken */
  --ca-primary-hover: #ff9f43;            /* taken */
  --ca-primary-active: #c19a42;           /* derived */
  --ca-primary-on: #17202a;               /* 10.8:1 on the fill */
  --ca-success: #1dd1a1;                  /* taken */
  --ca-success-hover: #10ac84;            /* taken */
  --ca-success-active: #169f7a;           /* derived */
  --ca-success-on: #17202a;               /* 8.4:1 on the fill */
  --ca-info: #54a0ff;                     /* taken */
  --ca-info-hover: #2e86de;               /* taken */
  --ca-info-active: #407ac2;              /* derived */
  --ca-info-on: #17202a;                  /* 6.1:1 on the fill */
  --ca-warning: #ff6b6b;                  /* taken */
  --ca-warning-hover: #ee5253;            /* taken */
  --ca-warning-active: #c25151;           /* derived */
  --ca-warning-on: #17202a;               /* 5.9:1 on the fill */
  --ca-danger: #f368e0;                   /* taken */
  --ca-danger-hover: #d65cc5;             /* derived */
  --ca-danger-active: #b94faa;            /* derived */
  --ca-danger-on: #17202a;                /* 6.2:1 on the fill */
  --ca-accent: #5f27cd;                   /* taken */
  --ca-accent-hover: #341f97;             /* taken */
  --ca-accent-active: #481e9c;            /* derived */
  --ca-accent-on: #ffffff;                /* 7.9:1 on the fill */

  /* categorical — never status */
  --ca-chart-1: #ff6b6b;                  /* Pastel Red */
  --ca-chart-2: #feca57;                  /* Casandora Yellow */
  --ca-chart-3: #10ac84;                  /* Dark Mountain Meadow */
  --ca-chart-4: #01a3a4;                  /* Aqua Velvet */
  --ca-chart-5: #48dbfb;                  /* Megaman */
  --ca-chart-6: #c8d6e5;                  /* Light Blue Ballerina */
  --ca-chart-7: #ff9ff3;                  /* Jigglypuff */
  --ca-chart-8: #ee5253;                  /* Amour */

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