@esri/calcite-design-tokens 4.0.0-next.1 → 4.0.0-next.10

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/css/core.css CHANGED
@@ -566,6 +566,20 @@
566
566
  --calcite-size-relative-200: 200%;
567
567
  --calcite-size-relative-auto: auto;
568
568
  --calcite-size-relative-normal: normal;
569
+ --calcite-size-rem-1: 1rem;
570
+ --calcite-size-rem-2: 2rem;
571
+ --calcite-size-rem-3: 3rem;
572
+ --calcite-size-rem-4: 4rem;
573
+ --calcite-size-rem-5: 5rem;
574
+ --calcite-size-rem-0-625: 0.625rem;
575
+ --calcite-size-rem-0-75: 0.75rem;
576
+ --calcite-size-rem-0-875: 0.875rem;
577
+ --calcite-size-rem-1-125: 1.125rem;
578
+ --calcite-size-rem-1-25: 1.25rem;
579
+ --calcite-size-rem-1-5: 1.5rem;
580
+ --calcite-size-rem-1-625: 1.625rem;
581
+ --calcite-size-rem-2-5: 2.5rem;
582
+ --calcite-size-rem-3-5: 3.5rem;
569
583
  --calcite-z-index-0: -999999;
570
584
  --calcite-z-index-1: 1;
571
585
  --calcite-z-index-3: 300;
package/dist/css/dark.css CHANGED
@@ -4,11 +4,11 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-color-background: #363636;
7
+ --calcite-color-background: #212121;
8
8
  --calcite-color-background-none: rgba(255, 255, 255, 0);
9
9
  --calcite-color-foreground-1: #2b2b2b;
10
- --calcite-color-foreground-2: #212121;
11
- --calcite-color-foreground-3: #141414;
10
+ --calcite-color-foreground-2: #363636;
11
+ --calcite-color-foreground-3: #404040;
12
12
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
13
13
  --calcite-color-surface-highlight: #2b465f;
14
14
  --calcite-color-transparent: rgba(255, 255, 255, 0);
@@ -35,8 +35,8 @@
35
35
  --calcite-color-status-danger-hover: #ff0015;
36
36
  --calcite-color-status-danger-press: #d90012;
37
37
  --calcite-color-inverse: #f7f7f7;
38
- --calcite-color-inverse-hover: #ffffff;
39
- --calcite-color-inverse-press: #f2f2f2;
38
+ --calcite-color-inverse-hover: #f2f2f2;
39
+ --calcite-color-inverse-press: #ebebeb;
40
40
  --calcite-color-text-1: #ffffff;
41
41
  --calcite-color-text-2: #bfbfbf;
42
42
  --calcite-color-text-3: #9e9e9e;
@@ -35,6 +35,18 @@
35
35
  --calcite-font-size-lg: 18px;
36
36
  --calcite-font-size-xl: 20px;
37
37
  --calcite-font-size-xxl: 24px;
38
+ --calcite-font-size-relative-xs: 0.625rem;
39
+ --calcite-font-size-relative-sm: 0.75rem;
40
+ --calcite-font-size-relative-base: 0.875rem;
41
+ --calcite-font-size-relative-md: 1rem;
42
+ --calcite-font-size-relative-lg: 1.125rem;
43
+ --calcite-font-size-relative-xl: 1.25rem;
44
+ --calcite-font-size-relative-2xl: 1.625rem;
45
+ --calcite-font-size-relative-3xl: 2rem;
46
+ --calcite-font-size-relative-4xl: 2.5rem;
47
+ --calcite-font-size-relative-5xl: 3rem;
48
+ --calcite-font-size-relative-6xl: 3.5rem;
49
+ --calcite-font-size-relative-7xl: 4rem;
38
50
  --calcite-font-style-emphasis: italic; /** used in ratings */
39
51
  --calcite-font-line-height-fixed-sm: 12px;
40
52
  --calcite-font-line-height-fixed-base: 16px;
@@ -52,6 +64,18 @@
52
64
  --calcite-font-line-height-relative-normal: 1.5; /** 1.5 */
