Skip to content

Commit be19c9e

Browse files
authored
feat(visual): components theming with CSS-vars (#DS-2823) (#285)
1 parent e73b9a5 commit be19c9e

35 files changed

+782
-217
lines changed

docs/guides/theming-2.0.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,12 @@
7474
- [icon-item](/packages/components/icon/icon-item-tokens.scss)
7575
- [input](/packages/components/input/input-tokens.scss)
7676
- [link](/packages/components/link/link-tokens.scss)
77+
- [list](/packages/components/list/list-tokens.scss)
78+
- [loader-overlay](/packages/components/loader-overlay/loader-overlay-tokens.scss)
79+
- [modal](/packages/components/modal/modal-tokens.scss)
80+
- [markdown](/packages/components/markdown/markdown-tokens.scss)
81+
- [navbar](/packages/components/navbar/navbar-tokens.scss)
82+
- [popover](/packages/components/popover/popover-tokens.scss)
7783
- [table](/packages/components/table/table-tokens.scss)
7884
- [textarea](/packages/components/textarea/textarea-tokens.scss)
7985
- [timezone](/packages/components/timezone/timezone-option-tokens.scss)

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

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@
66
@use 'theming/scrollbar-theme' as *;
77

88
@use '../../link/link-theme' as *;
9-
@use '../../list/list-theme' as *;
10-
@use '../../loader-overlay/loader-overlay-theme' as *;
11-
@use '../../modal/modal-theme' as *;
12-
@use '../../markdown/markdown-theme' as *;
13-
@use '../../navbar/navbar-theme' as *;
14-
@use '../../popover/popover-theme' as *;
159
@use '../../progress-bar/progress-bar-theme' as *;
1610
@use '../../progress-spinner/progress-spinner-theme' as *;
1711
@use '../../radio/radio-theme' as *;
@@ -36,15 +30,9 @@
3630
@include kbq-highlight-theme();
3731
// link is a directive, so styles for it should be applied globally
3832
@include kbq-link-theme();
39-
@include kbq-list-theme($theme);
40-
@include kbq-loader-overlay-theme($theme);
41-
@include kbq-modal-theme($theme);
42-
@include kbq-markdown-theme($theme);
43-
@include kbq-navbar-theme($theme);
4433
@include kbq-option-theme($theme);
4534
@include kbq-optgroup-theme($theme);
4635
@include kbq-option-action-theme($theme);
47-
@include kbq-popover-theme($theme);
4836
@include kbq-progress-bar-theme($theme);
4937
@include kbq-progress-spinner-theme($theme);
5038
@include kbq-radio-theme($theme);
@@ -63,21 +51,12 @@
6351
$config: kbq-typography-config($tokens);
6452
}
6553

66-
@if not $md-config {
67-
$md-config: kbq-markdown-typography-config($tokens);
68-
}
69-
7054
@include kbq-base-typography();
7155
@include kbq-markdown-base-typography();
7256

7357
@include kbq-forms-typography($config);
74-
@include kbq-list-typography($config);
75-
@include kbq-loader-overlay-typography($config);
76-
@include kbq-modal-typography($config);
77-
@include kbq-navbar-typography($config);
7858
@include kbq-option-typography($config);
7959
@include kbq-optgroup-typography($config);
80-
@include kbq-popover-typography($config);
8160
@include kbq-progress-bar-typography($config);
8261
@include kbq-progress-spinner-typography($config);
8362
@include kbq-radio-typography($config);
@@ -87,6 +66,4 @@
8766
@include kbq-tabs-typography($config);
8867
@include kbq-tag-typography($config);
8968
@include kbq-textarea-typography();
90-
91-
@include kbq-markdown-typography($md-config);
9269
}

packages/components/list/_list-theme.scss

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,52 @@
1-
@use 'sass:meta';
2-
@use 'sass:map';
3-
4-
@use '../core/styles/typography/typography-utils' as *;
51
@use '../core/styles/common/tokens' as *;
62

