Skip to content

Commit 54d48e4

Browse files
sk8knutsk8knut
authored
feat(empty-state): components theming with CSS-vars (#DS-2811) (#272)
1 parent 20d57d6 commit 54d48e4

File tree

8 files changed

+84
-14
lines changed

8 files changed

+84
-14
lines changed

‎docs/guides/theming-2.0.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
- [datepicker](/packages/components/datepicker/datepicker-tokens.scss)
6565
- [divider](/packages/components/divider/divider-tokens.scss)
6666
- [dropdown](/packages/components/dropdown/dropdown-tokens.scss)
67+
- [empty-state](/packages/components/empty-state/empty-state-tokens.scss)
6768
- [form-field](/packages/components/form-field/form-field-tokens.scss)
6869
- [hint](/packages/components/form-field/hint-tokens.scss)
6970
- [icon](/packages/components/icon/icon-tokens.scss)

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

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

8-
@use '../../empty-state/empty-state-theme' as *;
98
@use '../../file-upload/file-upload-theme' as *;
109
@use '../../link/link-theme' as *;
1110
@use '../../list/list-theme' as *;
@@ -40,7 +39,6 @@
4039
@include kbq-core-theme($theme);
4140

4241
@include kbq-dl-theme($theme);
43-
@include kbq-empty-state-theme($theme);
4442
@include kbq-file-upload-theme($theme);
4543
@include kbq-forms-theme($theme);
4644
@include kbq-highlight-theme();
@@ -84,7 +82,6 @@
8482
@include kbq-base-typography();
8583
@include kbq-markdown-base-typography();
8684

87-
@include kbq-empty-state-typography($config);
8885
@include kbq-dl-typography($config);
8986
@include kbq-file-upload-typography($config);
9087
@include kbq-forms-typography($config);

‎packages/components/empty-state/_empty-state-theme.scss

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

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

7-
@mixin kbq-empty-state-theme($theme) {
8-
$empty-state: map.get($theme, components, empty-state);
9-
6+
@mixin kbq-empty-state-theme() {
107
.kbq-empty-state_normal-color {
118
.kbq-empty-state-title {
12-
color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
9+
color: kbq-css-variable(empty-state-title);
1310
}
1411

1512
.kbq-empty-state-text {
16-
color: kbq-css-variable(empty-state-title, map.get($empty-state, title));
13+
color: kbq-css-variable(empty-state-title);
1714
}
1815
}
1916

2017
.kbq-empty-state_error-color {
2118
.kbq-empty-state-title {
22-
color: kbq-css-variable(foreground-error, map.get($theme, foreground, error));
19+
color: kbq-css-variable(foreground-error);
2320
}
2421

2522
.kbq-empty-state-text {
26-
color: kbq-css-variable(foreground-error, map.get($theme, foreground, error));
23+
color: kbq-css-variable(foreground-error);
2724
}
2825
}
2926
}
3027

31-
@mixin kbq-empty-state-typography($config) {
28+
@mixin kbq-empty-state-typography() {
3229
.kbq-empty-state-title,
3330
.kbq-empty-state-text {
3431
text-align: center;

‎packages/components/empty-state/empty-state-tokens.scss

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.kbq-empty-state {
2+
--kbq-empty-state-size-big-max-width: 480px;
3+
--kbq-empty-state-size-big-padding-horizontal: 56px;
4+
--kbq-empty-state-size-big-padding-top: 48px;
5+
--kbq-empty-state-size-big-padding-bottom: 48px;
6+
--kbq-empty-state-size-big-actions-margin-top: 20px;
7+
--kbq-empty-state-size-big-image-margin-bottom: 32px;
8+
--kbq-empty-state-size-big-image-addon-height: 56px;
9+
--kbq-empty-state-size-big-title-margin-bottom: 16px;
10+
--kbq-empty-state-size-normal-max-width: 320px;
11+
--kbq-empty-state-size-normal-padding-horizontal: 32px;
12+
--kbq-empty-state-size-normal-padding-top: 32px;
13+
--kbq-empty-state-size-normal-padding-bottom: 32px;
14+
--kbq-empty-state-size-normal-actions-margin-top: 8px;
15+
--kbq-empty-state-size-normal-image-margin-bottom: 20px;
16+
--kbq-empty-state-size-normal-image-addon-height: 24px;
17+
--kbq-empty-state-size-normal-title-margin-bottom: 4px;
18+
--kbq-empty-state-font-big-title-font-size: 28px;
19+
--kbq-empty-state-font-big-title-line-height: 32px;
20+
--kbq-empty-state-font-big-title-letter-spacing: normal;
21+
--kbq-empty-state-font-big-title-font-weight: 700;
22+
--kbq-empty-state-font-big-title-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
23+
'Helvetica Neue', Arial, sans-serif;
24+
--kbq-empty-state-font-big-title-text-transform: null;
25+
--kbq-empty-state-font-big-title-font-feature-settings: 'calt', 'kern', 'liga';
26+
--kbq-empty-state-font-big-text-font-size: 14px;
27+
--kbq-empty-state-font-big-text-line-height: 20px;
28+
--kbq-empty-state-font-big-text-letter-spacing: -0.006em;
29+
--kbq-empty-state-font-big-text-font-weight: normal;
30+
--kbq-empty-state-font-big-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
31+
Arial, sans-serif;
32+
--kbq-empty-state-font-big-text-text-transform: null;
33+
--kbq-empty-state-font-big-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
34+
--kbq-empty-state-font-normal-title-font-size: 16px;
35+
--kbq-empty-state-font-normal-title-line-height: 24px;
36+
--kbq-empty-state-font-normal-title-letter-spacing: -0.011em;
37+
--kbq-empty-state-font-normal-title-font-weight: 600;
38+
--kbq-empty-state-font-normal-title-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
39+
'Helvetica Neue', Arial, sans-serif;
40+
--kbq-empty-state-font-normal-title-text-transform: null;
41+
--kbq-empty-state-font-normal-title-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
42+
--kbq-empty-state-font-normal-text-font-size: 14px;
43+
--kbq-empty-state-font-normal-text-line-height: 20px;
44+
--kbq-empty-state-font-normal-text-letter-spacing: -0.006em;
45+
--kbq-empty-state-font-normal-text-font-weight: normal;
46+
--kbq-empty-state-font-normal-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
47+
'Helvetica Neue', Arial, sans-serif;
48+
--kbq-empty-state-font-normal-text-text-transform: null;
49+
--kbq-empty-state-font-normal-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
50+
}
51+
52+
:where(.kbq-light, .theme-light, .kbq-theme-light) {
53+
--kbq-foreground-error: hsla(7, 97%, 40%, 100%);
54+
--kbq-foreground-error-secondary: hsla(7, 97%, 50%, 100%);
55+
--kbq-foreground-error-tertiary: hsla(7, 97%, 70%, 100%);
56+
--kbq-foreground-error-less: hsla(7, 97%, 90%, 100%);
57+
--kbq-empty-state-title: hsla(229, 15%, 15%, 100%);
58+
--kbq-empty-state-color: hsla(229, 15%, 15%, 100%);
59+
}
60+
61+
:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
62+
--kbq-foreground-error: hsla(7, 97%, 60%, 100%);
63+
--kbq-foreground-error-secondary: hsla(7, 97%, 40%, 100%);
64+
--kbq-foreground-error-tertiary: hsla(7, 97%, 25%, 100%);
65+
--kbq-foreground-error-less: hsla(7, 97%, 90%, 100%);
66+
--kbq-empty-state-title: hsla(229, 15%, 80%, 100%);
67+
--kbq-empty-state-color: hsla(229, 15%, 80%, 100%);
68+
}

‎packages/components/empty-state/empty-state.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class KbqEmptyStateActions {}
5555
@Component({
5656
selector: 'kbq-empty-state',
5757
templateUrl: './empty-state.component.html',
58-
styleUrls: ['./empty-state.scss'],
58+
styleUrls: ['./empty-state.scss', 'empty-state-tokens.scss'],
5959
host: {
6060
class: 'kbq-empty-state',
6161
'[class.kbq-empty-state_big]': 'big',

‎packages/components/empty-state/empty-state.scss

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

7+
@use './empty-state-theme' as *;
8+
79
.kbq-empty-state {
810
display: flex;
911
flex-direction: column;
@@ -79,3 +81,6 @@
7981
justify-content: flex-start;
8082
}
8183
}
84+
85+
@include kbq-empty-state-theme();
86+
@include kbq-empty-state-typography();

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const componentsWithCss = [
2424
'datepicker',
2525
'divider',
2626
'dropdown',
27+
'empty-state',
2728
'form-field',
2829
'hint',
2930
'icon',

‎tools/tokens/utils.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ const filter = {
66
autocomplete: 'select-panel-dropdown',
77
button: 'kbq-states-focused-color',
88
'code-block': 'kbq-states-focused-color',
9-
'pseudo-checkbox': 'checkbox',
109
datepicker: 'states-foreground-disabled',
1110
dropdown: ['kbq-list', 'foreground-contrast-secondary'],
11+
'empty-state': 'foreground-error',
1212
'icon-button': 'states-focused-color',
13+
'pseudo-checkbox': 'checkbox',
1314
table: ['states-background-transparent-hover', 'line-contrast-less', 'foreground-contrast'],
1415
toggle: 'foreground-text-disabled'
1516
};

0 commit comments

Comments
 (0)