@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/progress-bar/_progress-bar-theme.scss

@@ -2,40 +2,36 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-progress-bar-theme($theme) {
     $progress-bar: map.get(map.get($theme, components), progress-bar);
 
     .kbq-progress-bar.kbq-theme {
-        $bar: map.get($progress-bar, bar);
-
         .kbq-progress-bar__inner {
-            background-color: map.get($bar, background);
+            background-color: kbq-css-variable(progress-bar-bar-background, map.get($progress-bar, bar, background));
         }
 
         .kbq-progress-bar__line {
-            background-color: map.get($bar, foreground);
+            background-color: kbq-css-variable(progress-bar-bar-foreground, map.get($progress-bar, bar, foreground));
         }
     }
 
     .kbq-progress-bar-text {
-        color: map.get($progress-bar, text);
+        color: kbq-css-variable(progress-bar-text, map.get($progress-bar, text));
     }
 
     .kbq-progress-bar-caption {
-        color: map.get($progress-bar, caption);
+        color: kbq-css-variable(progress-bar-caption, map.get($progress-bar, caption));
     }
 }
 
 @mixin kbq-progress-bar-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-progress-bar-text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, progress-bar-font-label));
+        @include kbq-typography-css-variables(progress-bar, label);
     }
 
     .kbq-progress-bar-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, progress-bar-font-caption));
+        @include kbq-typography-css-variables(progress-bar, caption);
     }
 }

package/progress-bar/progress-bar.scss

@@ -3,8 +3,7 @@
 
 @use '../core/styles/functions/timing';
 
-@use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -25,37 +24,25 @@ $tokens: meta.module-variables(tokens) !default;
     overflow: hidden;
 
     .kbq-progress-bar-text {
-        margin-bottom: var(
-            --kbq-progress-bar-size-container-content-gap,
-            map.get($tokens, progress-bar-size-container-content-gap)
-        );
+        margin-bottom: kbq-css-variable(progress-bar-size-container-content-gap);
     }
 
     .kbq-progress-bar-caption {
-        margin-top: var(
-            --kbq-progress-bar-size-container-content-gap,
-            map.get($tokens, progress-bar-size-container-content-gap)
-        );
+        margin-top: kbq-css-variable(progress-bar-size-container-content-gap);
     }
 
     & .kbq-progress-bar__inner {
         overflow: hidden;
 
-        height: var(--kbq-progress-bar-size-bar-height, map.get($tokens, progress-bar-size-bar-height));
-        border-radius: var(
-            --kbq-progress-bar-size-container-border-radius,
-            map.get($tokens, progress-bar-size-container-border-radius)
-        );
+        height: kbq-css-variable(progress-bar-size-bar-height);
+        border-radius: kbq-css-variable(progress-bar-size-container-border-radius);
     }
 
     & .kbq-progress-bar__line {
         height: 100%;
         transform-origin: top left;
 
-        border-radius: var(
-            --kbq-progress-bar-size-bar-border-radius,
-            map.get($tokens, progress-bar-size-bar-border-radius)
-        );
+        border-radius: kbq-css-variable(progress-bar-size-bar-border-radius);
     }
 
     &.kbq-progress-bar_determinate .kbq-progress-bar__line {

package/progress-spinner/_progress-spinner-theme.scss

@@ -2,34 +2,32 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-progress-spinner-theme($theme) {
     $progress-spinner: map.get(map.get($theme, components), progress-spinner);
 
     .kbq-progress-spinner {
         .kbq-progress-spinner__circle {
-            stroke: map.get($progress-spinner, circle);
+            stroke: kbq-css-variable(progress-spinner-circle, map.get($progress-spinner, circle));
         }
     }
 
     .kbq-progress-spinner-text {
-        color: map.get($progress-spinner, text);
+        color: kbq-css-variable(progress-spinner-text, map.get($progress-spinner, text));
     }
 
     .kbq-progress-spinner-caption {
-        color: map.get($progress-spinner, caption);
+        color: kbq-css-variable(progress-spinner-caption, map.get($progress-spinner, caption));
     }
 }
 
 @mixin kbq-progress-spinner-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-progress-spinner-text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, progress-spinner-font-label));
