@koobiq/components 17.4.0 → 17.6.0

package/checkbox/_checkbox-theme.scss

@@ -4,47 +4,40 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-checkbox-color($component, $style-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-checkbox-color($style-name) {
     $base: checkbox-#{$style-name};
 
     .kbq-checkbox__frame {
-        border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
-
-        background-color: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
+        border-color: kbq-css-variable(#{$base}-default-border);
+        background-color: kbq-css-variable(#{$base}-default-background);
 
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
+            color: kbq-css-variable(#{$base}-default-color);
         }
     }
 
     .kbq-checkbox-label {
-        color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
+        color: kbq-css-variable(#{$base}-default-text);
     }
 
     & .kbq-hint .kbq-hint__text {
-        color: kbq-css-variable(#{$base}-default-caption, map.get($style, default, caption));
+        color: kbq-css-variable(#{$base}-default-caption);
     }
 
     &:hover,
     &.kbq-hover {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-hover-border, map.get($style, hover, border));
-
-            background-color: kbq-css-variable(#{$base}-states-hover-background, map.get($style, hover, background));
+            border-color: kbq-css-variable(#{$base}-states-hover-border);
+            background-color: kbq-css-variable(#{$base}-states-hover-background);
         }
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
-
-            background-color: kbq-css-variable(
-                #{$base}-states-checked-background,
-                map.get($style, checked, background)
-            );
+            border-color: kbq-css-variable(#{$base}-states-checked-border);
+            background-color: kbq-css-variable(#{$base}-states-checked-background);
         }
     }
 
@@ -53,84 +46,60 @@
         &:hover,
         &.kbq-hover {
             .kbq-checkbox__frame {
-                border-color: kbq-css-variable(
-                    #{$base}-states-checked-hover-border,
-                    map.get($style, checked-hover, border)
-                );
-
-                background-color: kbq-css-variable(
-                    #{$base}-states-checked-hover-background,
-                    map.get($style, checked-hover, background)
-                );
+                border-color: kbq-css-variable(#{$base}-states-checked-hover-border);
+                background-color: kbq-css-variable(#{$base}-states-checked-hover-background);
             }
         }
 
         & .kbq-checkbox-input.cdk-keyboard-focused {
             + .kbq-checkbox__frame {
-                border-color: kbq-css-variable(
-                    #{$base}-states-checked-focused-border,
-                    map.get($style, checked-focused, border)
-                );
-                background-color: kbq-css-variable(
-                    #{$base}-states-checked-focused-background,
-                    map.get($style, checked-focused, background)
-                );
-                outline: kbq-css-variable(
-                    #{$base}-states-checked-focused-outline,
-                    map.get($style, checked-focused, outline)
-                );
+                border-color: kbq-css-variable(#{$base}-states-checked-focused-border);
+                background-color: kbq-css-variable(#{$base}-states-checked-focused-background);
+                outline: kbq-css-variable(#{$base}-states-checked-focused-outline);
             }
         }
     }
 
     & .kbq-checkbox-input.cdk-keyboard-focused {
         + .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-focused-border, map.get($style, focused, border));
-            background-color: kbq-css-variable(
-                #{$base}-states-focused-background,
-                map.get($style, focused, background)
-            );
-            outline: kbq-css-variable(#{$base}-states-focused-outline, map.get($style, focused, outline));
+            border-color: kbq-css-variable(#{$base}-states-focused-border);
+            background-color: kbq-css-variable(#{$base}-states-focused-background);
+            outline: kbq-css-variable(#{$base}-states-focused-outline);
         }
     }
 
     &.kbq-disabled {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
-            background-color: kbq-css-variable(
-                #{$base}-states-disabled-background,
-                map.get($style, disabled, background)
-            );
+            border-color: kbq-css-variable(#{$base}-states-disabled-border);
+            background-color: kbq-css-variable(#{$base}-states-disabled-background);
 
             & .kbq-checkbox-checkmark,
             & .kbq-checkbox-mixedmark {
-                color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
+                color: kbq-css-variable(#{$base}-states-disabled-color);
             }
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: kbq-css-variable(#{$base}-states-disabled-caption, map.get($style, disabled, caption));
+            color: kbq-css-variable(#{$base}-states-disabled-caption);
         }
 
         .kbq-checkbox-label {
-            color: kbq-css-variable(#{$base}-states-disabled-text, map.get($style, disabled, text));
+            color: kbq-css-variable(#{$base}-states-disabled-text);
         }
     }
 }
 
-@mixin kbq-checkbox-theme($theme) {
-    $checkbox: map.get(map.get($theme, components), checkbox);
-
+@mixin kbq-checkbox-theme() {
     .kbq-checkbox {
-        @include kbq-checkbox-color($checkbox, theme);
+        @include kbq-checkbox-color(theme);
 
         &.kbq-error {
-            @include kbq-checkbox-color($checkbox, error);
+            @include kbq-checkbox-color(error);
         }
     }
 }
 
-@mixin kbq-checkbox-typography($config) {
+@mixin kbq-checkbox-typography() {
     .kbq-checkbox {
         @include kbq-typography-css-variables(checkbox, normal-label);
 

package/checkbox/checkbox-tokens.scss

@@ -0,0 +1,140 @@
+.kbq-checkbox {
+    --kbq-checkbox-size-normal-width: 16px;
+    --kbq-checkbox-size-normal-border-width: 1px;
+    --kbq-checkbox-size-normal-border-radius: 4px;
+    --kbq-checkbox-size-normal-horizontal-content-padding: 8px;
+    --kbq-checkbox-size-normal-vertical-content-padding: 2px;
+    --kbq-checkbox-size-normal-top: 2px;
+    --kbq-checkbox-size-big-width: 16px;
+    --kbq-checkbox-size-big-border-width: 1px;
+    --kbq-checkbox-size-big-border-radius: 4px;
+    --kbq-checkbox-size-big-horizontal-content-padding: 8px;
+    --kbq-checkbox-size-big-vertical-content-padding: 2px;
+    --kbq-checkbox-size-big-top: 4px;
+    --kbq-checkbox-font-normal-label-font-size: 14px;
+    --kbq-checkbox-font-normal-label-line-height: 20px;
+    --kbq-checkbox-font-normal-label-letter-spacing: -0.006em;
+    --kbq-checkbox-font-normal-label-font-weight: normal;
+    --kbq-checkbox-font-normal-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-checkbox-font-normal-label-text-transform: null;
+    --kbq-checkbox-font-normal-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-checkbox-font-normal-caption-font-size: 12px;
+    --kbq-checkbox-font-normal-caption-line-height: 16px;
+    --kbq-checkbox-font-normal-caption-letter-spacing: normal;
+    --kbq-checkbox-font-normal-caption-font-weight: normal;
+    --kbq-checkbox-font-normal-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-checkbox-font-normal-caption-text-transform: null;
+    --kbq-checkbox-font-normal-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-checkbox-font-big-label-font-size: 16px;
+    --kbq-checkbox-font-big-label-line-height: 24px;
+    --kbq-checkbox-font-big-label-letter-spacing: -0.011em;
+    --kbq-checkbox-font-big-label-font-weight: normal;
+    --kbq-checkbox-font-big-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-checkbox-font-big-label-text-transform: null;
+    --kbq-checkbox-font-big-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-checkbox-font-big-caption-font-size: 14px;
+    --kbq-checkbox-font-big-caption-line-height: 20px;
+    --kbq-checkbox-font-big-caption-letter-spacing: -0.006em;
+    --kbq-checkbox-font-big-caption-font-weight: normal;
+    --kbq-checkbox-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-checkbox-font-big-caption-text-transform: null;
+    --kbq-checkbox-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-checkbox-theme-default-border: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-theme-default-color: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-theme-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-checkbox-theme-default-background: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-theme-default-caption: hsla(229, 15%, 50%, 100%);
+    --kbq-checkbox-theme-states-hover-border: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-theme-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-checkbox-theme-states-checked-border: transparent;
+    --kbq-checkbox-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
+    --kbq-checkbox-theme-states-checked-hover-border: transparent;
+    --kbq-checkbox-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
+    --kbq-checkbox-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-focused-background: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-theme-states-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
+    --kbq-checkbox-theme-states-checked-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-disabled-border: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-theme-states-disabled-color: hsla(229, 15%, 15%, 32%);
+    --kbq-checkbox-theme-states-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-checkbox-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-checkbox-theme-states-disabled-caption: hsla(229, 15%, 15%, 32%);
+    --kbq-checkbox-error-default-border: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-default-color: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-error-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-checkbox-error-default-background: hsla(7, 97%, 99%, 100%);
+    --kbq-checkbox-error-default-caption: hsla(229, 15%, 50%, 100%);
+    --kbq-checkbox-error-states-hover-border: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-hover-background: hsla(7, 97%, 92%, 100%);
+    --kbq-checkbox-error-states-checked-border: transparent;
+    --kbq-checkbox-error-states-checked-background: hsla(7, 97%, 60%, 100%);
+    --kbq-checkbox-error-states-checked-hover-border: transparent;
+    --kbq-checkbox-error-states-checked-hover-background: hsla(7, 97%, 56%, 100%);
+    --kbq-checkbox-error-states-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-focused-background: hsla(7, 97%, 99%, 100%);
+    --kbq-checkbox-error-states-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-checked-focused-background: hsla(7, 97%, 60%, 100%);
+    --kbq-checkbox-error-states-checked-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-disabled-border: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-error-states-disabled-color: hsla(229, 15%, 15%, 32%);
+    --kbq-checkbox-error-states-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-checkbox-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-checkbox-error-states-disabled-caption: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-checkbox-theme-default-border: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-theme-default-color: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-theme-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-theme-default-background: hsla(229, 15%, 12%, 100%);
+    --kbq-checkbox-theme-default-caption: hsla(229, 15%, 60%, 100%);
+    --kbq-checkbox-theme-states-hover-border: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-theme-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-checkbox-theme-states-checked-border: transparent;
+    --kbq-checkbox-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
+    --kbq-checkbox-theme-states-checked-hover-border: transparent;
+    --kbq-checkbox-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
+    --kbq-checkbox-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-focused-background: hsla(229, 15%, 12%, 100%);
+    --kbq-checkbox-theme-states-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
+    --kbq-checkbox-theme-states-checked-focused-outline: 1px solid hsla(216, 100%, 60%, 100%);
+    --kbq-checkbox-theme-states-disabled-border: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-theme-states-disabled-color: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-theme-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-checkbox-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-checkbox-theme-states-disabled-caption: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-error-default-border: hsla(7, 97%, 35%, 100%);
+    --kbq-checkbox-error-default-color: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-error-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-error-default-background: hsla(7, 97%, 6%, 100%);
+    --kbq-checkbox-error-default-caption: hsla(229, 15%, 60%, 100%);
+    --kbq-checkbox-error-states-hover-border: hsla(7, 97%, 35%, 100%);
+    --kbq-checkbox-error-states-hover-background: hsla(7, 97%, 13%, 100%);
+    --kbq-checkbox-error-states-checked-border: transparent;
+    --kbq-checkbox-error-states-checked-background: hsla(7, 97%, 41%, 100%);
+    --kbq-checkbox-error-states-checked-hover-border: transparent;
+    --kbq-checkbox-error-states-checked-hover-background: hsla(7, 97%, 42%, 100%);
+    --kbq-checkbox-error-states-focused-border: hsla(7, 97%, 35%, 100%);
+    --kbq-checkbox-error-states-focused-background: hsla(7, 97%, 6%, 100%);
+    --kbq-checkbox-error-states-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-checked-focused-background: hsla(7, 97%, 41%, 100%);
+    --kbq-checkbox-error-states-checked-focused-outline: 1px solid hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-states-disabled-border: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-error-states-disabled-color: hsla(229, 15%, 30%, 100%);
+    --kbq-checkbox-error-states-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-checkbox-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-checkbox-error-states-disabled-caption: hsla(229, 15%, 30%, 100%);
+}

package/checkbox/checkbox.scss

@@ -4,10 +4,9 @@
 @use '../core/styles/common/visually-hidden';
 @use '../core/styles/common/layout';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './checkbox-theme' as *;
 
 .kbq-checkbox-checkmark,
 .kbq-checkbox-mixedmark {
@@ -43,9 +42,9 @@ $tokens: meta.module-variables(tokens) !default;
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
     cursor: inherit;
 
-    padding-top: kbq-css-variable(checkbox-size-normal-paddding-top);
+    padding-top: kbq-css-variable(checkbox-size-normal-padding-top);
 
-    padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
+    padding-bottom: kbq-css-variable(checkbox-size-normal-padding-bottom);
 
     padding-left: kbq-sum-series-css-variables(
         [checkbox-size-normal-width,
@@ -159,3 +158,6 @@ $tokens: meta.module-variables(tokens) !default;
         left: unset;
     }
 }
+
+@include kbq-checkbox-theme();
+@include kbq-checkbox-typography();