@planningcenter/tapestry 2.6.1-rc.1 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button/BaseButton.d.ts.map +1 -1
- package/dist/components/button/BaseButton.js +3 -2
- package/dist/components/button/BaseButton.js.map +1 -1
- package/dist/components/button/IconButton.js +1 -1
- package/dist/components/button/IconButton.js.map +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js +1 -1
- package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
- package/dist/components/link/BaseLink.d.ts.map +1 -1
- package/dist/components/link/BaseLink.js +5 -5
- package/dist/components/link/BaseLink.js.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/sidenav/index.js +1 -1
- package/dist/index.css +193 -145
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/jsTokens.d.ts +1 -1
- package/dist/jsTokens.d.ts.map +1 -1
- package/dist/jsTokens.js +1 -1
- package/dist/jsTokens.js.map +1 -1
- package/dist/print-no-media-queries.css +2 -0
- package/dist/print.css +2 -0
- package/dist/reactRender.css +1135 -1087
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +1135 -1087
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-BM4ymH3W.js} +3 -3
- package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js.map → p-BM4ymH3W.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-CTvFafAw.js} +3 -3
- package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js.map → p-CTvFafAw.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-Ccu14VWv.js} +2 -2
- package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js.map → p-Ccu14VWv.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-D5K9xK_N.js} +3 -3
- package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js.map → p-D5K9xK_N.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-ksuK8bIM.js} +2 -2
- package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js.map → p-ksuK8bIM.js.map} +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
- package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
- package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
- package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
- package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
- package/dist/tokens/tokens-deprecated.json +326 -0
- package/dist/tokens-dark.css +34 -32
- package/dist/tokens-dark.css.map +1 -0
- package/dist/tokens-deprecated.css +106 -0
- package/dist/tokens-deprecated.css.map +1 -0
- package/dist/tokens-deprecated.js +3 -0
- package/dist/tokens.css +62 -111
- package/dist/tokens.css.map +1 -1
- package/dist/tokens.js +2 -0
- package/dist/unstable.css +205 -157
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +1 -1
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +2 -1
- package/dist/unstable.js.map +1 -1
- package/package.json +18 -17
- package/dist/deprecated.css +0 -66
- package/dist/tokens/ts/react-native-tokens.d.ts +0 -1629
- package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
- package/dist/tokens/ts/react-native-tokens.js +0 -418
- package/dist/tokens/ts/react-native-tokens.js.map +0 -1
- package/dist/tokens/ts/tokens.d.ts +0 -435
- package/dist/tokens/ts/tokens.d.ts.map +0 -1
- package/dist/tokens/ts/tokens.js +0 -437
- package/dist/tokens/ts/tokens.js.map +0 -1
- package/dist/tokens.d.ts +0 -3
- package/dist/tokens.d.ts.map +0 -1
- /package/dist/{tokens-dark-combined.js → tokens-dark.js} +0 -0
package/dist/unstable.css
CHANGED
|
@@ -9,25 +9,25 @@
|
|
|
9
9
|
--tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
|
|
10
10
|
--tds-checkbox-input-background-color:transparent;
|
|
11
11
|
--tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
|
|
12
|
-
--tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-
|
|
12
|
+
--tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-hover);
|
|
13
13
|
--tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
|
|
14
|
-
--tds-checkbox-input-background-color-checked:var(--t-fill-color-control
|
|
14
|
+
--tds-checkbox-input-background-color-checked:var(--t-fill-color-control);
|
|
15
15
|
--tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
|
|
16
16
|
--tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
|
|
17
17
|
|
|
18
18
|
--tds-checkbox-input-icon:none;
|
|
19
19
|
--tds-checkbox-input-icon-visibility:hidden;
|
|
20
20
|
--tds-checkbox-input-icon-opacity:0;
|
|
21
|
-
--tds-checkbox-input-icon-fill:var(--t-icon-color-
|
|
21
|
+
--tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
|
|
22
22
|
--tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
|
|
23
23
|
--tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
|
|
24
24
|
|
|
25
25
|
--tds-checkbox-font-size:var(--t-font-size-md);
|
|
26
|
-
--tds-checkbox-label-color:var(--t-text-color
|
|
26
|
+
--tds-checkbox-label-color:var(--t-text-color);
|
|
27
27
|
|
|
28
28
|
--tds-checkbox-description-font-size:var(--t-font-size-sm);
|
|
29
29
|
--tds-checkbox-description-line-height:1.35;
|
|
30
|
-
--tds-checkbox-description-color:var(--t-text-color-
|
|
30
|
+
--tds-checkbox-description-color:var(--t-text-color-secondary);
|
|
31
31
|
|
|
32
32
|
position:relative;
|
|
33
33
|
display:inline-grid;
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
appearance:none;
|
|
62
62
|
cursor:var(--tds-checkbox-cursor);
|
|
63
63
|
background-color:var(--tds-checkbox-input-background-color);
|
|
64
|
-
border:var(--t-border-width
|
|
64
|
+
border:var(--t-border-width) solid var(--tds-checkbox-input-border-color);
|
|
65
65
|
border-radius:var(--tds-checkbox-input-border-radius);
|
|
66
66
|
transition-timing-function:ease-in-out;
|
|
67
67
|
transition-duration:180ms;
|
|
@@ -108,13 +108,13 @@
|
|
|
108
108
|
:is(.tds-checkbox input[type="checkbox"]):disabled{
|
|
109
109
|
--tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
|
|
110
110
|
--tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
|
|
111
|
-
--tds-checkbox-input-icon-fill:var(--t-icon-color-
|
|
111
|
+
--tds-checkbox-input-icon-fill:var(--t-icon-color-disabled);
|
|
112
112
|
pointer-events:none;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
.tds-checkbox:has(input:disabled){
|
|
116
|
-
--tds-checkbox-label-color:var(--t-text-color-
|
|
117
|
-
--tds-checkbox-description-color:var(--t-text-color-
|
|
116
|
+
--tds-checkbox-label-color:var(--t-text-color-disabled);
|
|
117
|
+
--tds-checkbox-description-color:var(--t-text-color-disabled);
|
|
118
118
|
--tds-checkbox-cursor:not-allowed;
|
|
119
119
|
--tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
|
|
120
120
|
--tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
|
|
@@ -149,9 +149,9 @@
|
|
|
149
149
|
.tds-checkbox:has(input:invalid){
|
|
150
150
|
--tds-checkbox-input-border-color:var(--t-border-color-button-delete);
|
|
151
151
|
--tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
|
|
152
|
-
--tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-
|
|
153
|
-
--tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid
|
|
154
|
-
--tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid
|
|
152
|
+
--tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-hover);
|
|
153
|
+
--tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid);
|
|
154
|
+
--tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid);
|
|
155
155
|
--tds-checkbox-description-color:var(--t-text-color-status-error);
|
|
156
156
|
}
|
|
157
157
|
|
|
@@ -193,6 +193,7 @@
|
|
|
193
193
|
--t-spacing-7:56px;
|
|
194
194
|
--t-spacing-fourth:2px;
|
|
195
195
|
--t-spacing-half:4px;
|
|
196
|
+
--t-spacing-1-half:12px;
|
|
196
197
|
--t-element-size-3xl:48px;
|
|
197
198
|
--t-element-size-2xl:32px;
|
|
198
199
|
--t-element-size-xl:24px;
|
|
@@ -227,7 +228,7 @@
|
|
|
227
228
|
--t-text-color-headline:hsl(0, 0%, 12%);
|
|
228
229
|
--t-text-color:hsl(0, 0%, 24%);
|
|
229
230
|
--t-text-color-secondary:hsl(0, 0%, 42%);
|
|
230
|
-
--t-text-color-disabled:hsl(0, 0%,
|
|
231
|
+
--t-text-color-disabled:hsl(0, 0%, 68%);
|
|
231
232
|
--t-text-color-placeholder:hsl(0, 0%, 58%);
|
|
232
233
|
--t-text-color-inverted:hsl(0, 0%, 100%);
|
|
233
234
|
--t-text-color-interaction:hsl(204, 100%, 40%);
|
|
@@ -296,19 +297,19 @@
|
|
|
296
297
|
--t-fill-color-control-secondary:hsl(97, 57%, 40%);
|
|
297
298
|
--t-fill-color-control-error:hsl(8, 60%, 47%);
|
|
298
299
|
--t-fill-color-control-disabled:hsl(0, 0%, 81%);
|
|
299
|
-
--t-fill-color-status-neutral
|
|
300
|
+
--t-fill-color-status-neutral:hsl(0, 0%, 42%);
|
|
300
301
|
--t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
|
|
301
302
|
--t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
|
|
302
|
-
--t-fill-color-status-info
|
|
303
|
+
--t-fill-color-status-info:hsl(204, 100%, 40%);
|
|
303
304
|
--t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
|
|
304
305
|
--t-fill-color-status-info-dim:hsl(204, 100%, 97%);
|
|
305
|
-
--t-fill-color-status-success
|
|
306
|
+
--t-fill-color-status-success:hsl(96, 57%, 33%);
|
|
306
307
|
--t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
|
|
307
308
|
--t-fill-color-status-success-dim:hsl(96, 60%, 95%);
|
|
308
|
-
--t-fill-color-status-warning
|
|
309
|
+
--t-fill-color-status-warning:hsl(42, 84%, 63%);
|
|
309
310
|
--t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
|
|
310
311
|
--t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
|
|
311
|
-
--t-fill-color-status-error
|
|
312
|
+
--t-fill-color-status-error:hsl(8, 60%, 47%);
|
|
312
313
|
--t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
|
|
313
314
|
--t-fill-color-status-error-dim:hsl(7, 60%, 97%);
|
|
314
315
|
--t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
|
|
@@ -360,6 +361,14 @@
|
|
|
360
361
|
--t-fill-color-product-home-060:hsl(221, 90%, 50%);
|
|
361
362
|
--t-fill-color-product-home-070:hsl(221, 90%, 45%);
|
|
362
363
|
--t-fill-color-product-home-080:hsl(218, 84%, 25%);
|
|
364
|
+
--t-fill-color-product-musicstand-010:hsl(207, 61%, 93%);
|
|
365
|
+
--t-fill-color-product-musicstand-020:hsl(207, 61%, 90%);
|
|
366
|
+
--t-fill-color-product-musicstand-030:hsl(207, 58%, 85%);
|
|
367
|
+
--t-fill-color-product-musicstand-040:hsl(207, 59%, 60%);
|
|
368
|
+
--t-fill-color-product-musicstand-050:hsl(207, 59%, 50%);
|
|
369
|
+
--t-fill-color-product-musicstand-060:hsl(207, 59%, 40%);
|
|
370
|
+
--t-fill-color-product-musicstand-070:hsl(207, 59%, 35%);
|
|
371
|
+
--t-fill-color-product-musicstand-080:hsl(207, 59%, 25%);
|
|
363
372
|
--t-fill-color-product-people-010:hsl(219, 73%, 91%);
|
|
364
373
|
--t-fill-color-product-people-020:hsl(220, 69%, 81%);
|
|
365
374
|
--t-fill-color-product-people-030:hsl(221, 73%, 71%);
|
|
@@ -476,10 +485,10 @@
|
|
|
476
485
|
--t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
|
|
477
486
|
--t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
|
|
478
487
|
--t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
|
|
479
|
-
--t-fill-color-button-neutral-outline
|
|
480
|
-
--t-fill-color-button-neutral-outline-
|
|
481
|
-
--t-fill-color-button-neutral-outline-
|
|
482
|
-
--t-fill-color-button-neutral-outline-
|
|
488
|
+
--t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
|
|
489
|
+
--t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
|
|
490
|
+
--t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
|
|
491
|
+
--t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
|
|
483
492
|
--t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
|
|
484
493
|
--t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
|
|
485
494
|
--t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
|
|
@@ -492,10 +501,10 @@
|
|
|
492
501
|
--t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
|
|
493
502
|
--t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
|
|
494
503
|
--t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
|
|
495
|
-
--t-fill-color-button-interaction-outline
|
|
496
|
-
--t-fill-color-button-interaction-outline-
|
|
497
|
-
--t-fill-color-button-interaction-outline-
|
|
498
|
-
--t-fill-color-button-interaction-outline-
|
|
504
|
+
--t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
|
|
505
|
+
--t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
|
|
506
|
+
--t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
|
|
507
|
+
--t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
|
|
499
508
|
--t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
|
|
500
509
|
--t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
|
|
501
510
|
--t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
|
|
@@ -504,10 +513,10 @@
|
|
|
504
513
|
--t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
|
|
505
514
|
--t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
|
|
506
515
|
--t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
|
|
507
|
-
--t-fill-color-button-delete-outline
|
|
508
|
-
--t-fill-color-button-delete-outline-
|
|
509
|
-
--t-fill-color-button-delete-outline-
|
|
510
|
-
--t-fill-color-button-delete-outline-
|
|
516
|
+
--t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
|
|
517
|
+
--t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
|
|
518
|
+
--t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
|
|
519
|
+
--t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
|
|
511
520
|
--t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
|
|
512
521
|
--t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
|
|
513
522
|
--t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
|
|
@@ -566,8 +575,10 @@
|
|
|
566
575
|
--t-border-color-control-success:hsl(97, 57%, 40%);
|
|
567
576
|
--t-border-color-control-warning:hsl(42, 84%, 63%);
|
|
568
577
|
--t-border-color-control-error:hsl(8, 60%, 47%);
|
|
569
|
-
--t-border-color-control-disabled:hsl(0, 0%,
|
|
578
|
+
--t-border-color-control-disabled:hsl(0, 0%, 81%);
|
|
570
579
|
--t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
|
|
580
|
+
--t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
581
|
+
--t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
571
582
|
--t-form-background-color:var(--t-fill-color-neutral-100);
|
|
572
583
|
--t-form-background-color-disabled:var(--t-fill-color-neutral-070);
|
|
573
584
|
--t-form-background-color-error:var(--t-fill-color-neutral-100);
|
|
@@ -589,14 +600,27 @@
|
|
|
589
600
|
--t-border-size-default:var(--t-border-width);
|
|
590
601
|
--t-border-size-thick:var(--t-border-width-thick);
|
|
591
602
|
--t-font-weight-semi-bold:var(--t-font-weight-semibold);
|
|
592
|
-
--t-icon-color-status-neutral-dark:
|
|
593
|
-
--t-icon-color-status-info-secondary:
|
|
603
|
+
--t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
|
|
604
|
+
--t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
|
|
605
|
+
--t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
|
|
606
|
+
--t-fill-color-status-info-solid:var(--t-fill-color-status-info);
|
|
607
|
+
--t-fill-color-status-success-solid:var(--t-fill-color-status-success);
|
|
608
|
+
--t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
|
|
609
|
+
--t-fill-color-status-error-solid:var(--t-fill-color-status-error);
|
|
594
610
|
--t-fill-color-alert-info:hsl(204, 94%, 49%);
|
|
595
611
|
--t-fill-color-alert-success:hsl(122, 60%, 41%);
|
|
596
612
|
--t-fill-color-alert-warning:hsl(43, 96%, 58%);
|
|
597
613
|
--t-fill-color-alert-error:hsl(4, 77%, 59%);
|
|
598
|
-
--t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
|
|
599
614
|
--t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
|
|
615
|
+
--t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
|
|
616
|
+
--t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
|
|
617
|
+
--t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
|
|
618
|
+
--t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
|
|
619
|
+
--t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
|
|
620
|
+
--t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
|
|
621
|
+
--t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
|
|
622
|
+
--t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
|
|
623
|
+
--t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
|
|
600
624
|
--t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
|
|
601
625
|
--t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
|
|
602
626
|
--t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
|
|
@@ -605,6 +629,10 @@
|
|
|
605
629
|
--t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
|
|
606
630
|
--t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
|
|
607
631
|
--t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
|
|
632
|
+
--t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
|
|
633
|
+
--t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
|
|
634
|
+
--t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
|
|
635
|
+
--t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
|
|
608
636
|
--t-border-color-default-base:var(--t-border-color);
|
|
609
637
|
--t-border-color-default-dark:var(--t-border-color-dark);
|
|
610
638
|
--t-border-color-default-darker:var(--t-border-color-darker);
|
|
@@ -615,19 +643,20 @@
|
|
|
615
643
|
--t-border-radius-default:var(--t-border-radius);
|
|
616
644
|
--t-border-width-default:var(--t-border-width);
|
|
617
645
|
--t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
|
|
618
|
-
--t-fill-color-button-delete-outline-
|
|
646
|
+
--t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
|
|
619
647
|
--t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
|
|
620
648
|
--t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
|
|
621
|
-
--t-fill-color-button-interaction-outline-
|
|
649
|
+
--t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
|
|
622
650
|
--t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
|
|
623
651
|
--t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
|
|
624
|
-
--t-fill-color-button-neutral-outline-
|
|
652
|
+
--t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
|
|
625
653
|
--t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
|
|
626
654
|
--t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
|
|
627
655
|
--t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
|
|
628
656
|
--t-fill-color-control-primary:var(--t-fill-color-control);
|
|
629
657
|
--t-fill-color-interaction-default:var(--t-fill-color-interaction);
|
|
630
658
|
--t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
|
|
659
|
+
--t-fill-color-status-error-primary:var(--t-fill-color-status-error);
|
|
631
660
|
--t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
|
|
632
661
|
--t-icon-color-default-dim:var(--t-icon-color-dim);
|
|
633
662
|
--t-icon-color-default-disabled:var(--t-icon-color-disabled);
|
|
@@ -653,7 +682,7 @@
|
|
|
653
682
|
--t-text-color-headline:hsl(0, 0%, 94%);
|
|
654
683
|
--t-text-color:hsl(0, 0%, 80%);
|
|
655
684
|
--t-text-color-secondary:hsl(0, 0%, 54%);
|
|
656
|
-
--t-text-color-disabled:hsl(0, 0%,
|
|
685
|
+
--t-text-color-disabled:hsl(0, 0%, 32%);
|
|
657
686
|
--t-text-color-placeholder:hsl(0, 0%, 38%);
|
|
658
687
|
--t-text-color-interaction:hsl(204, 68%, 55%);
|
|
659
688
|
--t-text-color-interaction-hover:hsl(204, 68%, 50%);
|
|
@@ -715,10 +744,10 @@
|
|
|
715
744
|
--t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
|
|
716
745
|
--t-fill-color-control:hsl(204, 100%, 35%);
|
|
717
746
|
--t-fill-color-control-disabled:hsl(0, 0%, 20%);
|
|
718
|
-
--t-fill-color-status-neutral
|
|
747
|
+
--t-fill-color-status-neutral:hsl(0, 0%, 24%);
|
|
719
748
|
--t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
|
|
720
749
|
--t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
|
|
721
|
-
--t-fill-color-status-info
|
|
750
|
+
--t-fill-color-status-info:hsl(204, 100%, 35%);
|
|
722
751
|
--t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
|
|
723
752
|
--t-fill-color-status-info-dim:hsl(206, 22%, 15%);
|
|
724
753
|
--t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
|
|
@@ -796,10 +825,10 @@
|
|
|
796
825
|
--t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
|
|
797
826
|
--t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
|
|
798
827
|
--t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
|
|
799
|
-
--t-fill-color-button-neutral-outline
|
|
800
|
-
--t-fill-color-button-neutral-outline-
|
|
801
|
-
--t-fill-color-button-neutral-outline-
|
|
802
|
-
--t-fill-color-button-neutral-outline-
|
|
828
|
+
--t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
|
|
829
|
+
--t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
|
|
830
|
+
--t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
|
|
831
|
+
--t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
|
|
803
832
|
--t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
|
|
804
833
|
--t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
|
|
805
834
|
--t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
|
|
@@ -809,10 +838,10 @@
|
|
|
809
838
|
--t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
|
|
810
839
|
--t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
|
|
811
840
|
--t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
|
|
812
|
-
--t-fill-color-button-interaction-outline
|
|
813
|
-
--t-fill-color-button-interaction-outline-
|
|
814
|
-
--t-fill-color-button-interaction-outline-
|
|
815
|
-
--t-fill-color-button-interaction-outline-
|
|
841
|
+
--t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
|
|
842
|
+
--t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
|
|
843
|
+
--t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
|
|
844
|
+
--t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
|
|
816
845
|
--t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
|
|
817
846
|
--t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
|
|
818
847
|
--t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
|
|
@@ -820,10 +849,10 @@
|
|
|
820
849
|
--t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
|
|
821
850
|
--t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
|
|
822
851
|
--t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
|
|
823
|
-
--t-fill-color-button-delete-outline
|
|
824
|
-
--t-fill-color-button-delete-outline-
|
|
825
|
-
--t-fill-color-button-delete-outline-
|
|
826
|
-
--t-fill-color-button-delete-outline-
|
|
852
|
+
--t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
|
|
853
|
+
--t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
|
|
854
|
+
--t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
|
|
855
|
+
--t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
|
|
827
856
|
--t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
|
|
828
857
|
--t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
|
|
829
858
|
--t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
|
|
@@ -867,8 +896,16 @@
|
|
|
867
896
|
--t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
|
|
868
897
|
--t-border-color-control-neutral:hsl(0, 0%, 33%);
|
|
869
898
|
--t-border-color-control-info:hsl(204, 100%, 35%);
|
|
870
|
-
--t-border-color-control-disabled:hsl(0, 0%,
|
|
899
|
+
--t-border-color-control-disabled:hsl(0, 0%, 24%);
|
|
871
900
|
--t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
|
|
901
|
+
--t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
|
|
902
|
+
--t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
|
|
903
|
+
--t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
|
|
904
|
+
--t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
|
|
905
|
+
--t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
|
|
906
|
+
--t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
|
|
907
|
+
--t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
|
|
908
|
+
--t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
|
|
872
909
|
}
|
|
873
910
|
|
|
874
911
|
@media (prefers-color-scheme: dark){
|
|
@@ -877,7 +914,7 @@
|
|
|
877
914
|
--t-text-color-headline:hsl(0, 0%, 94%);
|
|
878
915
|
--t-text-color:hsl(0, 0%, 80%);
|
|
879
916
|
--t-text-color-secondary:hsl(0, 0%, 54%);
|
|
880
|
-
--t-text-color-disabled:hsl(0, 0%,
|
|
917
|
+
--t-text-color-disabled:hsl(0, 0%, 32%);
|
|
881
918
|
--t-text-color-placeholder:hsl(0, 0%, 38%);
|
|
882
919
|
--t-text-color-interaction:hsl(204, 68%, 55%);
|
|
883
920
|
--t-text-color-interaction-hover:hsl(204, 68%, 50%);
|
|
@@ -939,10 +976,10 @@
|
|
|
939
976
|
--t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
|
|
940
977
|
--t-fill-color-control:hsl(204, 100%, 35%);
|
|
941
978
|
--t-fill-color-control-disabled:hsl(0, 0%, 20%);
|
|
942
|
-
--t-fill-color-status-neutral
|
|
979
|
+
--t-fill-color-status-neutral:hsl(0, 0%, 24%);
|
|
943
980
|
--t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
|
|
944
981
|
--t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
|
|
945
|
-
--t-fill-color-status-info
|
|
982
|
+
--t-fill-color-status-info:hsl(204, 100%, 35%);
|
|
946
983
|
--t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
|
|
947
984
|
--t-fill-color-status-info-dim:hsl(206, 22%, 15%);
|
|
948
985
|
--t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
|
|
@@ -1020,10 +1057,10 @@
|
|
|
1020
1057
|
--t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
|
|
1021
1058
|
--t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
|
|
1022
1059
|
--t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
|
|
1023
|
-
--t-fill-color-button-neutral-outline
|
|
1024
|
-
--t-fill-color-button-neutral-outline-
|
|
1025
|
-
--t-fill-color-button-neutral-outline-
|
|
1026
|
-
--t-fill-color-button-neutral-outline-
|
|
1060
|
+
--t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
|
|
1061
|
+
--t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
|
|
1062
|
+
--t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
|
|
1063
|
+
--t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
|
|
1027
1064
|
--t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
|
|
1028
1065
|
--t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
|
|
1029
1066
|
--t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
|
|
@@ -1033,10 +1070,10 @@
|
|
|
1033
1070
|
--t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
|
|
1034
1071
|
--t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
|
|
1035
1072
|
--t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
|
|
1036
|
-
--t-fill-color-button-interaction-outline
|
|
1037
|
-
--t-fill-color-button-interaction-outline-
|
|
1038
|
-
--t-fill-color-button-interaction-outline-
|
|
1039
|
-
--t-fill-color-button-interaction-outline-
|
|
1073
|
+
--t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
|
|
1074
|
+
--t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
|
|
1075
|
+
--t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
|
|
1076
|
+
--t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
|
|
1040
1077
|
--t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
|
|
1041
1078
|
--t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
|
|
1042
1079
|
--t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
|
|
@@ -1044,10 +1081,10 @@
|
|
|
1044
1081
|
--t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
|
|
1045
1082
|
--t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
|
|
1046
1083
|
--t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
|
|
1047
|
-
--t-fill-color-button-delete-outline
|
|
1048
|
-
--t-fill-color-button-delete-outline-
|
|
1049
|
-
--t-fill-color-button-delete-outline-
|
|
1050
|
-
--t-fill-color-button-delete-outline-
|
|
1084
|
+
--t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
|
|
1085
|
+
--t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
|
|
1086
|
+
--t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
|
|
1087
|
+
--t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
|
|
1051
1088
|
--t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
|
|
1052
1089
|
--t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
|
|
1053
1090
|
--t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
|
|
@@ -1091,9 +1128,20 @@
|
|
|
1091
1128
|
--t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
|
|
1092
1129
|
--t-border-color-control-neutral:hsl(0, 0%, 33%);
|
|
1093
1130
|
--t-border-color-control-info:hsl(204, 100%, 35%);
|
|
1094
|
-
--t-border-color-control-disabled:hsl(0, 0%,
|
|
1131
|
+
--t-border-color-control-disabled:hsl(0, 0%, 24%);
|
|
1095
1132
|
--t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
|
|
1133
|
+
--t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
|
|
1134
|
+
--t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
|
|
1135
|
+
--t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
|
|
1136
|
+
--t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
|
|
1137
|
+
--t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
|
|
1138
|
+
--t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
|
|
1139
|
+
--t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
|
|
1140
|
+
--t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
|
|
1141
|
+
}
|
|
1096
1142
|
}
|
|
1143
|
+
|
|
1144
|
+
@media (prefers-color-scheme: dark){
|
|
1097
1145
|
}
|
|
1098
1146
|
|
|
1099
1147
|
@layer t-critical{
|
|
@@ -1106,8 +1154,8 @@
|
|
|
1106
1154
|
.tds-page-header{
|
|
1107
1155
|
--tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
|
|
1108
1156
|
--tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
|
|
1109
|
-
--tds-page-header-color:var(--t-text-color
|
|
1110
|
-
--tds-page-header-headline-color:var(--t-text-color-
|
|
1157
|
+
--tds-page-header-color:var(--t-text-color);
|
|
1158
|
+
--tds-page-header-headline-color:var(--t-text-color-headline);
|
|
1111
1159
|
--tds-page-header-headline-font-size:var(--t-font-size-2xl);
|
|
1112
1160
|
--tds-page-header-padding-x:var(--t-spacing-2);
|
|
1113
1161
|
--tds-page-header-padding-y:var(--t-spacing-2);
|
|
@@ -1116,29 +1164,29 @@
|
|
|
1116
1164
|
--tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
|
|
1117
1165
|
--tds-page-header-nav-item-padding-x:var(--t-spacing-1);
|
|
1118
1166
|
--tds-page-header-nav-item-padding-y:var(--t-spacing-1);
|
|
1119
|
-
--tds-page-header-nav-item-color:var(--t-text-color-
|
|
1167
|
+
--tds-page-header-nav-item-color:var(--t-text-color-secondary);
|
|
1120
1168
|
--tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
|
|
1121
1169
|
--tds-page-header-nav-item-border-width:1px;
|
|
1122
1170
|
|
|
1123
1171
|
--tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
|
|
1124
|
-
--tds-page-header-nav-item-border-bottom-color:var(--t-border-color
|
|
1172
|
+
--tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
|
|
1125
1173
|
|
|
1126
|
-
--tds-page-header-nav-item-color-hover:var(--t-text-color
|
|
1174
|
+
--tds-page-header-nav-item-color-hover:var(--t-text-color);
|
|
1127
1175
|
--tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
|
|
1128
1176
|
--tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
|
|
1129
1177
|
|
|
1130
1178
|
--tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
|
|
1131
1179
|
--tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
|
|
1132
1180
|
|
|
1133
|
-
--tds-page-header-nav-item-color-disabled:var(--t-text-color-
|
|
1181
|
+
--tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
|
|
1134
1182
|
--tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
|
|
1135
1183
|
--tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
|
|
1136
1184
|
|
|
1137
|
-
--tds-page-header-nav-item-color-selected:var(--t-text-color
|
|
1185
|
+
--tds-page-header-nav-item-color-selected:var(--t-text-color);
|
|
1138
1186
|
--tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
|
|
1139
1187
|
--tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
|
|
1140
1188
|
--tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
|
|
1141
|
-
--tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning
|
|
1189
|
+
--tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
|
|
1142
1190
|
}
|
|
1143
1191
|
|
|
1144
1192
|
.tds-page-header--profile{
|
|
@@ -1147,16 +1195,16 @@
|
|
|
1147
1195
|
@media (min-width: 600px){
|
|
1148
1196
|
.tds-page-header{
|
|
1149
1197
|
--tds-page-header-background-color:var(--t-surface-color-canvas);
|
|
1150
|
-
--tds-page-header-color:var(--t-text-color-
|
|
1198
|
+
--tds-page-header-color:var(--t-text-color-secondary);
|
|
1151
1199
|
--tds-page-header-padding-x:var(--t-spacing-3);
|
|
1152
1200
|
--tds-page-header-headline-font-size:var(--t-font-size-3xl);
|
|
1153
1201
|
--tds-page-header-nav-gap:var(--t-spacing-half);
|
|
1154
1202
|
--tds-page-header-nav-background:transparent;
|
|
1155
1203
|
--tds-page-header-nav-item-padding-x:var(--t-spacing-2);
|
|
1156
1204
|
--tds-page-header-nav-item-border-width:1px;
|
|
1157
|
-
--tds-page-header-nav-item-color:var(--t-text-color
|
|
1205
|
+
--tds-page-header-nav-item-color:var(--t-text-color);
|
|
1158
1206
|
--tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
|
|
1159
|
-
--tds-page-header-nav-item-border-color-selected:var(--t-border-color
|
|
1207
|
+
--tds-page-header-nav-item-border-color-selected:var(--t-border-color);
|
|
1160
1208
|
}
|
|
1161
1209
|
}
|
|
1162
1210
|
}
|
|
@@ -1167,7 +1215,7 @@
|
|
|
1167
1215
|
padding-top:var(--tds-page-header-padding-y);
|
|
1168
1216
|
color:var(--tds-page-header-color);
|
|
1169
1217
|
background:var(--tds-page-header-background-color);
|
|
1170
|
-
border-bottom:1px solid var(--t-border-color
|
|
1218
|
+
border-bottom:1px solid var(--t-border-color);
|
|
1171
1219
|
}
|
|
1172
1220
|
|
|
1173
1221
|
.tds-page-header:not(.has-nav){
|
|
@@ -1395,8 +1443,8 @@
|
|
|
1395
1443
|
--tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
|
|
1396
1444
|
--tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
|
|
1397
1445
|
|
|
1398
|
-
--tds-sidenav-item-icon-color:var(--t-icon-color-
|
|
1399
|
-
--tds-sidenav-item-icon-color-selected:var(--t-icon-color
|
|
1446
|
+
--tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
|
|
1447
|
+
--tds-sidenav-item-icon-color-selected:var(--t-icon-color);
|
|
1400
1448
|
}
|
|
1401
1449
|
|
|
1402
1450
|
.tds-sidenav--theme-gray{
|
|
@@ -1437,7 +1485,7 @@
|
|
|
1437
1485
|
font-size:var(--t-font-size-sm);
|
|
1438
1486
|
font-weight:var(--t-font-weight-semibold);
|
|
1439
1487
|
line-height:1.35;
|
|
1440
|
-
color:var(--t-text-color-
|
|
1488
|
+
color:var(--t-text-color-secondary);
|
|
1441
1489
|
text-transform:uppercase;
|
|
1442
1490
|
}
|
|
1443
1491
|
|
|
@@ -1476,7 +1524,7 @@
|
|
|
1476
1524
|
overflow:hidden;
|
|
1477
1525
|
font-size:var(--t-font-size-sm);
|
|
1478
1526
|
line-height:18px;
|
|
1479
|
-
color:var(--t-text-color-
|
|
1527
|
+
color:var(--t-text-color-headline);
|
|
1480
1528
|
white-space:nowrap;
|
|
1481
1529
|
text-decoration:none;
|
|
1482
1530
|
-webkit-appearance:none;
|
|
@@ -1485,7 +1533,7 @@
|
|
|
1485
1533
|
cursor:pointer;
|
|
1486
1534
|
background-color:var(--tds-sidenav-item-background, transparent);
|
|
1487
1535
|
border:0;
|
|
1488
|
-
border-radius:var(--t-border-radius
|
|
1536
|
+
border-radius:var(--t-border-radius);
|
|
1489
1537
|
transition:var(--tds-sidenav-item-transition);
|
|
1490
1538
|
}
|
|
1491
1539
|
|
|
@@ -1500,7 +1548,7 @@
|
|
|
1500
1548
|
|
|
1501
1549
|
:is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
|
|
1502
1550
|
--tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
|
|
1503
|
-
color:var(--t-text-color-
|
|
1551
|
+
color:var(--t-text-color-headline);
|
|
1504
1552
|
text-decoration:none;
|
|
1505
1553
|
}
|
|
1506
1554
|
|
|
@@ -1586,7 +1634,7 @@
|
|
|
1586
1634
|
height:100%;
|
|
1587
1635
|
content:"";
|
|
1588
1636
|
background-color:var(--tds-sidenav-item-nested-background);
|
|
1589
|
-
border-radius:0 var(--t-border-radius
|
|
1637
|
+
border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
|
|
1590
1638
|
transition:var(--tds-sidenav-item-transition);
|
|
1591
1639
|
}
|
|
1592
1640
|
|
|
@@ -1627,7 +1675,7 @@
|
|
|
1627
1675
|
margin:0;
|
|
1628
1676
|
font-size:var(--t-font-size-lg);
|
|
1629
1677
|
font-weight:var(--t-font-weight-medium);
|
|
1630
|
-
color:var(--t-text-color-
|
|
1678
|
+
color:var(--t-text-color-headline);
|
|
1631
1679
|
}
|
|
1632
1680
|
|
|
1633
1681
|
@media (max-width: 719px){
|
|
@@ -1706,9 +1754,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1706
1754
|
--tds-btn-font-size:16px;
|
|
1707
1755
|
--tds-btn-font-weight:400;
|
|
1708
1756
|
--tds-btn-line-height:1.5;
|
|
1709
|
-
--tds-btn-color:var(--t-text-color-
|
|
1757
|
+
--tds-btn-color:var(--t-text-color-headline);
|
|
1710
1758
|
--tds-btn-bg:transparent;
|
|
1711
|
-
--tds-btn-border-width:var(--t-border-width
|
|
1759
|
+
--tds-btn-border-width:var(--t-border-width);
|
|
1712
1760
|
--tds-btn-border-color:transparent;
|
|
1713
1761
|
--tds-btn-border-radius:var(--t-border-radius-md);
|
|
1714
1762
|
--tds-btn-border-color-hover:transparent;
|
|
@@ -1836,15 +1884,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1836
1884
|
|
|
1837
1885
|
.tds-btn--neutral{
|
|
1838
1886
|
--tds-btn-color:var(--t-text-color-status-neutral);
|
|
1839
|
-
--tds-btn-bg:var(--t-fill-color-button-neutral-solid
|
|
1840
|
-
--tds-btn-border-color:var(--t-fill-color-button-neutral-solid
|
|
1887
|
+
--tds-btn-bg:var(--t-fill-color-button-neutral-solid);
|
|
1888
|
+
--tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
|
|
1841
1889
|
--tds-btn-color-hover:var(--t-text-color-status-neutral);
|
|
1842
1890
|
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
|
|
1843
1891
|
--tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
|
|
1844
1892
|
--tds-btn-color-active:var(--t-text-color-status-neutral);
|
|
1845
1893
|
--tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
|
|
1846
1894
|
--tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
|
|
1847
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
1895
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1848
1896
|
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
|
|
1849
1897
|
--tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
|
|
1850
1898
|
}
|
|
@@ -1874,32 +1922,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1874
1922
|
}
|
|
1875
1923
|
|
|
1876
1924
|
.tds-btn--interaction{
|
|
1877
|
-
--tds-btn-color:var(--t-text-color-
|
|
1878
|
-
--tds-btn-bg:var(--t-fill-color-button-interaction-solid
|
|
1879
|
-
--tds-btn-border-color:var(--t-fill-color-button-interaction-solid
|
|
1880
|
-
--tds-btn-color-hover:var(--t-text-color-
|
|
1925
|
+
--tds-btn-color:var(--t-text-color-inverted);
|
|
1926
|
+
--tds-btn-bg:var(--t-fill-color-button-interaction-solid);
|
|
1927
|
+
--tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
|
|
1928
|
+
--tds-btn-color-hover:var(--t-text-color-inverted);
|
|
1881
1929
|
--tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
|
|
1882
1930
|
--tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
|
|
1883
|
-
--tds-btn-color-active:var(--t-text-color-
|
|
1931
|
+
--tds-btn-color-active:var(--t-text-color-inverted);
|
|
1884
1932
|
--tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
|
|
1885
1933
|
--tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
|
|
1886
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
1934
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1887
1935
|
--tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
|
|
1888
1936
|
--tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
|
|
1889
1937
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
|
|
1890
1938
|
}
|
|
1891
1939
|
|
|
1892
1940
|
.tds-btn--delete{
|
|
1893
|
-
--tds-btn-color:var(--t-text-color-
|
|
1894
|
-
--tds-btn-bg:var(--t-fill-color-button-delete-solid
|
|
1895
|
-
--tds-btn-border-color:var(--t-fill-color-button-delete-solid
|
|
1896
|
-
--tds-btn-color-hover:var(--t-text-color-
|
|
1941
|
+
--tds-btn-color:var(--t-text-color-inverted);
|
|
1942
|
+
--tds-btn-bg:var(--t-fill-color-button-delete-solid);
|
|
1943
|
+
--tds-btn-border-color:var(--t-fill-color-button-delete-solid);
|
|
1944
|
+
--tds-btn-color-hover:var(--t-text-color-inverted);
|
|
1897
1945
|
--tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
|
|
1898
1946
|
--tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
|
|
1899
|
-
--tds-btn-color-active:var(--t-text-color-
|
|
1947
|
+
--tds-btn-color-active:var(--t-text-color-inverted);
|
|
1900
1948
|
--tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
|
|
1901
1949
|
--tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
|
|
1902
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
1950
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1903
1951
|
--tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
|
|
1904
1952
|
--tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
|
|
1905
1953
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
|
|
@@ -1909,27 +1957,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1909
1957
|
--tds-btn-color:var(--t-text-color-status-neutral);
|
|
1910
1958
|
--tds-btn-border-color:var(--t-border-color-button-neutral);
|
|
1911
1959
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1912
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-
|
|
1960
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
|
|
1913
1961
|
--tds-btn-border-color-hover:var(--t-border-color-button-neutral);
|
|
1914
1962
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
1915
|
-
--tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-
|
|
1963
|
+
--tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
|
|
1916
1964
|
--tds-btn-border-color-active:var(--t-border-color-button-neutral);
|
|
1917
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
1918
|
-
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-
|
|
1965
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1966
|
+
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
|
|
1919
1967
|
--tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
|
|
1920
1968
|
}
|
|
1921
1969
|
|
|
1922
1970
|
.tds-btn--outline-interaction{
|
|
1923
|
-
--tds-btn-color:var(--t-text-color-interaction
|
|
1971
|
+
--tds-btn-color:var(--t-text-color-interaction);
|
|
1924
1972
|
--tds-btn-border-color:var(--t-border-color-button-info);
|
|
1925
1973
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1926
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-
|
|
1974
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
|
|
1927
1975
|
--tds-btn-border-color-hover:var(--tds-btn-border-color);
|
|
1928
1976
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
1929
|
-
--tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-
|
|
1977
|
+
--tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
|
|
1930
1978
|
--tds-btn-border-color-active:var(--tds-btn-border-color);
|
|
1931
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
1932
|
-
--tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-
|
|
1979
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1980
|
+
--tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
|
|
1933
1981
|
--tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
|
|
1934
1982
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
|
|
1935
1983
|
}
|
|
@@ -1938,13 +1986,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1938
1986
|
--tds-btn-color:var(--t-text-color-status-error);
|
|
1939
1987
|
--tds-btn-border-color:var(--t-border-color-button-delete);
|
|
1940
1988
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1941
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-
|
|
1989
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
|
|
1942
1990
|
--tds-btn-border-color-hover:var(--tds-btn-border-color);
|
|
1943
1991
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
1944
|
-
--tds-btn-bg-active:var(--t-fill-color-button-delete-outline-
|
|
1992
|
+
--tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
|
|
1945
1993
|
--tds-btn-border-color-active:var(--tds-btn-border-color);
|
|
1946
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
1947
|
-
--tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-
|
|
1994
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1995
|
+
--tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
|
|
1948
1996
|
--tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
|
|
1949
1997
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
|
|
1950
1998
|
}
|
|
@@ -1953,26 +2001,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1953
2001
|
--tds-btn-color:var(--t-text-color-status-neutral);
|
|
1954
2002
|
--tds-btn-border-color:transparent;
|
|
1955
2003
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1956
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-
|
|
2004
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
|
|
1957
2005
|
--tds-btn-border-color-hover:var(--tds-btn-bg-hover);
|
|
1958
2006
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
1959
|
-
--tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-
|
|
2007
|
+
--tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
|
|
1960
2008
|
--tds-btn-border-color-active:var(--tds-btn-bg-active);
|
|
1961
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2009
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1962
2010
|
--tds-btn-bg-disabled:transparent;
|
|
1963
2011
|
--tds-btn-border-color-disabled:transparent;
|
|
1964
2012
|
}
|
|
1965
2013
|
|
|
1966
2014
|
.tds-btn--ghost-interaction{
|
|
1967
|
-
--tds-btn-color:var(--t-text-color-interaction
|
|
2015
|
+
--tds-btn-color:var(--t-text-color-interaction);
|
|
1968
2016
|
--tds-btn-border-color:transparent;
|
|
1969
2017
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1970
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-
|
|
2018
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
|
|
1971
2019
|
--tds-btn-border-color-hover:var(--tds-btn-bg-hover);
|
|
1972
2020
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
1973
|
-
--tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-
|
|
2021
|
+
--tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
|
|
1974
2022
|
--tds-btn-border-color-active:var(--tds-btn-bg-active);
|
|
1975
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2023
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1976
2024
|
--tds-btn-bg-disabled:transparent;
|
|
1977
2025
|
--tds-btn-border-color-disabled:transparent;
|
|
1978
2026
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
|
|
@@ -1982,12 +2030,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1982
2030
|
--tds-btn-color:var(--t-text-color-status-error);
|
|
1983
2031
|
--tds-btn-border-color:transparent;
|
|
1984
2032
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
1985
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-
|
|
2033
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
|
|
1986
2034
|
--tds-btn-border-color-hover:var(--tds-btn-bg-hover);
|
|
1987
2035
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
1988
|
-
--tds-btn-bg-active:var(--t-fill-color-button-delete-outline-
|
|
2036
|
+
--tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
|
|
1989
2037
|
--tds-btn-border-color-active:var(--tds-btn-bg-active);
|
|
1990
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2038
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
1991
2039
|
--tds-btn-bg-disabled:transparent;
|
|
1992
2040
|
--tds-btn-border-color-disabled:transparent;
|
|
1993
2041
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
|
|
@@ -1995,7 +2043,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
|
|
|
1995
2043
|
|
|
1996
2044
|
.tds-btn--inline-text,
|
|
1997
2045
|
a[class="tds-btn"]{
|
|
1998
|
-
--tds-btn-color:var(--t-text-color-interaction
|
|
2046
|
+
--tds-btn-color:var(--t-text-color-interaction);
|
|
1999
2047
|
--tds-btn-color-hover:var(--t-text-color-interaction-hover);
|
|
2000
2048
|
--tds-btn-color-active:var(--t-text-color-interaction-active);
|
|
2001
2049
|
--tds-btn-bg:transparent;
|
|
@@ -2020,16 +2068,16 @@ a[class="tds-btn"]{
|
|
|
2020
2068
|
}
|
|
2021
2069
|
|
|
2022
2070
|
.tds-btn--primary-page-header{
|
|
2023
|
-
--tds-btn-color:var(--t-text-color-
|
|
2024
|
-
--tds-btn-bg:var(--t-fill-color-button-interaction-solid
|
|
2025
|
-
--tds-btn-border-color:var(--t-fill-color-button-interaction-solid
|
|
2026
|
-
--tds-btn-color-hover:var(--t-text-color-
|
|
2071
|
+
--tds-btn-color:var(--t-text-color-inverted);
|
|
2072
|
+
--tds-btn-bg:var(--t-fill-color-button-interaction-solid);
|
|
2073
|
+
--tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
|
|
2074
|
+
--tds-btn-color-hover:var(--t-text-color-inverted);
|
|
2027
2075
|
--tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
|
|
2028
2076
|
--tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
|
|
2029
|
-
--tds-btn-color-active:var(--t-text-color-
|
|
2077
|
+
--tds-btn-color-active:var(--t-text-color-inverted);
|
|
2030
2078
|
--tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
|
|
2031
2079
|
--tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
|
|
2032
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2080
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
2033
2081
|
--tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
|
|
2034
2082
|
--tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
|
|
2035
2083
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
|
|
@@ -2037,15 +2085,15 @@ a[class="tds-btn"]{
|
|
|
2037
2085
|
|
|
2038
2086
|
.tds-btn--secondary-page-header{
|
|
2039
2087
|
--tds-btn-color:var(--t-text-color-status-neutral);
|
|
2040
|
-
--tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header
|
|
2041
|
-
--tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header
|
|
2088
|
+
--tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
|
|
2089
|
+
--tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
|
|
2042
2090
|
--tds-btn-color-hover:var(--t-text-color-status-neutral);
|
|
2043
2091
|
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
|
|
2044
2092
|
--tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
|
|
2045
2093
|
--tds-btn-color-active:var(--t-text-color-status-neutral);
|
|
2046
2094
|
--tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
|
|
2047
2095
|
--tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
|
|
2048
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2096
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
2049
2097
|
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
|
|
2050
2098
|
--tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
|
|
2051
2099
|
}
|
|
@@ -2057,28 +2105,28 @@ a[class="tds-btn"]{
|
|
|
2057
2105
|
--tds-btn-bg:transparent;
|
|
2058
2106
|
--tds-btn-border-color:var(--t-border-color-button-neutral);
|
|
2059
2107
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
2060
|
-
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-
|
|
2108
|
+
--tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
|
|
2061
2109
|
--tds-btn-border-color-hover:var(--t-border-color-button-neutral);
|
|
2062
2110
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
2063
|
-
--tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-
|
|
2111
|
+
--tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
|
|
2064
2112
|
--tds-btn-border-color-active:var(--t-border-color-button-neutral);
|
|
2065
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2066
|
-
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-
|
|
2113
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
2114
|
+
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
|
|
2067
2115
|
--tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
|
|
2068
2116
|
}
|
|
2069
2117
|
}
|
|
2070
2118
|
|
|
2071
2119
|
.tds-btn--staff-only{
|
|
2072
|
-
--tds-btn-color:var(--t-text-color-
|
|
2073
|
-
--tds-btn-bg:var(--t-fill-color-product-staff
|
|
2074
|
-
--tds-btn-border-color:var(--t-border-color-
|
|
2075
|
-
--tds-btn-color-hover:var(--t-text-color-
|
|
2120
|
+
--tds-btn-color:var(--t-text-color-inverted);
|
|
2121
|
+
--tds-btn-bg:var(--t-fill-color-product-staff);
|
|
2122
|
+
--tds-btn-border-color:var(--t-border-color-white);
|
|
2123
|
+
--tds-btn-color-hover:var(--t-text-color-inverted);
|
|
2076
2124
|
--tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
|
|
2077
|
-
--tds-btn-border-color-hover:var(--t-border-color-
|
|
2078
|
-
--tds-btn-color-active:var(--t-text-color-
|
|
2125
|
+
--tds-btn-border-color-hover:var(--t-border-color-white);
|
|
2126
|
+
--tds-btn-color-active:var(--t-text-color-inverted);
|
|
2079
2127
|
--tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
|
|
2080
|
-
--tds-btn-border-color-active:var(--t-border-color-
|
|
2081
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2128
|
+
--tds-btn-border-color-active:var(--t-border-color-white);
|
|
2129
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
2082
2130
|
--tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
|
|
2083
2131
|
--tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
|
|
2084
2132
|
--tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
|
|
@@ -2089,8 +2137,8 @@ a[class="tds-btn"]{
|
|
|
2089
2137
|
--tds-btn-padding-y:4px;
|
|
2090
2138
|
--tds-btn-padding-x:13px;
|
|
2091
2139
|
|
|
2092
|
-
--tds-btn-color:var(--t-text-color
|
|
2093
|
-
--tds-btn-bg:var(--t-fill-color-button-pill
|
|
2140
|
+
--tds-btn-color:var(--t-text-color);
|
|
2141
|
+
--tds-btn-bg:var(--t-fill-color-button-pill);
|
|
2094
2142
|
--tds-btn-border-color:var(--tds-btn-bg);
|
|
2095
2143
|
--tds-btn-color-hover:var(--tds-btn-color);
|
|
2096
2144
|
--tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
|
|
@@ -2099,10 +2147,10 @@ a[class="tds-btn"]{
|
|
|
2099
2147
|
--tds-btn-color-active:var(--tds-btn-color);
|
|
2100
2148
|
--tds-btn-bg-active:var(--t-fill-color-button-pill-active);
|
|
2101
2149
|
--tds-btn-border-color-active:var(--tds-btn-bg-active);
|
|
2102
|
-
--tds-btn-color-disabled:var(--t-text-color-
|
|
2150
|
+
--tds-btn-color-disabled:var(--t-text-color-disabled);
|
|
2103
2151
|
--tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
|
|
2104
2152
|
--tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
|
|
2105
|
-
--tds-btn-icon-color:var(--t-icon-color-
|
|
2153
|
+
--tds-btn-icon-color:var(--t-icon-color-secondary);
|
|
2106
2154
|
--tds-btn-min-height:32px;
|
|
2107
2155
|
}
|
|
2108
2156
|
|
|
@@ -2149,8 +2197,8 @@ a[class="tds-btn"]{
|
|
|
2149
2197
|
display:inline-block;
|
|
2150
2198
|
width:var(--tds-btn-attention-icon-size);
|
|
2151
2199
|
height:var(--tds-btn-attention-icon-size);
|
|
2152
|
-
background-color:var(--t-icon-color-status-warning
|
|
2153
|
-
border:.125em solid var(--t-border-color-
|
|
2200
|
+
background-color:var(--t-icon-color-status-warning);
|
|
2201
|
+
border:.125em solid var(--t-border-color-white);
|
|
2154
2202
|
border-radius:var(--t-border-radius-round);
|
|
2155
2203
|
}
|
|
2156
2204
|
|