+        @include kbq-typography-css-variables(progress-spinner, label);
     }
 
     .kbq-progress-spinner-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, progress-spinner-font-caption));
+        @include kbq-typography-css-variables(progress-spinner, caption);
     }
 }

package/progress-spinner/progress-spinner.scss

@@ -3,8 +3,7 @@
 
 @use '../core/styles/functions/timing';
 
-@use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -18,10 +17,7 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex-direction: row;
 
-    gap: var(
-        --kbq-progress-spinner-size-compact-content-gap-horizontal,
-        map.get($tokens, progress-spinner-size-compact-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(progress-spinner-size-compact-content-gap-horizontal);
 }
 
 .kbq-progress-spinner__circle {
@@ -34,8 +30,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-progress-spinner__inner {
-    width: var(--kbq-progress-spinner-size-compact-size, map.get($tokens, progress-spinner-size-compact-size));
-    height: var(--kbq-progress-spinner-size-compact-size, map.get($tokens, progress-spinner-size-compact-size));
+    width: kbq-css-variable(progress-spinner-size-compact-size);
+    height: kbq-css-variable(progress-spinner-size-compact-size);
 
     transform: rotateZ(-90deg);
 
@@ -44,22 +40,16 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-progress-spinner__content {
     .kbq-progress-spinner-text {
-        margin-bottom: var(
-            --kbq-progress-spinner-size-compact-content-gap-vertical,
-            map.get($tokens, progress-spinner-size-compact-content-gap-vertical)
-        );
+        margin-bottom: kbq-css-variable(progress-spinner-size-compact-content-gap-vertical);
     }
 }
 
 .kbq-progress-spinner_big {
-    gap: var(
-        --kbq-progress-spinner-size-big-content-gap-horizontal,
-        map.get($tokens, progress-spinner-size-big-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(progress-spinner-size-big-content-gap-horizontal);
 
     & .kbq-progress-spinner__inner {
-        width: var(--kbq-progress-spinner-size-big-size, map.get($tokens, progress-spinner-size-big-size));
-        height: var(--kbq-progress-spinner-size-big-size, map.get($tokens, progress-spinner-size-big-size));
+        width: kbq-css-variable(progress-spinner-size-big-size);
+        height: kbq-css-variable(progress-spinner-size-big-size);
     }
 
     & .kbq-progress-spinner__circle {

package/radio/_radio-theme.scss

@@ -2,58 +2,66 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-radio-state($component, $type, $state-name) {
+    $state: map.get($component, $type, $state-name);
 
-@mixin kbq-radio-state($state) {
     & .kbq-radio-button__outer-circle {
-        border-color: map.get($state, outer-circle-border);
-        background: map.get($state, outer-circle-background);
-        box-shadow: map.get($state, outer-circle-shadow);
+        border-color: kbq-css-variable(
+            radio-#{$type}-#{$state-name}-outer-circle-border,
+            map.get($state, outer-circle-border)
+        );
+        background: kbq-css-variable(
+            radio-#{$type}-#{$state-name}-outer-circle-background,
+            map.get($state, outer-circle-background)
+        );
+        box-shadow: kbq-css-variable(
+            radio-#{$type}-#{$state-name}-outer-circle-shadow,
+            map.get($state, outer-circle-shadow)
+        );
     }
 
     & .kbq-radio-button__inner-circle {
-        background: map.get($state, inner-circle-background);
+        background: kbq-css-variable(
+            radio-#{$type}-#{$state-name}-inner-circle-background,
+            map.get($state, inner-circle-background)
+        );
     }
 }
 
-@mixin kbq-radio-color($radio) {
-    $default: map.get($radio, default);
-    @include kbq-radio-state($default);
+@mixin kbq-radio-color($component, $type-name) {
+    @include kbq-radio-state($component, $type-name, default);
 
     & .kbq-hint .kbq-hint__text {
-        color: map.get($default, caption);
+        color: map.get($component, $type-name, default, caption);
     }
 
     &:hover {
-        $hover: map.get($radio, hover);
-        @include kbq-radio-state($hover);
+        @include kbq-radio-state($component, $type-name, states-hover);
     }
 
     &.cdk-keyboard-focused {
-        $focused: map.get($radio, focused);
-        @include kbq-radio-state($focused);
+        @include kbq-radio-state($component, $type-name, states-focused);
     }
 
     &.kbq-selected:not(.kbq-disabled) {
-        $selected: map.get($radio, checked);
-        @include kbq-radio-state($selected);
+        @include kbq-radio-state($component, $type-name, states-checked);
     }
 
     &.kbq-selected.kbq-disabled {
-        $selected-disabled: map.get($radio, checked-disabled);
-        @include kbq-radio-state($selected-disabled);
+        @include kbq-radio-state($component, $type-name, states-checked-disabled);
     }
 
     &.kbq-disabled {
-        $disabled: map.get($radio, disabled);
-        @include kbq-radio-state($disabled);
+        @include kbq-radio-state($component, $type-name, states-disabled);
 
         & .kbq-radio-label {
             cursor: default;
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: map.get($default, caption);
+            color: map.get($component, $type-name, states-disabled, caption);
         }
     }
 }
@@ -63,46 +71,37 @@
 
     $radio: map.get(map.get($theme, components), radio);
 
-    $radio-theme: map.get($radio, theme);
-    $radio-error: map.get($radio, error);
-
-    .kbq-radio-group {
-
-    }
-
     .kbq-radio-button {
         & .kbq-radio-button__inner-circle {
             border-width: 0 !important;
         }
 
-        @include kbq-radio-color($radio-theme);
+        @include kbq-radio-color($radio, theme);
 
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
 
         &.kbq-error {
-            @include kbq-radio-color($radio-error);
+            @include kbq-radio-color($radio, error);
 
-            color: map.get($foreground, contrast);
+            color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
         }
     }
 }
 
 @mixin kbq-radio-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-radio-button {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, radio-font-normal-label));
+        @include kbq-typography-css-variables(radio, normal-label);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, radio-font-normal-caption));
+            @include kbq-typography-css-variables(radio, normal-caption);
         }
     }
 
     .kbq-radio-button.kbq-radio-button_big {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, radio-font-big-label));
+        @include kbq-typography-css-variables(radio, big-label);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, radio-font-big-caption));
+            @include kbq-typography-css-variables(radio, big-caption);
         }
     }
 }