53
65
  --calcite-font-line-height-relative-relaxed: 1.625; /** 1.625 */
54
66
  --calcite-font-line-height-relative-loose: 2; /** 2 */
67
+ --calcite-font-line-height-xs: 0.75rem;
68
+ --calcite-font-line-height-sm: 1rem;
69
+ --calcite-font-line-height-base: 1rem;
70
+ --calcite-font-line-height-md: 1.25rem;
71
+ --calcite-font-line-height-lg: 1.5rem;
72
+ --calcite-font-line-height-xl: 1.5rem;
73
+ --calcite-font-line-height-2xl: 2rem;
74
+ --calcite-font-line-height-3xl: 2.5rem;
75
+ --calcite-font-line-height-4xl: 3rem;
76
+ --calcite-font-line-height-5xl: 4rem;
77
+ --calcite-font-line-height-6xl: 4rem;
78
+ --calcite-font-line-height-7xl: 5rem;
55
79
  --calcite-font-letter-spacing-tight: -0.4px; /** Deprecated */
56
80
  --calcite-font-letter-spacing-normal: 0; /** Deprecated */
57
81
  --calcite-font-letter-spacing-wide: 0.4px; /** Deprecated */
@@ -96,19 +120,32 @@
96
120
  --calcite-spacing-fixed-xl: 16px; /** deprecated */
97
121
  --calcite-spacing-fixed-xxl: 20px; /** deprecated */
98
122
  --calcite-spacing-fixed-xxxl: 32px; /** deprecated */
99
- --calcite-spacing-none: 0;
100
- --calcite-spacing-px: 1px;
101
- --calcite-spacing-base: 2px;
102
- --calcite-spacing-xxs: 0.25rem;
103
- --calcite-spacing-xs: 0.375rem;
104
- --calcite-spacing-sm: 0.5rem;
105
- --calcite-spacing-sm-plus: 0.625rem;
106
- --calcite-spacing-md: 0.75rem;
107
- --calcite-spacing-md-plus: 0.875rem;
108
- --calcite-spacing-lg: 1rem;
109
- --calcite-spacing-xl: 1.25rem;
110
- --calcite-spacing-xxl: 1.5rem;
111
- --calcite-spacing-xxxl: 2rem;
123
+ --calcite-spacing-none: 0; /** deprecated, use `--calcite-space-none` instead */
124
+ --calcite-spacing-px: 1px; /** deprecated, use `--calcite-space-px` instead */
125
+ --calcite-spacing-base: 2px; /** deprecated, use `--calcite-space-base` instead */
126
+ --calcite-spacing-xxs: 0.25rem; /** deprecated, use `--calcite-space-2xs` instead */
127
+ --calcite-spacing-xs: 0.375rem; /** deprecated, use `--calcite-space-xs` instead */
128
+ --calcite-spacing-sm: 0.5rem; /** deprecated, use `--calcite-space-sm` instead */
129
+ --calcite-spacing-sm-plus: 0.625rem; /** deprecated, use `--calcite-space-sm-plus` instead */
130
+ --calcite-spacing-md: 0.75rem; /** deprecated, use `--calcite-space-md` instead */
131
+ --calcite-spacing-md-plus: 0.875rem; /** deprecated, use `--calcite-space-md-plus` instead */
132
+ --calcite-spacing-lg: 1rem; /** deprecated, use `--calcite-space-lg` instead */
133
+ --calcite-spacing-xl: 1.25rem; /** deprecated, use `--calcite-space-xl` instead */
134
+ --calcite-spacing-xxl: 1.5rem; /** deprecated, use `--calcite-space-2xl` instead */
135
+ --calcite-spacing-xxxl: 2rem; /** deprecated, use `--calcite-space-3xl` instead */
136
+ --calcite-space-none: 0;
137
+ --calcite-space-px: 1px;
138
+ --calcite-space-base: 2px;
139
+ --calcite-space-2xs: 0.25rem;
140
+ --calcite-space-xs: 0.375rem;
141
+ --calcite-space-sm: 0.5rem;
142
+ --calcite-space-sm-plus: 0.625rem;
143
+ --calcite-space-md: 0.75rem;
144
+ --calcite-space-md-plus: 0.875rem;
145
+ --calcite-space-lg: 1rem;
146
+ --calcite-space-xl: 1.25rem;
147
+ --calcite-space-2xl: 1.5rem;
148
+ --calcite-space-3xl: 2rem;
112
149
  --calcite-z-index-deep: -999999;
