@design-factory/tokens 21.0.0 → 21.0.2
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/css/root-dark.css +3 -1
- package/css/root-light.css +3 -1
- package/figma/t2-dark.json +12 -4
- package/figma/t2-light.json +12 -4
- package/figma/t3.json +1 -1
- package/package.json +1 -1
- package/scss/root.scss +3 -1
- package/scss/vars-dark.scss +4 -2
- package/scss/vars-light.scss +4 -2
package/css/root-dark.css
CHANGED
|
@@ -667,13 +667,15 @@ html:root[data-df-theme='dark'] {
|
|
|
667
667
|
--df-color-chromatic2-soft-activePressed-background: #993567;
|
|
668
668
|
--df-color-chromatic2-soft-activePressed-foreground: #fcc5f9;
|
|
669
669
|
--df-color-chromatic2-subtle-background: #34001f;
|
|
670
|
-
--df-color-inert-neutral-pageBackground: #1a1a1a;
|
|
671
670
|
--df-color-inert-neutral-main-foreground: #fafafa;
|
|
672
671
|
--df-color-inert-neutral-main-background: #333333;
|
|
673
672
|
--df-color-inert-neutral-main-border: #808080;
|
|
673
|
+
--df-color-inert-neutral-main-pageBackground: #1a1a1a;
|
|
674
674
|
--df-color-inert-neutral-alt-foreground: #1a1a1a;
|
|
675
675
|
--df-color-inert-neutral-alt-background: #fafafa;
|
|
676
|
+
--df-color-inert-neutral-alt-pageBackground: #ffffff;
|
|
676
677
|
--df-color-inert-neutral-subtle-background: #666666;
|
|
678
|
+
--df-color-inert-neutral-subtle-pageBackground: #000000;
|
|
677
679
|
--df-color-inert-neutral-intense-foreground: #ffffff;
|
|
678
680
|
--df-color-inert-neutral-intense-background: #ffffff;
|
|
679
681
|
--df-color-inert-neutral-readonly-foreground: #f2f2f2;
|
package/css/root-light.css
CHANGED
|
@@ -667,13 +667,15 @@ html:root {
|
|
|
667
667
|
--df-color-chromatic2-soft-activePressed-background: #ff58ac;
|
|
668
668
|
--df-color-chromatic2-soft-activePressed-foreground: #4f0230;
|
|
669
669
|
--df-color-chromatic2-subtle-background: #ffeef7;
|
|
670
|
-
--df-color-inert-neutral-pageBackground: #ffffff;
|
|
671
670
|
--df-color-inert-neutral-main-foreground: #1a1a1a;
|
|
672
671
|
--df-color-inert-neutral-main-background: #ffffff;
|
|
673
672
|
--df-color-inert-neutral-main-border: #cccccc;
|
|
673
|
+
--df-color-inert-neutral-main-pageBackground: #ffffff;
|
|
674
674
|
--df-color-inert-neutral-alt-foreground: #ffffff;
|
|
675
675
|
--df-color-inert-neutral-alt-background: #1a1a1a;
|
|
676
|
+
--df-color-inert-neutral-alt-pageBackground: #1a1a1a;
|
|
676
677
|
--df-color-inert-neutral-subtle-background: #fafafa;
|
|
678
|
+
--df-color-inert-neutral-subtle-pageBackground: #fafafa;
|
|
677
679
|
--df-color-inert-neutral-intense-foreground: #000000;
|
|
678
680
|
--df-color-inert-neutral-intense-background: #000000;
|
|
679
681
|
--df-color-inert-neutral-readonly-foreground: #333333;
|
package/figma/t2-dark.json
CHANGED
|
@@ -2445,10 +2445,6 @@
|
|
|
2445
2445
|
},
|
|
2446
2446
|
"inert": {
|
|
2447
2447
|
"neutral": {
|
|
2448
|
-
"pageBackground": {
|
|
2449
|
-
"$type": "color",
|
|
2450
|
-
"$value": "{df.theme.neutral.100}"
|
|
2451
|
-
},
|
|
2452
2448
|
"main": {
|
|
2453
2449
|
"foreground": {
|
|
2454
2450
|
"$type": "color",
|
|
@@ -2461,6 +2457,10 @@
|
|
|
2461
2457
|
"border": {
|
|
2462
2458
|
"$type": "color",
|
|
2463
2459
|
"$value": "{df.theme.neutral.70}"
|
|
2460
|
+
},
|
|
2461
|
+
"pageBackground": {
|
|
2462
|
+
"$type": "color",
|
|
2463
|
+
"$value": "{df.theme.neutral.100}"
|
|
2464
2464
|
}
|
|
2465
2465
|
},
|
|
2466
2466
|
"alt": {
|
|
@@ -2471,12 +2471,20 @@
|
|
|
2471
2471
|
"background": {
|
|
2472
2472
|
"$type": "color",
|
|
2473
2473
|
"$value": "{df.theme.neutral.10}"
|
|
2474
|
+
},
|
|
2475
|
+
"pageBackground": {
|
|
2476
|
+
"$type": "color",
|
|
2477
|
+
"$value": "{df.theme.neutral.0}"
|
|
2474
2478
|
}
|
|
2475
2479
|
},
|
|
2476
2480
|
"subtle": {
|
|
2477
2481
|
"background": {
|
|
2478
2482
|
"$type": "color",
|
|
2479
2483
|
"$value": "{df.theme.neutral.80}"
|
|
2484
|
+
},
|
|
2485
|
+
"pageBackground": {
|
|
2486
|
+
"$type": "color",
|
|
2487
|
+
"$value": "{df.theme.neutral.110}"
|
|
2480
2488
|
}
|
|
2481
2489
|
},
|
|
2482
2490
|
"intense": {
|
package/figma/t2-light.json
CHANGED
|
@@ -2445,10 +2445,6 @@
|
|
|
2445
2445
|
},
|
|
2446
2446
|
"inert": {
|
|
2447
2447
|
"neutral": {
|
|
2448
|
-
"pageBackground": {
|
|
2449
|
-
"$type": "color",
|
|
2450
|
-
"$value": "{df.theme.neutral.0}"
|
|
2451
|
-
},
|
|
2452
2448
|
"main": {
|
|
2453
2449
|
"foreground": {
|
|
2454
2450
|
"$type": "color",
|
|
@@ -2461,6 +2457,10 @@
|
|
|
2461
2457
|
"border": {
|
|
2462
2458
|
"$type": "color",
|
|
2463
2459
|
"$value": "{df.theme.neutral.40}"
|
|
2460
|
+
},
|
|
2461
|
+
"pageBackground": {
|
|
2462
|
+
"$type": "color",
|
|
2463
|
+
"$value": "{df.theme.neutral.0}"
|
|
2464
2464
|
}
|
|
2465
2465
|
},
|
|
2466
2466
|
"alt": {
|
|
@@ -2471,12 +2471,20 @@
|
|
|
2471
2471
|
"background": {
|
|
2472
2472
|
"$type": "color",
|
|
2473
2473
|
"$value": "{df.theme.neutral.100}"
|
|
2474
|
+
},
|
|
2475
|
+
"pageBackground": {
|
|
2476
|
+
"$type": "color",
|
|
2477
|
+
"$value": "{df.theme.neutral.100}"
|
|
2474
2478
|
}
|
|
2475
2479
|
},
|
|
2476
2480
|
"subtle": {
|
|
2477
2481
|
"background": {
|
|
2478
2482
|
"$type": "color",
|
|
2479
2483
|
"$value": "{df.theme.neutral.10}"
|
|
2484
|
+
},
|
|
2485
|
+
"pageBackground": {
|
|
2486
|
+
"$type": "color",
|
|
2487
|
+
"$value": "{df.theme.neutral.10}"
|
|
2480
2488
|
}
|
|
2481
2489
|
},
|
|
2482
2490
|
"intense": {
|
package/figma/t3.json
CHANGED
package/package.json
CHANGED
package/scss/root.scss
CHANGED
|
@@ -665,13 +665,15 @@
|
|
|
665
665
|
--df-color-chromatic2-soft-activePressed-background: #{$df-color-chromatic2-soft-activePressed-background};
|
|
666
666
|
--df-color-chromatic2-soft-activePressed-foreground: #{$df-color-chromatic2-soft-activePressed-foreground};
|
|
667
667
|
--df-color-chromatic2-subtle-background: #{$df-color-chromatic2-subtle-background};
|
|
668
|
-
--df-color-inert-neutral-pageBackground: #{$df-color-inert-neutral-pageBackground};
|
|
669
668
|
--df-color-inert-neutral-main-foreground: #{$df-color-inert-neutral-main-foreground};
|
|
670
669
|
--df-color-inert-neutral-main-background: #{$df-color-inert-neutral-main-background};
|
|
671
670
|
--df-color-inert-neutral-main-border: #{$df-color-inert-neutral-main-border};
|
|
671
|
+
--df-color-inert-neutral-main-pageBackground: #{$df-color-inert-neutral-main-pageBackground};
|
|
672
672
|
--df-color-inert-neutral-alt-foreground: #{$df-color-inert-neutral-alt-foreground};
|
|
673
673
|
--df-color-inert-neutral-alt-background: #{$df-color-inert-neutral-alt-background};
|
|
674
|
+
--df-color-inert-neutral-alt-pageBackground: #{$df-color-inert-neutral-alt-pageBackground};
|
|
674
675
|
--df-color-inert-neutral-subtle-background: #{$df-color-inert-neutral-subtle-background};
|
|
676
|
+
--df-color-inert-neutral-subtle-pageBackground: #{$df-color-inert-neutral-subtle-pageBackground};
|
|
675
677
|
--df-color-inert-neutral-intense-foreground: #{$df-color-inert-neutral-intense-foreground};
|
|
676
678
|
--df-color-inert-neutral-intense-background: #{$df-color-inert-neutral-intense-background};
|
|
677
679
|
--df-color-inert-neutral-readonly-foreground: #{$df-color-inert-neutral-readonly-foreground};
|
package/scss/vars-dark.scss
CHANGED
|
@@ -746,13 +746,15 @@ $df-color-chromatic2-soft-activeHovered-foreground: var(--df-theme-chromatic2-20
|
|
|
746
746
|
$df-color-chromatic2-soft-activePressed-background: var(--df-theme-chromatic2-70) !default;
|
|
747
747
|
$df-color-chromatic2-soft-activePressed-foreground: var(--df-theme-chromatic2-20) !default;
|
|
748
748
|
$df-color-chromatic2-subtle-background: var(--df-theme-chromatic2-100) !default;
|
|
749
|
-
$df-color-inert-neutral-pageBackground: var(--df-theme-neutral-100) !default;
|
|
750
749
|
$df-color-inert-neutral-main-foreground: var(--df-theme-neutral-10) !default;
|
|
751
750
|
$df-color-inert-neutral-main-background: var(--df-theme-neutral-90) !default;
|
|
752
751
|
$df-color-inert-neutral-main-border: var(--df-theme-neutral-70) !default;
|
|
752
|
+
$df-color-inert-neutral-main-pageBackground: var(--df-theme-neutral-100) !default;
|
|
753
753
|
$df-color-inert-neutral-alt-foreground: var(--df-theme-neutral-100) !default;
|
|
754
754
|
$df-color-inert-neutral-alt-background: var(--df-theme-neutral-10) !default;
|
|
755
|
+
$df-color-inert-neutral-alt-pageBackground: var(--df-theme-neutral-0) !default;
|
|
755
756
|
$df-color-inert-neutral-subtle-background: var(--df-theme-neutral-80) !default;
|
|
757
|
+
$df-color-inert-neutral-subtle-pageBackground: var(--df-theme-neutral-110) !default;
|
|
756
758
|
$df-color-inert-neutral-intense-foreground: var(--df-theme-neutral-0) !default;
|
|
757
759
|
$df-color-inert-neutral-intense-background: var(--df-theme-neutral-0) !default;
|
|
758
760
|
$df-color-inert-neutral-readonly-foreground: var(--df-theme-neutral-20) !default;
|
|
@@ -1380,7 +1382,7 @@ $df-badge-outline-color-disabled-default-border: var(--df-color-disabled-main-bo
|
|
|
1380
1382
|
$df-badge-outline-color-disabled-default-foreground: var(--df-color-disabled-main-foreground) !default;
|
|
1381
1383
|
$df-footer-color-logo-foreground: var(--df-color-logo-main-foreground) !default;
|
|
1382
1384
|
$df-footer-color-inert-neutral-border: var(--df-color-inert-neutral-main-border) !default;
|
|
1383
|
-
$df-footer-color-inert-neutral-background: var(--df-color-inert-neutral-pageBackground) !default;
|
|
1385
|
+
$df-footer-color-inert-neutral-background: var(--df-color-inert-neutral-main-pageBackground) !default;
|
|
1384
1386
|
$df-footer-color-inert-neutral-foreground: var(--df-color-inert-neutral-main-foreground) !default;
|
|
1385
1387
|
$df-footer-color-inert-primary-background: var(--df-theme-primary-20) !default;
|
|
1386
1388
|
$df-navbar-color-inert-main-foreground: var(--df-theme-neutral-100) !default;
|
package/scss/vars-light.scss
CHANGED
|
@@ -746,13 +746,15 @@ $df-color-chromatic2-soft-activeHovered-foreground: var(--df-theme-chromatic2-90
|
|
|
746
746
|
$df-color-chromatic2-soft-activePressed-background: var(--df-theme-chromatic2-50) !default;
|
|
747
747
|
$df-color-chromatic2-soft-activePressed-foreground: var(--df-theme-chromatic2-90) !default;
|
|
748
748
|
$df-color-chromatic2-subtle-background: var(--df-theme-chromatic2-10) !default;
|
|
749
|
-
$df-color-inert-neutral-pageBackground: var(--df-theme-neutral-0) !default;
|
|
750
749
|
$df-color-inert-neutral-main-foreground: var(--df-theme-neutral-100) !default;
|
|
751
750
|
$df-color-inert-neutral-main-background: var(--df-theme-neutral-0) !default;
|
|
752
751
|
$df-color-inert-neutral-main-border: var(--df-theme-neutral-40) !default;
|
|
752
|
+
$df-color-inert-neutral-main-pageBackground: var(--df-theme-neutral-0) !default;
|
|
753
753
|
$df-color-inert-neutral-alt-foreground: var(--df-theme-neutral-0) !default;
|
|
754
754
|
$df-color-inert-neutral-alt-background: var(--df-theme-neutral-100) !default;
|
|
755
|
+
$df-color-inert-neutral-alt-pageBackground: var(--df-theme-neutral-100) !default;
|
|
755
756
|
$df-color-inert-neutral-subtle-background: var(--df-theme-neutral-10) !default;
|
|
757
|
+
$df-color-inert-neutral-subtle-pageBackground: var(--df-theme-neutral-10) !default;
|
|
756
758
|
$df-color-inert-neutral-intense-foreground: var(--df-theme-neutral-110) !default;
|
|
757
759
|
$df-color-inert-neutral-intense-background: var(--df-theme-neutral-110) !default;
|
|
758
760
|
$df-color-inert-neutral-readonly-foreground: var(--df-theme-neutral-90) !default;
|
|
@@ -1380,7 +1382,7 @@ $df-badge-outline-color-disabled-default-border: var(--df-color-disabled-main-bo
|
|
|
1380
1382
|
$df-badge-outline-color-disabled-default-foreground: var(--df-color-disabled-main-foreground) !default;
|
|
1381
1383
|
$df-footer-color-logo-foreground: var(--df-color-logo-main-foreground) !default;
|
|
1382
1384
|
$df-footer-color-inert-neutral-border: var(--df-color-inert-neutral-main-border) !default;
|
|
1383
|
-
$df-footer-color-inert-neutral-background: var(--df-color-inert-neutral-pageBackground) !default;
|
|
1385
|
+
$df-footer-color-inert-neutral-background: var(--df-color-inert-neutral-main-pageBackground) !default;
|
|
1384
1386
|
$df-footer-color-inert-neutral-foreground: var(--df-color-inert-neutral-main-foreground) !default;
|
|
1385
1387
|
$df-footer-color-inert-primary-background: var(--df-theme-primary-90) !default;
|
|
1386
1388
|
$df-navbar-color-inert-main-foreground: var(--df-theme-neutral-0) !default;
|