@esri/calcite-design-tokens 4.0.0-next.16 → 4.0.0-next.18

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.
Files changed (27) hide show
  1. package/dist/css/core.css +1 -0
  2. package/dist/css/dark.css +22 -22
  3. package/dist/css/global.css +1 -1
  4. package/dist/css/index.css +110 -110
  5. package/dist/css/light.css +22 -22
  6. package/dist/css/semantic.css +1 -1
  7. package/dist/docs/core.json +27 -1
  8. package/dist/docs/dark.json +427 -433
  9. package/dist/docs/global.json +458 -464
  10. package/dist/docs/light.json +427 -433
  11. package/dist/docs/semantic.json +2 -2
  12. package/dist/es6/core.d.ts +1 -0
  13. package/dist/es6/core.js +1 -0
  14. package/dist/es6/dark.d.ts +22 -22
  15. package/dist/es6/dark.js +22 -22
  16. package/dist/es6/global.d.ts +28 -28
  17. package/dist/es6/global.js +45 -45
  18. package/dist/es6/light.d.ts +22 -22
  19. package/dist/es6/light.js +22 -22
  20. package/dist/es6/semantic.js +1 -1
  21. package/dist/scss/core.scss +1 -0
  22. package/dist/scss/dark.scss +22 -22
  23. package/dist/scss/global.scss +1 -1
  24. package/dist/scss/index.scss +44 -44
  25. package/dist/scss/light.scss +22 -22
  26. package/dist/scss/semantic.scss +1 -1
  27. package/package.json +2 -2
package/dist/scss/index.scss CHANGED
@@ -7,21 +7,13 @@
7
7
  @use "./breakpoints.scss";
8
8
  @use "./mixins.scss";
9
9
  @mixin calcite-mode-light {
10
- --calcite-color-border-white: #ffffff;
11
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
12
- --calcite-color-border-input: #949494;
13
- --calcite-color-border-3: #ebebeb;
14
- --calcite-color-border-2: #dedede;
15
- --calcite-color-border-1: #d4d4d4;
16
- --calcite-color-text-link: #00619b;
17
- --calcite-color-text-inverse: #ffffff;
18
- --calcite-color-text-highlight: #004874;
19
- --calcite-color-text-3: #6b6b6b;
20
- --calcite-color-text-2: #4a4a4a;
21
- --calcite-color-text-1: #141414;
22
- --calcite-color-inverse-press: #212121;
23
- --calcite-color-inverse-hover: #2b2b2b;
24
- --calcite-color-inverse: #363636;
10
+ --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
11
+ --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
12
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
13
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
14
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
15
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
16
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
25
17
  --calcite-color-status-danger-press: #7c1d13;
26
18
  --calcite-color-status-danger-hover: #a82b1e;
27
19
  --calcite-color-status-danger: #d83020;
@@ -34,17 +26,25 @@
34
26
  --calcite-color-status-info-press: #00304d;
35
27
  --calcite-color-status-info-hover: #004874;
36
28
  --calcite-color-status-info: #00619b;
29
+ --calcite-color-inverse-press: #212121;
30
+ --calcite-color-inverse-hover: #2b2b2b;
31
+ --calcite-color-inverse: #363636;
37
32
  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
38
33
  --calcite-color-brand-press: #004874;
39
34
  --calcite-color-brand-hover: #00619b;
40
35
  --calcite-color-brand: #007ac2;
41
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
42
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
43
- --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
44
- --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
45
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
46
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
47
- --calcite-color-transparent: rgba(0, 0, 0, 0);
36
+ --calcite-color-border-white: #ffffff;
37
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
38
+ --calcite-color-border-input: #949494;
39
+ --calcite-color-border-3: #ebebeb;
40
+ --calcite-color-border-2: #dedede;
41
+ --calcite-color-border-1: #d4d4d4;
42
+ --calcite-color-text-highlight: #004874;
43
+ --calcite-color-text-link: #00619b;
44
+ --calcite-color-text-inverse: #ffffff;
45
+ --calcite-color-text-3: #6b6b6b;
46
+ --calcite-color-text-2: #4a4a4a;
47
+ --calcite-color-text-1: #141414;
48
48
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
49
49
  --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
50
50
  --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
@@ -59,21 +59,13 @@
59
59
  --calcite-color-focus: var(--calcite-color-brand);
60
60
  }