package/radio/radio.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -11,11 +11,11 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
 
     &.kbq-radio-group_normal {
-        gap: var(--kbq-radio-size-normal-vertical-gap, map.get($tokens, radio-size-normal-vertical-gap));;
+        gap: kbq-css-variable(radio-size-normal-vertical-gap);
     }
 
     &.kbq-radio-group_big {
-        gap: var(--kbq-radio-size-big-vertical-gap, map.get($tokens, radio-size-big-vertical-gap));;
+        gap: kbq-css-variable(radio-size-big-vertical-gap);
     }
 }
 
@@ -46,10 +46,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     padding-left: calc(
         var(--kbq-radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size)) +
-        var(
-            --kbq-radio-size-normal-horizontal-content-padding,
-            map.get($tokens, radio-size-normal-horizontal-content-padding)
-        )
+            var(
+                --kbq-radio-size-normal-horizontal-content-padding,
+                map.get($tokens, radio-size-normal-horizontal-content-padding)
+            )
     );
     padding-right: 0;
 
@@ -73,40 +73,31 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         left: 0;
+        top: var(--kbq-radio-size-normal-top, map.get($tokens, radio-size-normal-top));
 
-        width: var(--kbq-radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size));
-        height: var(--kbq-radio-size-normal-outer-size, map.get($tokens, radio-size-normal-outer-size));
+        width: kbq-css-variable(radio-size-normal-outer-size);
+        height: kbq-css-variable(radio-size-normal-outer-size);
     }
 
     .kbq-radio-button__inner-circle {
         position: relative;
         margin: auto;
 
-        width: var(--kbq-radio-size-normal-inner-size, map.get($tokens, radio-size-normal-inner-size));
-        height: var(--kbq-radio-size-normal-inner-size, map.get($tokens, radio-size-normal-inner-size));
+        width: kbq-css-variable(radio-size-normal-inner-size);
+        height: kbq-css-variable(radio-size-normal-inner-size);
     }
 
     .kbq-radio__text-container {
         display: flex;
         flex-direction: column;
-
-        & .kbq-radio__text {
-
-        }
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-radio-size-normal-vertical-content-padding,
-            map.get($tokens, radio-size-normal-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(radio-size-normal-vertical-content-padding);
     }
 
     [dir='rtl'] & {
-        padding-right: var(
-            --kbq-radio-size-normal-horizontal-content-padding,
-            map.get($tokens, radio-size-normal-horizontal-content-padding)
-        );
+        padding-right: kbq-css-variable(radio-size-normal-horizontal-content-padding);
         padding-left: 0;
     }
 }
