@inchurch/matcha-theme 20.0.11 → 20.276.0

package/abstracts/_colors.scss

@@ -1,405 +1,405 @@
-// Saturation Levels
-$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
-
-// Hues Palette Colors
-$index: 0;
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Text color levels generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin _generate-text-color-levels($classes, $contrast) {
-    @if ($contrast =="dark") {
-        #{$classes} {
-
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(0, 0, 0, 0.54) !important;
-            }
-
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(0, 0, 0, 0.38) !important;
-            }
-
-            &.divider,
-            .divider {
-                color: rgba(0, 0, 0, 0.12) !important;
-            }
-        }
-    }
-
-    @else {
-        #{$classes} {
-
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(255, 255, 255, 0.7) !important;
-            }
-
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(255, 255, 255, 0.5) !important;
-            }
-
-            &.divider,
-            .divider {
-                color: rgba(255, 255, 255, 0.12) !important;
-            }
-        }
-    }
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Static color classes generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $saturation) {
-    $colorSelector: unquote(".#{$colorName}#{$saturation}");
-
-    #{$colorSelector} {
-        background-color: $color !important;
-        color: $contrastColor !important;
-
-        &[disabled] {
-            background-color: rgba($color, 0.12) !important;
-            color: rgba($contrastColor, 0.26) !important;
-        }
-    }
-
-    #{$colorSelector}-bg {
-        background-color: $color !important;
-    }
-
-    #{$colorSelector}-fg {
-        color: $color !important;
-    }
-
-    @if ($saturation =="-500") {
-        $colorSelectorDefault: unquote(".#{$colorName}");
-
-        #{$colorSelectorDefault}-bg {
-            background-color: $color !important;
-        }
-
-        #{$colorSelectorDefault}-fg {
-            color: $color !important;
-        }
-    }
-}
-
-@mixin colors-classes-static($theme) {
-    $palettes: getAllPalettes($theme);
-    $light-contrasting-classes: (
-    );
-$dark-contrasting-classes: (
-);
-
-@each $paletteName, $palette in $palettes {
-    // $contrasts: map-get($red, "contrast");
-    // $contrasts =  all contrast colors of $red palette
-    $contrasts: map-get($palette, "contrast");
-
-    @each $saturation in $saturationLevels {
-        // $color: map-get($red, 500)
-        // $contrast: map-get($contrasts, 500);  500 contrast color of $red palette
-        $color: map-get($palette, $saturation);
-        $contrast: map-get($contrasts, $saturation);
-
-        @if ($color !=null and $contrast !=null) {
-            @include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$saturation}");
-
-            // If the contrast color is dark
-            @if (rgba(black, 1)==rgba($contrast, 1)) {
-                $dark-contrasting-classes: append($dark-contrasting-classes,
-                        unquote(".#{$paletteName}-#{$saturation}"),
-                        "comma"
-                    );
-            }
-
-            // if the contrast color is light
-            @else {
-                $light-contrasting-classes: append($light-contrasting-classes,
-                        unquote(".#{$paletteName}-#{$saturation}"),
-                        "comma"
-                    );
-            }
-        }
-    }
-}
-
-// Generate contrasting colors
-@include _generate-text-color-levels($dark-contrasting-classes, "dark");
-@include _generate-text-color-levels($light-contrasting-classes, "light");
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Dynamic color classes generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin colors-classes-dynamic($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $danger: map-get($theme, danger);
-    $success: map-get($theme, success);
-    $warn: map-get($theme, warn);
-    $info: map-get($theme, info);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-
-    $color-functions: (
-        red: getRed,
-        pink: getPink,
-        purple: getPurple,
-        deep-purple: getDeepPurple,
-        indigo: getIndigo,
-        blue: getBlue,
-        light-blue: getLightBlue,
-        cyan: getCyan,
-        teal: getTeal,
-        green: getGreen,
-        light-green: getLightGreen,
-        lime: getLime,
-        yellow: getYellow,
-        amber: getAmber,
-        orange: getOrange,
-        deep-orange: getDeepOrange,
-        brown: getBrown,
-        grey: getGrey,
-        blue-grey: getBlueGrey,
-        primary: getPrimary,
-        accent: getAccent,
-        danger: getDanger,
-        warn: getWarn,
-        success: getSuccess,
-        info: getInfo,
-        disabled: getDisabled,
-    );
-
-@include colors-classes-static($theme);
-
-.color-unset {
-    color: map-get($foreground, foreground);
-
-    .ripple {
-        background: map-get($foreground, foreground);
-    }
-}
-
-@each $colorName, $colorFn in $color-functions {
-    // When a DS token exists for this semantic color (accent, primary, danger, etc.),
-    // utility classes consume var(--matcha-color-*) so Figma changes propagate at runtime.
-    // Palette colors (red, blue, green, etc.) keep their static values.
-    $is-semantic: index((primary, accent, danger, warn, success, info, disabled), $colorName) != null;
-
-    .background-#{$colorName}-alpha {
-        @if $is-semantic {
-            background: var(--matcha-color-#{$colorName}-alpha, #{call(#{$colorFn}Alpha, $theme)});
-        } @else {
-            background: call(#{$colorFn}Alpha, $theme);
-        }
-    }
-
-    .#{$colorName} .ripple {
-        background: call(#{$colorFn}Alpha, $theme)
-    }
-
-    .background-#{$colorName} {
-        @if $is-semantic {
-            background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            background: call(#{$colorFn}, $theme);
-        }
-    }
-
-    .border-color-#{$colorName} {
-        @if $is-semantic {
-            border-color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            border-color: call(#{$colorFn}, $theme);
-        }
-    }
-
-    .color-#{$colorName} {
-        @if $is-semantic {
-            color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)}) !important;
-        } @else {
-            color: call(#{$colorFn}, $theme) !important;
-        }
-    }
-
-    .fill-#{$colorName} {
-        @if $is-semantic {
-            fill: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            fill: call(#{$colorFn}, $theme);
-        }
-    }
-
-    .stroke-#{$colorName} {
-        @if $is-semantic {
-            stroke: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-        } @else {
-            stroke: call(#{$colorFn}, $theme);
-        }
-    }
-
-    .color-#{$colorName}-alpha {
-        color: call(#{$colorFn}Alpha, $theme) !important
-    }
-
-    .#{$colorName}-alpha {
-        background: call(#{$colorFn}Alpha, $theme);
-        color: call(#{$colorFn}, $theme);
-    }
-
-    .#{$colorName} {
-        @if $is-semantic {
-            background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
-            color: var(--matcha-color-#{$colorName}-contrast, #{call(#{$colorFn}Contrast, $theme)});
-        } @else {
-            background: call(#{$colorFn}, $theme);
-            color: call(#{$colorFn}Contrast, $theme);
-        }
-    }
-}
-
-.background-basic-alpha {
-    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
-}
-
-.basic .ripple {
-    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
-}
-
-.background-basic {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-}
-
-.border-color-basic {
-    border-color: var(--matcha-color-fg, #{getForeground($theme)});
-}
-
-.color-basic {
-    color: var(--matcha-color-fg, #{getForeground($theme)}) !important;
-}
-
-.fill-basic {
-    fill: var(--matcha-color-surface, #{getSurface($theme)});
-}
-
-.stroke-basic {
-    stroke: var(--matcha-color-fg, #{getForeground($theme)});
-}
-
-.color-basic-alpha {
-    color: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)}) !important;
-}
-
-.basic-alpha {
-    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-}
-
-.basic {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-}
-
-// Semantic surface & foreground aliases (used throughout templates)
-.background-fg      { background: var(--matcha-color-fg, #{getForeground($theme)}); }
-.background-bg      { background: var(--matcha-color-surface-bg, #{getBackground($theme)}); }
-.background-bg-alpha { background: var(--matcha-color-surface-bg-alpha, #{getBackgroundAlpha($theme)}); }
-.background-surface { background: var(--matcha-color-surface, #{getSurface($theme)}); }
-.background-surface-alpha { background: var(--matcha-color-surface-card-alpha, #{getSurfaceAlpha($theme)}); }
-.background-hint    { background: var(--matcha-color-hint, #{getGrey($theme)}); }
-.color-fg           { color: var(--matcha-color-fg, #{getForeground($theme)}) !important; }
-.color-hint         { color: var(--matcha-color-hint, #{getGrey($theme)}) !important; }
-.color-label        { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}) !important; }
-.color-placeholder  { color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)}) !important; }
-
-.color-unset {
-    color: unset;
-}
-
-.background-transparent {
-    background: transparent;
-}
-
-$attributes: (
-    color,
-    border-color,
-    background,
-    fill,
-    stroke
-);
-
-@each $attribute in $attributes {
-    @if ($attribute !="color") {
-        .#{$attribute}-bg {
-            #{$attribute}: getBackground($theme) !important;
-        }
-
-        .#{$attribute}-bg-alpha {
-            #{$attribute}: getBackgroundAlpha($theme) !important;
-        }
-
-        .#{$attribute}-bg-inverse {
-            #{$attribute}: getBackgroundInverse($theme) !important;
-        }
-
-        .#{$attribute}-bg-alpha-inverse {
-            #{$attribute}: getBackgroundAlphaInverse($theme) !important;
-        }
-
-        .#{$attribute}-surface-inverse {
-            #{$attribute}: getSurfaceInverse($theme) !important;
-        }
-
-        .#{$attribute}-surface-alpha-inverse {
-            #{$attribute}: getSurfaceAlphaInverse($theme) !important;
-        }
-    }
-
-    .#{$attribute}-fg,
-    .#{$attribute}-base,
-    .#{$attribute}-text {
-        #{$attribute}: getForeground($theme) !important;
-    }
-
-    .#{$attribute}-fg-inverse,
-    .#{$attribute}-base-inverse,
-    .#{$attribute}-text-inverse {
-        #{$attribute}: getForegroundInverse($theme) !important;
-    }
-
-    .#{$attribute}-surface {
-        #{$attribute}: getSurface($theme) !important;
-    }
-
-    .#{$attribute}-surface-alpha {
-        #{$attribute}: getSurfaceAlpha($theme) !important;
-    }
-
-    .#{$attribute}-placeholder {
-        #{$attribute}: getGrey($theme) !important;
-
-        &-alpha {
-            background: rgba(getGrey($theme), 0.2) !important;
-        }
-    }
-
-    .#{$attribute}-label {
-        #{$attribute}: getBlueGrey($theme) !important;
-    }
-
-    .#{$attribute}-disabled {
-        #{$attribute}: getDisabled($theme) !important;
-    }
-
-    .#{$attribute}-disabled-icon {
-        #{$attribute}: getDisabledContrast($theme) !important;
-    }
-}
+// Saturation Levels
+$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+
+// Hues Palette Colors
+$index: 0;
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Text color levels generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _generate-text-color-levels($classes, $contrast) {
+    @if ($contrast =="dark") {
+        #{$classes} {
+
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(0, 0, 0, 0.54) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(0, 0, 0, 0.12) !important;
+            }
+        }
+    }
+
+    @else {
+        #{$classes} {
+
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(255, 255, 255, 0.7) !important;
+            }
+
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.5) !important;
+            }
+
+            &.divider,
+            .divider {
+                color: rgba(255, 255, 255, 0.12) !important;
+            }
+        }
+    }
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Static color classes generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $saturation) {
+    $colorSelector: unquote(".#{$colorName}#{$saturation}");
+
+    #{$colorSelector} {
+        background-color: $color !important;
+        color: $contrastColor !important;
+
+        &[disabled] {
+            background-color: rgba($color, 0.12) !important;
+            color: rgba($contrastColor, 0.26) !important;
+        }
+    }
+
+    #{$colorSelector}-bg {
+        background-color: $color !important;
+    }
+
+    #{$colorSelector}-fg {
+        color: $color !important;
+    }
+
+    @if ($saturation =="-500") {
+        $colorSelectorDefault: unquote(".#{$colorName}");
+
+        #{$colorSelectorDefault}-bg {
+            background-color: $color !important;
+        }
+
+        #{$colorSelectorDefault}-fg {
+            color: $color !important;
+        }
+    }
+}
+
+@mixin colors-classes-static($theme) {
+    $palettes: getAllPalettes($theme);
+    $light-contrasting-classes: (
+    );
+$dark-contrasting-classes: (
+);
+
+@each $paletteName, $palette in $palettes {
+    // $contrasts: map-get($red, "contrast");
+    // $contrasts =  all contrast colors of $red palette
+    $contrasts: map-get($palette, "contrast");
+
+    @each $saturation in $saturationLevels {
+        // $color: map-get($red, 500)
+        // $contrast: map-get($contrasts, 500);  500 contrast color of $red palette
+        $color: map-get($palette, $saturation);
+        $contrast: map-get($contrasts, $saturation);
+
+        @if ($color !=null and $contrast !=null) {
+            @include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$saturation}");
+
+            // If the contrast color is dark
+            @if (rgba(black, 1)==rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes,
+                        unquote(".#{$paletteName}-#{$saturation}"),
+                        "comma"
+                    );
+            }
+
+            // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes,
+                        unquote(".#{$paletteName}-#{$saturation}"),
+                        "comma"
+                    );
+            }
+        }
+    }
+}
+
+// Generate contrasting colors
+@include _generate-text-color-levels($dark-contrasting-classes, "dark");
+@include _generate-text-color-levels($light-contrasting-classes, "light");
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ Dynamic color classes generator
+// -------------------------------------------------------------------------------------------------------------------
+@mixin colors-classes-dynamic($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $danger: map-get($theme, danger);
+    $success: map-get($theme, success);
+    $warn: map-get($theme, warn);
+    $info: map-get($theme, info);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    $color-functions: (
+        red: getRed,
+        pink: getPink,
+        purple: getPurple,
+        deep-purple: getDeepPurple,
+        indigo: getIndigo,
+        blue: getBlue,
+        light-blue: getLightBlue,
+        cyan: getCyan,
+        teal: getTeal,
+        green: getGreen,
+        light-green: getLightGreen,
+        lime: getLime,
+        yellow: getYellow,
+        amber: getAmber,
+        orange: getOrange,
+        deep-orange: getDeepOrange,
+        brown: getBrown,
+        grey: getGrey,
+        blue-grey: getBlueGrey,
+        primary: getPrimary,
+        accent: getAccent,
+        danger: getDanger,
+        warn: getWarn,
+        success: getSuccess,
+        info: getInfo,
+        disabled: getDisabled,
+    );
+
+@include colors-classes-static($theme);
+
+.color-unset {
+    color: map-get($foreground, foreground);
+
+    .ripple {
+        background: map-get($foreground, foreground);
+    }
+}
+
+@each $colorName, $colorFn in $color-functions {
+    // When a DS token exists for this semantic color (accent, primary, danger, etc.),
+    // utility classes consume var(--matcha-color-*) so Figma changes propagate at runtime.
+    // Palette colors (red, blue, green, etc.) keep their static values.
+    $is-semantic: index((primary, accent, danger, warn, success, info, disabled), $colorName) != null;
+
+    .background-#{$colorName}-alpha {
+        @if $is-semantic {
+            background: var(--matcha-color-#{$colorName}-alpha, #{call(#{$colorFn}Alpha, $theme)});
+        } @else {
+            background: call(#{$colorFn}Alpha, $theme);
+        }
+    }
+
+    .#{$colorName} .ripple {
+        background: call(#{$colorFn}Alpha, $theme)
+    }
+
+    .background-#{$colorName} {
+        @if $is-semantic {
+            background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
+        } @else {
+            background: call(#{$colorFn}, $theme);
+        }
+    }
+
+    .border-color-#{$colorName} {
+        @if $is-semantic {
+            border-color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
+        } @else {
+            border-color: call(#{$colorFn}, $theme);
+        }
+    }
+
+    .color-#{$colorName} {
+        @if $is-semantic {
+            color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)}) !important;
+        } @else {
+            color: call(#{$colorFn}, $theme) !important;
+        }
+    }
+
+    .fill-#{$colorName} {
+        @if $is-semantic {
+            fill: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
+        } @else {
+            fill: call(#{$colorFn}, $theme);
+        }
+    }
+
+    .stroke-#{$colorName} {
+        @if $is-semantic {
+            stroke: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
+        } @else {
+            stroke: call(#{$colorFn}, $theme);
+        }
+    }
+
+    .color-#{$colorName}-alpha {
+        color: call(#{$colorFn}Alpha, $theme) !important
+    }
+
+    .#{$colorName}-alpha {
+        background: call(#{$colorFn}Alpha, $theme);
+        color: call(#{$colorFn}, $theme);
+    }
+
+    .#{$colorName} {
+        @if $is-semantic {
+            background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
+            color: var(--matcha-color-#{$colorName}-contrast, #{call(#{$colorFn}Contrast, $theme)});
+        } @else {
+            background: call(#{$colorFn}, $theme);
+            color: call(#{$colorFn}Contrast, $theme);
+        }
+    }
+}
+
+.background-basic-alpha {
+    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
+}
+
+.basic .ripple {
+    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
+}
+
+.background-basic {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+}
+
+.border-color-basic {
+    border-color: var(--matcha-color-fg, #{getForeground($theme)});
+}
+
+.color-basic {
+    color: var(--matcha-color-fg, #{getForeground($theme)}) !important;
+}
+
+.fill-basic {
+    fill: var(--matcha-color-surface, #{getSurface($theme)});
+}
+
+.stroke-basic {
+    stroke: var(--matcha-color-fg, #{getForeground($theme)});
+}
+
+.color-basic-alpha {
+    color: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)}) !important;
+}
+
+.basic-alpha {
+    background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+}
+
+.basic {
+    background: var(--matcha-color-surface, #{getSurface($theme)});
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+}
+
+// Semantic surface & foreground aliases (used throughout templates)
+.background-fg      { background: var(--matcha-color-fg, #{getForeground($theme)}); }
+.background-bg      { background: var(--matcha-color-surface-bg, #{getBackground($theme)}); }
+.background-bg-alpha { background: var(--matcha-color-surface-bg-alpha, #{getBackgroundAlpha($theme)}); }
+.background-surface { background: var(--matcha-color-surface, #{getSurface($theme)}); }
+.background-surface-alpha { background: var(--matcha-color-surface-card-alpha, #{getSurfaceAlpha($theme)}); }
+.background-hint    { background: var(--matcha-color-hint, #{getGrey($theme)}); }
+.color-fg           { color: var(--matcha-color-fg, #{getForeground($theme)}) !important; }
+.color-hint         { color: var(--matcha-color-hint, #{getGrey($theme)}) !important; }
+.color-label        { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}) !important; }
+.color-placeholder  { color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)}) !important; }
+
+.color-unset {
+    color: unset;
+}
+
+.background-transparent {
+    background: transparent;
+}
+
+$attributes: (
+    color,
+    border-color,
+    background,
+    fill,
+    stroke
+);
+
+@each $attribute in $attributes {
+    @if ($attribute !="color") {
+        .#{$attribute}-bg {
+            #{$attribute}: getBackground($theme) !important;
+        }
+
+        .#{$attribute}-bg-alpha {
+            #{$attribute}: getBackgroundAlpha($theme) !important;
+        }
+
+        .#{$attribute}-bg-inverse {
+            #{$attribute}: getBackgroundInverse($theme) !important;
+        }
+
+        .#{$attribute}-bg-alpha-inverse {
+            #{$attribute}: getBackgroundAlphaInverse($theme) !important;
+        }
+
+        .#{$attribute}-surface-inverse {
+            #{$attribute}: getSurfaceInverse($theme) !important;
+        }
+
+        .#{$attribute}-surface-alpha-inverse {
+            #{$attribute}: getSurfaceAlphaInverse($theme) !important;
+        }
+    }
+
+    .#{$attribute}-fg,
+    .#{$attribute}-base,
+    .#{$attribute}-text {
+        #{$attribute}: getForeground($theme) !important;
+    }
+
+    .#{$attribute}-fg-inverse,
+    .#{$attribute}-base-inverse,
+    .#{$attribute}-text-inverse {
+        #{$attribute}: getForegroundInverse($theme) !important;
+    }
+
+    .#{$attribute}-surface {
+        #{$attribute}: getSurface($theme) !important;
+    }
+
+    .#{$attribute}-surface-alpha {
+        #{$attribute}: getSurfaceAlpha($theme) !important;
+    }
+
+    .#{$attribute}-placeholder {
+        #{$attribute}: getGrey($theme) !important;
+
+        &-alpha {
+            background: rgba(getGrey($theme), 0.2) !important;
+        }
+    }
+
+    .#{$attribute}-label {
+        #{$attribute}: getBlueGrey($theme) !important;
+    }
+
+    .#{$attribute}-disabled {
+        #{$attribute}: getDisabled($theme) !important;
+    }
+
+    .#{$attribute}-disabled-icon {
+        #{$attribute}: getDisabledContrast($theme) !important;
+    }
+}
 }