libs/design/scss/theming/_theme-css-variables.scss
@use 'sass:map';
@use '../core';
@use '../theming';
// @docs
//
// Global theme tokens
@mixin daff-root-theme-tokens($theme) {
$base: core.daff-map-deep-get($theme, 'core.base');
$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
$primary: map.get($theme, primary);
$secondary: map.get($theme, secondary);
$tertiary: map.get($theme, tertiary);
$neutral: core.daff-map-deep-get($theme, 'core.neutral');
$white: core.daff-map-deep-get($theme, 'core.white');
$black: core.daff-map-deep-get($theme, 'core.black');
--daff-theme-rgb: #{red($base), green($base), blue($base)};
--daff-theme-contrast-rgb: #{red($base-contrast), green($base-contrast),
blue($base-contrast)};
--daff-theme: #{$base};
--daff-theme-contrast: #{$base-contrast};
--daff-theme-primary: #{theming.daff-color($primary)};
--daff-theme-secondary: #{theming.daff-color($secondary)};
--daff-theme-tertiary: #{theming.daff-color($tertiary)};
--daff-theme-warn: #{theming.daff-color(theming.$daff-bronze, 60)};
--daff-theme-success: #{theming.daff-color(theming.$daff-green, 60)};
--daff-theme-critical: #{theming.daff-color(theming.$daff-red, 60)};
--daff-theme-white: #{$white};
--daff-theme-black: #{$black};
--daff-theme-gray: #{theming.daff-color($neutral)};
--daff-base-bg: #{$base};
--daff-base-text: #{theming.daff-text-contrast($base)};
}
@mixin daff-theme-css-variables($theme) {
@each $selector in & {
@if ($selector == null) {
:root {
@include daff-root-theme-tokens($theme);
}
} @else {
@include daff-root-theme-tokens($theme);
}
}
}