@@ -121,36 +112,30 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-radio-label-content {
         padding-left: calc(
             var(--kbq-radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size)) +
-            var(
-                --kbq-radio-size-big-horizontal-content-padding,
-                map.get($tokens, radio-size-big-horizontal-content-padding)
-            )
+                var(
+                    --kbq-radio-size-big-horizontal-content-padding,
+                    map.get($tokens, radio-size-big-horizontal-content-padding)
+                )
         );
 
         .kbq-radio-button__outer-circle {
-            top: 2px;
+            top: var(--kbq-radio-size-big-top, map.get($tokens, radio-size-big-top));
 
-            width: var(--kbq-radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size));
-            height: var(--kbq-radio-size-big-outer-size, map.get($tokens, radio-size-big-outer-size));
+            width: kbq-css-variable(radio-size-big-outer-size);
+            height: kbq-css-variable(radio-size-big-outer-size);
         }
 
         .kbq-radio-button__inner-circle {
-            width: var(--kbq-radio-size-big-inner-size, map.get($tokens, radio-size-big-inner-size));
-            height: var(--kbq-radio-size-big-inner-size, map.get($tokens, radio-size-big-inner-size));
+            width: kbq-css-variable(radio-size-big-inner-size);
+            height: kbq-css-variable(radio-size-big-inner-size);
         }
 
         & .kbq-hint {
-            margin-top: var(
-                --kbq-radio-size-big-vertical-content-padding,
-                map.get($tokens, radio-size-big-vertical-content-padding)
-            );
+            margin-top: kbq-css-variable(radio-size-big-vertical-content-padding);
         }
 
         [dir='rtl'] & {
-            padding-right: var(
-                --kbq-radio-size-big-horizontal-content-padding,
-                map.get($tokens, radio-size-big-horizontal-content-padding)
-            );
+            padding-right: kbq-css-variable(radio-size-big-horizontal-content-padding);
         }
     }
 }

package/risk-level/_risk-level-theme.scss