61
61
  @mixin calcite-mode-dark {
62
- --calcite-color-border-white: #f7f7f7;
63
- --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
64
- --calcite-color-border-input: #757575;
65
- --calcite-color-border-3: #404040;
66
- --calcite-color-border-2: #4a4a4a;
67
- --calcite-color-border-1: #545454;
68
- --calcite-color-text-link: #00a0ff;
69
- --calcite-color-text-inverse: #141414;
70
- --calcite-color-text-highlight: #d6efff;
71
- --calcite-color-text-3: #9e9e9e;
72
- --calcite-color-text-2: #bfbfbf;
73
- --calcite-color-text-1: #ffffff;
74
- --calcite-color-inverse-press: #ebebeb;
75
- --calcite-color-inverse-hover: #f2f2f2;
76
- --calcite-color-inverse: #f7f7f7;
62
+ --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
63
+ --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
64
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
65
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
66
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
67
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
68
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
77
69
  --calcite-color-status-danger-press: #d90012;
78
70
  --calcite-color-status-danger-hover: #ff0015;
79
71
  --calcite-color-status-danger: #fe583e;
@@ -86,17 +78,25 @@
86
78
  --calcite-color-status-info-press: #009af2;
87
79
  --calcite-color-status-info-hover: #3db8ff;
88
80
  --calcite-color-status-info: #00a0ff;
81
+ --calcite-color-inverse-press: #ebebeb;
82
+ --calcite-color-inverse-hover: #f2f2f2;
83
+ --calcite-color-inverse: #f7f7f7;
89
84
  --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
90
85
  --calcite-color-brand-press: #00619b;
91
86
  --calcite-color-brand-hover: #007ac2;
92
87
  --calcite-color-brand: #009af2;
93
- --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
94
- --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
95
- --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
96
- --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
97
- --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
98
- --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
99
- --calcite-color-transparent: rgba(255, 255, 255, 0);
88
+ --calcite-color-border-white: #f7f7f7;
89
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
90
+ --calcite-color-border-input: #757575;
91
+ --calcite-color-border-3: #404040;
92
+ --calcite-color-border-2: #4a4a4a;
93
+ --calcite-color-border-1: #545454;
94
+ --calcite-color-text-highlight: #d6efff;
95
+ --calcite-color-text-link: #00a0ff;
96
+ --calcite-color-text-inverse: #141414;
97
+ --calcite-color-text-3: #9e9e9e;
98
+ --calcite-color-text-2: #bfbfbf;
99
+ --calcite-color-text-1: #ffffff;
100
100
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
101
101
  --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
102
102
  --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
package/dist/scss/light.scss CHANGED
@@ -13,17 +13,25 @@ $calcite-color-foreground-1: #ffffff; // Deprecated, use `--calcite-color-surfac
13
13
  $calcite-color-foreground-2: #f2f2f2; // Deprecated, use `--calcite-color-surface-3` instead
14
14
  $calcite-color-foreground-3: #ebebeb; // Deprecated, use `--calcite-color-surface-4` instead
15
15
  $calcite-color-foreground-current: #d6efff; // deprecated, use --calcite-color-surface-highlight instead
16
- $calcite-color-transparent: rgba(0, 0, 0, 0);
17
- $calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
18
- $calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
19
- $calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
20
- $calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
21
- $calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
22
- $calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
16
+ $calcite-color-text-1: #141414;
17
+ $calcite-color-text-2: #4a4a4a;
18
+ $calcite-color-text-3: #6b6b6b;
19
+ $calcite-color-text-inverse: #ffffff;
20
+ $calcite-color-text-link: #00619b;
21
+ $calcite-color-text-highlight: #004874;
22
+ $calcite-color-border-1: #d4d4d4;
23
+ $calcite-color-border-2: #dedede;
24
+ $calcite-color-border-3: #ebebeb;
25
+ $calcite-color-border-input: #949494;
26
+ $calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
27
+ $calcite-color-border-white: #ffffff;
23
28
  $calcite-color-brand: #007ac2;
24
29
  $calcite-color-brand-hover: #00619b;
25
30
  $calcite-color-brand-press: #004874;
26
31
  $calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
32
+ $calcite-color-inverse: #363636;
33
+ $calcite-color-inverse-hover: #2b2b2b;
34
+ $calcite-color-inverse-press: #212121;
27
35
  $calcite-color-status-info: #00619b;
28
36
  $calcite-color-status-info-hover: #004874;
29
37
  $calcite-color-status-info-press: #00304d;
@@ -36,19 +44,11 @@ $calcite-color-status-warning-press: #9a5b10;
36
44
  $calcite-color-status-danger: #d83020;
37
45
  $calcite-color-status-danger-hover: #a82b1e;
38
46
  $calcite-color-status-danger-press: #7c1d13;
39
- $calcite-color-inverse: #363636;
40
- $calcite-color-inverse-hover: #2b2b2b;
41
- $calcite-color-inverse-press: #212121;
42
- $calcite-color-text-1: #141414;
43
- $calcite-color-text-2: #4a4a4a;
44
- $calcite-color-text-3: #6b6b6b;
45
- $calcite-color-text-highlight: #004874;
46
- $calcite-color-text-inverse: #ffffff;
47
- $calcite-color-text-link: #00619b;
48
- $calcite-color-border-1: #d4d4d4;
49
- $calcite-color-border-2: #dedede;
50
- $calcite-color-border-3: #ebebeb;
51
- $calcite-color-border-input: #949494;
52
- $calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
53
- $calcite-color-border-white: #ffffff;
47
+ $calcite-color-transparent: rgba(0, 0, 0, 0);
48
+ $calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
49
+ $calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
50
+ $calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
51
+ $calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
52
+ $calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
53
+ $calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
54
54
  $calcite-color-focus: $calcite-color-brand;
package/dist/scss/semantic.scss CHANGED
@@ -15,7 +15,7 @@ $calcite-corner-radius-none: 0;
15
15
  $calcite-corner-radius-xs: 2px;
16
16
  $calcite-corner-radius-sm: 4px;
17
17
  $calcite-corner-radius-round: 4px; // deprecated, use --calcite-corner-radius-sm instead
18
- $calcite-corner-radius-pill: 100%;
18
+ $calcite-corner-radius-pill: 9999px;
19
19
  $calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; // Primary font with fallbacks
20
20
  $calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; // Font family for code with fallbacks
21
21
  $calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "4.0.0-next.16",
3
+ "version": "4.0.0-next.18",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -47,5 +47,5 @@
47
47
  "devDependencies": {
48
48
  "vitest": "4.0.16"
49
49
  },
50
- "gitHead": "8d7fcd9c74a03b5d6eb938d59166588138f23126"
50
+ "gitHead": "1ddd2484af859ffb97de88c3a8842a383fe57198"
51
51
  }