fix(visual): removed component tokens usage from code (#DS-2996) (#387)

apps/docs/scripts/build-tokens.js

@@ -64,16 +64,14 @@ const themeColorNames = ['default-theme'];
 
 for (const skin of [kbq]) {
     const koobiqTokensProps = `node_modules/@koobiq/design-tokens/web/properties/**/*.json5`;
-    const koobiqTokensComponents = `node_modules/@koobiq/design-tokens/web/components/**/*.json5`;
 
     for (const theme of themeColorNames) {
         themesConfig.push({
             skin,
             name: theme,
             buildPath: [
                 koobiqTokensProps,
-                `apps/docs/src/styles/${skin}/${theme}/properties/**/*.json5`,
-                koobiqTokensComponents
+                `apps/docs/src/styles/${skin}/${theme}/properties/**/*.json5`
             ],
             outputPath: `apps/docs/src/styles/${skin}/${theme}/`
         });

apps/docs/src/app/containers/icons-viewer/icons-viewer-theme.scss

@@ -12,7 +12,7 @@
 
     .docs-icons-viewer__table-cell {
         background: var(--kbq-background-bg);
-        border-color: var(--kbq-line-contrast-less);
+        border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
 
         > .docs-icons-viewer__table-cell-name {
             color: var(--kbq-foreground-text-less-contrast);

apps/docs/src/app/containers/icons-viewer/icons-viewer.scss

@@ -101,7 +101,7 @@
     flex-direction: column;
     text-align: center;
 
-    border-radius: 8px;
+    border-radius: var(--kbq-size-border-radius);
     border-style: solid;
     border-width: 1px;
 

apps/docs/src/styles/_hot-keys.scss

@@ -13,7 +13,7 @@
 
     border-width: 1px;
     border-style: solid;
-    border-radius: 8px;
+    border-radius: var(--kbq-size-border-radius);
 
     box-sizing: border-box;
 

docs/guides/theming.md

@@ -162,8 +162,6 @@ this.colorAutomaticTheme.addEventListener('change', this.setAutoTheme);
         <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/core/styles/theming/scrollbar-tokens.scss">scrollbar</a></li>
         <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/core/forms/forms-tokens.scss">forms</a></li>
         <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/core/option/option-tokens.scss">option</a></li>
-        <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/core/option/optgroup-tokens.scss">optgroup</a></li>
-        <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/core/option/option-action-tokens.scss">option-action</a></li>
         <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/splitter/splitter-tokens.scss">splitter</a></li>
         <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/tags/tag-tokens.scss">tag</a></li>
         <li><a href="https://github.com/koobiq/angular-components/tree/main/packages/components/tags/tag-input-tokens.scss">tag-input</a></li>

packages/components-experimental/form-field/form-field-tokens.scss

@@ -1,7 +1,7 @@
 .kbq-form-field___EXPERIMENTAL {
     --kbq-form-field-size-height: var(--kbq-size-3xl);
     --kbq-form-field-size-border-width: 1px;
-    --kbq-form-field-size-border-radius: var(--kbq-size-s);
+    --kbq-form-field-size-border-radius: var(--kbq-size-border-radius);
     --kbq-form-field-size-icon-size: var(--kbq-size-l);
     --kbq-form-field-size-icon-margin-left: var(--kbq-size-s);
     --kbq-form-field-size-icon-margin-right: var(--kbq-size-s);

packages/components/button-toggle/button-toggle-tokens.scss

@@ -1,5 +1,5 @@
 .kbq-button-toggle-group {
-    --kbq-button-toggle-size-container-border-radius: var(--kbq-size-s);
+    --kbq-button-toggle-size-container-border-radius: var(--kbq-size-border-radius);
     --kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);
     --kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);

packages/components/button/button-tokens.scss

@@ -8,7 +8,7 @@
 .kbq-button-icon {
     --kbq-button-size-height: var(--kbq-size-3xl);
     --kbq-button-size-border-width: var(--kbq-size-border-width);
-    --kbq-button-size-border-radius: var(--kbq-size-s);
+    --kbq-button-size-border-radius: var(--kbq-size-border-radius);
     --kbq-button-size-horizontal-padding: var(--kbq-size-m);
     --kbq-button-size-content-padding: var(--kbq-size-xs);
 }

packages/components/code-block/code-block-tokens.scss

@@ -143,7 +143,7 @@
     );
     --kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-secondary);
     --kbq-code-block-outline-container-background: var(--kbq-background-card);
-    --kbq-code-block-outline-container-border-color: var(--kbq-line-contrast-less);
+    --kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
     --kbq-code-block-outline-header-background: var(--kbq-background-card);
     --kbq-code-block-outline-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, var(--kbq-background-card));
@@ -262,7 +262,7 @@
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
     --kbq-code-block-filled-container-background: var(--kbq-background-bg-secondary);
-    --kbq-code-block-filled-container-border-color: var(--kbq-line-contrast-less);
+    --kbq-code-block-filled-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
     --kbq-code-block-filled-header-background: var(--kbq-background-bg-secondary);
     --kbq-code-block-filled-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(

packages/components/code-block/code-block.scss

@@ -192,7 +192,7 @@ $border-width: var(--kbq-code-block-size-container-border-width);
     }
 
     .bg-wrapper {
-        border-radius: var(--kbq-button-size-border-radius);
+        border-radius: var(--kbq-size-border-radius);
     }
 }
 

packages/components/core/forms/_forms.scss

@@ -12,8 +12,8 @@
     }
 
     .kbq-form-horizontal {
-        $line-height: var(--kbq-forms-font-label-line-height);
-        $form-field-size-height: var(--kbq-form-field-size-height);
+        $line-height: var(--kbq-typography-text-normal-line-height);
+        $form-field-size-height: var(--kbq-form-field-size-height, var(--kbq-size-3xl));
 
         & .kbq-form-row_margin {
             margin-bottom: var(--kbq-forms-size-horizontal-row-margin-bottom);

packages/components/core/forms/forms-tokens.scss

@@ -1,5 +1,4 @@
 .kbq-form {
-    --kbq-form-field-size-height: var(--kbq-size-3xl);
     --kbq-forms-size-horizontal-row-margin-bottom: var(--kbq-size-xl);
     --kbq-forms-size-horizontal-control-padding-left: var(--kbq-size-l);
     --kbq-forms-size-horizontal-legend-margin-top: var(--kbq-size-3xl);

packages/components/core/option/action.scss

@@ -14,14 +14,14 @@
 
     margin-right: -2px;
 
-    width: var(--kbq-list-font-text-line-height);
-    height: var(--kbq-list-font-text-line-height);
+    width: var(--kbq-typography-text-normal-line-height);
+    height: var(--kbq-typography-text-normal-line-height);
 
     cursor: pointer;
 
     outline: none;
 
-    border: 2px solid transparent;
+    border: var(--kbq-size-3xs) solid transparent;
 
     background: transparent;
 

packages/components/core/option/action.ts

@@ -52,7 +52,7 @@ export const KbqOptionActionMixinBase: HasTabIndexCtor & CanDisableCtor & typeof
             <i class="kbq kbq-icon kbq-ellipsis-vertical_16"></i>
         }
     `,
-    styleUrls: ['./action.scss', 'option-action-tokens.scss'],
+    styleUrls: ['./action.scss'],
     host: {
         class: 'kbq-option-action',
         '[class.kbq-expanded]': 'false',

packages/components/core/option/optgroup.ts

@@ -15,7 +15,7 @@ let uniqueOptgroupIdCounter = 0;
     selector: 'kbq-optgroup',
     exportAs: 'kbqOptgroup',
     templateUrl: 'optgroup.html',
-    styleUrls: ['./optgroup.scss', './optgroup-tokens.scss'],
+    styleUrls: ['./optgroup.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     inputs: ['disabled'],

packages/components/core/option/option-tokens.scss

@@ -1,70 +1,5 @@
 .kbq-option {
-    --kbq-list-size-container-padding-left: var(--kbq-size-m);
-    --kbq-list-size-container-padding-right: var(--kbq-size-m);
-    --kbq-list-size-container-padding-vertical: var(--kbq-size-xs);
-    --kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);
-    --kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);
-    --kbq-list-size-text-padding-vertical: 0;
-    --kbq-list-size-header-padding-top: var(--kbq-size-s);
-    --kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);
-    --kbq-list-size-header-padding-horizontal: var(--kbq-size-m);
-    --kbq-list-size-subheading-padding-top: var(--kbq-size-m);
-    --kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);
-    --kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
 }
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-list-default-container-background: transparent;
-    --kbq-list-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
-    --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
-    --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
-    --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-list-states-disabled-container-background: transparent;
-    --kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-list-default-container-background: transparent;
-    --kbq-list-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
-    --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
-    --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
-    --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-list-states-disabled-container-background: transparent;
-    --kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
-}

packages/components/core/option/option.ts

@@ -137,7 +137,8 @@ export class KbqVirtualOption extends KbqOptionBase {
         '(click)': 'selectViaInteraction()',
         '(keydown)': 'handleKeydown($event)'
     },
-    styleUrls: ['option.scss', 'option-tokens.scss'],
+    /* Component inherits styles from `list`, so `list` variables are imported as the single source of truth. */
+    styleUrls: ['option.scss', 'option-tokens.scss', '../../list/list-tokens.scss'],
     templateUrl: 'option.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,

packages/components/core/styles/common/_groups.scss

@@ -37,7 +37,7 @@
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * #{var(--kbq-button-size-border-width)});
+        margin-left: calc(-1 * #{var(--kbq-size-border-width)});
     }
 
     & > .kbq-group-item:first-child:not(:last-child) {
@@ -73,7 +73,7 @@
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--kbq-button-size-border-radius);
+            border-top-right-radius: var(--kbq-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -83,7 +83,7 @@
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(--kbq-button-size-border-radius);
+            border-bottom-left-radius: var(--kbq-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);
@@ -100,6 +100,6 @@
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * #{var(--kbq-button-size-border-width)});
+        margin-top: calc(-1 * #{var(--kbq-size-border-width)});
     }
 }

packages/components/core/styles/common/_popup.scss

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