Skip to content

Commit 9c88751

Browse files
DiaanDanielleRameauanna-lach
authored
Feature/731 make tab component available for all themes (#985)
* added tab tokens to all themes * ⚙️ Generate theme tokens * added border width in all themes * ⚙️ Generate theme tokens * added tabs sizing * ⚙️ Generate theme tokens * clickedu tab update * ⚙️ Generate theme tokens * contrast fix clickedu * color contrast fix * ⚙️ Generate theme tokens * updates tab indicator * - * itslearning colors * ⚙️ Generate theme tokens * itslearning tab update * ⚙️ Generate theme tokens * updated magister light * ⚙️ Generate theme tokens * updated magister dark * ⚙️ Generate theme tokens * updated max online * ⚙️ Generate theme tokens * updated myvanin * ⚙️ Generate theme tokens * updated neon light * ⚙️ Generate theme tokens * updated neon dark * ⚙️ Generate theme tokens * updated bingel int + dc * ⚙️ Generate theme tokens * bingel update * ⚙️ Generate theme tokens * updated kampus * ⚙️ Generate theme tokens * updated TEAS * ⚙️ Generate theme tokens * updated ES * ⚙️ Generate theme tokens * updated my digital book * ⚙️ Generate theme tokens * updated my digital book * ⚙️ Generate theme tokens * Added missing fill icon, changeset * updated SL dark * ⚙️ Generate theme tokens * updated SL dark * ⚙️ Generate theme tokens * added changeset --------- Co-authored-by: Daniëlle Rameau <111998351+DanielleRameau@users.noreply.github.com> Co-authored-by: DanielleRameau <DanielleRameau@users.noreply.github.com> Co-authored-by: anna-lach <a.lach@nowaera.pl>
1 parent 8ce8ec6 commit 9c88751

File tree

152 files changed

+6546
-1539
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

152 files changed

+6546
-1539
lines changed

‎.changeset/lemon-mails-suffer.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sl-design-system/tabs': patch
3+
---
4+
5+
Missing fill for tab icon in the default state added

‎.changeset/olive-seals-swim.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
'@sl-design-system/editorial-suite': patch
3+
'@sl-design-system/my-digital-book': patch
4+
'@sl-design-system/sanoma-learning': patch
5+
'@sl-design-system/itslearning': patch
6+
'@sl-design-system/bingel-int': patch
7+
'@sl-design-system/bingel-dc': patch
8+
'@sl-design-system/tabs': patch
9+
'@sl-design-system/clickedu': patch
10+
'@sl-design-system/magister': patch
11+
'@sl-design-system/myvanin': patch
12+
'@sl-design-system/bingel': patch
13+
'@sl-design-system/kampus': patch
14+
'@sl-design-system/neon': patch
15+
'@sl-design-system/teas': patch
16+
'@sl-design-system/max': patch
17+
---
18+
19+
Added tokens for Tab component

‎packages/components/tabs/src/tab.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ slot[name='subtitle'] {
7676

7777
slot[name='icon']::slotted(sl-icon) {
7878
block-size: var(--_icon-block-size);
79+
fill: var(--_color);
7980
}
8081

8182
slot[name='badge']::slotted(sl-badge) {

‎packages/themes/bingel-dc/all.css‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,19 @@
1818
--sl-flex-direction-row-reverse: row-reverse;
1919
--sl-flex-direction-column-reverse: column-reverse;
2020
--sl-flex-direction-column: column;
21+
--sl-opacity-transparent: 0;
22+
--sl-opacity-1000: 1;
23+
--sl-opacity-900: 0.8;
24+
--sl-opacity-800: 0.64;
25+
--sl-opacity-700: 0.48;
26+
--sl-opacity-600: 0.32;
27+
--sl-opacity-500: 0.2;
28+
--sl-opacity-400: 0.16;
29+
--sl-opacity-300: 0.12;
30+
--sl-opacity-200: 0.08;
31+
--sl-opacity-150: 0.06;
32+
--sl-opacity-100: 0.04;
33+
--sl-opacity-50: 0.02;
2134
--sl-size-avatar-3xl: 80px;
2235
--sl-size-avatar-xl: 52px;
2336
--sl-size-avatar-lg: 40px;
@@ -38,19 +51,6 @@
3851
--sl-size-3xs: 4px;
3952
--sl-size-4xs: 2px;
4053
--sl-size-none: 0px;
41-
--sl-opacity-transparent: 0;
42-
--sl-opacity-1000: 1;
43-
--sl-opacity-900: 0.8;
44-
--sl-opacity-800: 0.64;
45-
--sl-opacity-700: 0.48;
46-
--sl-opacity-600: 0.32;
47-
--sl-opacity-500: 0.2;
48-
--sl-opacity-400: 0.16;
49-
--sl-opacity-300: 0.12;
50-
--sl-opacity-200: 0.08;
51-
--sl-opacity-150: 0.06;
52-
--sl-opacity-100: 0.04;
53-
--sl-opacity-50: 0.02;
5454
--sl-icon-typeset-font-size-2xs: 10px;
5555
--sl-icon-core-ellipsis: ellipsis;
5656
--sl-icon-core-circle-check-solid: circle-check;
@@ -289,6 +289,7 @@
289289
--sl-size-input-option-lg: var(--sl-size-2xl);
290290
--sl-size-input-option-md: var(--sl-size-xl);
291291
--sl-size-input-option-sm: var(--sl-size-lg);
292+
--sl-size-select-indicator: var(--sl-size-3xs);
292293
--sl-dialog-footer-justify-content: var(--sl-justify-content-end);
293294
--sl-dialog-footer-flex-direction: var(--sl-flex-direction-row);
294295
--sl-dialog-header-flex-direction: var(--sl-flex-direction-column);
@@ -502,6 +503,8 @@
502503
--sl-space-tooltip-inline: var(--sl-space-md);
503504
--sl-space-tooltip-block: var(--sl-space-sm);
504505
--sl-space-tooltip-arrow-offset: var(--sl-space-sm);
506+
--sl-border-width-border-tabbar: var(--sl-border-width-xs);
507+
--sl-border-width-border-tab: var(--sl-border-width-xs);
505508
--sl-border-width-tooltip-border: var(--sl-border-width-xs);
506509
--sl-border-width-tooltip-none: var(--sl-border-width-none);
507510
--sl-border-width-divider: var(--sl-border-width-xs);
@@ -531,6 +534,10 @@
531534
--sl-border-radius-button-md: var(--sl-border-radius-full);
532535
--sl-border-radius-button-sm: var(--sl-border-radius-full);
533536
--sl-border-radius-badge-full: var(--sl-border-radius-full);
537+
--sl-text-tab-subtitle: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) /
538+
var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body);
539+
--sl-text-tab-title: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) /
540+
var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body);
534541
--sl-text-list-sm-normal: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) /
535542
var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body);
536543
--sl-text-tooltip-text-title: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) /
@@ -778,6 +785,14 @@
778785
--sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base));
779786
--sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500));
780787
--sl-body-background: rgb(var(--sl-color-palette-white-base));
788+
--sl-color-tab-active-border: rgb(var(--sl-color-palette-neutral-500));
789+
--sl-color-tab-active-background: rgb(var(--sl-color-palette-accent-100));
790+
--sl-color-tab-tabbar-border: rgb(var(--sl-color-palette-neutral-500));
791+
--sl-color-tab-disabled-border: rgb(var(--sl-color-palette-neutral-500));
792+
--sl-color-tab-hover-border: rgb(var(--sl-color-palette-neutral-500));
793+
--sl-color-tab-hover-background: rgb(var(--sl-color-palette-accent-50));
794+
--sl-color-tab-default-indicator: rgb(var(--sl-color-palette-primary-base));
795+
--sl-color-tab-default-border: rgb(var(--sl-color-palette-neutral-500));
781796
--sl-color-inline-message-danger-icon: rgb(var(--sl-color-palette-danger-base));
782797
--sl-color-inline-message-danger-border: rgb(var(--sl-color-palette-danger-base));
783798
--sl-color-inline-message-danger-foreground: rgb(var(--sl-color-palette-danger-500));
@@ -1195,6 +1210,11 @@
11951210
--sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base));
11961211
--sl-color-avatar-background: rgb(var(--sl-color-palette-primary-base));
11971212
--sl-body-foreground: rgb(var(--sl-color-palette-black-base));
1213+
--sl-color-tab-content-background: var(--sl-body-background);
1214+
--sl-color-tab-tabbar-background: var(--sl-body-background);
1215+
--sl-color-tab-disabled-foreground: rgb(var(--sl-color-palette-neutral-400));
1216+
--sl-color-tab-disabled-background: var(--sl-body-background);
1217+
--sl-color-tab-default-background: var(--sl-body-background);
11981218
--sl-color-inline-message-info-background: rgb(var(--sl-color-palette-info-50));
11991219
--sl-color-dialog-border: var(--sl-body-background);
12001220
--sl-color-dialog-background: var(--sl-body-background);
@@ -1368,6 +1388,11 @@
13681388
--sl-color-button-primary-ghost-idle-background: var(--sl-body-background);
13691389
--sl-color-button-primary-outline-idle-background: var(--sl-body-background);
13701390
--sl-color-button-default-link-hover-foreground: rgb(var(--sl-color-palette-accent-700));
1391+
--sl-color-tab-content-foreground: var(--sl-body-foreground);
1392+
--sl-color-tab-active-foreground: var(--sl-body-foreground);
1393+
--sl-color-tab-tabbar-foreground: var(--sl-body-foreground);
1394+
--sl-color-tab-hover-foreground: var(--sl-body-foreground);
1395+
--sl-color-tab-default-foreground: var(--sl-body-foreground);
13711396
--sl-color-dialog-foreground: var(--sl-body-foreground);
13721397
--sl-color-select-selectbox-valid-disabled-input-text: var(--sl-color-input-text-field-valid-disabled-input-text);
13731398
--sl-color-select-selectbox-valid-disabled-icon: var(--sl-color-input-text-field-valid-disabled-icon);

