_colors.scss

Farbdateien

abstracts/_colors.scss

In der abstracts/_colors.scss sind alle Farbdefinitionen hinterlegt. Zuerst als “private members”, erkennbar am Bindestrich zwischen $und clr. Private members sind lokale Variable und können nur in der jeweiligen Datei verwendet werden.

$-clr-white: hsl(0 0% 100%);
$-clr-gray-50: hsl(0 0% 98%);
$-clr-gray-100: hsl(0 0% 96%);
 ...
$-clr-gray-900: hsl(0 0% 13%);
$-clr-black: hsl(0 0% 0%);

Farben anlegen

1. Corporate Design Private Members definieren

Wir definieren zuerst die Farben für das Corporate Design als private members:

// CORPORATE DESIGN PRIVATE MEMBERS
$-clr-stahlblau: hsl(207 44% 49%);
$-clr-feuerziegel: hsl(0 68% 42%);
$-clr-goldrute: hsl(43 74% 49%);

Wir möchten diese Farben folgendermaßen verwenden:

als custom properties,
als utility classes und
als scss variables

2. CD private members in die $default-map eintragen

Custom properties und utility classes können wir mit @each automatisch erzeugen lassen. Wir müssen dafür nur einmal die Farben in eine $map eintragen. In der $default map sind standardmäßig alle neutralen Farbtöne drinnen, ebenso primary und accent, die vom Theme überschrieben werden können.
Wir fügen die corporate design private members hinzu, zur Abgrenzung von den neutralen und den standardmäßig vorhandenen Farbtönen verwenden wir das Präfix cd (für corporate design):

// $default map
// @each in base/_root.scss creates custom properties
// @each in utilities/_colors.scss creates utility classes
$default: (
  'neutral': (
    '000': $-clr-white,
    '050': $-clr-gray-50,
    ...
  ),
  'primary': (
    '000': $-clr-skyblue-100,
    ...
  ),
  'accent': (
    '000': $-clr-deeppink-100,
    ...
  ),
  'cd': (
    'stahlblau': $-clr-stahlblau,
    'feuerziegel': $-clr-feuerziegel,
    'goldrute': $-clr-goldrute
  )
);

3. Custom Properties

Die map in /base/_root.scss erstellt jetzt automatisch unsere custom properties:

:root {
  // generates the color custom properties
  @each $color, $shade-map in $default {
    @each $shade, $value in $shade-map {
      --#{$color}-#{$shade}: #{$value};
    }
  }
}
// Output
:root {
  --neutral-000: hsl(0 0% 100%);
  --primary-100: hsl(216 75% 95%);
  --accent-200: hsl(336 75% 82.5%);
  ...
  --cd-stahlblau: hsl(207 44% 49%);
  --cd-feuerziegel: hsl(0 68% 42%);
  --cd-goldrute: hsl(43 74% 49%);
}

4. SCSS Variables eintragen

Die SCSS Variables müssen nun manuell erzeugt werden, dafür verwenden wir die automatisch erstellten custom properties:

// SCSS VARIABLES CD/THEME
$color-cd-stahlblau: var(--cd-stahlblau);
$color-cd-feuerziegel: var(--cd-feuerziegel);
$color-cd-goldrute: var(--cd-goldrute);

// SCSS VARIABLES DEFAULT
$color-neutral-000: var(--neutral-000);
$color-primary-000: var(--primary-000);
$color-accent-000: var(--accent-000);
...

5. Utility-Klassen

// macht utility-Klassen aus der $default-Map in abstracts/_colors.scss
// default ist die 1. map
// $shade-maps sind "neutral", "primary" und "secondary"
// $color sind die key-value-pairs in den $shade-maps
// $shade sind die Schattierungen (000, 100, ...)
// $value sind die private members ($-clr-white, $ clr-gray-100, ...)

@each $color, $shade-map in $default {
  @each $shade, $value in $shade-map {
    .color-#{$color}-#{$shade} {
      color: var(--#{$color}-#{$shade});
    }
    .background-#{$color}-#{$shade} {
      background-color: var(--#{$color}-#{$shade});
    }
  }
}

Ergebnis:

.color-neutral-000 {
  color: var(--neutral-000);
}
.background-neutral-000 {
  background-color: var(--neutral-000);
}
.color-cd-stahlblau {
  color: var(--cd-stahlblau);
}
.background-cd-stahlblau {
  background-color: var(--cd-stahlblau);
}

Weitere verfügbare Farbdefinitionen

// CONTEXTUAL COLOR TOKENS
$color-white: $-clr-white;
$color-black: $-clr-black;
$color-alert: crimson;
$color-confirm: darkgreen;
$background-opacity-dark: hsl(from $color-black h s l / 0.8);
$background-opacity-light: hsl(from $color-black h s l / 0.2);
$transparent-white-9: hsl(from $color-white h s l /0.9);
$transparent-white-7: hsl(from $color-white h s l /0.7);
$transparent-white-5: hsl(from $color-white h s l /0.5);
$transparent-white-3: hsl(from $color-white h s l /0.3);
$transparent-white-1: hsl(from $color-white h s l /0.1);