@koobiq/components 17.4.0 → 17.6.0

package/button/_button-theme.scss

@@ -18,46 +18,37 @@
     }
 }
 
-@mixin kbq-button-type($component, $type, $sub-type) {
-    $style: map.get($component, $type, $sub-type);
+@mixin kbq-button-type($type, $sub-type) {
     $base-path: button-#{$type}-#{$sub-type};
 
-    border-color: kbq-css-variable(#{$base-path}-border, map.get($style, border));
-    color: kbq-css-variable(#{$base-path}-foreground, map.get($style, foreground));
-    background: kbq-css-variable(#{$base-path}-background, map.get($style, background));
+    border-color: kbq-css-variable(#{$base-path}-border);
+    color: kbq-css-variable(#{$base-path}-foreground);
+    background: kbq-css-variable(#{$base-path}-background);
 
-    @include _icon(
-        kbq-css-variable(#{$base-path}-left-icon, map.get($style, left-icon)),
-        kbq-css-variable(#{$base-path}-right-icon, map.get($style, right-icon))
-    );
+    @include _icon(kbq-css-variable(#{$base-path}-left-icon), kbq-css-variable(#{$base-path}-right-icon));
 
     &:hover:not(.kbq-disabled),
     &.kbq-hover:not(.kbq-disabled) {
-        background: kbq-css-variable(#{$base-path}-states-hover-background, map.get($style, states-hover-background));
+        background: kbq-css-variable(#{$base-path}-states-hover-background);
     }
 
     &:active:not(.kbq-disabled),
     &.kbq-active:not(.kbq-disabled) {
-        background: kbq-css-variable(#{$base-path}-states-active-background, map.get($style, states-active-background));
+        background: kbq-css-variable(#{$base-path}-states-active-background);
     }
 
     &.kbq-disabled {
-        color: kbq-css-variable(#{$base-path}-states-disabled-foreground, map.get($style, states-disabled-foreground));
-        background: kbq-css-variable(
-            #{$base-path}-states-disabled-background,
-            map.get($style, states-disabled-background)
-        );
+        color: kbq-css-variable(#{$base-path}-states-disabled-foreground);
+        background: kbq-css-variable(#{$base-path}-states-disabled-background);
 
         @include _icon(
-            kbq-css-variable(#{$base-path}-states-disabled-left-icon, map.get($style, states-disabled-left-icon)),
-            kbq-css-variable(#{$base-path}-states-disabled-right-icon, map.get($style, states-disabled-right-icon))
+            kbq-css-variable(#{$base-path}-states-disabled-left-icon),
+            kbq-css-variable(#{$base-path}-states-disabled-right-icon)
         );
     }
 }
 
-@mixin kbq-button-theme($theme) {
-    $button: map.get(map.get($theme, components), button);
-
+@mixin kbq-button-theme() {
     .kbq-button-overlay {
         display: none;
     }
@@ -68,31 +59,31 @@
 
         &.kbq-button_filled {
             &.kbq-contrast {
-                @include kbq-button-type($button, filled, contrast-fade-off);
+                @include kbq-button-type(filled, contrast-fade-off);
             }
 
             &.kbq-contrast-fade {
-                @include kbq-button-type($button, filled, contrast-fade-on);
+                @include kbq-button-type(filled, contrast-fade-on);
             }
         }
 
         &.kbq-button_outline {
             &.kbq-theme-fade {
-                @include kbq-button-type($button, outline, theme-fade-on);
+                @include kbq-button-type(outline, theme-fade-on);
             }
 
             &.kbq-contrast-fade {
-                @include kbq-button-type($button, outline, contrast-fade-on);
+                @include kbq-button-type(outline, contrast-fade-on);
             }
         }
 
         &.kbq-button_transparent {
             &.kbq-theme {
-                @include kbq-button-type($button, transparent, theme-fade-on);
+                @include kbq-button-type(transparent, theme-fade-on);
             }
 
             &.kbq-contrast {
-                @include kbq-button-type($button, transparent, contrast-fade-on);
+                @include kbq-button-type(transparent, contrast-fade-on);
             }
         }
 
@@ -100,7 +91,7 @@
         &.kbq-button_outline,
         &.kbq-button_transparent {
             &.cdk-keyboard-focused {
-                $focused-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+                $focused-color: kbq-css-variable(states-focused-color);
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
             }
@@ -108,7 +99,7 @@
     }
 }
 
-@mixin kbq-button-typography($config) {
+@mixin kbq-button-typography() {
     .kbq-button,
     .kbq-button-icon {
         @include kbq-typography-css-variables(button, default);

package/button/button-tokens.scss

@@ -0,0 +1,278 @@
+.kbq-button {
+    --kbq-button-size-height: 32px;
+    --kbq-button-size-border-width: 1px;
+    --kbq-button-size-border-radius: 8px;
+    --kbq-button-size-horizontal-padding: 12px;
+    --kbq-button-size-content-padding: 6px;
+    --kbq-button-font-default-font-size: 14px;
+    --kbq-button-font-default-line-height: 20px;
+    --kbq-button-font-default-letter-spacing: -0.006em;
+    --kbq-button-font-default-font-weight: 500;
+    --kbq-button-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-button-font-default-text-transform: null;
+    --kbq-button-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    // TODO: remove after all settled, should be assigned via css-tokens.css (#DS-2846)
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-button-filled-contrast-fade-off-background: hsla(229, 15%, 25%, 100%);
+    --kbq-button-filled-contrast-fade-off-border: transparent;
+    --kbq-button-filled-contrast-fade-off-foreground: hsla(229, 15%, 100%, 100%);
+    --kbq-button-filled-contrast-fade-off-left-icon: hsla(229, 15%, 100%, 100%);
+    --kbq-button-filled-contrast-fade-off-right-icon: hsla(229, 15%, 100%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-hover-background: hsla(229, 15%, 20%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-active-background: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-active-hover-background: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;
+    --kbq-button-filled-contrast-fade-off-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-filled-contrast-fade-on-background: hsla(229, 15%, 92%, 100%);
+    --kbq-button-filled-contrast-fade-on-border: transparent;
+    --kbq-button-filled-contrast-fade-on-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-on-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-on-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-hover-background: hsla(229, 15%, 88%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-active-background: hsla(229, 15%, 85%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 85%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;
+    --kbq-button-filled-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-theme-fade-on-background: transparent;
+    --kbq-button-outline-theme-fade-on-border: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-button-outline-theme-fade-on-states-hover-border: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-outline-theme-fade-on-states-active-border: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-border: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-outline-theme-fade-on-states-disabled-background: transparent;
+    --kbq-button-outline-theme-fade-on-states-disabled-border: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-contrast-fade-on-background: transparent;
+    --kbq-button-outline-contrast-fade-on-border: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-button-outline-contrast-fade-on-states-hover-border: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-outline-contrast-fade-on-states-active-border: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-border: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;
+    --kbq-button-outline-contrast-fade-on-states-disabled-border: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-transparent-theme-fade-on-border: transparent;
+    --kbq-button-transparent-theme-fade-on-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-background: transparent;
+    --kbq-button-transparent-theme-fade-on-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-hover-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-hover-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-button-transparent-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-active-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-transparent-theme-fade-on-states-active-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 50%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
+    --kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;
+    --kbq-button-transparent-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-transparent-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-transparent-contrast-fade-on-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-background: transparent;
+    --kbq-button-transparent-contrast-fade-on-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-active-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-transparent-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
+    --kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-button-filled-contrast-fade-off-background: hsla(229, 15%, 90%, 100%);
+    --kbq-button-filled-contrast-fade-off-border: transparent;
+    --kbq-button-filled-contrast-fade-off-foreground: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-off-left-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-off-right-icon: hsla(229, 15%, 15%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-hover-background: hsla(229, 15%, 80%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-active-background: hsla(229, 15%, 55%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-active-hover-background: hsla(229, 15%, 55%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;
+    --kbq-button-filled-contrast-fade-off-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-left-icon: hsla(229, 15%, 40%, 100%);
+    --kbq-button-filled-contrast-fade-off-states-disabled-right-icon: hsla(229, 15%, 40%, 100%);
+    --kbq-button-filled-contrast-fade-on-background: hsla(229, 15%, 25%, 100%);
+    --kbq-button-filled-contrast-fade-on-border: transparent;
+    --kbq-button-filled-contrast-fade-on-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-filled-contrast-fade-on-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-filled-contrast-fade-on-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-hover-background: hsla(229, 15%, 25%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-active-background: hsla(229, 15%, 27%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-active-hover-background: hsla(229, 15%, 27%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;
+    --kbq-button-filled-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 40%, 100%);
+    --kbq-button-filled-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 40%, 100%);
+    --kbq-button-outline-theme-fade-on-background: transparent;
+    --kbq-button-outline-theme-fade-on-border: hsla(216, 100%, 30%, 100%);
+    --kbq-button-outline-theme-fade-on-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-outline-theme-fade-on-states-hover-border: hsla(216, 100%, 30%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-outline-theme-fade-on-states-active-border: hsla(216, 100%, 30%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-border: hsla(216, 100%, 30%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-outline-theme-fade-on-states-disabled-background: transparent;
+    --kbq-button-outline-theme-fade-on-states-disabled-border: hsla(229, 15%, 50%, 32%);
+    --kbq-button-outline-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
+    --kbq-button-outline-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-contrast-fade-on-background: transparent;
+    --kbq-button-outline-contrast-fade-on-border: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-contrast-fade-on-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-outline-contrast-fade-on-states-hover-border: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-outline-contrast-fade-on-states-active-border: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-border: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;
+    --kbq-button-outline-contrast-fade-on-states-disabled-border: hsla(229, 15%, 50%, 32%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-transparent-theme-fade-on-border: transparent;
+    --kbq-button-transparent-theme-fade-on-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-background: transparent;
+    --kbq-button-transparent-theme-fade-on-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-hover-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-hover-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-transparent-theme-fade-on-states-hover-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-hover-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-active-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-transparent-theme-fade-on-states-active-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-active-hover-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 65%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;
+    --kbq-button-transparent-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;
+    --kbq-button-transparent-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-transparent-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-transparent-contrast-fade-on-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-background: transparent;
+    --kbq-button-transparent-contrast-fade-on-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-hover-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-hover-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-active-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-transparent-contrast-fade-on-states-active-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 80%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 40%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;
+    --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 30%, 100%);
+}

package/button/button.scss

@@ -6,6 +6,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
+@use './button-theme' as *;
+
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-button {
@@ -46,3 +48,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     border-radius: inherit;
 }
+
+@include kbq-button-theme();
+@include kbq-button-typography();

package/button-toggle/_button-toggle-theme.scss

@@ -5,74 +5,62 @@
 
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-button-toggle-state($component, $state-name) {
-    $state: map.get($component, $state-name);
+@mixin kbq-button-toggle-state($state-name) {
+    background: kbq-css-variable(button-toggle-item-#{$state-name}-background);
 
-    background: kbq-css-variable(button-toggle-item-#{$state-name}-background, map.get($state, background));
-
-    color: kbq-css-variable(button-toggle-item-#{$state-name}-text, map.get($state, text));
+    color: kbq-css-variable(button-toggle-item-#{$state-name}-text);
 
     & .kbq-icon {
-        color: kbq-css-variable(button-toggle-item-#{$state-name}-icon, map.get($state, icon));
+        color: kbq-css-variable(button-toggle-item-#{$state-name}-icon);
     }
 }
 
-@mixin kbq-button-toggle-theme($theme) {
-    $button-toggle: map.get(map.get($theme, components), button-toggle);
-
+@mixin kbq-button-toggle-theme() {
     .kbq-button-toggle-group {
-        background: kbq-css-variable(
-            button-toggle-container-background,
-            map.get($button-toggle, container, background)
-        );
+        background: kbq-css-variable(button-toggle-container-background);
 
         .kbq-button-toggle {
-            $button: map.get($button-toggle, item);
-
             & > .kbq-button,
             & > .kbq-icon-button {
-                @include kbq-button-toggle-state($button, default);
+                @include kbq-button-toggle-state(default);
 
                 &:hover:not(.kbq-disabled) {
-                    @include kbq-button-toggle-state($button, states-hover);
+                    @include kbq-button-toggle-state(states-hover);
                 }
 
                 &:active:not(.kbq-disabled) {
-                    @include kbq-button-toggle-state($button, states-active);
+                    @include kbq-button-toggle-state(states-active);
                 }
 
                 &.kbq-selected:not(.kbq-disabled) {
-                    @include kbq-button-toggle-state($button, states-selected);
+                    @include kbq-button-toggle-state(states-selected);
 
                     &:hover {
-                        @include kbq-button-toggle-state($button, states-selected-hover);
+                        @include kbq-button-toggle-state(states-selected-hover);
                     }
 
                     &:active {
-                        @include kbq-button-toggle-state($button, states-selected-active);
+                        @include kbq-button-toggle-state(states-selected-active);
                     }
                 }
 
                 &.kbq-disabled {
-                    @include kbq-button-toggle-state($button, states-disabled);
+                    @include kbq-button-toggle-state(states-disabled);
                 }
 
                 &.kbq-disabled.kbq-selected {
-                    @include kbq-button-toggle-state($button, states-selected-disabled);
+                    @include kbq-button-toggle-state(states-selected-disabled);
                 }
 
                 &.cdk-keyboard-focused {
-                    border-color: kbq-css-variable(
-                        button-toggle-item-states-focused-outline,
-                        map.get($button, focused)
-                    );
+                    border-color: kbq-css-variable(button-toggle-item-states-focused-outline);
                 }
             }
         }
     }
 }
 
-@mixin kbq-button-toggle-typography($config) {
+@mixin kbq-button-toggle-typography() {
     .kbq-button-toggle .kbq-button-toggle-wrapper {
         @include kbq-typography-css-variables(button-toggle, item);
     }

package/button-toggle/button-toggle-tokens.scss

@@ -0,0 +1,78 @@
+.kbq-button-toggle-group {
+    --kbq-button-toggle-size-container-border-radius: 8px;
+    --kbq-button-toggle-size-container-padding-horizontal: 4px;
+    --kbq-button-toggle-size-container-padding-vertical: 4px;
+    --kbq-button-toggle-size-container-content-gap-horizontal: 4px;
+    --kbq-button-toggle-size-item-height: 24px;
+    --kbq-button-toggle-size-item-border-radius: 4px;
+    --kbq-button-toggle-size-item-padding-horizontal: 8px;
+    --kbq-button-toggle-size-item-padding-vertical: 2px;
+    --kbq-button-toggle-size-item-content-gap-horizontal: 4px;
+    --kbq-button-toggle-size-item-focus-outline-width: 2px;
+    --kbq-button-toggle-font-item-font-size: 14px;
+    --kbq-button-toggle-font-item-line-height: 20px;
+    --kbq-button-toggle-font-item-letter-spacing: -0.006em;
+    --kbq-button-toggle-font-item-font-weight: 500;
+    --kbq-button-toggle-font-item-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-button-toggle-font-item-text-transform: null;
+    --kbq-button-toggle-font-item-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-button-toggle-container-background: hsla(229, 15%, 92%, 100%);
+    --kbq-button-toggle-item-default-background: hsla(229, 15%, 92%, 100%);
+    --kbq-button-toggle-item-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-default-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-button-toggle-item-states-hover-background: hsla(229, 15%, 88%, 100%);
+    --kbq-button-toggle-item-states-hover-text: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-states-hover-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-button-toggle-item-states-active-background: hsla(229, 15%, 85%, 100%);
+    --kbq-button-toggle-item-states-active-text: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-states-active-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-button-toggle-item-states-selected-background: hsla(229, 15%, 100%, 100%);
+    --kbq-button-toggle-item-states-selected-text: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-states-selected-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-button-toggle-item-states-selected-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-button-toggle-item-states-selected-hover-text: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-states-selected-hover-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-button-toggle-item-states-selected-active-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-toggle-item-states-selected-active-text: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-states-selected-active-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-button-toggle-item-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-toggle-item-states-selected-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-button-toggle-item-states-selected-disabled-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-toggle-item-states-disabled-background: none;
+    --kbq-button-toggle-item-states-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-button-toggle-item-states-disabled-icon: hsla(229, 15%, 15%, 32%);
+    --kbq-button-toggle-item-states-focused-outline: hsla(216, 100%, 60%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-button-toggle-container-background: hsla(229, 15%, 25%, 100%);
+    --kbq-button-toggle-item-default-background: hsla(229, 15%, 25%, 100%);
+    --kbq-button-toggle-item-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-button-toggle-item-default-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-button-toggle-item-states-hover-background: hsla(229, 15%, 25%, 100%);
+    --kbq-button-toggle-item-states-hover-text: hsla(229, 15%, 80%, 100%);
+    --kbq-button-toggle-item-states-hover-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-button-toggle-item-states-active-background: hsla(229, 15%, 27%, 100%);
+    --kbq-button-toggle-item-states-active-text: hsla(229, 15%, 80%, 100%);
+    --kbq-button-toggle-item-states-active-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-button-toggle-item-states-selected-background: hsla(229, 15%, 15%, 100%);
+    --kbq-button-toggle-item-states-selected-text: hsla(229, 15%, 80%, 100%);
+    --kbq-button-toggle-item-states-selected-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-button-toggle-item-states-selected-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-toggle-item-states-selected-hover-text: hsla(229, 15%, 80%, 100%);
+    --kbq-button-toggle-item-states-selected-hover-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-button-toggle-item-states-selected-active-background: hsla(229, 100%, 85%, 15%);
+    --kbq-button-toggle-item-states-selected-active-text: hsla(229, 15%, 80%, 100%);
+    --kbq-button-toggle-item-states-selected-active-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-button-toggle-item-states-selected-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-button-toggle-item-states-selected-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-button-toggle-item-states-selected-disabled-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-toggle-item-states-disabled-background: none;
+    --kbq-button-toggle-item-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-button-toggle-item-states-disabled-icon: hsla(229, 15%, 30%, 100%);
+    --kbq-button-toggle-item-states-focused-outline: hsla(216, 100%, 60%, 100%);
+}

package/button-toggle/button-toggle.scss

@@ -3,10 +3,9 @@
 
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './button-toggle-theme' as *;
 
 .kbq-button-toggle-group {
     box-sizing: border-box;
@@ -28,11 +27,14 @@ $tokens: meta.module-variables(tokens) !default;
         align-items: center;
 
         height: kbq-css-variable(button-toggle-size-item-height);
+        min-height: kbq-css-variable(button-toggle-size-item-height);
 
         border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
         > .kbq-button,
         > .kbq-button-icon {
+            height: inherit;
+            min-height: inherit;
             border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
             padding: kbq-difference-series-css-variables(
@@ -89,3 +91,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+@include kbq-button-toggle-theme();
+@include kbq-button-toggle-typography();