‎packages/themes/bingel-dc/base.css‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@
1010
--sl-flex-direction-row-reverse: row-reverse;
1111
--sl-flex-direction-column-reverse: column-reverse;
1212
--sl-flex-direction-column: column;
13+
--sl-opacity-transparent: 0;
14+
--sl-opacity-1000: 1;
15+
--sl-opacity-900: 0.8;
16+
--sl-opacity-800: 0.64;
17+
--sl-opacity-700: 0.48;
18+
--sl-opacity-600: 0.32;
19+
--sl-opacity-500: 0.2;
20+
--sl-opacity-400: 0.16;
21+
--sl-opacity-300: 0.12;
22+
--sl-opacity-200: 0.08;
23+
--sl-opacity-150: 0.06;
24+
--sl-opacity-100: 0.04;
25+
--sl-opacity-50: 0.02;
1326
--sl-size-avatar-3xl: 80px;
1427
--sl-size-avatar-xl: 52px;
1528
--sl-size-avatar-lg: 40px;
@@ -30,19 +43,6 @@
3043
--sl-size-3xs: 4px;
3144
--sl-size-4xs: 2px;
3245
--sl-size-none: 0px;
33-
--sl-opacity-transparent: 0;
34-
--sl-opacity-1000: 1;
35-
--sl-opacity-900: 0.8;
36-
--sl-opacity-800: 0.64;
37-
--sl-opacity-700: 0.48;
38-
--sl-opacity-600: 0.32;
39-
--sl-opacity-500: 0.2;
40-
--sl-opacity-400: 0.16;
41-
--sl-opacity-300: 0.12;
42-
--sl-opacity-200: 0.08;
43-
--sl-opacity-150: 0.06;
44-
--sl-opacity-100: 0.04;
45-
--sl-opacity-50: 0.02;
4646
--sl-icon-typeset-font-size-2xs: 10px;
4747
--sl-icon-core-ellipsis: ellipsis;
4848
--sl-icon-core-circle-check-solid: circle-check;
@@ -281,6 +281,7 @@
281281
--sl-size-input-option-lg: var(--sl-size-2xl);
282282
--sl-size-input-option-md: var(--sl-size-xl);
283283
--sl-size-input-option-sm: var(--sl-size-lg);
284+
--sl-size-select-indicator: var(--sl-size-3xs);
284285
--sl-dialog-footer-justify-content: var(--sl-justify-content-end);
285286
--sl-dialog-footer-flex-direction: var(--sl-flex-direction-row);
286287
--sl-dialog-header-flex-direction: var(--sl-flex-direction-column);
@@ -494,6 +495,8 @@
494495
--sl-space-tooltip-inline: var(--sl-space-md);
495496
--sl-space-tooltip-block: var(--sl-space-sm);
496497
--sl-space-tooltip-arrow-offset: var(--sl-space-sm);
498+
--sl-border-width-border-tabbar: var(--sl-border-width-xs);
499+
--sl-border-width-border-tab: var(--sl-border-width-xs);
497500
--sl-border-width-tooltip-border: var(--sl-border-width-xs);
498501
--sl-border-width-tooltip-none: var(--sl-border-width-none);
499502
--sl-border-width-divider: var(--sl-border-width-xs);
@@ -523,6 +526,10 @@
523526
--sl-border-radius-button-md: var(--sl-border-radius-full);
524527
--sl-border-radius-button-sm: var(--sl-border-radius-full);
525528
--sl-border-radius-badge-full: var(--sl-border-radius-full);
529+
--sl-text-tab-subtitle: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) /
530+
var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body);
531+
--sl-text-tab-title: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) /
532+
var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body);
526533
--sl-text-list-sm-normal: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) /
527534
var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body);
528535
--sl-text-tooltip-text-title: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) /

0 commit comments

Comments
 (0)