@@ -2,87 +2,81 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
-
-@mixin kbq-risk-level-filled-color($risk-level) {
+@mixin kbq-risk-level-filled-color($component, $type, $sub-type, $style-name) {
+    $style: map.get($component, $type, $sub-type, $style-name);
+    $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
     border: transparent;
 
-    color: map.get($risk-level, color);
-    background: map.get($risk-level, background);
+    color: kbq-css-variable(#{$base}-color, map.get($style, color));
+    background: kbq-css-variable(#{$base}-background, map.get($style, background));
 }
 
-@mixin kbq-risk-level-outline-color($risk-level) {
-    border-color: map.get($risk-level, border);
+@mixin kbq-risk-level-outline-color($component, $type, $sub-type, $style-name) {
+    $style: map.get($component, $type, $sub-type, $style-name);
+    $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
+
+    border-color: kbq-css-variable(#{$base}-border, map.get($style, border));
 
-    color: map.get($risk-level, color);
-    background: map.get($risk-level, background);
+    color: kbq-css-variable(#{$base}-color, map.get($style, color));
+    background: kbq-css-variable(#{$base}-background, map.get($style, background));
 }
 
 @mixin kbq-risk-level-theme($theme) {
     $risk-level: map.get(map.get($theme, components), risk-level);
 
-    $filled: map.get($risk-level, filled);
-    $outline: map.get($risk-level, outline);
-
     .kbq-risk-level_filled {
-        $fade-on: map.get($filled, fade-on);
-
         &.kbq-risk-level_fade-contrast {
-            @include kbq-risk-level-filled-color(map.get($fade-on, contrast));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, contrast);
         }
 
         &.kbq-risk-level_fade-success {
-            @include kbq-risk-level-filled-color(map.get($fade-on, success));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, success);
         }
 
         &.kbq-risk-level_fade-warning {
-            @include kbq-risk-level-filled-color(map.get($fade-on, warning));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, warning);
         }
 
         &.kbq-risk-level_fade-error {
-            @include kbq-risk-level-filled-color(map.get($fade-on, error));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, error);
         }
 
-        $fade-off: map.get($filled, fade-off);
-
         &.kbq-risk-level_success {
-            @include kbq-risk-level-filled-color(map.get($fade-off, success));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-off, success);
         }
 
         &.kbq-risk-level_warning {
-            @include kbq-risk-level-filled-color(map.get($fade-off, warning));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-off, warning);
         }
 
         &.kbq-risk-level_error {
-            @include kbq-risk-level-filled-color(map.get($fade-off, error));
+            @include kbq-risk-level-filled-color($risk-level, filled, fade-off, error);
         }
     }
 
     .kbq-risk-level_outline {
-        $fade-on: map.get($outline, fade-on);
-
         &.kbq-risk-level_fade-contrast {
-            @include kbq-risk-level-outline-color(map.get($fade-on, contrast));
+            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, contrast);
         }
 
         &.kbq-risk-level_fade-success {
-            @include kbq-risk-level-outline-color(map.get($fade-on, success));
+            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, success);
         }
 
         &.kbq-risk-level_fade-warning {
-            @include kbq-risk-level-outline-color(map.get($fade-on, warning));
+            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, warning);
         }
 
         &.kbq-risk-level_fade-error {
-            @include kbq-risk-level-outline-color(map.get($fade-on, error));
+            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, error);
         }
     }
 }
 
 @mixin kbq-risk-level-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-risk-level {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, risk-level-font-text));
+        @include kbq-typography-css-variables(risk-level, text);
     }
 }

package/risk-level/risk-level.component.scss

@@ -1,11 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-risk-level {
     box-sizing: border-box;
@@ -15,12 +11,10 @@ $tokens: meta.module-variables(tokens) !default;
 
     border-style: solid;
 
-    padding:
-        var(--kbq-risk-level-size-padding-vertical, map.get($tokens, risk-level-size-padding-vertical))
-        var(--kbq-risk-level-size-padding-horizontal, map.get($tokens, risk-level-size-padding-horizontal));
+    padding: kbq-css-variable(risk-level-size-padding-vertical) kbq-css-variable(risk-level-size-padding-horizontal);
 
     border: {
-        width: var(--kbq-risk-level-size-border-width, map.get($tokens, risk-level-size-border-width));
-        radius: var(--kbq-risk-level-size-border-radius, map.get($tokens, risk-level-size-border-radius));
+        width: kbq-css-variable(risk-level-size-border-width);
+        radius: kbq-css-variable(risk-level-size-border-radius);
     }
 }

package/schematics/collection.json

@@ -0,0 +1,11 @@
+{
+    "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+        "ng-add": {
+            "description": "Adds @koobiq/components library to the project and installs dependencies",
+            "factory": "./ng-add/index",
+            "schema": "./ng-add/schema.json",
+            "aliases": ["install"]
+        }
+    }
+}