Skip to content

Commit 5977376

Browse files
sk8knutsk8knut
authored
feat(toggle): components theming with CSS-vars (#DS-2839) (#280)
1 parent 234a5c3 commit 5977376

File tree

8 files changed

+173
-48
lines changed

8 files changed

+173
-48
lines changed

‎docs/guides/theming-2.0.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
- [input](/packages/components/input/input-tokens.scss)
7272
- [link](/packages/components/link/link-tokens.scss)
7373
- [toast](/packages/components/toast/toast-tokens.scss)
74+
- [toggle](/packages/components/toggle/toggle-tokens.scss)
7475

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

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
@use '../../tags/tag-theme' as *;
2828
@use '../../textarea/textarea-theme' as *;
2929
@use '../../timezone/timezone-option-theme' as *;
30-
@use '../../toggle/toggle-theme' as *;
3130
@use '../../tooltip/tooltip-theme' as *;
3231
@use '../../tree-select/tree-select-theme' as *;
3332
@use '../../tree/tree-theme' as *;
@@ -71,7 +70,6 @@
7170
@include kbq-tabs-theme($theme);
7271
@include kbq-tag-theme($theme);
7372
@include kbq-timezone-option-theme($theme);
74-
@include kbq-toggle-theme($theme);
7573
@include kbq-tooltip-theme($theme);
7674
@include kbq-tree-select-theme($theme);
7775
@include kbq-tree-theme($theme);
@@ -112,7 +110,6 @@
112110
@include kbq-tag-typography($config);
113111
@include kbq-textarea-typography($config);
114112
@include kbq-timezone-option-typography($config);
115-
@include kbq-toggle-typography($config);
116113
@include kbq-tooltip-typography($config);
117114
@include kbq-tree-select-typography($config);
118115
@include kbq-tree-typography($config);

‎packages/components/toggle/_toggle-theme.scss

Lines changed: 21 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,75 @@
11
@use 'sass:meta';
22
@use 'sass:map';
33

4-
@use '../core/styles/theming/theming' as *;
5-
@use '../core/styles/typography/typography-utils' as *;
64
@use '../core/styles/common/tokens' as *;
75

8-
@mixin kbq-toggle-state($component, $type, $state-name) {
9-
$state: map.get($component, $type, $state-name);
6+
@mixin kbq-toggle-state($type, $state-name) {
107
$base: toggle-#{$type}-#{$state-name};
118

129
.kbq-toggle-bar {
13-
border-color: kbq-css-variable(#{$base}-border, map.get($state, border));
14-
background: kbq-css-variable(#{$base}-background, map.get($state, background));
10+
border-color: kbq-css-variable(#{$base}-border);
11+
background: kbq-css-variable(#{$base}-background);
1512
}
1613

1714
.kbq-toggle__circle {
18-
background: kbq-css-variable(#{$base}-circle-background, map.get($state, circle-background));
15+
background: kbq-css-variable(#{$base}-circle-background);
1916
}
2017
}
2118

22-
@mixin kbq-toggle-color($component, $type) {
23-
@include kbq-toggle-state($component, $type, default);
19+
@mixin kbq-toggle-color($type) {
20+
@include kbq-toggle-state($type, default);
2421

2522
&:hover {
26-
@include kbq-toggle-state($component, $type, states-hover);
23+
@include kbq-toggle-state($type, states-hover);
2724
}
2825

2926
&.kbq-active {
30-
@include kbq-toggle-state($component, $type, states-checked);
27+
@include kbq-toggle-state($type, states-checked);
3128
}
3229

3330
&.kbq-active:hover {
34-
@include kbq-toggle-state($component, $type, states-checked-hover);
31+
@include kbq-toggle-state($type, states-checked-hover);
3532
}
3633

3734
&.cdk-keyboard-focused {
38-
@include kbq-toggle-state($component, $type, states-focused);
35+
@include kbq-toggle-state($type, states-focused);
3936

4037
& .kbq-toggle-bar {
41-
border-color: kbq-css-variable(
42-
toggle-#{$type}-states-focused-focus-outline,
43-
map.get($component, $type, states-focused, focus-outline)
44-
);
45-
box-shadow: 0 0 0.1px 1px
46-
kbq-css-variable(
47-
toggle-#{$type}-states-focused-focus-outline,
48-
map.get($component, $type, states-focused, focus-outline)
49-
);
38+
border-color: kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
39+
box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
5040
}
5141
}
5242

5343
&.kbq-active.cdk-keyboard-focused {
54-
@include kbq-toggle-state($component, $type, states-checked-focused);
44+
@include kbq-toggle-state($type, states-checked-focused);
5545

5646
& .kbq-toggle-bar {
57-
border-color: kbq-css-variable(
58-
toggle-#{$type}-states-checked-focused-focus-outline,
59-
map.get($component, $type, states-checked-focused, focus-outline)
60-
);
61-
box-shadow: 0 0 0.1px 1px
62-
kbq-css-variable(
63-
toggle-#{$type}-states-checked-focused-focus-outline,
64-
map.get($component, $type, states-checked-focused, focus-outline)
65-
);
47+
border-color: kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
48+
box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
6649
}
6750
}
6851

6952
&.kbq-disabled,
7053
&.kbq-active.kbq-disabled {
71-
@include kbq-toggle-state($component, $type, states-disabled);
54+
@include kbq-toggle-state($type, states-disabled);
7255
}
7356
}
7457

75-
@mixin kbq-toggle-theme($theme) {
76-
$toggle: map.get($theme, components, toggle);
77-
$foreground: map.get($theme, foreground);
78-
58+
@mixin kbq-toggle-theme() {
7959
.kbq-toggle {
80-
@include kbq-toggle-color($toggle, theme);
60+
@include kbq-toggle-color(theme);
8161

8262
&.kbq-error {
83-
@include kbq-toggle-color($toggle, error);
63+
@include kbq-toggle-color(error);
8464
}
8565

8666
&.kbq-disabled {
87-
color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
67+
color: kbq-css-variable(foreground-text-disabled);
8868
}
8969
}
9070
}
9171

92-
@mixin kbq-toggle-typography($config) {
72+
@mixin kbq-toggle-typography() {
9373
.kbq-toggle:not(.kbq-toggle_big) {
9474
@include kbq-typography-css-variables(toggle, normal-label);
9575

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.kbq-toggle {
2+
--kbq-toggle-size-normal-height: 16px;
3+
--kbq-toggle-size-normal-width: 28px;
4+
--kbq-toggle-size-normal-horizontal-content-padding: 8px;
5+
--kbq-toggle-size-normal-vertical-content-padding: 8px;
6+
--kbq-toggle-size-big-height: 16px;
7+
--kbq-toggle-size-big-width: 28px;
8+
--kbq-toggle-size-big-horizontal-content-padding: 8px;
9+
--kbq-toggle-size-big-vertical-content-padding: 8px;
10+
--kbq-toggle-font-normal-label-font-size: 14px;
11+
--kbq-toggle-font-normal-label-line-height: 20px;
12+
--kbq-toggle-font-normal-label-letter-spacing: -0.006em;
13+
--kbq-toggle-font-normal-label-font-weight: normal;
14+
--kbq-toggle-font-normal-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
15+
Arial, sans-serif;
16+
--kbq-toggle-font-normal-label-text-transform: null;
17+
--kbq-toggle-font-normal-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
18+
--kbq-toggle-font-normal-caption-font-size: 12px;
19+
--kbq-toggle-font-normal-caption-line-height: 16px;
20+
--kbq-toggle-font-normal-caption-letter-spacing: normal;
21+
--kbq-toggle-font-normal-caption-font-weight: normal;
22+
--kbq-toggle-font-normal-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
23+
Arial, sans-serif;
24+
--kbq-toggle-font-normal-caption-text-transform: null;
25+
--kbq-toggle-font-normal-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
26+
--kbq-toggle-font-big-label-font-size: 16px;
27+
--kbq-toggle-font-big-label-line-height: 24px;
28+
--kbq-toggle-font-big-label-letter-spacing: -0.011em;
29+
--kbq-toggle-font-big-label-font-weight: normal;
30+
--kbq-toggle-font-big-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
31+
Arial, sans-serif;
32+
--kbq-toggle-font-big-label-text-transform: null;
33+
--kbq-toggle-font-big-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
34+
--kbq-toggle-font-big-caption-font-size: 14px;
35+
--kbq-toggle-font-big-caption-line-height: 20px;
36+
--kbq-toggle-font-big-caption-letter-spacing: -0.006em;
37+
--kbq-toggle-font-big-caption-font-weight: normal;
38+
--kbq-toggle-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
39+
Arial, sans-serif;
40+
--kbq-toggle-font-big-caption-text-transform: null;
41+
--kbq-toggle-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
42+
}
43+
44+
:where(.kbq-light, .theme-light, .kbq-theme-light) {
45+
--kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
46+
--kbq-toggle-theme-default-border: hsla(229, 15%, 70%, 100%);
47+
--kbq-toggle-theme-default-background: hsla(0, 0%, 100%, 100%);
48+
--kbq-toggle-theme-default-circle-background: hsla(229, 15%, 15%, 100%);
49+
--kbq-toggle-theme-states-hover-border: hsla(229, 15%, 70%, 100%);
50+
--kbq-toggle-theme-states-hover-background: hsla(229, 15%, 50%, 8%);
51+
--kbq-toggle-theme-states-hover-circle-background: hsla(229, 15%, 15%, 100%);
52+
--kbq-toggle-theme-states-checked-border: transparent;
53+
--kbq-toggle-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
54+
--kbq-toggle-theme-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
55+
--kbq-toggle-theme-states-checked-hover-border: transparent;
56+
--kbq-toggle-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
57+
--kbq-toggle-theme-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
58+
--kbq-toggle-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
59+
--kbq-toggle-theme-states-focused-background: hsla(0, 0%, 100%, 100%);
60+
--kbq-toggle-theme-states-focused-circle-background: hsla(229, 15%, 15%, 100%);
61+
--kbq-toggle-theme-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);
62+
--kbq-toggle-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
63+
--kbq-toggle-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
64+
--kbq-toggle-theme-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
65+
--kbq-toggle-theme-states-checked-focused-focus-outline: hsla(216, 100%, 60%, 100%);
66+
--kbq-toggle-theme-states-disabled-border: hsla(229, 15%, 15%, 32%);
67+
--kbq-toggle-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
68+
--kbq-toggle-theme-states-disabled-circle-background: hsla(229, 15%, 15%, 32%);
69+
--kbq-toggle-error-default-border: hsla(7, 97%, 45%, 100%);
70+
--kbq-toggle-error-default-background: hsla(7, 97%, 99%, 100%);
71+
--kbq-toggle-error-default-circle-background: hsla(7, 97%, 45%, 100%);
72+
--kbq-toggle-error-states-hover-border: hsla(7, 97%, 45%, 100%);
73+
--kbq-toggle-error-states-hover-background: hsla(7, 97%, 92%, 100%);
74+
--kbq-toggle-error-states-hover-circle-background: hsla(7, 97%, 45%, 100%);
75+
--kbq-toggle-error-states-checked-border: hsla(7, 97%, 45%, 100%);
76+
--kbq-toggle-error-states-checked-background: hsla(7, 97%, 60%, 100%);
77+
--kbq-toggle-error-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
78+
--kbq-toggle-error-states-checked-hover-border: hsla(7, 97%, 45%, 100%);
79+
--kbq-toggle-error-states-checked-hover-background: hsla(7, 97%, 56%, 100%);
80+
--kbq-toggle-error-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
81+
--kbq-toggle-error-states-focused-border: hsla(7, 97%, 45%, 100%);
82+
--kbq-toggle-error-states-focused-background: hsla(7, 97%, 99%, 100%);
83+
--kbq-toggle-error-states-focused-circle-background: hsla(7, 97%, 45%, 100%);
84+
--kbq-toggle-error-states-focused-focus-outline: hsla(7, 97%, 45%, 100%);
85+
--kbq-toggle-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
86+
--kbq-toggle-error-states-checked-focused-background: hsla(7, 97%, 60%, 100%);
87+
--kbq-toggle-error-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
88+
--kbq-toggle-error-states-checked-focused-focus-outline: hsla(7, 97%, 45%, 100%);
89+
--kbq-toggle-error-states-disabled-border: hsla(229, 15%, 15%, 32%);
90+
--kbq-toggle-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
91+
--kbq-toggle-error-states-disabled-circle-background: hsla(229, 15%, 15%, 32%);
92+
}
93+
94+
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
95+
--kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
96+
--kbq-toggle-theme-default-border: hsla(229, 15%, 30%, 100%);
97+
--kbq-toggle-theme-default-background: hsla(229, 15%, 12%, 100%);
98+
--kbq-toggle-theme-default-circle-background: hsla(229, 15%, 80%, 100%);
99+
--kbq-toggle-theme-states-hover-border: hsla(229, 15%, 30%, 100%);
100+
--kbq-toggle-theme-states-hover-background: hsla(229, 15%, 50%, 16%);
101+
--kbq-toggle-theme-states-hover-circle-background: hsla(229, 15%, 80%, 100%);
102+
--kbq-toggle-theme-states-checked-border: transparent;
103+
--kbq-toggle-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
104+
--kbq-toggle-theme-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
105+
--kbq-toggle-theme-states-checked-hover-border: transparent;
106+
--kbq-toggle-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
107+
--kbq-toggle-theme-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
108+
--kbq-toggle-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
109+
--kbq-toggle-theme-states-focused-background: hsla(229, 15%, 12%, 100%);
110+
--kbq-toggle-theme-states-focused-circle-background: hsla(229, 15%, 80%, 100%);
111+
--kbq-toggle-theme-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);
112+
--kbq-toggle-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
113+
--kbq-toggle-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
114+
--kbq-toggle-theme-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
115+
--kbq-toggle-theme-states-checked-focused-focus-outline: hsla(216, 100%, 60%, 100%);
116+
--kbq-toggle-theme-states-disabled-border: hsla(229, 15%, 50%, 32%);
117+
--kbq-toggle-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
118+
--kbq-toggle-theme-states-disabled-circle-background: hsla(229, 15%, 30%, 100%);
119+
--kbq-toggle-error-default-border: hsla(7, 97%, 35%, 100%);
120+
--kbq-toggle-error-default-background: hsla(7, 97%, 6%, 100%);
121+
--kbq-toggle-error-default-circle-background: hsla(7, 97%, 60%, 100%);
122+
--kbq-toggle-error-states-hover-border: hsla(7, 97%, 35%, 100%);
123+
--kbq-toggle-error-states-hover-background: hsla(7, 97%, 13%, 100%);
124+
--kbq-toggle-error-states-hover-circle-background: hsla(7, 97%, 60%, 100%);
125+
--kbq-toggle-error-states-checked-border: hsla(7, 97%, 35%, 100%);
126+
--kbq-toggle-error-states-checked-background: hsla(7, 97%, 41%, 100%);
127+
--kbq-toggle-error-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
128+
--kbq-toggle-error-states-checked-hover-border: hsla(7, 97%, 35%, 100%);
129+
--kbq-toggle-error-states-checked-hover-background: hsla(7, 97%, 42%, 100%);
130+
--kbq-toggle-error-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
131+
--kbq-toggle-error-states-focused-border: hsla(7, 97%, 45%, 100%);
132+
--kbq-toggle-error-states-focused-background: hsla(7, 97%, 6%, 100%);
133+
--kbq-toggle-error-states-focused-circle-background: hsla(7, 97%, 60%, 100%);
134+
--kbq-toggle-error-states-focused-focus-outline: hsla(7, 97%, 45%, 100%);
135+
--kbq-toggle-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
136+
--kbq-toggle-error-states-checked-focused-background: hsla(7, 97%, 41%, 100%);
137+
--kbq-toggle-error-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
138+
--kbq-toggle-error-states-checked-focused-focus-outline: hsla(7, 97%, 45%, 100%);
139+
--kbq-toggle-error-states-disabled-border: hsla(229, 15%, 50%, 32%);
140+
--kbq-toggle-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
141+
--kbq-toggle-error-states-disabled-circle-background: hsla(229, 15%, 30%, 100%);
142+
}

‎packages/components/toggle/toggle.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class KbqToggleChange {
5050
selector: 'kbq-toggle',
5151
exportAs: 'kbqToggle',
5252
templateUrl: './toggle.component.html',
53-
styleUrls: ['./toggle.scss'],
53+
styleUrls: ['./toggle.scss', './toggle-tokens.scss'],
5454
changeDetection: ChangeDetectionStrategy.OnPush,
5555
encapsulation: ViewEncapsulation.None,
5656
inputs: ['color', 'tabIndex'],

‎packages/components/toggle/toggle.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
@use '../core/styles/common/tokens' as *;
55

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

88
.kbq-toggle {
99
display: inline-block;
@@ -97,3 +97,6 @@ $tokens: meta.module-variables(tokens) !default;
9797
.kbq-toggle:not(.kbq-disabled) {
9898
cursor: pointer;
9999
}
100+
101+
@include kbq-toggle-theme();
102+
@include kbq-toggle-typography();

‎tools/tokens/build-each-component.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ const componentsWithCss = [
3030
'icon-item',
3131
'input',
3232
'link',
33-
'toast'
33+
'toast',
34+
'toggle'
3435
];
3536

3637
const styleDictionaryConfig = {

‎tools/tokens/utils.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ const filter = {
88
'pseudo-checkbox': 'checkbox',
99
datepicker: 'states-foreground-disabled',
1010
dropdown: ['kbq-list', 'foreground-contrast-secondary'],
11-
'icon-button': 'states-focused-color'
11+
'icon-button': 'states-focused-color',
12+
toggle: 'foreground-text-disabled'
1213
};
1314

1415
const componentNameMapping = {

0 commit comments

Comments
 (0)