Skip to content

Commit 34dc444

Browse files
NikGurevNikGurev
authored
feat(visual): components theming with CSS-vars (#DS-2817 (#267)
Changed for: - datepicker - dropdown - form-field - hint - icon,icon-button,icon-item - input - link
1 parent 1128223 commit 34dc444

40 files changed

+742
-311
lines changed

‎docs/guides/theming-2.0.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,15 @@
6060
- [button](/packages/components/button/button-tokens.scss)
6161
- [button-toggle](/packages/components/button-toggle/button-toggle-tokens.scss)
6262
- [checkbox,pseudo-checkbox](/packages/components/checkbox/checkbox-tokens.scss)
63+
- [datepicker](/packages/components/datepicker/datepicker-tokens.scss)
64+
- [dropdown](/packages/components/dropdown/dropdown-tokens.scss)
65+
- [form-field](/packages/components/form-field/form-field-tokens.scss)
66+
- [hint](/packages/components/form-field/hint-tokens.scss)
67+
- [icon](/packages/components/icon/icon-tokens.scss)
68+
- [icon-button](/packages/components/icon/icon-button-tokens.scss)
69+
- [icon-item](/packages/components/icon/icon-item-tokens.scss)
70+
- [input](/packages/components/input/input-tokens.scss)
71+
- [link](/packages/components/link/link-tokens.scss)
6372

6473
### Откуда теперь брать значения дизайн-токенов для компонентов?
6574

‎packages/components/badge/badge-tokens.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
--kbq-badge-outline-fade-on-theme-icon: hsla(216, 100%, 50%, 100%);
101101
--kbq-badge-outline-fade-on-contrast-background: transparent;
102102
--kbq-badge-outline-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
103-
--kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 70%, 100%);
103+
--kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 80%, 100%);
104104
--kbq-badge-outline-fade-on-contrast-caption: hsla(229, 15%, 15%, 100%);
105105
--kbq-badge-outline-fade-on-contrast-icon: hsla(229, 15%, 60%, 100%);
106106
--kbq-badge-outline-fade-on-success-background: transparent;

