feat(table): components theming with CSS-vars (#DS-2843) (#275)

Author: sk8knut

docs/guides/theming-2.0.md

@@ -70,6 +70,7 @@
 -   [icon-item](/packages/components/icon/icon-item-tokens.scss)
 -   [input](/packages/components/input/input-tokens.scss)
 -   [link](/packages/components/link/link-tokens.scss)
+-   [table](/packages/components/table/table-tokens.scss)
 -   [toast](/packages/components/toast/toast-tokens.scss)
 -   [toggle](/packages/components/toggle/toggle-tokens.scss)
 

packages/components/badge/badge-tokens.scss

@@ -100,7 +100,7 @@
     --kbq-badge-outline-fade-on-theme-icon: hsla(216, 100%, 50%, 100%);
     --kbq-badge-outline-fade-on-contrast-background: transparent;
     --kbq-badge-outline-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
-    --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 80%, 100%);
+    --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 70%, 100%);
     --kbq-badge-outline-fade-on-contrast-caption: hsla(229, 15%, 15%, 100%);
     --kbq-badge-outline-fade-on-contrast-icon: hsla(229, 15%, 60%, 100%);
     --kbq-badge-outline-fade-on-success-background: transparent;

packages/components/core/styles/_koobiq-theme.scss

@@ -30,7 +30,6 @@
 @use '../../tooltip/tooltip-theme' as *;
 @use '../../tree-select/tree-select-theme' as *;
 @use '../../tree/tree-theme' as *;
-@use '../../table/table-theme' as *;
 @use '../forms/forms-theme' as *;
 @use '../option/option-theme' as *;
 @use '../option/optgroup-theme' as *;
@@ -73,7 +72,6 @@
     @include kbq-tooltip-theme($theme);
     @include kbq-tree-select-theme($theme);
     @include kbq-tree-theme($theme);
-    @include kbq-table-theme($theme);
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
@@ -113,7 +111,6 @@
     @include kbq-tooltip-typography($config);
     @include kbq-tree-select-typography($config);
     @include kbq-tree-typography($config);
-    @include kbq-table-typography($config);
 
     @include kbq-markdown-typography($md-config);
 }

packages/components/table/_table-theme.scss

@@ -1,35 +1,27 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-table-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $states-background: map.get($theme, states, background);
-    $line: map.get($theme, line);
-
+@mixin kbq-table-theme() {
     .kbq-table {
         & > thead {
-            color: kbq-css-variable(foreground-contrast-secondary, map.get($foreground, contrast-secondary));
+            color: kbq-css-variable(foreground-contrast-secondary);
 
             & > tr > th {
-                border-bottom-color: kbq-css-variable(line-contrast-less, map.get($line, contrast-less));
+                border-bottom-color: kbq-css-variable(line-contrast-less);
             }
         }
 
         & > tbody {
             & > tr {
                 & > th,
                 & > td {
-                    color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+                    color: kbq-css-variable(foreground-contrast);
                 }
 
                 &:hover td {
-                    background-color: kbq-css-variable(
-                        states-background-transparent-hover,
-                        map.get($states-background, transparent-hover)
-                    );
+                    background-color: kbq-css-variable(states-background-transparent-hover);
                 }
             }
         }
@@ -38,14 +30,14 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: kbq-css-variable(line-contrast-less, map.get($line, contrast-less));
+                    border-bottom-color: kbq-css-variable(line-contrast-less);
                 }
             }
         }
     }
 }
 
-@mixin kbq-table-typography($config) {
+@mixin kbq-table-typography() {
     .kbq-table {
         & > thead {
             & > tr > th {

packages/components/table/table-tokens.scss

@@ -0,0 +1,37 @@
+.kbq-table {
+    --kbq-table-size-border-width: 1px;
+    --kbq-table-size-row-padding-vertical: 10px;
+    --kbq-table-size-row-padding-horizontal: 8px;
+    --kbq-table-font-header-font-size: 14px;
+    --kbq-table-font-header-line-height: 20px;
+    --kbq-table-font-header-letter-spacing: -0.006em;
+    --kbq-table-font-header-font-weight: normal;
+    --kbq-table-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-table-font-header-text-transform: null;
+    --kbq-table-font-header-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-table-font-body-font-size: 14px;
+    --kbq-table-font-body-line-height: 20px;
+    --kbq-table-font-body-letter-spacing: -0.006em;
+    --kbq-table-font-body-font-weight: normal;
+    --kbq-table-font-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-table-font-body-text-transform: null;
+    --kbq-table-font-body-font-feature-settings: 'calt', 'ss01', 'ss04', 'tnum';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);
+    --kbq-line-contrast-less: hsla(229, 15%, 6%, 12%);
+    --kbq-states-background-transparent-hover: hsla(229, 15%, 50%, 8%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);
+    --kbq-line-contrast-less: hsla(229, 15%, 22%, 100%);
+    --kbq-states-background-transparent-hover: hsla(229, 15%, 50%, 16%);
+}

packages/components/table/table.component.ts

@@ -4,7 +4,7 @@ import { KbqButton } from '@koobiq/components/button';
 @Component({
     selector: 'table[kbq-table]',
     exportAs: 'kbqTable',
-    styleUrls: ['table.scss'],
+    styleUrls: ['table.scss', 'table-tokens.scss'],
     template: '<ng-content />',
     host: {
         class: 'kbq-table',

packages/components/table/table.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './table-theme' as *;
 
 .kbq-table {
     border-spacing: 0;
@@ -73,3 +73,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+@include kbq-table-theme();
+@include kbq-table-typography();

tools/tokens/build-each-component.js

@@ -30,6 +30,7 @@ const componentsWithCss = [
     'icon-item',
     'input',
     'link',
+    'table',
     'toast',
     'toggle'
 ];

tools/tokens/utils.js

@@ -9,6 +9,7 @@ const filter = {
     datepicker: 'states-foreground-disabled',
     dropdown: ['kbq-list', 'foreground-contrast-secondary'],
     'icon-button': 'states-focused-color',
+    table: ['states-background-transparent-hover', 'line-contrast-less', 'foreground-contrast'],
     toggle: 'foreground-text-disabled'
 };