From b4e92b4a4b51832907c94640977b79b3336a6cd3 Mon Sep 17 00:00:00 2001 From: Nikita Guryev Date: Thu, 19 Sep 2024 13:12:38 +0300 Subject: [PATCH 1/2] feat(visual): components theming with CSS-vars (#DS-2833) (#295) --- docs/guides/theming-2.0.md | 4 + packages/components-dev/tabs/template.html | 99 ------------ packages/components-dev/tag/template.html | 8 +- .../components/core/styles/_koobiq-theme.scss | 10 +- packages/components/form-field/form-field.ts | 3 +- .../components/splitter/_splitter-theme.scss | 8 +- .../components/splitter/splitter-tokens.scss | 7 + .../components/splitter/splitter.component.ts | 2 +- packages/components/splitter/splitter.scss | 4 + packages/components/tabs/_tabs-common.scss | 6 - packages/components/tabs/_tabs-theme.scss | 95 ++++------- .../components/tabs/tab-group.component.ts | 2 +- packages/components/tabs/tab-group.scss | 3 - packages/components/tabs/tab-header.scss | 3 - .../tabs/tab-nav-bar/tab-nav-bar.scss | 2 - .../tabs/tab-nav-bar/tab-nav-bar.ts | 2 +- packages/components/tabs/tabs-tokens.scss | 136 ++++++++++++++++ packages/components/tags/_tag-theme.scss | 43 ++--- .../components/tags/tag-input-tokens.scss | 14 ++ .../components/tags/tag-list.component.ts | 2 +- packages/components/tags/tag-list.scss | 6 - packages/components/tags/tag-tokens.scss | 151 ++++++++++++++++++ packages/components/tags/tag.scss | 3 - tools/tokens/build-each-component.js | 4 + tools/tokens/utils.js | 14 +- 25 files changed, 396 insertions(+), 235 deletions(-) create mode 100644 packages/components/splitter/splitter-tokens.scss create mode 100644 packages/components/tabs/tabs-tokens.scss create mode 100644 packages/components/tags/tag-input-tokens.scss create mode 100644 packages/components/tags/tag-tokens.scss diff --git a/docs/guides/theming-2.0.md b/docs/guides/theming-2.0.md index 8ca67662f..014b1c006 100644 --- 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 index 3f3f58c4c..90f5db39a 100644 --- a/packages/components-dev/tabs/template.html +++ b/packages/components-dev/tabs/template.html @@ -120,103 +120,4 @@

Navigation

Disabled - -
-
-
- - - -

Very slow animation

- - Content 1 - Content 2 - Content 3 - - - - - - - First - - Content 1 - - - - - Second - - - Content 2 - - - - - - Third - - Content 3 - - - - - - - - - - - - - - - - - - - - - - - - - label {{ tab }} - - - - diff --git a/packages/components-dev/tag/template.html b/packages/components-dev/tag/template.html index b29f93a4b..60a19b360 100644 --- a/packages/components-dev/tag/template.html +++ b/packages/components-dev/tag/template.html @@ -260,7 +260,7 @@

simple Tags


- + Normal simple Tags Hovered simple Tags Focused simple Tags > Disabled diff --git a/packages/components/core/styles/_koobiq-theme.scss b/packages/components/core/styles/_koobiq-theme.scss index 94ca2bf31..395558ca9 100644 --- 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 index 01da9fd3e..3de1c8c48 100644 --- 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 index 7235a780a..796247295 100644 --- 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 new file mode 100644 index 000000000..e0974375e --- /dev/null +++ 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 index 8139f7106..50e595557 100644 --- 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 index a92bda9ff..25947f856 100644 --- 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 index 6a2dd5ab1..3f8f4573a 100644 --- 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; diff --git a/packages/components/tabs/_tabs-theme.scss b/packages/components/tabs/_tabs-theme.scss index 9847c32b7..7385da061 100644 --- a/packages/components/tabs/_tabs-theme.scss +++ b/packages/components/tabs/_tabs-theme.scss @@ -1,84 +1,67 @@ -@use 'sass:meta'; -@use 'sass:map'; - @use '../core/styles/typography/typography-utils' as *; @use '../core/styles/common/tokens' as *; -@mixin kbq-tab-item-state($component, $type, $sub-type, $style-name) { - $style: map.get($component, $type, $sub-type, $style-name); - +@mixin kbq-tab-item-state($type, $sub-type, $style-name) { $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name}; - background: kbq-css-variable(#{$base}-background, map.get($style, background)); - color: kbq-css-variable(#{$base}-text-color, map.get($style, text)); + background: kbq-css-variable(#{$base}-background); + color: kbq-css-variable(#{$base}-text-color); & .kbq-icon { - color: kbq-css-variable(#{$base}-icon-color, map.get($style, icon)); + color: kbq-css-variable(#{$base}-icon-color); } } -@mixin kbq-tab-item-style($component, $type, $sub-type) { - @include kbq-tab-item-state($component, $type, $sub-type, default); +@mixin kbq-tab-item-style($type, $sub-type) { + @include kbq-tab-item-state($type, $sub-type, default); &:hover:not(.kbq-disabled) { - @include kbq-tab-item-state($component, $type, $sub-type, states-hover); + @include kbq-tab-item-state($type, $sub-type, states-hover); } &.kbq-selected { - @include kbq-tab-item-state($component, $type, $sub-type, states-selected); + @include kbq-tab-item-state($type, $sub-type, states-selected); &:hover { - @include kbq-tab-item-state($component, $type, $sub-type, states-selected-hover); + @include kbq-tab-item-state($type, $sub-type, states-selected-hover); } } &.cdk-keyboard-focused { - border-color: kbq-css-variable( - tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color, - map.get($component, $type, $sub-type, states-focused, border-color) - ); + border-color: kbq-css-variable(tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color); } &.kbq-disabled { - @include kbq-tab-item-state($component, $type, $sub-type, states-disabled); + @include kbq-tab-item-state($type, $sub-type, states-disabled); &.kbq-selected { - @include kbq-tab-item-state($component, $type, $sub-type, states-selected-disabled); + @include kbq-tab-item-state($type, $sub-type, states-selected-disabled); } } } //noinspection ALL -@mixin kbq-tabs-theme($theme) { - $tab-item: map.get(map.get($theme, components), tab-item); - $tab-stack: map.get(map.get($theme, components), tab-stack); - +@mixin kbq-tabs-theme() { .kbq-tab-group { &.kbq-tab-group_filled { &.kbq-tab-group_on-background { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-filled-on-background-background, - map.get($tab-stack, filled, on-background, background) - ); + background: kbq-css-variable(tabs-tab-stack-filled-on-background-background); } & .kbq-tab-label { - @include kbq-tab-item-style($tab-item, filled, on-background); + @include kbq-tab-item-style(filled, on-background); } } &.kbq-tab-group_on-surface { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-filled-on-surface-background, - map.get($tab-stack, filled, on-surface, background) - ); + background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background); } // FIXME: need check, tab-group has different subtype & .kbq-tab-label { - @include kbq-tab-item-style($tab-item, filled, on-background); + @include kbq-tab-item-style(filled, on-background); } } } @@ -86,27 +69,21 @@ &.kbq-tab-group_transparent { &.kbq-tab-group_on-background { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-transparent-on-background-background, - map.get($tab-stack, transparent, on-background, background) - ); + background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background); } & .kbq-tab-label { - @include kbq-tab-item-style($tab-item, transparent, on-background); + @include kbq-tab-item-style(transparent, on-background); } } &.kbq-tab-group_on-surface { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-transparent-on-surface-background, - map.get($tab-stack, transparent, on-surface, background) - ); + background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background); } & .kbq-tab-label { - @include kbq-tab-item-style($tab-item, transparent, on-background); + @include kbq-tab-item-style(transparent, on-background); } } } @@ -116,27 +93,21 @@ &.kbq-tab-nav-bar_filled { &.kbq-tab-nav-bar_on-background { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-filled-on-background-background, - map.get($tab-stack, filled, on-background, background) - ); + background: kbq-css-variable(tabs-tab-stack-filled-on-background-background); } & .kbq-tab-link { - @include kbq-tab-item-style($tab-item, filled, on-background); + @include kbq-tab-item-style(filled, on-background); } } &.kbq-tab-nav-bar_on-surface { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-filled-on-surface-background, - map.get($tab-stack, filled, on-surface, background) - ); + background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background); } & .kbq-tab-link { - @include kbq-tab-item-style($tab-item, filled, on-background); + @include kbq-tab-item-style(filled, on-background); } } } @@ -144,34 +115,28 @@ &.kbq-tab-nav-bar_transparent { &.kbq-tab-nav-bar_on-background { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-transparent-on-background-background, - map.get($tab-stack, transparent, on-background, background) - ); + background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background); } & .kbq-tab-link { - @include kbq-tab-item-style($tab-item, transparent, on-background); + @include kbq-tab-item-style(transparent, on-background); } } &.kbq-tab-nav-bar_on-surface { .kbq-tab-header { - background: kbq-css-variable( - tabs-tab-stack-transparent-on-surface-background, - map.get($tab-stack, transparent, on-surface, background) - ); + background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background); } & .kbq-tab-link { - @include kbq-tab-item-style($tab-item, transparent, on-background); + @include kbq-tab-item-style(transparent, on-background); } } } } } -@mixin kbq-tabs-typography($config) { +@mixin kbq-tabs-typography() { .kbq-tab-label, .kbq-tab-link { @include kbq-typography-css-variables(tabs, text); diff --git a/packages/components/tabs/tab-group.component.ts b/packages/components/tabs/tab-group.component.ts index 3f7c1bd69..963b1f37a 100644 --- a/packages/components/tabs/tab-group.component.ts +++ b/packages/components/tabs/tab-group.component.ts @@ -94,7 +94,7 @@ export type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | nul selector: 'kbq-tab-group', exportAs: 'kbqTabGroup', templateUrl: 'tab-group.html', - styleUrls: ['tab-group.scss'], + styleUrls: ['tab-group.scss', 'tabs-tokens.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], diff --git a/packages/components/tabs/tab-group.scss b/packages/components/tabs/tab-group.scss index 3195a8035..ecd12e7b7 100644 --- a/packages/components/tabs/tab-group.scss +++ b/packages/components/tabs/tab-group.scss @@ -1,6 +1,3 @@ -@use 'sass:meta'; -@use 'sass:map'; - @use '../core/styles/common/layout'; @use '../core/styles/common/tokens' as *; diff --git a/packages/components/tabs/tab-header.scss b/packages/components/tabs/tab-header.scss index 13a16ac0c..582a4e988 100644 --- a/packages/components/tabs/tab-header.scss +++ b/packages/components/tabs/tab-header.scss @@ -1,6 +1,3 @@ -@use 'sass:meta'; -@use 'sass:map'; - @use '../core/styles/common/vendor-prefixes'; @use 'tabs-common' as *; diff --git a/packages/components/tabs/tab-nav-bar/tab-nav-bar.scss b/packages/components/tabs/tab-nav-bar/tab-nav-bar.scss index 07cc60a16..19eea0bd7 100644 --- a/packages/components/tabs/tab-nav-bar/tab-nav-bar.scss +++ b/packages/components/tabs/tab-nav-bar/tab-nav-bar.scss @@ -3,8 +3,6 @@ @use '../tabs-common'; -@use '../../core/styles/common/tokens' as *; - .kbq-tab-link { vertical-align: top; text-decoration: none; diff --git a/packages/components/tabs/tab-nav-bar/tab-nav-bar.ts b/packages/components/tabs/tab-nav-bar/tab-nav-bar.ts index 439b8389d..bda386456 100644 --- a/packages/components/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/packages/components/tabs/tab-nav-bar/tab-nav-bar.ts @@ -39,7 +39,7 @@ export const KbqTabLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqT selector: '[kbq-tab-nav-bar]', exportAs: 'kbqTabNavBar, kbqTabNav', template: '', - styleUrls: ['tab-nav-bar.scss'], + styleUrls: ['tab-nav-bar.scss', '../tabs-tokens.scss'], host: { class: 'kbq-tab-nav-bar', '[class.kbq-tab-nav-bar_filled]': '!transparent', diff --git a/packages/components/tabs/tabs-tokens.scss b/packages/components/tabs/tabs-tokens.scss new file mode 100644 index 000000000..720d45f58 --- /dev/null +++ b/packages/components/tabs/tabs-tokens.scss @@ -0,0 +1,136 @@ +.kbq-tab-group, +.kbq-tab-nav-bar { + --kbq-tabs-size-tab-item-padding-horizontal: 12px; + --kbq-tabs-size-tab-item-padding-vertical: 6px; + --kbq-tabs-size-tab-item-content-gap-horizontal: 4px; + --kbq-tabs-size-tab-item-border-radius: 8px; + --kbq-tabs-size-tab-item-focus-outline-width: 2px; + --kbq-tabs-size-tab-stack-horizontal-border-radius: 8px; + --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: 8px; + --kbq-tabs-font-text-font-size: 14px; + --kbq-tabs-font-text-line-height: 20px; + --kbq-tabs-font-text-letter-spacing: -0.006em; + --kbq-tabs-font-text-font-weight: 500; + --kbq-tabs-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, + sans-serif; + --kbq-tabs-font-text-text-transform: null; + --kbq-tabs-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04'; +} + +:where(.kbq-light, .theme-light, .kbq-theme-light) { + --kbq-tabs-tab-item-filled-on-background-default-background: transparent; + --kbq-tabs-tab-item-filled-on-background-default-text-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-filled-on-background-default-icon-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-hover-background: hsla(229, 15%, 50%, 8%); + --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-selected-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent; + --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-surface-default-background: transparent; + --kbq-tabs-tab-item-filled-on-surface-default-text-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-filled-on-surface-default-icon-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-hover-background: hsla(229, 15%, 50%, 8%); + --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent; + --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-background-default-background: transparent; + --kbq-tabs-tab-item-transparent-on-background-default-text-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-transparent-on-background-default-icon-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-hover-background: hsla(229, 15%, 50%, 8%); + --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent; + --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-surface-default-background: transparent; + --kbq-tabs-tab-item-transparent-on-surface-default-text-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: hsla(229, 15%, 15%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: hsla(229, 15%, 50%, 8%); + --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent; + --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: hsla(229, 15%, 15%, 32%); + --kbq-tabs-tab-stack-filled-on-background-background: hsla(0, 0%, 100%, 100%); + --kbq-tabs-tab-stack-filled-on-surface-background: hsla(229, 15%, 92%, 100%); + --kbq-tabs-tab-stack-transparent-on-background-background: transparent; + --kbq-tabs-tab-stack-transparent-on-surface-background: transparent; +} + +:where(.kbq-dark, .theme-dark, .kbq-theme-dark) { + --kbq-tabs-tab-item-filled-on-background-default-background: transparent; + --kbq-tabs-tab-item-filled-on-background-default-text-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-filled-on-background-default-icon-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-selected-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent; + --kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-filled-on-surface-default-background: transparent; + --kbq-tabs-tab-item-filled-on-surface-default-text-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-filled-on-surface-default-icon-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent; + --kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-transparent-on-background-default-background: transparent; + --kbq-tabs-tab-item-transparent-on-background-default-text-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-transparent-on-background-default-icon-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent; + --kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-default-background: transparent; + --kbq-tabs-tab-item-transparent-on-surface-default-text-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-default-icon-color: hsla(229, 15%, 80%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-hover-background: hsla(229, 15%, 50%, 16%); + --kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: hsla(229, 100%, 85%, 15%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent; + --kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: hsla(229, 15%, 40%, 100%); + --kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: hsla(229, 15%, 30%, 100%); + --kbq-tabs-tab-stack-filled-on-background-background: hsla(229, 15%, 12%, 100%); + --kbq-tabs-tab-stack-filled-on-surface-background: hsla(229, 15%, 25%, 100%); + --kbq-tabs-tab-stack-transparent-on-background-background: transparent; + --kbq-tabs-tab-stack-transparent-on-surface-background: transparent; +} diff --git a/packages/components/tags/_tag-theme.scss b/packages/components/tags/_tag-theme.scss index 3c945a423..a9dee328b 100644 --- a/packages/components/tags/_tag-theme.scss +++ b/packages/components/tags/_tag-theme.scss @@ -1,68 +1,59 @@ -@use 'sass:meta'; -@use 'sass:map'; - -@use '../core/styles/theming/theming' as *; -@use '../core/styles/typography/typography-utils' as *; @use '../core/styles/common/tokens' as *; -@mixin kbq-tag-state($component, $type, $style-name) { - $style: map.get($component, $type, $style-name); +@use './tag-tokens'; +@mixin kbq-tag-state($type, $style-name) { $base: tag-#{$type}-#{$style-name}; - background: kbq-css-variable(#{$base}-background, map.get($style, background)); + background: kbq-css-variable(#{$base}-background); & .kbq-icon { - color: kbq-css-variable(#{$base}-icon, map.get($style, icon)); + color: kbq-css-variable(#{$base}-icon); } & .kbq-tag__text { - color: kbq-css-variable(#{$base}-text, map.get($style, text)); + color: kbq-css-variable(#{$base}-text); } } -@mixin kbq-tag-color($component, $type) { - @include kbq-tag-state($component, $type, default); +@mixin kbq-tag-color($type) { + @include kbq-tag-state($type, default); &:hover, &.kbq-hovered { - @include kbq-tag-state($component, $type, states-hover); + @include kbq-tag-state($type, states-hover); } &.kbq-focused { - @include kbq-tag-state($component, $type, states-focus); + @include kbq-tag-state($type, states-focus); box-shadow: - inset 0 0 0.1px 1px - kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline)), - 0 0 0.1px 1px - kbq-css-variable(tag-#{$type}-states-focus-outline, map.get($component, $type, focus, outline)); + inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-states-focus-outline), + 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-states-focus-outline); } &.kbq-disabled { - @include kbq-tag-state($component, $type, states-disabled); + @include kbq-tag-state($type, states-disabled); } } -@mixin kbq-tag-theme($theme) { - $tag: map.get($theme, components, tag); - +@mixin kbq-tag-theme() { .kbq-tag { &.kbq-theme { - @include kbq-tag-color($tag, theme-fade-on); + @include kbq-tag-color(theme-fade-on); } &.kbq-contrast-fade { - @include kbq-tag-color($tag, contrast-fade-on); + @include kbq-tag-color(contrast-fade-on); } &.kbq-error { - @include kbq-tag-color($tag, error-fade-on); + @include kbq-tag-color(error-fade-on); } } } -@mixin kbq-tag-typography($config) { +@mixin kbq-tag-typography() { .kbq-tag { @include kbq-typography-css-variables(tag, default); } diff --git a/packages/components/tags/tag-input-tokens.scss b/packages/components/tags/tag-input-tokens.scss new file mode 100644 index 000000000..477055577 --- /dev/null +++ b/packages/components/tags/tag-input-tokens.scss @@ -0,0 +1,14 @@ +.kbq-form-field-type-tag-list { + --kbq-tag-input-size-padding-left: 4px; + --kbq-tag-input-size-padding-right: 12px; + --kbq-tag-input-size-padding-vertical: 4px; + --kbq-tag-input-size-content-gap: 8px; + --kbq-tag-input-font-default-font-size: 14px; + --kbq-tag-input-font-default-line-height: 20px; + --kbq-tag-input-font-default-letter-spacing: -0.006em; + --kbq-tag-input-font-default-font-weight: normal; + --kbq-tag-input-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', + Arial, sans-serif; + --kbq-tag-input-font-default-text-transform: null; + --kbq-tag-input-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04'; +} diff --git a/packages/components/tags/tag-list.component.ts b/packages/components/tags/tag-list.component.ts index 867e54e1b..17ecbe65d 100644 --- a/packages/components/tags/tag-list.component.ts +++ b/packages/components/tags/tag-list.component.ts @@ -70,7 +70,7 @@ export class KbqTagListChange { selector: 'kbq-tag-list', exportAs: 'kbqTagList', templateUrl: 'tag-list.partial.html', - styleUrls: ['tag-list.scss'], + styleUrls: ['tag-list.scss', 'tag-tokens.scss'], host: { class: 'kbq-tag-list', '[class.kbq-disabled]': 'disabled', diff --git a/packages/components/tags/tag-list.scss b/packages/components/tags/tag-list.scss index a8bd87d60..5363a6036 100644 --- a/packages/components/tags/tag-list.scss +++ b/packages/components/tags/tag-list.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; - .kbq-tag-list { display: flex; flex-direction: row; diff --git a/packages/components/tags/tag-tokens.scss b/packages/components/tags/tag-tokens.scss new file mode 100644 index 000000000..0de5698bd --- /dev/null +++ b/packages/components/tags/tag-tokens.scss @@ -0,0 +1,151 @@ +.kbq-tag, +.kbq-tag-list, +.kbq-tag-input { + --kbq-tag-input-font-default-font-size: 14px; + --kbq-tag-input-font-default-line-height: 20px; + --kbq-tag-input-font-default-letter-spacing: -0.006em; + --kbq-tag-input-font-default-font-weight: normal; + --kbq-tag-input-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', + Arial, sans-serif; + --kbq-tag-input-font-default-text-transform: null; + --kbq-tag-input-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04'; + --kbq-tag-list-size-content-gap: 4px; + --kbq-tag-size-padding-horizontal: 4px; + --kbq-tag-size-padding-vertical: 2px; + --kbq-tag-size-content-gap-horizontal: 2px; + --kbq-tag-size-icon-margin-left: 2px; + --kbq-tag-size-close-button-margin-right: 2px; + --kbq-tag-font-default-font-size: 14px; + --kbq-tag-font-default-line-height: 20px; + --kbq-tag-font-default-letter-spacing: -0.006em; + --kbq-tag-font-default-font-weight: 500; + --kbq-tag-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, + sans-serif; + --kbq-tag-font-default-text-transform: null; + --kbq-tag-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04'; +} + +:where(.kbq-light, .theme-light, .kbq-theme-light) { + --kbq-tag-theme-fade-on-default-background: hsla(216, 100%, 85%, 100%); + --kbq-tag-theme-fade-on-default-text: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-default-icon: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-default-close-button: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-hover-background: hsla(216, 100%, 91%, 100%); + --kbq-tag-theme-fade-on-states-hover-text: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-hover-icon: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-hover-close-button: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-focus-background: hsla(216, 100%, 85%, 100%); + --kbq-tag-theme-fade-on-states-focus-text: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-focus-icon: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-focus-close-button: hsla(216, 100%, 50%, 100%); + --kbq-tag-theme-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%); + --kbq-tag-theme-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-theme-fade-on-states-disabled-text: hsla(229, 15%, 15%, 32%); + --kbq-tag-theme-fade-on-states-disabled-icon: hsla(229, 15%, 15%, 32%); + --kbq-tag-theme-fade-on-states-disabled-close-button: hsla(229, 15%, 15%, 32%); + --kbq-tag-contrast-fade-on-default-background: hsla(229, 15%, 92%, 100%); + --kbq-tag-contrast-fade-on-default-text: hsla(229, 15%, 15%, 100%); + --kbq-tag-contrast-fade-on-default-icon: hsla(229, 15%, 60%, 100%); + --kbq-tag-contrast-fade-on-default-close-button: hsla(229, 15%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-hover-background: hsla(229, 15%, 88%, 100%); + --kbq-tag-contrast-fade-on-states-hover-text: hsla(229, 15%, 15%, 100%); + --kbq-tag-contrast-fade-on-states-hover-icon: hsla(229, 15%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-hover-close-button: hsla(229, 15%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-focus-background: hsla(229, 15%, 92%, 100%); + --kbq-tag-contrast-fade-on-states-focus-text: hsla(229, 15%, 15%, 100%); + --kbq-tag-contrast-fade-on-states-focus-icon: hsla(229, 15%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-focus-close-button: hsla(229, 15%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-contrast-fade-on-states-disabled-text: hsla(229, 15%, 15%, 32%); + --kbq-tag-contrast-fade-on-states-disabled-icon: hsla(229, 15%, 15%, 32%); + --kbq-tag-contrast-fade-on-states-disabled-close-button: hsla(229, 15%, 15%, 32%); + --kbq-tag-error-fade-on-default-background: hsla(7, 97%, 90%, 100%); + --kbq-tag-error-fade-on-default-text: hsla(7, 97%, 40%, 100%); + --kbq-tag-error-fade-on-default-icon: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-default-close-button: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-hover-background: hsla(7, 97%, 92%, 100%); + --kbq-tag-error-fade-on-states-hover-text: hsla(7, 97%, 40%, 100%); + --kbq-tag-error-fade-on-states-hover-icon: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-hover-close-button: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-focus-background: hsla(7, 97%, 90%, 100%); + --kbq-tag-error-fade-on-states-focus-text: hsla(7, 97%, 40%, 100%); + --kbq-tag-error-fade-on-states-focus-icon: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-focus-close-button: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-focus-outline: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-error-fade-on-states-disabled-text: hsla(229, 15%, 15%, 32%); + --kbq-tag-error-fade-on-states-disabled-icon: hsla(229, 15%, 15%, 32%); + --kbq-tag-error-fade-on-states-disabled-close-button: hsla(229, 15%, 15%, 32%); +} + +:where(.kbq-dark, .theme-dark, .kbq-theme-dark) { + --kbq-tag-theme-fade-on-default-background: hsla(216, 100%, 20%, 100%); + --kbq-tag-theme-fade-on-default-text: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-default-icon: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-default-close-button: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-hover-background: hsla(216, 100%, 18%, 100%); + --kbq-tag-theme-fade-on-states-hover-text: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-hover-icon: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-hover-close-button: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-focus-background: hsla(216, 100%, 20%, 100%); + --kbq-tag-theme-fade-on-states-focus-text: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-focus-icon: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-focus-close-button: hsla(216, 100%, 65%, 100%); + --kbq-tag-theme-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%); + --kbq-tag-theme-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-theme-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%); + --kbq-tag-theme-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%); + --kbq-tag-theme-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%); + --kbq-tag-contrast-fade-on-default-background: hsla(229, 15%, 25%, 100%); + --kbq-tag-contrast-fade-on-default-text: hsla(229, 15%, 80%, 100%); + --kbq-tag-contrast-fade-on-default-icon: hsla(229, 15%, 45%, 100%); + --kbq-tag-contrast-fade-on-default-close-button: hsla(229, 15%, 45%, 100%); + --kbq-tag-contrast-fade-on-states-hover-background: hsla(229, 15%, 25%, 100%); + --kbq-tag-contrast-fade-on-states-hover-text: hsla(229, 15%, 80%, 100%); + --kbq-tag-contrast-fade-on-states-hover-icon: hsla(229, 15%, 45%, 100%); + --kbq-tag-contrast-fade-on-states-hover-close-button: hsla(229, 15%, 45%, 100%); + --kbq-tag-contrast-fade-on-states-focus-background: hsla(229, 15%, 25%, 100%); + --kbq-tag-contrast-fade-on-states-focus-text: hsla(229, 15%, 80%, 100%); + --kbq-tag-contrast-fade-on-states-focus-icon: hsla(229, 15%, 45%, 100%); + --kbq-tag-contrast-fade-on-states-focus-close-button: hsla(229, 15%, 45%, 100%); + --kbq-tag-contrast-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%); + --kbq-tag-contrast-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-contrast-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%); + --kbq-tag-contrast-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%); + --kbq-tag-contrast-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%); + --kbq-tag-error-fade-on-default-background: hsla(7, 97%, 15%, 100%); + --kbq-tag-error-fade-on-default-text: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-default-icon: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-default-close-button: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-hover-background: hsla(7, 97%, 13%, 100%); + --kbq-tag-error-fade-on-states-hover-text: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-hover-icon: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-hover-close-button: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-focus-background: hsla(7, 97%, 15%, 100%); + --kbq-tag-error-fade-on-states-focus-text: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-focus-icon: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-focus-close-button: hsla(7, 97%, 60%, 100%); + --kbq-tag-error-fade-on-states-focus-outline: hsla(7, 97%, 45%, 100%); + --kbq-tag-error-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-error-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%); + --kbq-tag-error-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%); + --kbq-tag-error-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%); + --kbq-tag-warning-fade-on-default-background: hsla(38, 100%, 14%, 100%); + --kbq-tag-warning-fade-on-default-text: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-default-icon: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-default-close-button: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-hover-background: hsla(38, 100%, 13%, 100%); + --kbq-tag-warning-fade-on-states-hover-text: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-hover-icon: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-hover-close-button: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-focus-background: hsla(38, 100%, 14%, 100%); + --kbq-tag-warning-fade-on-states-focus-text: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-focus-icon: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-focus-close-button: hsla(38, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-focus-outline: hsla(216, 100%, 60%, 100%); + --kbq-tag-warning-fade-on-states-disabled-background: hsla(229, 15%, 50%, 16%); + --kbq-tag-warning-fade-on-states-disabled-text: hsla(229, 15%, 40%, 100%); + --kbq-tag-warning-fade-on-states-disabled-icon: hsla(229, 15%, 30%, 100%); + --kbq-tag-warning-fade-on-states-disabled-close-button: hsla(229, 15%, 30%, 100%); +} diff --git a/packages/components/tags/tag.scss b/packages/components/tags/tag.scss index ca278222d..9ff8b59de 100644 --- a/packages/components/tags/tag.scss +++ b/packages/components/tags/tag.scss @@ -1,6 +1,3 @@ -@use 'sass:meta'; -@use 'sass:map'; - @use '../core/styles/common/tokens' as *; .kbq-tag { diff --git a/tools/tokens/build-each-component.js b/tools/tokens/build-each-component.js index 8a25994a1..94bdfed3b 100644 --- a/tools/tokens/build-each-component.js +++ b/tools/tokens/build-each-component.js @@ -49,6 +49,10 @@ const componentsWithCss = [ 'scrollbars', 'forms', 'option', + 'splitter', + 'tabs', + 'tag', + 'tabs', 'table', 'textarea', 'timezone', diff --git a/tools/tokens/utils.js b/tools/tokens/utils.js index 975124a75..66dfe57bd 100644 --- a/tools/tokens/utils.js +++ b/tools/tokens/utils.js @@ -80,6 +80,11 @@ const filter = { 'kbq-list-font-text-line-height', 'kbq-background-transparent', 'kbq-states-icon-disabled' + ], + splitter: 'kbq-background-background-disabled', + tag: [ + 'kbq-tag-list', + 'tag-input-font' ] }; @@ -95,7 +100,10 @@ const componentNameMapping = { radio: 'radio-button', select: 'select, .kbq-select__panel', sidepanel: 'sidepanel-container', - forms: 'form' + forms: 'form', + tabs: 'tab-group, .kbq-tab-nav-bar', + tag: 'tag, .kbq-tag-list, .kbq-tag-input', + 'tag-input': 'form-field-type-tag-list' }; const applyCustomTransformations = (dictionary) => { @@ -128,6 +136,10 @@ const componentAliases = { { path: 'core/option/option-tokens.scss', aliasName: 'option' }, { path: 'core/option/optgroup-tokens.scss', aliasName: 'optgroup' }, { path: 'core/option/option-action-tokens.scss', aliasName: 'option-action' } + ], + tag: [ + { path: 'tags/tag-tokens.scss', aliasName: 'tag' }, + { path: 'tags/tag-input-tokens.scss', aliasName: 'tag-input' } ] }; From 3a0534921da2af846755989c98b2473f781f2e8d Mon Sep 17 00:00:00 2001 From: Aleksandr Knutov Date: Thu, 19 Sep 2024 15:55:21 +0300 Subject: [PATCH 2/2] visual(docs): datepicker and timezone examples (#DS-2888) (#294) --- .../datepicker-and-timepicker-example.css | 5 +- .../datepicker-and-timepicker-example.html | 58 ++++++++++--------- .../datepicker-inactive-example.css | 2 +- .../datepicker-minimax-example.css | 2 +- .../datepicker-minimax-example.html | 50 ++++++++-------- .../datepicker-overview-example.css | 4 +- .../datepicker-overview-example.html | 24 ++++---- .../datepicker-range-example.css | 4 +- .../datepicker-range-example.html | 48 +++++++-------- .../datepicker-required-example.css | 4 +- .../datepicker-required-example.html | 26 +++++---- 11 files changed, 121 insertions(+), 106 deletions(-) diff --git a/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.css b/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.css index 08be18834..967dbfb70 100644 --- a/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.css +++ b/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.css @@ -1,3 +1,4 @@ -.docs-example__datepicker-minimax .kbq-form-field-type-datepicker { - width: 140px; +.docs-example__datepicker-and-timepicker .kbq-form-field-type-datepicker, +.docs-example__datepicker-and-timepicker .kbq-form-field-type-timepicker { + width: 136px; } diff --git a/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.html b/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.html index 065d6f93c..a084cc04a 100644 --- a/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.html +++ b/packages/docs-examples/components/datepicker/datepicker-and-timepicker/datepicker-and-timepicker-example.html @@ -1,32 +1,34 @@ -
- -
-
- - - - - +
+
+ +
+
+ + + + + - - - - + + + + +
diff --git a/packages/docs-examples/components/datepicker/datepicker-inactive/datepicker-inactive-example.css b/packages/docs-examples/components/datepicker/datepicker-inactive/datepicker-inactive-example.css index 71c8fb749..c012573cf 100644 --- a/packages/docs-examples/components/datepicker/datepicker-inactive/datepicker-inactive-example.css +++ b/packages/docs-examples/components/datepicker/datepicker-inactive/datepicker-inactive-example.css @@ -1,3 +1,3 @@ .docs-example__datepicker-inactive .kbq-form-field-type-datepicker { - width: 140px; + width: 136px; } diff --git a/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.css b/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.css index 08be18834..4e7c1334e 100644 --- a/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.css +++ b/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.css @@ -1,3 +1,3 @@ .docs-example__datepicker-minimax .kbq-form-field-type-datepicker { - width: 140px; + width: 136px; } diff --git a/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.html b/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.html index 2d45b42be..f318dcc6c 100644 --- a/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.html +++ b/packages/docs-examples/components/datepicker/datepicker-minimax/datepicker-minimax-example.html @@ -1,26 +1,28 @@ -
-
- - - - - - +
+
+
+ + + + + + +
diff --git a/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.css b/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.css index 743230875..677292057 100644 --- a/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.css +++ b/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.css @@ -1 +1,3 @@ -/** No CSS for this example */ +.docs-example__datepicker-overview .kbq-form-field-type-datepicker { + width: 136px; +} diff --git a/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.html b/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.html index 853e8a88e..0375b49cf 100644 --- a/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.html +++ b/packages/docs-examples/components/datepicker/datepicker-overview/datepicker-overview-example.html @@ -1,11 +1,13 @@ - - - - - +
+ + + + + +
diff --git a/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.css b/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.css index 08be18834..42e7af876 100644 --- a/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.css +++ b/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.css @@ -1,3 +1,3 @@ -.docs-example__datepicker-minimax .kbq-form-field-type-datepicker { - width: 140px; +.docs-example__datepicker-range .kbq-form-field-type-datepicker { + width: 136px; } diff --git a/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.html b/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.html index eaf3a6b8a..795b0f327 100644 --- a/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.html +++ b/packages/docs-examples/components/datepicker/datepicker-range/datepicker-range-example.html @@ -1,27 +1,29 @@ -
-
- -
- - - - - +
+
+
+ +
+ + + + + - - - - - + + + + + +
diff --git a/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.css b/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.css index 743230875..32e80f596 100644 --- a/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.css +++ b/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.css @@ -1 +1,3 @@ -/** No CSS for this example */ +.docs-example__datepicker-required .kbq-form-field-type-datepicker { + width: 136px; +} diff --git a/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.html b/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.html index 86c550588..eec826aac 100644 --- a/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.html +++ b/packages/docs-examples/components/datepicker/datepicker-required/datepicker-required-example.html @@ -1,12 +1,14 @@ - - - - - +
+ + + + + +