‎packages/components/core/highlight/_highlight-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@mixin kbq-highlight-theme($theme) {
1+
@mixin kbq-highlight-theme() {
22
.kbq-highlight {
33
color: inherit;
44

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

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,10 @@
55

66
@use 'theming/scrollbar-theme' as *;
77

8-
@use '../../checkbox/checkbox-theme' as *;
98
@use '../../code-block/code-block-theme' as *;
10-
@use '../../datepicker/datepicker-theme' as *;
119
@use '../../divider/divider-theme' as *;
12-
@use '../../dropdown/dropdown-theme' as *;
1310
@use '../../empty-state/empty-state-theme' as *;
1411
@use '../../file-upload/file-upload-theme' as *;
15-
@use '../../form-field/form-field-theme' as *;
16-
@use '../../form-field/hint-theme' as *;
17-
@use '../../icon/icon-theme' as *;
18-
@use '../../icon/icon-item-theme' as *;
19-
@use '../../icon/icon-button-theme' as *;
20-
@use '../../input/input-theme' as *;
2112
@use '../../link/link-theme' as *;
2213
@use '../../list/list-theme' as *;
2314
@use '../../loader-overlay/loader-overlay-theme' as *;
@@ -54,20 +45,14 @@
5445
@include kbq-core-theme($theme);
5546

5647
@include kbq-code-block-theme($theme);
57-
@include kbq-datepicker-theme($theme);
5848
@include kbq-dl-theme($theme);
5949
@include kbq-divider-theme($theme);
60-
@include kbq-dropdown-theme($theme);
6150
@include kbq-empty-state-theme($theme);
62-
@include kbq-form-field-theme($theme);
6351
@include kbq-file-upload-theme($theme);
64-
@include kbq-hint-theme($theme);
6552
@include kbq-forms-theme($theme);
66-
@include kbq-highlight-theme($theme);
67-
@include kbq-icon-theme($theme);
68-
@include kbq-icon-item-theme($theme);
69-
@include kbq-icon-button-theme($theme);
70-
@include kbq-link-theme($theme);
53+
@include kbq-highlight-theme();
54+
// link is a directive, so styles for it should be applied globally
55+
@include kbq-link-theme();
7156
@include kbq-list-theme($theme);
7257
@include kbq-loader-overlay-theme($theme);
7358
@include kbq-modal-theme($theme);
@@ -110,16 +95,10 @@
11095
@include kbq-markdown-base-typography();
11196

11297
@include kbq-code-block-typography($config);
113-
@include kbq-datepicker-typography($config);
114-
@include kbq-dropdown-typography($config);
11598
@include kbq-empty-state-typography($config);
11699
@include kbq-dl-typography($config);
117-
@include kbq-form-field-typography($config);
118-
@include kbq-hint-typography($config);
119100
@include kbq-file-upload-typography($config);
120101
@include kbq-forms-typography($config);
121-
@include kbq-input-typography($config);
122-
@include kbq-link-typography($config);
123102
@include kbq-list-typography($config);
124103
@include kbq-loader-overlay-typography($config);
125104
@include kbq-modal-typography($config);

‎packages/components/datepicker/_datepicker-theme.scss

Lines changed: 17 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,54 @@
55
@use '../core/styles/typography/typography-utils' as *;
66
@use '../core/styles/common/tokens' as *;
77

8-
@mixin kbq-datepicker-theme($theme) {
9-
$datepicker: map.get(map.get($theme, components), datepicker);
10-
8+
@mixin kbq-datepicker-theme() {
119
.kbq-datepicker__content {
12-
background: kbq-css-variable(datepicker-container-background, map.get($datepicker, container, background));
13-
box-shadow: kbq-css-variable(datepicker-container-box-shadow, map.get($datepicker, container, box-shadow));
10+
background: kbq-css-variable(datepicker-container-background);
11+
box-shadow: kbq-css-variable(datepicker-container-box-shadow);
1412
}
1513

1614
.kbq-calendar__table-header {
17-
color: kbq-css-variable(datepicker-header-text, map.get($datepicker, header, text));
15+
color: kbq-css-variable(datepicker-header-text);
1816
}
1917

2018
.kbq-calendar__table-header-divider::after {
21-
background: kbq-css-variable(datepicker-header-divider, map.get($datepicker, header, divider));
19+
background: kbq-css-variable(datepicker-header-divider);
2220
}
2321

2422
.kbq-calendar__body-cell-content {
25-
background: kbq-css-variable(
26-
datepicker-grid-cell-default-background,
27-
map.get($datepicker, cell, default, background)
28-
);
29-
color: kbq-css-variable(datepicker-grid-cell-default-text, map.get($datepicker, cell, default, text));
23+
background: kbq-css-variable(datepicker-grid-cell-default-background);
24+
color: kbq-css-variable(datepicker-grid-cell-default-text);
3025

3126
&.kbq-calendar__body-today {
32-
background: kbq-css-variable(
33-
datepicker-grid-cell-today-background,
34-
map.get($datepicker, cell, today, background)
35-
);
36-
color: kbq-css-variable(datepicker-grid-cell-today-text, map.get($datepicker, cell, today, text));
27+
background: kbq-css-variable(datepicker-grid-cell-today-background);
28+
color: kbq-css-variable(datepicker-grid-cell-today-text);
3729
}
3830

3931
&:hover:not(.kbq-disabled) {
40-
background: kbq-css-variable(
41-
datepicker-grid-cell-states-hover-background,
42-
map.get($datepicker, cell, hover, background)
43-
);
32+
background: kbq-css-variable(datepicker-grid-cell-states-hover-background);
4433
}
4534

4635
&:active:not(.kbq-disabled) {
47-
background: kbq-css-variable(
48-
datepicker-grid-cell-states-active-background,
49-
map.get($datepicker, cell, active, background)
50-
);
36+
background: kbq-css-variable(datepicker-grid-cell-states-active-background);
5137
}
5238

5339
&.kbq-selected:not(.kbq-disabled) {
54-
background: kbq-css-variable(
55-
datepicker-grid-cell-states-selected-background,
56-
map.get($datepicker, cell, selected, background)
57-
);
58-
color: kbq-css-variable(
59-
datepicker-grid-cell-states-selected-text,
60-
map.get($datepicker, cell, selected, text)
61-
);
40+
background: kbq-css-variable(datepicker-grid-cell-states-selected-background);
41+
color: kbq-css-variable(datepicker-grid-cell-states-selected-text);
6242

6343
&:hover {
64-
background: kbq-css-variable(
65-
datepicker-grid-cell-states-selected-hover-background,
66-
map.get($datepicker, cell, selected-hover, background)
67-
);
44+
background: kbq-css-variable(datepicker-grid-cell-states-selected-hover-background);
6845
}
6946
}
7047

7148
&.kbq-disabled {
72-
color: kbq-css-variable(states-foreground-disabled, map.get($theme, states, foreground, disabled));
73-
background: kbq-css-variable(
74-
datepicker-grid-cell-states-disabled-background,
75-
map.get($datepicker, cell, disabled, background)
76-
);
49+
color: kbq-css-variable(states-foreground-disabled);
50+
background: kbq-css-variable(datepicker-grid-cell-states-disabled-background);
7751
}
7852
}
7953
}
8054

81-
@mixin kbq-datepicker-typography($config) {
55+
@mixin kbq-datepicker-typography() {
8256
.kbq-calendar {
8357
@include kbq-typography-css-variables(datepicker, text);
8458
}

‎packages/components/datepicker/calendar.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
@use 'sass:meta';
22
@use 'sass:map';
33

4-
@use '../core/styles/tokens';
54
@use '../core/styles/common/tokens' as *;
65

7-
$tokens: meta.module-variables(tokens) !default;
8-
96
.kbq-calendar {
107
display: block;
118
}

‎packages/components/datepicker/datepicker-content.scss

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
@use 'sass:meta';
22
@use 'sass:map';
33

4-
@use '../core/styles/tokens';
54
@use '../core/styles/common/tokens' as *;
65

7-
$tokens: meta.module-variables(tokens) !default;
6+
@use './datepicker-theme' as *;
87

98
$kbq-datepicker-non-touch-calendar-cell-size: 40px;
10-
$kbq-datepicker-size-grid-padding-horizontal: kbq-css-variable(
11-
datepicker-size-grid-padding-horizontal,
12-
map.get($tokens, datepicker-size-grid-padding-horizontal)
13-
);
9+
$kbq-datepicker-size-grid-padding-horizontal: kbq-css-variable(datepicker-size-grid-padding-horizontal);
1410

1511
$kbq-datepicker-non-touch-calendar-width: calc(
1612
$kbq-datepicker-non-touch-calendar-cell-size * 7 + $kbq-datepicker-size-grid-padding-horizontal * 2
@@ -33,3 +29,6 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
3329
padding-bottom: kbq-css-variable(datepicker-size-container-padding-vertical);
3430
}
3531
}
32+
33+
@include kbq-datepicker-theme();
34+
@include kbq-datepicker-typography();

‎packages/components/datepicker/datepicker-tokens.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.kbq-datepicker__content {
2+
--kbq-datepicker-size-container-padding-vertical: 12px;
3+
--kbq-datepicker-size-container-border-radius: 8px;
4+
--kbq-datepicker-size-header-padding-horizontal: 4px;
5+
--kbq-datepicker-size-header-margin-bottom: 2px;
6+
--kbq-datepicker-size-grid-padding-horizontal: 12px;
7+
--kbq-datepicker-size-grid-content-gap-vertical: 2px;
8+
--kbq-datepicker-size-grid-divider-height: 1px;
9+
--kbq-datepicker-size-grid-cell-padding-horizontal: 8px;
10+
--kbq-datepicker-size-grid-cell-padding-vertical: 8px;
11+
--kbq-datepicker-size-grid-cell-border-radius: 8px;
12+
--kbq-datepicker-font-text-font-size: 14px;
13+
--kbq-datepicker-font-text-line-height: 20px;
14+
--kbq-datepicker-font-text-letter-spacing: -0.006em;
15+
--kbq-datepicker-font-text-font-weight: normal;
16+
--kbq-datepicker-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
17+
Arial, sans-serif;
18+
--kbq-datepicker-font-text-text-transform: null;
19+
--kbq-datepicker-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
20+
}
21+
22+
:where(.kbq-light, .theme-light, .kbq-theme-light) {
23+
--kbq-states-foreground-disabled: hsla(229, 15%, 15%, 32%);
24+
--kbq-datepicker-container-background: hsla(229, 15%, 100%, 100%);
25+
--kbq-datepicker-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
26+
0 3px 8px hsla(229, 15%, 6%, 12%);
27+
--kbq-datepicker-header-text: hsla(229, 15%, 60%, 100%);
28+
--kbq-datepicker-header-divider: hsla(229, 15%, 6%, 12%);
29+
--kbq-datepicker-grid-cell-default-background: transparent;
30+
--kbq-datepicker-grid-cell-default-text: hsla(229, 15%, 15%, 100%);
31+
--kbq-datepicker-grid-cell-today-background: transparent;
32+
--kbq-datepicker-grid-cell-today-text: hsla(216, 100%, 50%, 100%);
33+
--kbq-datepicker-grid-cell-states-hover-background: hsla(229, 15%, 50%, 8%);
34+
--kbq-datepicker-grid-cell-states-active-background: hsla(229, 15%, 50%, 16%);
35+
--kbq-datepicker-grid-cell-states-selected-background: hsla(229, 15%, 25%, 100%);
36+
--kbq-datepicker-grid-cell-states-selected-text: hsla(0, 0%, 100%, 100%);
37+
--kbq-datepicker-grid-cell-states-selected-hover-background: hsla(229, 15%, 15%, 100%);
38+
--kbq-datepicker-grid-cell-states-disabled-background: transparent;
39+
--kbq-datepicker-grid-cell-states-disabled-text: hsla(229, 15%, 15%, 32%);
40+
}
41+
42+
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
43+
--kbq-states-foreground-disabled: hsla(229, 15%, 40%, 100%);
44+
--kbq-datepicker-container-background: hsla(229, 15%, 15%, 100%);
45+
--kbq-datepicker-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
46+
--kbq-datepicker-header-text: hsla(229, 15%, 45%, 100%);
47+
--kbq-datepicker-header-divider: hsla(229, 15%, 22%, 100%);
48+
--kbq-datepicker-grid-cell-default-background: transparent;
49+
--kbq-datepicker-grid-cell-default-text: hsla(229, 15%, 80%, 100%);
50+
--kbq-datepicker-grid-cell-today-background: transparent;
51+
--kbq-datepicker-grid-cell-today-text: hsla(216, 100%, 65%, 100%);
52+
--kbq-datepicker-grid-cell-states-hover-background: hsla(229, 15%, 50%, 16%);
53+
--kbq-datepicker-grid-cell-states-active-background: hsla(229, 100%, 85%, 15%);
54+
--kbq-datepicker-grid-cell-states-selected-background: hsla(229, 15%, 90%, 100%);
55+
--kbq-datepicker-grid-cell-states-selected-text: hsla(229, 15%, 15%, 100%);
56+
--kbq-datepicker-grid-cell-states-selected-hover-background: hsla(229, 15%, 55%, 100%);
57+
--kbq-datepicker-grid-cell-states-disabled-background: transparent;
58+
--kbq-datepicker-grid-cell-states-disabled-text: hsla(229, 15%, 40%, 100%);
59+
}

‎packages/components/datepicker/datepicker.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
6262
selector: 'kbq-datepicker__content',
6363
exportAs: 'kbqDatepickerContent',
6464
templateUrl: 'datepicker-content.html',
65-
styleUrls: ['datepicker-content.scss'],
65+
styleUrls: ['datepicker-content.scss', 'datepicker-tokens.scss'],
6666
host: {
6767
class: 'kbq-datepicker__content',
6868

‎packages/components/dropdown/_dropdown-theme.scss

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,49 @@
55
@use '../core/styles/typography/typography-utils' as *;
66
@use '../core/styles/common/tokens' as *;
77

8-
@mixin kbq-dropdown-item-state($component, $style-name) {
9-
$state: map.get($component, $style-name);
10-
11-
background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
12-
color: kbq-css-variable(list-#{$style-name}-text-color, map.get($state, text));
8+
@mixin kbq-dropdown-item-state($style-name) {
9+
background: kbq-css-variable(list-#{$style-name}-container-background);
10+
color: kbq-css-variable(list-#{$style-name}-text-color);
1311

1412
.kbq-dropdown-item__caption {
15-
color: kbq-css-variable(list-#{$style-name}-caption-color, map.get($state, caption));
13+
color: kbq-css-variable(list-#{$style-name}-caption-color);
1614
}
1715
}
1816

19-
@mixin kbq-dropdown-theme($theme) {
20-
$dropdown: map.get(map.get($theme, components), dropdown);
21-
17+
@mixin kbq-dropdown-theme() {
2218
.kbq-dropdown__panel {
23-
box-shadow: kbq-css-variable(dropdown-container-box-shadow, map.get($dropdown, box-shadow));
24-
background: kbq-css-variable(dropdown-container-background, map.get($dropdown, background));
19+
box-shadow: kbq-css-variable(dropdown-container-box-shadow);
20+
background: kbq-css-variable(dropdown-container-background);
2521
}
2622

2723
.kbq-dropdown-item {
28-
$list-item: map.get(map.get($theme, components), list-item);
29-
30-
@include kbq-dropdown-item-state($list-item, default);
24+
@include kbq-dropdown-item-state(default);
3125

3226
&.kbq-dropdown-item_highlighted,
3327
&:hover:not(.kbq-disabled) {
34-
@include kbq-dropdown-item-state($list-item, states-hover);
28+
@include kbq-dropdown-item-state(states-hover);
3529
}
3630

3731
&.cdk-keyboard-focused {
38-
border-color: kbq-css-variable(
39-
list-states-focused-focus-outline-color,
40-
map.get($list-item, states-focused, focus-outline)
41-
);
32+
border-color: kbq-css-variable(list-states-focused-focus-outline-color);
4233
}
4334

4435
&.kbq-selected {
45-
@include kbq-dropdown-item-state($list-item, states-selected);
36+
@include kbq-dropdown-item-state(states-selected);
4637

4738
&:hover:not(.kbq-disabled) {
48-
@include kbq-dropdown-item-state($list-item, states-selected-hover);
39+
@include kbq-dropdown-item-state(states-selected-hover);
4940
}
5041
}
5142

5243
&.kbq-disabled {
53-
@include kbq-dropdown-item-state($list-item, states-disabled);
44+
@include kbq-dropdown-item-state(states-disabled);
5445
}
5546
}
5647

5748
.kbq-dropdown__group-header {
5849
&.kbq-dropdown__group-header_small {
59-
color: kbq-css-variable(foreground-contrast-secondary, map.get($theme, foreground, contrast-secondary));
50+
color: kbq-css-variable(foreground-contrast-secondary);
6051
}
6152
}
6253

@@ -65,7 +56,7 @@
6556
}
6657
}
6758

68-
@mixin kbq-dropdown-typography($config) {
59+
@mixin kbq-dropdown-typography() {
6960
.kbq-dropdown-item,
7061
.kbq-dropdown__content {
7162
@include kbq-typography-css-variables(list, text);

0 commit comments

Comments
 (0)