113
150
  --calcite-z-index: 1;
114
151
  --calcite-z-index-sticky: 300;
@@ -9,9 +9,9 @@
9
9
  --calcite-color-border-white: #ffffff;
10
10
  --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
11
11
  --calcite-color-border-input: #949494;
12
- --calcite-color-border-3: #dedede;
13
- --calcite-color-border-2: #d4d4d4;
14
- --calcite-color-border-1: #c9c9c9;
12
+ --calcite-color-border-3: #ebebeb;
13
+ --calcite-color-border-2: #dedede;
14
+ --calcite-color-border-1: #d4d4d4;
15
15
  --calcite-color-text-link: #00619b;
16
16
  --calcite-color-text-inverse: #ffffff;
17
17
  --calcite-color-text-highlight: #004874;
@@ -57,9 +57,9 @@
57
57
  --calcite-color-border-white: #ffffff;
58
58
  --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
59
59
  --calcite-color-border-input: #949494;
60
- --calcite-color-border-3: #dedede;
61
- --calcite-color-border-2: #d4d4d4;
62
- --calcite-color-border-1: #c9c9c9;
60
+ --calcite-color-border-3: #ebebeb;
61
+ --calcite-color-border-2: #dedede;
62
+ --calcite-color-border-1: #d4d4d4;
63
63
  --calcite-color-text-link: #00619b;
64
64
  --calcite-color-text-inverse: #ffffff;
65
65
  --calcite-color-text-highlight: #004874;
@@ -115,8 +115,8 @@
115
115
  --calcite-color-text-3: #9e9e9e;
116
116
  --calcite-color-text-2: #bfbfbf;
117
117
  --calcite-color-text-1: #ffffff;
118
- --calcite-color-inverse-press: #f2f2f2;
119
- --calcite-color-inverse-hover: #ffffff;
118
+ --calcite-color-inverse-press: #ebebeb;
119
+ --calcite-color-inverse-hover: #f2f2f2;
120
120
  --calcite-color-inverse: #f7f7f7;
121
121
  --calcite-color-status-danger-press: #d90012;
122
122
  --calcite-color-status-danger-hover: #ff0015;
@@ -143,20 +143,20 @@
143
143
  --calcite-color-transparent: rgba(255, 255, 255, 0);
144
144
  --calcite-color-surface-highlight: #2b465f;
145
145
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
146
- --calcite-color-foreground-3: #141414;
147
- --calcite-color-foreground-2: #212121;
146
+ --calcite-color-foreground-3: #404040;
147
+ --calcite-color-foreground-2: #363636;
148
148
  --calcite-color-foreground-1: #2b2b2b;
149
149
  --calcite-color-background-none: rgba(255, 255, 255, 0);
150
- --calcite-color-background: #363636;
150
+ --calcite-color-background: #212121;
151
151
  }
152
152
  }
