@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

package/core/styles/common/_list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
+@use './tokens' as *;
 
 
 // This mixin will ensure that lines that overflow the container will hide the overflow and
@@ -55,8 +56,8 @@
 
     @include kbq-truncate-line();
 
-    padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-    padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+    padding-top: kbq-css-variable(list-size-text-padding-vertical);
+    padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
 }
 
 // This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
@@ -82,11 +83,9 @@
 
     min-height: 32px;
 
-    gap: var(
-        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(list-size-container-content-gap-horizontal);
 
-    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(list-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
@@ -113,10 +112,7 @@
     }
 
     .kbq-list-option-caption {
-        padding-top: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
     }
 }
 
@@ -132,10 +128,10 @@
     min-height: 32px;
 
     padding:
-        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
-        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+        kbq-css-variable(list-size-header-padding-top)
+        kbq-css-variable(list-size-header-padding-horizontal)
+        kbq-css-variable(list-size-header-padding-bottom)
+        kbq-css-variable(list-size-header-padding-horizontal);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -154,10 +150,10 @@
     min-height: 32px;
 
     padding:
-        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
-        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+        kbq-css-variable(list-size-subheading-padding-top)
+        kbq-css-variable(list-size-subheading-padding-horizontal)
+        kbq-css-variable(list-size-subheading-padding-bottom)
+        kbq-css-variable(list-size-subheading-padding-horizontal);
 
     .kbq-list-text {
         @include kbq-list-text();

package/core/styles/common/_popup.scss

@@ -1,11 +1,12 @@
 @use 'sass:map';
+@use './tokens' as *;
 
 
 @mixin popup-params($theme) {
-    $popup: map.get(map.get($theme, components), popup);
+    $popup: map.get($theme, components, popup);
 
-    box-shadow: map.get($popup, shadow);
-    border-color: map.get($popup, border);
+    box-shadow: kbq-css-variable(popup-shadow, map.get($popup, shadow));
+    border-color: kbq-css-variable(popup-border, map.get($popup, border));
 
-    background-color: map.get($popup, background);
+    background-color: kbq-css-variable(popup-background, map.get($popup, background));
 }

package/core/styles/common/_select.scss

@@ -3,6 +3,7 @@
 
 @use '../common/vendor-prefixes';
 @use '../tokens';
+@use './tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -116,11 +117,9 @@ $tokens: meta.module-variables(tokens) !default;
                     (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
                 );
 
-                gap: var(--kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap));
+                gap: kbq-css-variable(select-size-multiple-content-gap);
 
-                margin-right: var(
-                    --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
-                );
+                margin-right: kbq-css-variable(select-size-multiple-content-gap);
             }
         }
     }
@@ -135,9 +134,7 @@ $tokens: meta.module-variables(tokens) !default;
             flex: 0 0 70px;
             align-self: center;
             padding-left: 4px;
-            padding-right: var(
-                --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
-            );
+            padding-right: kbq-css-variable(select-size-multiple-content-gap);
 
             text-align: right;
         }
@@ -175,9 +172,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     overflow: hidden;
 
-    border-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
+    border-radius: kbq-css-variable(select-panel-size-border-radius);
 
     // Override optgroup and option to scale based on font-size of the trigger.
     .kbq-optgroup-label,
@@ -194,15 +189,15 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         max-width: 100%;
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
+        height: kbq-css-variable(option-size-height);
 
         cursor: default;
         outline: none;
 
-        padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-        padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+        padding-left: kbq-css-variable(option-size-horizontal-padding);
+        padding-right: kbq-css-variable(option-size-horizontal-padding);
 
-        border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+        border: kbq-css-variable(option-size-border-width) solid transparent;
     }
 
     .kbq-select__search-container {
@@ -214,7 +209,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 %kbq-select-content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    max-height: kbq-css-variable(select-panel-size-max-height);
     padding: 4px 0;
     overflow: hidden auto;
 }
@@ -229,5 +224,5 @@ $tokens: meta.module-variables(tokens) !default;
     border-top-width: 1px;
     border-top-style: solid;
 
-    padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+    padding: kbq-css-variable(size-xxs) kbq-css-variable(size-m);
 }

package/core/styles/common/_tokens.scss

@@ -9,15 +9,9 @@
 $tokens: meta.module-variables(tokens) !default;
 
 
-@function cssVar($name) {
-    @if string.index($name, light-) {
-        $short-name: '';
-
-        @each $part in string.split($name, '-light') {
-            $short-name: $short-name + $part;
-        }
-
-        @return var(--kbq-#{$short-name}, map.get($tokens, $name));
+@function kbq-css-variable($name, $value: null) {
+    @if $value {
+        @return var(--kbq-#{$name}, $value);
     } @else {
         @return var(--kbq-#{$name}, map.get($tokens, $name));
     }
@@ -26,3 +20,30 @@ $tokens: meta.module-variables(tokens) !default;
 @function getToken($name) {
     @return map.get($tokens, $name);
 }
+
+@mixin kbq-css-font-variable($component, $component-property, $font-property, $font) {
+    #{$font-property}: var(
+        --kbq-#{$component}-#{$font}#{$component-property}-#{$font-property},
+        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
+    );
+}
+
+@mixin kbq-typography-css-variables($component, $property) {
+    @include kbq-css-font-variable($component, $property, font-size, font-);
+    @include kbq-css-font-variable($component, $property, font-weight, font-);
+    @include kbq-css-font-variable($component, $property, line-height, font-);
+    @include kbq-css-font-variable($component, $property, font-family, font-);
+    @include kbq-css-font-variable($component, $property, text-transform, font-);
+    @include kbq-css-font-variable($component, $property, font-feature-settings, font-);
+    @include kbq-css-font-variable($component, $property, letter-spacing, font-);
+}
+
+@mixin kbq-typography-level-to-styles_css-variables($component, $property) {
+    @include kbq-css-font-variable($component, $property, font-size, '');
+    @include kbq-css-font-variable($component, $property, font-weight, '');
+    @include kbq-css-font-variable($component, $property, line-height, '');
+    @include kbq-css-font-variable($component, $property, font-family, '');
+    @include kbq-css-font-variable($component, $property, text-transform, '');
+    @include kbq-css-font-variable($component, $property, font-feature-settings, '');
+    @include kbq-css-font-variable($component, $property, letter-spacing, '');
+}