Theme builder

Surfaces, text and borders. Save it as its own file (my-theme.css) and link it after the kit's stylesheet. Started from Dark or Midnight? Link that theme's file before it, for the dark extras.

/* my-theme.css: link it after the kit's stylesheet. */
:root {
  --color-bg-base: #f2f5f8;
  --color-bg-surface: #f8fafb;
  --color-bg-raised: #ffffff;
  --color-bg-sunken: #ecf0f3;
  --color-bg-inverse: #2d2e39;
  --color-text-primary: #3a405f;
  --color-text-secondary: #545b6d;
  --color-text-muted: #5f6d81;
  --color-text-inverse: #ffffff;
  --color-border-subtle: #dde3e9;
  --color-border-strong: #6c7c93;
}

The brand colours, for every theme. Save it as my-brand.css and link it after the kit's stylesheet, in place of a product's brand file. Built from Light, it sets the light values; from Dark or Midnight, the dark ones. Run both and put the two blocks in one file.

/* my-brand.css, light values: link it after the kit's stylesheet. */
:root {
  --brand-primary-1: #7649df;
  --brand-primary-2: #5e2cdd;
  --brand-primary-3: #4c1dcd;
  --brand-primary-light-1: #f8f5ff;
  --brand-primary-light-2: #f2ebff;
  --brand-primary-light-3: #eadbff;
  --brand-primary-dark-1: #4f25b1;
  --brand-primary-dark-2: #421c9c;
  --brand-primary-dark-3: #361386;
}