153
153
  .calcite-mode-light {
154
154
  --calcite-color-border-white: #ffffff;
155
155
  --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
156
156
  --calcite-color-border-input: #949494;
157
- --calcite-color-border-3: #dedede;
158
- --calcite-color-border-2: #d4d4d4;
159
- --calcite-color-border-1: #c9c9c9;
157
+ --calcite-color-border-3: #ebebeb;
158
+ --calcite-color-border-2: #dedede;
159
+ --calcite-color-border-1: #d4d4d4;
160
160
  --calcite-color-text-link: #00619b;
161
161
  --calcite-color-text-inverse: #ffffff;
162
162
  --calcite-color-text-highlight: #004874;
@@ -210,8 +210,8 @@
210
210
  --calcite-color-text-3: #9e9e9e;
211
211
  --calcite-color-text-2: #bfbfbf;
212
212
  --calcite-color-text-1: #ffffff;
213
- --calcite-color-inverse-press: #f2f2f2;
214
- --calcite-color-inverse-hover: #ffffff;
213
+ --calcite-color-inverse-press: #ebebeb;
214
+ --calcite-color-inverse-hover: #f2f2f2;
215
215
  --calcite-color-inverse: #f7f7f7;
216
216
  --calcite-color-status-danger-press: #d90012;
217
217
  --calcite-color-status-danger-hover: #ff0015;
@@ -238,9 +238,9 @@
238
238
  --calcite-color-transparent: rgba(255, 255, 255, 0);
239
239
  --calcite-color-surface-highlight: #2b465f;
240
240
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
241
- --calcite-color-foreground-3: #141414;
242
- --calcite-color-foreground-2: #212121;
241
+ --calcite-color-foreground-3: #404040;
242
+ --calcite-color-foreground-2: #363636;
243
243
  --calcite-color-foreground-1: #2b2b2b;
244
244
  --calcite-color-background-none: rgba(255, 255, 255, 0);
245
- --calcite-color-background: #363636;
245
+ --calcite-color-background: #212121;
246
246
  }
@@ -43,9 +43,9 @@
43
43
  --calcite-color-text-highlight: #004874;
44
44
  --calcite-color-text-inverse: #ffffff;
45
45
  --calcite-color-text-link: #00619b;
46
- --calcite-color-border-1: #c9c9c9;
47
- --calcite-color-border-2: #d4d4d4;
48
- --calcite-color-border-3: #dedede;
46
+ --calcite-color-border-1: #d4d4d4;
47
+ --calcite-color-border-2: #dedede;
48
+ --calcite-color-border-3: #ebebeb;
49
49
  --calcite-color-border-input: #949494;
50
50
  --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
51
51
  --calcite-color-border-white: #ffffff;
@@ -33,6 +33,18 @@
33
33
  --calcite-font-size-lg: 18px;
34
34
  --calcite-font-size-xl: 20px;
35
35
  --calcite-font-size-xxl: 24px;
36
+ --calcite-font-size-relative-xs: 0.625rem;
37
+ --calcite-font-size-relative-sm: 0.75rem;
38
+ --calcite-font-size-relative-base: 0.875rem;
39
+ --calcite-font-size-relative-md: 1rem;
40
+ --calcite-font-size-relative-lg: 1.125rem;
41
+ --calcite-font-size-relative-xl: 1.25rem;
42
+ --calcite-font-size-relative-2xl: 1.625rem;
43
+ --calcite-font-size-relative-3xl: 2rem;
44
+ --calcite-font-size-relative-4xl: 2.5rem;
45
+ --calcite-font-size-relative-5xl: 3rem;
46
+ --calcite-font-size-relative-6xl: 3.5rem;
47
+ --calcite-font-size-relative-7xl: 4rem;
36
48
  --calcite-font-style-emphasis: italic; /** used in ratings */
37
49
  --calcite-font-line-height-fixed-sm: 12px;
38
50
  --calcite-font-line-height-fixed-base: 16px;
@@ -50,6 +62,18 @@
50
62
  --calcite-font-line-height-relative-normal: 1.5; /** 1.5 */
51
63
  --calcite-font-line-height-relative-relaxed: 1.625; /** 1.625 */
52
64
  --calcite-font-line-height-relative-loose: 2; /** 2 */
