Skip to content

Commit 2a2c290

Browse files
didoodidoo
committed
TEMP - Added back custom token values for testing purpose
1 parent 8e68eb4 commit 2a2c290

File tree

3 files changed

+106
-28
lines changed
  • showcase/public/assets/styles/@hashicorp/themed-tokens

3 files changed

+106
-28
lines changed

‎showcase/public/assets/styles/@hashicorp/themed-tokens/with-combined-strategies/tokens.css‎

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,45 @@
99
--token-typography-font-weight-medium: 500;
1010
--token-typography-font-weight-semibold: 600;
1111
--token-typography-font-weight-bold: 700;
12+
/* added these to test theming in the showcase */
13+
--token-color-foreground-strong: #0c0c0e;
14+
--token-color-foreground-primary: #3b3d45;
15+
--token-color-surface-strong: #f1f2f3;
16+
--token-color-surface-primary: #ffffff;
17+
--token-color-surface-faint: #ffffff;
1218
}
1319

14-
@media (prefers-color-scheme: light) {
15-
:root:not([class*="hds-theme-"]):not([data-hds-theme]) {
20+
@media (prefers-color-scheme: dark) {
21+
:root:not([class*="hds-theme-"], [data-hds-theme]) {
1622
--token-color-palette-neutral-0: #ffffff;
1723
--token-color-foreground-primary: #161616;
1824
--token-typography-font-weight-regular: 400;
1925
--token-typography-font-weight-medium: 400;
2026
--token-typography-font-weight-semibold: 600;
2127
--token-typography-font-weight-bold: 600;
28+
/* added these to test theming in the showcase */
29+
--token-color-foreground-strong: #ffffff;
30+
--token-color-foreground-primary: #f1f2f3;
31+
--token-color-surface-strong: #3b3d45;
32+
--token-color-surface-primary: #0c0c0e;
33+
--token-color-surface-faint: #0c0c0e;
2234
}
2335
}
2436

25-
@media (prefers-color-scheme: dark) {
26-
:root:not([class*="hds-theme-"]):not([data-hds-theme]) {
37+
@media (prefers-color-scheme: light) {
38+
:root:not([class*="hds-theme-"], [data-hds-theme]) {
2739
--token-color-palette-neutral-0: #ffffff;
2840
--token-color-foreground-primary: #f4f4f4;
2941
--token-typography-font-weight-regular: 400;
3042
--token-typography-font-weight-medium: 400;
3143
--token-typography-font-weight-semibold: 600;
3244
--token-typography-font-weight-bold: 600;
45+
/* added these to test theming in the showcase */
46+
--token-color-foreground-strong: #0c0c0e;
47+
--token-color-foreground-primary: #3b3d45;
48+
--token-color-surface-strong: #f1f2f3;
49+
--token-color-surface-primary: #ffffff;
50+
--token-color-surface-faint: #ffffff;
3351
}
3452
}
3553

@@ -43,6 +61,12 @@
4361
--token-typography-font-weight-medium: 400;
4462
--token-typography-font-weight-semibold: 600;
4563
--token-typography-font-weight-bold: 600;
64+
/* added these to test theming in the showcase */
65+
--token-color-foreground-strong: #0c0c0e;
66+
--token-color-foreground-primary: #3b3d45;
67+
--token-color-surface-strong: #f1f2f3;
68+
--token-color-surface-primary: #ffffff;
69+
--token-color-surface-faint: #ffffff;
4670
}
4771

4872
.hds-theme-cds-g10,
@@ -53,6 +77,12 @@
5377
--token-typography-font-weight-medium: 400;
5478
--token-typography-font-weight-semibold: 600;
5579
--token-typography-font-weight-bold: 600;
80+
/* added these to test theming in the showcase */
81+
--token-color-foreground-strong: #1c1c1e;
82+
--token-color-foreground-primary: #4b4d45;
83+
--token-color-surface-strong: #d1d2d3;
84+
--token-color-surface-primary: #dddddd;
85+
--token-color-surface-faint: #dddddd;
5686
}
5787

5888
.hds-theme-cds-g90,
@@ -63,9 +93,15 @@
6393
--token-typography-font-weight-medium: 400;
6494
--token-typography-font-weight-semibold: 600;
6595
--token-typography-font-weight-bold: 600;
96+
/* added these to test theming in the showcase */
97+
--token-color-foreground-strong: #dddddd;
98+
--token-color-foreground-primary: #d1d2d3;
99+
--token-color-surface-strong: #4b4d45;
100+
--token-color-surface-primary: #1c1c1e;
101+
--token-color-surface-faint: #1c1c1e;
66102
}
67103

68-
.hds-theme-cds-dark,
104+
.hds-theme-dark,
69105
.hds-theme-cds-g100,
70106
[data-hds-theme="dark"],
71107
[data-hds-theme="cds-g100"] {
@@ -75,6 +111,12 @@
75111
--token-typography-font-weight-medium: 400;
76112
--token-typography-font-weight-semibold: 600;
77113
--token-typography-font-weight-bold: 600;
114+
/* added these to test theming in the showcase */
115+
--token-color-foreground-strong: #ffffff;
116+
--token-color-foreground-primary: #f1f2f3;
117+
--token-color-surface-strong: #3b3d45;
118+
--token-color-surface-primary: #0c0c0e;
119+
--token-color-surface-faint: #0c0c0e;
78120
}
79121

80122
:root {
@@ -135,7 +177,7 @@
135177
--token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
136178
--token-color-focus-critical-internal: #c00005;
137179
--token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
138-
--token-color-foreground-strong: #0c0c0e;
180+
/* --token-color-foreground-strong: #0c0c0e; */
139181
--token-color-foreground-faint: #656a76;
140182
--token-color-foreground-high-contrast: #ffffff;
141183
--token-color-foreground-disabled: #8c909c;
@@ -156,9 +198,9 @@
156198
--token-color-foreground-critical-high-contrast: #51130a;
157199
--token-color-page-primary: #ffffff;
158200
--token-color-page-faint: #fafafa;
159-
--token-color-surface-primary: #ffffff;
160-
--token-color-surface-faint: #fafafa;
161-
--token-color-surface-strong: #f1f2f3;
201+
/* --token-color-surface-primary: #ffffff; */
202+
/* --token-color-surface-faint: #fafafa; */
203+
/* --token-color-surface-strong: #f1f2f3; */
162204
--token-color-surface-interactive: #ffffff;
163205
--token-color-surface-interactive-hover: #f1f2f3;
164206
--token-color-surface-interactive-active: #dedfe3;

‎showcase/public/assets/styles/@hashicorp/themed-tokens/with-css-selectors/tokens.css‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,80 @@
44

55
:root {
66
--token-color-palette-neutral-0: #ffffff;
7-
--token-color-foreground-primary: #ffffff;
87
--token-typography-font-weight-regular: 400;
98
--token-typography-font-weight-medium: 500;
109
--token-typography-font-weight-semibold: 600;
1110
--token-typography-font-weight-bold: 700;
11+
/* added these to test theming in the showcase */
12+
--token-color-foreground-strong: #0c0c0e;
13+
--token-color-foreground-primary: #3b3d45;
14+
--token-color-surface-strong: #f1f2f3;
15+
--token-color-surface-primary: #ffffff;
16+
--token-color-surface-faint: #ffffff;
1217
}
1318

1419
.hds-theme-light,
1520
.hds-theme-cds-g0,
16-
[data-hds-theme="light"],
17-
[data-hds-theme="cds-g0"] {
21+
[data-hds-theme="cds-g0"],
22+
[data-hds-theme="light"] {
1823
--token-color-palette-neutral-0: #ffffff;
19-
--token-color-foreground-primary: #161616;
2024
--token-typography-font-weight-regular: 400;
2125
--token-typography-font-weight-medium: 400;
2226
--token-typography-font-weight-semibold: 600;
2327
--token-typography-font-weight-bold: 600;
28+
/* added these to test theming in the showcase */
29+
--token-color-foreground-strong: #0c0c0e;
30+
--token-color-foreground-primary: #3b3d45;
31+
--token-color-surface-strong: #f1f2f3;
32+
--token-color-surface-primary: #ffffff;
33+
--token-color-surface-faint: #ffffff;
2434
}
2535

2636
.hds-theme-cds-g10,
2737
[data-hds-theme="cds-g10"] {
2838
--token-color-palette-neutral-0: #ffffff;
29-
--token-color-foreground-primary: #161616;
3039
--token-typography-font-weight-regular: 400;
3140
--token-typography-font-weight-medium: 400;
3241
--token-typography-font-weight-semibold: 600;
3342
--token-typography-font-weight-bold: 600;
43+
/* added these to test theming in the showcase */
44+
--token-color-foreground-strong: #1c1c1e;
45+
--token-color-foreground-primary: #4b4d45;
46+
--token-color-surface-strong: #d1d2d3;
47+
--token-color-surface-primary: #dddddd;
48+
--token-color-surface-faint: #dddddd;
3449
}
3550

3651
.hds-theme-cds-g90,
3752
[data-hds-theme="cds-g90"] {
3853
--token-color-palette-neutral-0: #ffffff;
39-
--token-color-foreground-primary: #f4f4f4;
4054
--token-typography-font-weight-regular: 400;
4155
--token-typography-font-weight-medium: 400;
4256
--token-typography-font-weight-semibold: 600;
4357
--token-typography-font-weight-bold: 600;
58+
/* added these to test theming in the showcase */
59+
--token-color-foreground-strong: #dddddd;
60+
--token-color-foreground-primary: #d1d2d3;
61+
--token-color-surface-strong: #4b4d45;
62+
--token-color-surface-primary: #1c1c1e;
63+
--token-color-surface-faint: #1c1c1e;
4464
}
4565

4666
.hds-theme-dark,
4767
.hds-theme-cds-g100,
48-
[data-hds-theme="dark"],
49-
[data-hds-theme="cds-g100"] {
68+
[data-hds-theme="cds-g100"],
69+
[data-hds-theme="dark"] {
5070
--token-color-palette-neutral-0: #ffffff;
51-
--token-color-foreground-primary: #f4f4f4;
5271
--token-typography-font-weight-regular: 400;
5372
--token-typography-font-weight-medium: 400;
5473
--token-typography-font-weight-semibold: 600;
5574
--token-typography-font-weight-bold: 600;
75+
/* added these to test theming in the showcase */
76+
--token-color-foreground-strong: #ffffff;
77+
--token-color-foreground-primary: #f1f2f3;
78+
--token-color-surface-strong: #3b3d45;
79+
--token-color-surface-primary: #0c0c0e;
80+
--token-color-surface-faint: #0c0c0e;
5681
}
5782

5883
:root {
@@ -113,7 +138,7 @@
113138
--token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
114139
--token-color-focus-critical-internal: #c00005;
115140
--token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
116-
--token-color-foreground-strong: #0c0c0e;
141+
/* --token-color-foreground-strong: #0c0c0e; */
117142
--token-color-foreground-faint: #656a76;
118143
--token-color-foreground-high-contrast: #ffffff;
119144
--token-color-foreground-disabled: #8c909c;
@@ -134,9 +159,9 @@
134159
--token-color-foreground-critical-high-contrast: #51130a;
135160
--token-color-page-primary: #ffffff;
136161
--token-color-page-faint: #fafafa;
137-
--token-color-surface-primary: #ffffff;
138-
--token-color-surface-faint: #fafafa;
139-
--token-color-surface-strong: #f1f2f3;
162+
/* --token-color-surface-primary: #ffffff; */
163+
/* --token-color-surface-faint: #fafafa; */
164+
/* --token-color-surface-strong: #f1f2f3; */
140165
--token-color-surface-interactive: #ffffff;
141166
--token-color-surface-interactive-hover: #f1f2f3;
142167
--token-color-surface-interactive-active: #dedfe3;

‎showcase/public/assets/styles/@hashicorp/themed-tokens/with-prefers-color-scheme/tokens.css‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,33 @@
55
@media (prefers-color-scheme: light) {
66
:root {
77
--token-color-palette-neutral-0: #ffffff;
8-
--token-color-foreground-primary: #161616;
8+
--token-color-foreground-primary: #f4f4f4;
99
--token-typography-font-weight-regular: 400;
1010
--token-typography-font-weight-medium: 400;
1111
--token-typography-font-weight-semibold: 600;
1212
--token-typography-font-weight-bold: 600;
13+
/* added these to test theming in the showcase */
14+
--token-color-foreground-strong: #0c0c0e;
15+
--token-color-foreground-primary: #3b3d45;
16+
--token-color-surface-strong: #f1f2f3;
17+
--token-color-surface-primary: #ffffff;
18+
--token-color-surface-faint: #ffffff;
1319
}
1420
}
1521

1622
@media (prefers-color-scheme: dark) {
1723
:root {
1824
--token-color-palette-neutral-0: #ffffff;
19-
--token-color-foreground-primary: #f4f4f4;
2025
--token-typography-font-weight-regular: 400;
2126
--token-typography-font-weight-medium: 400;
2227
--token-typography-font-weight-semibold: 600;
2328
--token-typography-font-weight-bold: 600;
29+
/* added these to test theming in the showcase */
30+
--token-color-foreground-strong: #ffffff;
31+
--token-color-foreground-primary: #f1f2f3;
32+
--token-color-surface-strong: #3b3d45;
33+
--token-color-surface-primary: #0c0c0e;
34+
--token-color-surface-faint: #0c0c0e;
2435
}
2536
}
2637

@@ -82,7 +93,7 @@
8293
--token-color-focus-action-external: #5990ff; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
8394
--token-color-focus-critical-internal: #c00005;
8495
--token-color-focus-critical-external: #dd7578; /** this is a special color used only for the focus style, to pass color contrast for a11y purpose */
85-
--token-color-foreground-strong: #0c0c0e;
96+
/* --token-color-foreground-strong: #0c0c0e; */
8697
--token-color-foreground-faint: #656a76;
8798
--token-color-foreground-high-contrast: #ffffff;
8899
--token-color-foreground-disabled: #8c909c;
@@ -103,9 +114,9 @@
103114
--token-color-foreground-critical-high-contrast: #51130a;
104115
--token-color-page-primary: #ffffff;
105116
--token-color-page-faint: #fafafa;
106-
--token-color-surface-primary: #ffffff;
107-
--token-color-surface-faint: #fafafa;
108-
--token-color-surface-strong: #f1f2f3;
117+
/* --token-color-surface-primary: #ffffff; */
118+
/* --token-color-surface-faint: #fafafa; */
119+
/* --token-color-surface-strong: #f1f2f3; */
109120
--token-color-surface-interactive: #ffffff;
110121
--token-color-surface-interactive-hover: #f1f2f3;
111122
--token-color-surface-interactive-active: #dedfe3;

0 commit comments

Comments
 (0)