feat(visual): components theming with CSS-vars (#DS-2833) (#295)

koobiq · Sep 19, 2024 · b4e92b4 · b4e92b4
1 parent 960eafe
commit b4e92b4
Show file tree

Hide file tree

Showing 25 changed files with 396 additions and 235 deletions.
diff --git a/docs/guides/theming-2.0.md b/docs/guides/theming-2.0.md
@@ -92,6 +92,10 @@
 -   [option](/packages/components/core/option/option-tokens.scss)
 -   [optgroup](/packages/components/core/option/optgroup-tokens.scss)
 -   [option-action](/packages/components/core/option/option-action-tokens.scss)
+-   [splitter](/packages/components/splitter/splitter-tokens.scss)
+-   [tag](/packages/components/tags/tag-tokens.scss)
+-   [tag-input](/packages/components/tags/tag-input-tokens.scss)
+-   [splitter](/packages/components/splitter/splitter-tokens.scss)
 -   [table](/packages/components/table/table-tokens.scss)
 -   [textarea](/packages/components/textarea/textarea-tokens.scss)
 -   [timezone](/packages/components/timezone/timezone-option-tokens.scss)

diff --git a/packages/components-dev/tabs/template.html b/packages/components-dev/tabs/template.html
@@ -120,103 +120,4 @@ <h3>Navigation</h3>
             Disabled
         </a>
     </nav>
-
-    <br />
-    <br />
-    <br />
-
-    <nav
-        kbq-tab-nav-bar
-        vertical
-    >
-        <a
-            *ngFor="let link of links"
-            kbq-tab-link
-            [active]="activeLink === link"
-            (click)="activeLink = link"
-        >
-            {{ link }}
-        </a>
-
-        <a
-            kbq-tab-link
-            [active]="activeLink === 1"
-            [disabled]="true"
-            (click)="activeLink = 1"
-        >
-            <i kbq-icon="mc-play_16"></i>
-            Disabled
-        </a>
-    </nav>
-
-    <h3>Very slow animation</h3>
-    <kbq-tab-group animationDuration="2000ms">
-        <kbq-tab [label]="'First'">Content 1</kbq-tab>
-        <kbq-tab [label]="'Second'">Content 2</kbq-tab>
-        <kbq-tab [label]="'Third'">Content 3</kbq-tab>
-    </kbq-tab-group>
-
-    <kbq-tab-group kbq-stretch-tabs>
-        <kbq-tab>
-            <ng-template kbq-tab-label>
-                <i kbq-icon="mc-search_16"></i>
-                First
-            </ng-template>
-            Content 1
-        </kbq-tab>
-
-        <kbq-tab>
-            <ng-template kbq-tab-label>
-                Second
-                <i kbq-icon="mc-search_16"></i>
-            </ng-template>
-            Content 2
-        </kbq-tab>
-
-        <kbq-tab>
-            <ng-template kbq-tab-label>
-                <i kbq-icon="mc-search_16"></i>
-                Third
-            </ng-template>
-            Content 3
-        </kbq-tab>
-    </kbq-tab-group>
-
-    <!--    <kbq-tab-group-->
-    <!--        (selectedTabChange)="selectedTabChange($event)"-->
-    <!--        style="width: 400px; max-height: 500px">-->
-    <!--        <kbq-tab [tabId]="'firstTab'" [disabled]="false">-->
-    <!--            <ng-template kbq-tab-label>-->
-    <!--                <i kbq-icon="mc-play_16"></i>label 1-->
-    <!--            </ng-template>-->
-    <!--            <div>-->
-    <!--                <kbq-select placeholder="select">-->
-    <!--                    <kbq-option value="1">test1</kbq-option>-->
-    <!--                    <kbq-option value="2">test2</kbq-option>-->
-    <!--                </kbq-select>-->
-    <!--                <div style="height: 2000px"></div>-->
-    <!--            </div>-->
-    <!--        </kbq-tab>-->
-    <!--    </kbq-tab-group>-->
-
-    <kbq-tab-group
-        style="width: 400px"
-        (selectedTabChange)="selectedTabChange($event)"
-    >
-        <kbq-tab *ngFor="let tab of tabsWithScroll; let i = index">
-            <ng-template kbq-tab-label>
-                <i
-                    kbq-icon="kbq-close-S_16"
-                    (click)="tabsWithScroll.splice(i, 1)"
-                ></i>
-                label {{ tab }}
-            </ng-template>
-        </kbq-tab>
-    </kbq-tab-group>
-    <button
-        kbq-button
-        (click)="updatedTabs()"
-    >
-        Add tab
-    </button>
 </div>
diff --git a/packages/components-dev/tag/template.html b/packages/components-dev/tag/template.html
@@ -260,7 +260,7 @@ <h4 class="kbq-title">simple Tags</h4>
         <br />
 
         <div class="simple-tags-example-row">
-            <kbq-tag [color]="colors.Contrast">
+            <kbq-tag [color]="colors.Theme">
                 Normal
                 <i
                     kbq-icon="mc-close-S_16"
@@ -269,7 +269,7 @@ <h4 class="kbq-title">simple Tags</h4>
             </kbq-tag>
             <kbq-tag
                 class="kbq-hovered"
-                [color]="colors.Contrast"
+                [color]="colors.Theme"
             >
                 Hovered
                 <i
@@ -279,7 +279,7 @@ <h4 class="kbq-title">simple Tags</h4>
             </kbq-tag>
             <kbq-tag
                 class="kbq-focused"
-                [color]="colors.Contrast"
+                [color]="colors.Theme"
             >
                 Focused
                 <i
@@ -288,7 +288,7 @@ <h4 class="kbq-title">simple Tags</h4>
                 ></i>
             </kbq-tag>
             <kbq-tag
-                [color]="colors.Contrast"
+                [color]="colors.Theme"
                 [disabled]="true"
             >
                 Disabled

diff --git a/packages/components/core/styles/_koobiq-theme.scss b/packages/components/core/styles/_koobiq-theme.scss
@@ -7,7 +7,6 @@
 
 @use '../../link/link-theme' as *;
 @use '../../markdown/markdown-theme' as *;
-@use '../../splitter/splitter-theme' as *;
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
 @use '../../textarea/textarea-theme' as *;
@@ -23,9 +22,8 @@
     @include kbq-link-theme();
     @include kbq-markdown-theme();
     @include kbq-scrollbar-theme();
-    @include kbq-splitter-theme($theme);
-    @include kbq-tabs-theme($theme);
-    @include kbq-tag-theme($theme);
+    @include kbq-tabs-theme();
+    @include kbq-tag-theme();
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
@@ -38,7 +36,7 @@
     @include kbq-markdown-typography();
 
     @include kbq-forms-typography();
-    @include kbq-tabs-typography($config);
-    @include kbq-tag-typography($config);
+    @include kbq-tabs-typography();
+    @include kbq-tag-typography();
     @include kbq-textarea-typography();
 }