65
+ --calcite-font-line-height-xs: 0.75rem;
66
+ --calcite-font-line-height-sm: 1rem;
67
+ --calcite-font-line-height-base: 1rem;
68
+ --calcite-font-line-height-md: 1.25rem;
69
+ --calcite-font-line-height-lg: 1.5rem;
70
+ --calcite-font-line-height-xl: 1.5rem;
71
+ --calcite-font-line-height-2xl: 2rem;
72
+ --calcite-font-line-height-3xl: 2.5rem;
73
+ --calcite-font-line-height-4xl: 3rem;
74
+ --calcite-font-line-height-5xl: 4rem;
75
+ --calcite-font-line-height-6xl: 4rem;
76
+ --calcite-font-line-height-7xl: 5rem;
53
77
  --calcite-font-letter-spacing-tight: -0.4px; /** Deprecated */
54
78
  --calcite-font-letter-spacing-normal: 0; /** Deprecated */
55
79
  --calcite-font-letter-spacing-wide: 0.4px; /** Deprecated */
@@ -94,19 +118,32 @@
94
118
  --calcite-spacing-fixed-xl: 16px; /** deprecated */
95
119
  --calcite-spacing-fixed-xxl: 20px; /** deprecated */
96
120
  --calcite-spacing-fixed-xxxl: 32px; /** deprecated */
97
- --calcite-spacing-none: 0;
98
- --calcite-spacing-px: 1px;
99
- --calcite-spacing-base: 2px;
100
- --calcite-spacing-xxs: 0.25rem;
101
- --calcite-spacing-xs: 0.375rem;
102
- --calcite-spacing-sm: 0.5rem;
103
- --calcite-spacing-sm-plus: 0.625rem;
104
- --calcite-spacing-md: 0.75rem;
105
- --calcite-spacing-md-plus: 0.875rem;
106
- --calcite-spacing-lg: 1rem;
107
- --calcite-spacing-xl: 1.25rem;
108
- --calcite-spacing-xxl: 1.5rem;
109
- --calcite-spacing-xxxl: 2rem;
121
+ --calcite-spacing-none: 0; /** deprecated, use `--calcite-space-none` instead */
122
+ --calcite-spacing-px: 1px; /** deprecated, use `--calcite-space-px` instead */
123
+ --calcite-spacing-base: 2px; /** deprecated, use `--calcite-space-base` instead */
124
+ --calcite-spacing-xxs: 0.25rem; /** deprecated, use `--calcite-space-2xs` instead */
125
+ --calcite-spacing-xs: 0.375rem; /** deprecated, use `--calcite-space-xs` instead */
126
+ --calcite-spacing-sm: 0.5rem; /** deprecated, use `--calcite-space-sm` instead */
127
+ --calcite-spacing-sm-plus: 0.625rem; /** deprecated, use `--calcite-space-sm-plus` instead */
128
+ --calcite-spacing-md: 0.75rem; /** deprecated, use `--calcite-space-md` instead */
129
+ --calcite-spacing-md-plus: 0.875rem; /** deprecated, use `--calcite-space-md-plus` instead */
130
+ --calcite-spacing-lg: 1rem; /** deprecated, use `--calcite-space-lg` instead */
131
+ --calcite-spacing-xl: 1.25rem; /** deprecated, use `--calcite-space-xl` instead */
132
+ --calcite-spacing-xxl: 1.5rem; /** deprecated, use `--calcite-space-2xl` instead */
133
+ --calcite-spacing-xxxl: 2rem; /** deprecated, use `--calcite-space-3xl` instead */
134
+ --calcite-space-none: 0;
135
+ --calcite-space-px: 1px;
136
+ --calcite-space-base: 2px;
137
+ --calcite-space-2xs: 0.25rem;
138
+ --calcite-space-xs: 0.375rem;
139
+ --calcite-space-sm: 0.5rem;
140
+ --calcite-space-sm-plus: 0.625rem;
141
+ --calcite-space-md: 0.75rem;
142
+ --calcite-space-md-plus: 0.875rem;
143
+ --calcite-space-lg: 1rem;
144
+ --calcite-space-xl: 1.25rem;
145
+ --calcite-space-2xl: 1.5rem;
146
+ --calcite-space-3xl: 2rem;
110
147
  --calcite-z-index-deep: -999999;
111
148
  --calcite-z-index: 1;
112
149
  --calcite-z-index-sticky: 300;