graycoreio/daffodil

View on GitHub
libs/design/scss/theming/_theme-css-variables.scss

Summary

Maintainability
Test Coverage
@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);
        }
    }
}