diff --git a/packages/components/form-field/form-field.ts b/packages/components/form-field/form-field.ts
@@ -61,7 +61,8 @@ export const KbqFormFieldMixinBase: CanColorCtor & typeof KbqFormFieldBase = mix
         '../datepicker/datepicker-input.scss',
         '../textarea/textarea.scss',
         'form-field-tokens.scss',
-        '../input/input-tokens.scss'
+        '../input/input-tokens.scss',
+        '../tags/tag-input-tokens.scss'
     ],
     host: {
         class: 'kbq-form-field',

diff --git a/packages/components/splitter/_splitter-theme.scss b/packages/components/splitter/_splitter-theme.scss
@@ -1,10 +1,6 @@
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-splitter-theme($theme) {
-    $background: map.get($theme, states, background);
-
+@mixin kbq-splitter-theme() {
     .kbq-gutter {
         cursor: col-resize;
 
@@ -18,7 +14,7 @@
         }
 
         &[disabled] {
-            background-color: kbq-css-variable(background-background-disabled, map.get($background, disabled));
+            background-color: kbq-css-variable(background-background-disabled);
 
             cursor: default;
         }

diff --git a/packages/components/splitter/splitter-tokens.scss b/packages/components/splitter/splitter-tokens.scss
@@ -0,0 +1,7 @@
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-background-background-disabled: hsla(229, 15%, 95%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-background-background-disabled: hsla(229, 15%, 95%, 100%);
+}
diff --git a/packages/components/splitter/splitter.component.ts b/packages/components/splitter/splitter.component.ts
@@ -222,7 +222,7 @@ export class KbqGutterGhostDirective {
         class: 'kbq-splitter'
     },
     preserveWhitespaces: false,
-    styleUrls: ['splitter.scss'],
+    styleUrls: ['splitter.scss', 'splitter-tokens.scss'],
     templateUrl: './splitter.component.html',
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush

diff --git a/packages/components/splitter/splitter.scss b/packages/components/splitter/splitter.scss
@@ -1,3 +1,5 @@
+@use './splitter-theme' as *;
+
 .kbq-splitter {
     display: flex;
     position: relative;
@@ -45,3 +47,5 @@
         display: block;
     }
 }
+
+@include kbq-splitter-theme();
diff --git a/packages/components/tabs/_tabs-common.scss b/packages/components/tabs/_tabs-common.scss
@@ -1,11 +1,5 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin tab-label {
     position: relative;