7-
@mixin kbq-list-item($component, $state-name) {
8-
$state: map.get($component, $state-name);
9-
10-
background: kbq-css-variable(list-#{$state-name}-container-background, map.get($state, container-background));
3+
@mixin kbq-list-item($state-name) {
4+
background: kbq-css-variable(list-#{$state-name}-container-background);
115

126
.kbq-list-text {
13-
color: kbq-css-variable(list-#{$state-name}-text-color, map.get($state, text));
7+
color: kbq-css-variable(list-#{$state-name}-text-color);
148
}
159

1610
.kbq-icon {
17-
color: kbq-css-variable(list-#{$state-name}-icon-color, map.get($state, icon));
11+
color: kbq-css-variable(list-#{$state-name}-icon-color);
1812
}
1913

2014
.kbq-option-action .kbq-icon {
21-
color: kbq-css-variable(list-#{$state-name}-icon-button-color, map.get($state, icon-button));
15+
color: kbq-css-variable(list-#{$state-name}-icon-button-color);
2216
}
2317

2418
.kbq-list-option-caption {
25-
color: kbq-css-variable(list-#{$state-name}-caption-color, map.get($state, caption));
19+
color: kbq-css-variable(list-#{$state-name}-caption-color);
2620
}
2721
}
2822

29-
@mixin kbq-list-theme($theme) {
30-
$list-item: map.get($theme, components, list-item);
31-
23+
@mixin kbq-list-theme() {
3224
.kbq-list-option {
33-
@include kbq-list-item($list-item, default);
25+
@include kbq-list-item(default);
3426

3527
&:hover:not(.kbq-disabled) {
36-
@include kbq-list-item($list-item, states-hover);
28+
@include kbq-list-item(states-hover);
3729
}
3830

3931
&.kbq-focused {
40-
border-color: kbq-css-variable(
41-
list-states-focused-focus-outline-color,
42-
map.get($list-item, states-focused, focus-outline)
43-
);
32+
border-color: kbq-css-variable(list-states-focused-focus-outline-color);
4433
}
4534

4635
&.kbq-selected {
47-
@include kbq-list-item($list-item, states-selected);
36+
@include kbq-list-item(states-selected);
4837

4938
&:hover:not(.kbq-disabled) {
50-
@include kbq-list-item($list-item, states-selected-hover);
39+
@include kbq-list-item(states-selected-hover);
5140
}
5241
}
5342

5443
&.kbq-disabled {
55-
@include kbq-list-item($list-item, states-disabled);
44+
@include kbq-list-item(states-disabled);
5645
}
5746
}
5847
}
5948

60-
@mixin kbq-list-typography($config) {
49+
@mixin kbq-list-typography() {
6150
.kbq-list-item,
6251
.kbq-list-option {
6352
@include kbq-typography-css-variables(list, text);

packages/components/list/list-selection.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const KbqListSelectionMixinBase: CanDisableCtor & HasTabIndexCtor & typeo
115115
<ng-content />
116116
</div>
117117
`,
118-
styleUrls: ['./list.scss'],
118+
styleUrls: ['./list.scss', 'list-tokens.scss'],
119119
changeDetection: ChangeDetectionStrategy.OnPush,
120120
encapsulation: ViewEncapsulation.None,
121121
inputs: ['disabled'],
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
.kbq-list,
2+
.kbq-list-selection {
3+
--kbq-list-size-container-padding-left: 12px;
4+
--kbq-list-size-container-padding-right: 12px;
5+
--kbq-list-size-container-padding-vertical: 6px;
6+
--kbq-list-size-container-content-gap-horizontal: 8px;
7+
--kbq-list-size-container-content-gap-vertical: 2px;
8+
--kbq-list-size-container-focus-outline-width: 2px;
9+
--kbq-list-size-text-padding-vertical: 0;
10+
--kbq-list-size-header-padding-top: 8px;
11+
--kbq-list-size-header-padding-bottom: 4px;
12+
--kbq-list-size-header-padding-horizontal: 12px;
13+
--kbq-list-size-subheading-padding-top: 12px;
14+
--kbq-list-size-subheading-padding-bottom: 4px;
15+
--kbq-list-size-subheading-padding-horizontal: 12px;
16+
--kbq-list-font-text-font-size: 14px;
17+
--kbq-list-font-text-line-height: 20px;
18+
--kbq-list-font-text-letter-spacing: -0.006em;
19+
--kbq-list-font-text-font-weight: normal;
20+
--kbq-list-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
21+
sans-serif;
22+
--kbq-list-font-text-text-transform: null;
23+
--kbq-list-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
24+
--kbq-list-font-caption-font-size: 12px;
25+
--kbq-list-font-caption-line-height: 16px;
26+
--kbq-list-font-caption-letter-spacing: normal;
27+
--kbq-list-font-caption-font-weight: normal;
28+
--kbq-list-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
29+
sans-serif;
30+
--kbq-list-font-caption-text-transform: null;
31+
--kbq-list-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
32+
--kbq-list-font-header-font-size: 16px;
33+
--kbq-list-font-header-line-height: 24px;
34+
--kbq-list-font-header-letter-spacing: -0.011em;
35+
--kbq-list-font-header-font-weight: 600;
36+
--kbq-list-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
37+
sans-serif;
38+
--kbq-list-font-header-text-transform: null;
39+
--kbq-list-font-header-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
40+
--kbq-list-font-subheading-font-size: 12px;
41+
--kbq-list-font-subheading-line-height: 16px;
42+
--kbq-list-font-subheading-letter-spacing: 1px;
43+
--kbq-list-font-subheading-font-weight: 500;
44+
--kbq-list-font-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
45+
Arial, sans-serif;
46+
--kbq-list-font-subheading-text-transform: uppercase;
47+
--kbq-list-font-subheading-font-feature-settings: 'calt', 'case', 'kern', 'liga', 'ss01', 'ss04';
48+
}
49+
50+
:where(.kbq-light, .theme-light, .kbq-theme-light) {
51+
--kbq-list-default-container-background: transparent;
52+
--kbq-list-default-text-color: hsla(229, 15%, 15%, 100%);
53+
--kbq-list-default-icon-color: hsla(229, 15%, 15%, 100%);
54+
--kbq-list-default-icon-button-color: hsla(229, 15%, 60%, 100%);
55+
--kbq-list-default-caption-color: hsla(229, 15%, 50%, 100%);
56+
--kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 8%);
57+
--kbq-list-states-hover-text-color: hsla(229, 15%, 15%, 100%);
58+
--kbq-list-states-hover-icon-color: hsla(229, 15%, 15%, 100%);
59+
--kbq-list-states-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
60+
--kbq-list-states-selected-container-background: hsla(216, 100%, 94%, 100%);
61+
--kbq-list-states-selected-text-color: hsla(229, 15%, 15%, 100%);
62+
--kbq-list-states-selected-icon-color: hsla(229, 15%, 15%, 100%);
63+
--kbq-list-states-selected-icon-button-color: hsla(229, 15%, 60%, 100%);
64+
--kbq-list-states-selected-hover-container-background: hsla(216, 100%, 90%, 100%);
65+
--kbq-list-states-selected-hover-text-color: hsla(229, 15%, 15%, 100%);
66+
--kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 15%, 100%);
67+
--kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
68+
--kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
69+
--kbq-list-states-disabled-container-background: transparent;
70+
--kbq-list-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
71+
--kbq-list-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
72+
--kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 15%, 32%);
73+
--kbq-list-states-disabled-caption-color: hsla(229, 15%, 15%, 32%);
74+
}
75+
76+
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
77+
--kbq-list-default-container-background: transparent;
78+
--kbq-list-default-text-color: hsla(229, 15%, 80%, 100%);
79+
--kbq-list-default-icon-color: hsla(229, 15%, 80%, 100%);
80+
--kbq-list-default-icon-button-color: hsla(229, 15%, 45%, 100%);
81+
--kbq-list-default-caption-color: hsla(229, 15%, 60%, 100%);
82+
--kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 16%);
83+
--kbq-list-states-hover-text-color: hsla(229, 15%, 80%, 100%);
84+
--kbq-list-states-hover-icon-color: hsla(229, 15%, 80%, 100%);
85+
--kbq-list-states-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
86+
--kbq-list-states-selected-container-background: hsla(216, 100%, 18%, 100%);
87+
--kbq-list-states-selected-text-color: hsla(229, 15%, 80%, 100%);
88+
--kbq-list-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
89+
--kbq-list-states-selected-icon-button-color: hsla(229, 15%, 45%, 100%);
90+
--kbq-list-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
91+
--kbq-list-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
92+
--kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
93+
--kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
94+
--kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
95+
--kbq-list-states-disabled-container-background: transparent;
96+
--kbq-list-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
97+
--kbq-list-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
98+
--kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 30%, 100%);
99+
--kbq-list-states-disabled-caption-color: hsla(229, 15%, 40%, 100%);
100+
}

packages/components/list/list.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { KbqLine, KbqLineSetter } from '@koobiq/components/core';
1414
selector: 'kbq-list',
1515
host: { class: 'kbq-list' },
1616
template: '<ng-content />',
17-
styleUrls: ['./list.scss'],
17+
styleUrls: ['./list.scss', 'list-tokens.scss'],
1818
changeDetection: ChangeDetectionStrategy.OnPush,
1919
encapsulation: ViewEncapsulation.None
2020
})

packages/components/list/list.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
@use '../core/styles/common/list';
55
@use '../core/styles/common/tokens' as *;
66

7+
@use './list-theme' as *;
8+
79
.kbq-list,
810
.kbq-list-selection {
911
display: block;
@@ -34,3 +36,6 @@
3436
}
3537
}
3638
}
39+
40+
@include kbq-list-theme();
41+
@include kbq-list-typography();

packages/components/loader-overlay/_loader-overlay-theme.scss

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,37 @@
1-
@use 'sass:meta';
2-
@use 'sass:map';
3-
4-
@use '../core/styles/typography/typography-utils' as *;
51
@use '../core/styles/common/tokens' as *;
62

7-
@mixin kbq-loader-overlay-theme($theme) {
8-
$loader-overlay: map.get(map.get($theme, components), loader-overlay);
9-
3+
@mixin kbq-loader-overlay-theme() {
104
// FIXME: move to unified mixin if necessary
115
.kbq-loader-overlay_filled {
126
&.kbq-loader-overlay {
13-
background: kbq-css-variable(
14-
loader-overlay-filled-overlay-background,
15-
map.get($loader-overlay, filled, background)
16-
);
7+
background: kbq-css-variable(loader-overlay-filled-overlay-background);
178
}
189

1910
& .kbq-loader-overlay-text {
20-
color: kbq-css-variable(loader-overlay-filled-text-color, map.get($loader-overlay, filled, text));
11+
color: kbq-css-variable(loader-overlay-filled-text-color);
2112
}
2213

2314
& .kbq-loader-overlay-caption {
24-
color: kbq-css-variable(loader-overlay-filled-caption-color, map.get($loader-overlay, filled, caption));
15+
color: kbq-css-variable(loader-overlay-filled-caption-color);
2516
}
2617
}
2718

2819
.kbq-loader-overlay_transparent {
2920
&.kbq-loader-overlay {
30-
background: kbq-css-variable(
31-
loader-overlay-transparent-overlay-background,
32-
map.get($loader-overlay, transparent, background)
33-
);
21+
background: kbq-css-variable(loader-overlay-transparent-overlay-background);
3422
}
3523

3624
& .kbq-loader-overlay-text {
37-
color: kbq-css-variable(loader-overlay-transparent-text-color, map.get($loader-overlay, transparent, text));
25+
color: kbq-css-variable(loader-overlay-transparent-text-color);
3826
}
3927

4028
& .kbq-loader-overlay-caption {
41-
color: kbq-css-variable(
42-
loader-overlay-transparent-caption-color,
43-
map.get($loader-overlay, transparent, caption)
44-
);
29+
color: kbq-css-variable(loader-overlay-transparent-caption-color);
4530
}
4631
}
4732
}
4833

49-
@mixin kbq-loader-overlay-typography($config) {
34+
@mixin kbq-loader-overlay-typography() {
5035
.kbq-loader-overlay_big {
5136
& .kbq-loader-overlay-text {
5237
@include kbq-typography-css-variables(loader-overlay, big-text);

0 commit comments

Comments
 (0)