@esri/calcite-design-tokens 3.1.0-next.6 → 3.1.0-next.8

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.
@@ -6,65 +6,53 @@
6
6
  export const calciteBorderWidthNone: string;
7
7
  export const calciteBorderWidthSm: string;
8
8
  export const calciteBorderWidthMd: string;
9
- export const calciteBorderWidthLg: string; /** Small handheld devices and mini-windows */
10
- export const calciteContainerSizeHeightXxs: {
11
- min: string;
12
- max: string;
13
- }; /** Handheld devices */
14
- export const calciteContainerSizeHeightXs: {
15
- min: string;
16
- max: string;
17
- }; /** Small tablets */
18
- export const calciteContainerSizeHeightSm: {
19
- min: string;
20
- max: string;
21
- }; /** Small laptops */
22
- export const calciteContainerSizeHeightMd: {
23
- min: string;
24
- max: string;
25
- }; /** Large laptops and desktop computers */
26
- export const calciteContainerSizeHeightLg: {
27
- min: string;
28
- max: string;
29
- }; /** Projectors and televisions */
30
- export const calciteContainerSizeHeightXl: {
31
- min: string;
32
- }; /** Small handheld devices and mini-windows */
33
- export const calciteContainerSizeWidthXxs: {
34
- min: string;
35
- max: string;
36
- }; /** Handheld devices */
37
- export const calciteContainerSizeWidthXs: {
38
- min: string;
39
- max: string;
40
- }; /** Small tablets */
41
- export const calciteContainerSizeWidthSm: {
42
- min: string;
43
- max: string;
44
- }; /** Small laptops */
45
- export const calciteContainerSizeWidthMd: {
46
- min: string;
47
- max: string;
48
- }; /** Large laptops and desktop computers */
49
- export const calciteContainerSizeWidthLg: {
50
- min: string;
51
- max: string;
52
- }; /** Projectors and televisions */
9
+ export const calciteBorderWidthLg: string;
10
+ /** Small handheld devices and mini-windows */
11
+ export const calciteContainerSizeHeightXxs: { min: string; max: string };
12
+ /** Handheld devices */
13
+ export const calciteContainerSizeHeightXs: { min: string; max: string };
14
+ /** Small tablets */
15
+ export const calciteContainerSizeHeightSm: { min: string; max: string };
16
+ /** Small laptops */
17
+ export const calciteContainerSizeHeightMd: { min: string; max: string };
18
+ /** Large laptops and desktop computers */
19
+ export const calciteContainerSizeHeightLg: { min: string; max: string };
20
+ /** Projectors and televisions */
21
+ export const calciteContainerSizeHeightXl: { min: string };
22
+ /** Small handheld devices and mini-windows */
23
+ export const calciteContainerSizeWidthXxs: { min: string; max: string };
24
+ /** Handheld devices */
25
+ export const calciteContainerSizeWidthXs: { min: string; max: string };
26
+ /** Small tablets */
27
+ export const calciteContainerSizeWidthSm: { min: string; max: string };
28
+ /** Small laptops */
29
+ export const calciteContainerSizeWidthMd: { min: string; max: string };
30
+ /** Large laptops and desktop computers */
31
+ export const calciteContainerSizeWidthLg: { min: string; max: string };
32
+ /** Projectors and televisions */
53
33
  export const calciteContainerSizeWidthXl: { min: string };
54
34
  export const calciteContainerSizeMargin: string;
55
- export const calciteContainerSizeGutter: string; /** for fluid grid widths */
56
- export const calciteContainerSizeContentFluid: string; /** only for lg breakpoint fixed grid width */
35
+ export const calciteContainerSizeGutter: string;
36
+ /** for fluid grid widths */
37
+ export const calciteContainerSizeContentFluid: string;
38
+ /** only for lg breakpoint fixed grid width */
57
39
  export const calciteContainerSizeContentFixed: string;
58
- export const calciteCornerRadius: string; /** deprecated, use --calcite-conder-radius-none instead */
40
+ export const calciteCornerRadius: string;
41
+ /** deprecated, use --calcite-conder-radius-none instead */
59
42
  export const calciteCornerRadiusSharp: string;
60
43
  export const calciteCornerRadiusNone: string;
61
44
  export const calciteCornerRadiusXs: string;
62
- export const calciteCornerRadiusSm: string; /** deprecated, use --calcite-corner-radius-sm instead */
45
+ export const calciteCornerRadiusSm: string;
46
+ /** deprecated, use --calcite-corner-radius-sm instead */
63
47
  export const calciteCornerRadiusRound: string;
64
- export const calciteCornerRadiusPill: string; /** Primary font with fallbacks */
65
- export const calciteFontFamily: string[]; /** Font family for code with fallbacks */
66
- export const calciteFontFamilyCode: string[]; /** For Avenir Next World (secondary font family) */
67
- export const calciteFontWeightLight: string; /** For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular" */
48
+ export const calciteCornerRadiusPill: string;
49
+ /** Primary font with fallbacks */
50
+ export const calciteFontFamily: string[];
51
+ /** Font family for code with fallbacks */
52
+ export const calciteFontFamilyCode: string[];
53
+ /** For Avenir Next World (secondary font family) */
54
+ export const calciteFontWeightLight: string;
55
+ /** For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular" */
68
56
  export const calciteFontWeightNormal: string;
69
57
  export const calciteFontWeightRegular: string;
70
58
  export const calciteFontWeightMedium: string;
@@ -76,27 +64,44 @@ export const calciteFontSize: string;
76
64
  export const calciteFontSizeMd: string;
77
65
  export const calciteFontSizeLg: string;
78
66
  export const calciteFontSizeXl: string;
79
- export const calciteFontSizeXxl: string; /** used in ratings */
67
+ export const calciteFontSizeXxl: string;
68
+ /** used in ratings */
80
69
  export const calciteFontStyleEmphasis: string;
81
70
  export const calciteFontLineHeightFixedSm: string;
82
71
  export const calciteFontLineHeightFixedBase: string;
83
72
  export const calciteFontLineHeightFixedLg: string;
84
- export const calciteFontLineHeightFixedXl: string; /** 1 */
85
- export const calciteFontLineHeightRelative: string; /** 1.25 */
86
- export const calciteFontLineHeightRelativeTight: string; /** 1.375 */
87
- export const calciteFontLineHeightRelativeSnug: string; /** 1.5 */
88
- export const calciteFontLineHeightRelativeNormal: string; /** 1.625 */
89
- export const calciteFontLineHeightRelativeRelaxed: string; /** 2 */
90
- export const calciteFontLineHeightRelativeLoose: string; /** Deprecated */
91
- export const calciteFontLetterSpacingTight: string; /** Deprecated */
92
- export const calciteFontLetterSpacingNormal: string; /** Deprecated */
93
- export const calciteFontLetterSpacingWide: string; /** Deprecated */
94
- export const calciteFontParagraphSpacingNormal: string; /** Deprecated */
95
- export const calciteFontTextDecorationNone: string; /** Deprecated */
96
- export const calciteFontTextDecorationUnderline: string; /** Deprecated */
97
- export const calciteFontTextCaseNone: string; /** Deprecated */
98
- export const calciteFontTextCaseUppercase: string; /** Deprecated */
99
- export const calciteFontTextCaseLowercase: string; /** Deprecated */
73
+ export const calciteFontLineHeightFixedXl: string;
74
+ /** 1 */
75
+ export const calciteFontLineHeightRelative: string;
76
+ /** 1.25 */
77
+ export const calciteFontLineHeightRelativeTight: string;
78
+ /** 1.375 */
79
+ export const calciteFontLineHeightRelativeSnug: string;
80
+ /** 1.5 */
81
+ export const calciteFontLineHeightRelativeNormal: string;
82
+ /** 1.625 */
83
+ export const calciteFontLineHeightRelativeRelaxed: string;
84
+ /** 2 */
85
+ export const calciteFontLineHeightRelativeLoose: string;
86
+ /** Deprecated */
87
+ export const calciteFontLetterSpacingTight: string;
88
+ /** Deprecated */
89
+ export const calciteFontLetterSpacingNormal: string;
90
+ /** Deprecated */
91
+ export const calciteFontLetterSpacingWide: string;
92
+ /** Deprecated */
93
+ export const calciteFontParagraphSpacingNormal: string;
94
+ /** Deprecated */
95
+ export const calciteFontTextDecorationNone: string;
96
+ /** Deprecated */
97
+ export const calciteFontTextDecorationUnderline: string;
98
+ /** Deprecated */
99
+ export const calciteFontTextCaseNone: string;
100
+ /** Deprecated */
101
+ export const calciteFontTextCaseUppercase: string;
102
+ /** Deprecated */
103
+ export const calciteFontTextCaseLowercase: string;
104
+ /** Deprecated */
100
105
  export const calciteFontTextCaseCapitalize: string;
101
106
  export const calciteOpacityLight: string;
102
107
  export const calciteOpacityHalf: string;
@@ -123,17 +128,28 @@ export const calciteShadowMd: {
123
128
  color: string;
124
129
  x: string;
125
130
  y: string;
126
- }[]; /** deprecated */
127
- export const calciteSizeFixedXxxs: string; /** deprecated */
128
- export const calciteSizeFixedXxs: string; /** deprecated */
129
- export const calciteSizeFixedXs: string; /** deprecated */
130
- export const calciteSizeFixedSm: string; /** deprecated */
131
- export const calciteSizeFixedSmPlus: string; /** deprecated */
132
- export const calciteSizeFixedMd: string; /** deprecated */
133
- export const calciteSizeFixedMdPlus: string; /** deprecated */
134
- export const calciteSizeFixedLg: string; /** deprecated */
135
- export const calciteSizeFixedXl: string; /** deprecated */
136
- export const calciteSizeFixedXxl: string; /** deprecated */
131
+ }[];
132
+ /** deprecated */
133
+ export const calciteSizeFixedXxxs: string;
134
+ /** deprecated */
135
+ export const calciteSizeFixedXxs: string;
136
+ /** deprecated */
137
+ export const calciteSizeFixedXs: string;
138
+ /** deprecated */
139
+ export const calciteSizeFixedSm: string;
140
+ /** deprecated */
141
+ export const calciteSizeFixedSmPlus: string;
142
+ /** deprecated */
143
+ export const calciteSizeFixedMd: string;
144
+ /** deprecated */
145
+ export const calciteSizeFixedMdPlus: string;
146
+ /** deprecated */
147
+ export const calciteSizeFixedLg: string;
148
+ /** deprecated */
149
+ export const calciteSizeFixedXl: string;
150
+ /** deprecated */
151
+ export const calciteSizeFixedXxl: string;
152
+ /** deprecated */
137
153
  export const calciteSizeFixedXxxl: string;
138
154
  export const calciteSizePx: string;
139
155
  export const calciteSizeXxxs: string;
@@ -144,14 +160,22 @@ export const calciteSizeMd: string;
144
160
  export const calciteSizeLg: string;
145
161
  export const calciteSizeXl: string;
146
162
  export const calciteSizeXxl: string;
147
- export const calciteSizeXxxl: string; /** deprecated */
148
- export const calciteSpacingFixedXxs: string; /** deprecated */
149
- export const calciteSpacingFixedXs: string; /** deprecated */
150
- export const calciteSpacingFixedSm: string; /** deprecated */
151
- export const calciteSpacingFixedMd: string; /** deprecated */
152
- export const calciteSpacingFixedLg: string; /** deprecated */
153
- export const calciteSpacingFixedXl: string; /** deprecated */
154
- export const calciteSpacingFixedXxl: string; /** deprecated */
163
+ export const calciteSizeXxxl: string;
164
+ /** deprecated */
165
+ export const calciteSpacingFixedXxs: string;
166
+ /** deprecated */
167
+ export const calciteSpacingFixedXs: string;
168
+ /** deprecated */
169
+ export const calciteSpacingFixedSm: string;
170
+ /** deprecated */
171
+ export const calciteSpacingFixedMd: string;
172
+ /** deprecated */
173
+ export const calciteSpacingFixedLg: string;
174
+ /** deprecated */
175
+ export const calciteSpacingFixedXl: string;
176
+ /** deprecated */
177
+ export const calciteSpacingFixedXxl: string;
178
+ /** deprecated */
155
179
  export const calciteSpacingFixedXxxl: string;
156
180
  export const calciteSpacingNone: string;
157
181
  export const calciteSpacingPx: string;
package/dist/js/dark.d.ts CHANGED
@@ -38,6 +38,7 @@ export const calciteColorInversePress: string;
38
38
  export const calciteColorText1: string;
39
39
  export const calciteColorText2: string;
40
40
  export const calciteColorText3: string;
41
+ export const calciteColorTextHighlight: string;
41
42
  export const calciteColorTextInverse: string;
42
43
  export const calciteColorTextLink: string;
43
44
  export const calciteColorBorder1: string;
package/dist/js/dark.js CHANGED
@@ -1241,6 +1241,40 @@ export default {
1241
1241
  path: ["semantic", "color", "text", "3"],
1242
1242
  key: "{semantic.color.text.3}",
1243
1243
  },
1244
+ highlight: {
1245
+ value: "#c7eaff",
1246
+ type: "color",
1247
+ attributes: {
1248
+ category: "color",
1249
+ type: "color",
1250
+ item: "text",
1251
+ subitem: "highlight",
1252
+ names: {
1253
+ scss: "$calcite-color-text-highlight",
1254
+ css: "var(--calcite-color-text-highlight)",
1255
+ js: "semantic.color.text.highlight",
1256
+ docs: "semantic.color.text.highlight",
1257
+ es6: "calciteColorTextHighlight",
1258
+ },
1259
+ "calcite-schema": {
1260
+ system: "calcite",
1261
+ tier: "color",
1262
+ type: "color",
1263
+ },
1264
+ },
1265
+ filePath: "src/tokens/semantic/color/dark.json",
1266
+ isSource: true,
1267
+ original: {
1268
+ value: "{core.color.high-saturation.blue.h-bb-010}",
1269
+ type: "color",
1270
+ attributes: {
1271
+ category: "color",
1272
+ },
1273
+ },
1274
+ name: "calciteColorTextHighlight",
1275
+ path: ["semantic", "color", "text", "highlight"],
1276
+ key: "{semantic.color.text.highlight}",
1277
+ },
1244
1278
  inverse: {
1245
1279
  value: "#141414",
1246
1280
  type: "color",
@@ -81,6 +81,7 @@ declare const tokens: {
81
81
  "1": DesignToken;
82
82
  "2": DesignToken;
83
83
  "3": DesignToken;
84
+ highlight: DesignToken;
84
85
  inverse: DesignToken;
85
86
  link: DesignToken;
86
87
  };
package/dist/js/global.js CHANGED
@@ -1347,6 +1347,43 @@ export default {
1347
1347
  path: ["semantic", "color", "text", "3"],
1348
1348
  key: "{semantic.color.text.3}",
1349
1349
  },
1350
+ highlight: {
1351
+ value: {
1352
+ light: "#004874",
1353
+ dark: "#c7eaff",
1354
+ },
1355
+ type: "color",
1356
+ attributes: {
1357
+ category: "color",
1358
+ type: "color",
1359
+ item: "text",
1360
+ subitem: "highlight",
1361
+ names: {
1362
+ scss: "$calcite-color-text-highlight",
1363
+ css: "var(--calcite-color-text-highlight)",
1364
+ js: "semantic.color.text.highlight",
1365
+ docs: "semantic.color.text.highlight",
1366
+ es6: "calciteColorTextHighlight",
1367
+ },
1368
+ "calcite-schema": {
1369
+ system: "calcite",
1370
+ tier: "color",
1371
+ type: "color",
1372
+ },
1373
+ },
1374
+ filePath: "src/tokens/semantic/color/light.json",
1375
+ isSource: false,
1376
+ original: {
1377
+ value: "{core.color.high-saturation.blue.h-bb-080}",
1378
+ type: "color",
1379
+ attributes: {
1380
+ category: "color",
1381
+ },
1382
+ },
1383
+ name: "Color Text Highlight",
1384
+ path: ["semantic", "color", "text", "highlight"],
1385
+ key: "{semantic.color.text.highlight}",
1386
+ },
1350
1387
  inverse: {
1351
1388
  value: {
1352
1389
  light: "#ffffff",
@@ -2605,7 +2642,7 @@ export default {
2605
2642
  filePath: "src/tokens/semantic/corner.json",
2606
2643
  isSource: true,
2607
2644
  original: {
2608
- value: "{semantic.corner.radius.sharp}",
2645
+ value: "{semantic.corner.radius.none}",
2609
2646
  type: "dimension",
2610
2647
  attributes: {
2611
2648
  category: "corner",
@@ -38,6 +38,7 @@ export const calciteColorInversePress: string;
38
38
  export const calciteColorText1: string;
39
39
  export const calciteColorText2: string;
40
40
  export const calciteColorText3: string;
41
+ export const calciteColorTextHighlight: string;
41
42
  export const calciteColorTextInverse: string;
42
43
  export const calciteColorTextLink: string;
43
44
  export const calciteColorBorder1: string;
package/dist/js/light.js CHANGED
@@ -1244,6 +1244,40 @@ export default {
1244
1244
  path: ["semantic", "color", "text", "3"],
1245
1245
  key: "{semantic.color.text.3}",
1246
1246
  },
1247
+ highlight: {
1248
+ value: "#004874",
1249
+ type: "color",
1250
+ attributes: {
1251
+ category: "color",
1252
+ type: "color",
1253
+ item: "text",
1254
+ subitem: "highlight",
1255
+ names: {
1256
+ scss: "$calcite-color-text-highlight",
1257
+ css: "var(--calcite-color-text-highlight)",
1258
+ js: "semantic.color.text.highlight",
1259
+ docs: "semantic.color.text.highlight",
1260
+ es6: "calciteColorTextHighlight",
1261
+ },
1262
+ "calcite-schema": {
1263
+ system: "calcite",
1264
+ tier: "color",
1265
+ type: "color",
1266
+ },
1267
+ },
1268
+ filePath: "src/tokens/semantic/color/light.json",
1269
+ isSource: true,
1270
+ original: {
1271
+ value: "{core.color.high-saturation.blue.h-bb-080}",
1272
+ type: "color",
1273
+ attributes: {
1274
+ category: "color",
1275
+ },
1276
+ },
1277
+ name: "calciteColorTextHighlight",
1278
+ path: ["semantic", "color", "text", "highlight"],
1279
+ key: "{semantic.color.text.highlight}",
1280
+ },
1247
1281
  inverse: {
1248
1282
  value: "#ffffff",
1249
1283
  type: "color",
@@ -963,7 +963,7 @@ export default {
963
963
  filePath: "src/tokens/semantic/corner.json",
964
964
  isSource: true,
965
965
  original: {
966
- value: "{semantic.corner.radius.sharp}",
966
+ value: "{semantic.corner.radius.none}",
967
967
  type: "dimension",
968
968
  attributes: {
969
969
  category: "corner",
@@ -37,6 +37,7 @@ $calcite-color-inverse-press: #f2f2f2;
37
37
  $calcite-color-text-1: #ffffff;
38
38
  $calcite-color-text-2: #bfbfbf;
39
39
  $calcite-color-text-3: #9e9e9e;
40
+ $calcite-color-text-highlight: #c7eaff;
40
41
  $calcite-color-text-inverse: #141414;
41
42
  $calcite-color-text-link: #00a0ff;
42
43
  $calcite-color-border-1: #545454;
@@ -112,6 +112,6 @@ $calcite-z-index-overlay: 700;
112
112
  $calcite-z-index-modal: 800;
113
113
  $calcite-z-index-popup: 900;
114
114
  $calcite-z-index-tooltip: 901;
115
- $calcite-corner-radius: $calcite-corner-radius-sharp;
115
+ $calcite-corner-radius: $calcite-corner-radius-none;
116
116
  $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
117
117
  $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
@@ -15,6 +15,7 @@
15
15
  --calcite-color-border-1: #c9c9c9;
16
16
  --calcite-color-text-link: #00619b;
17
17
  --calcite-color-text-inverse: #ffffff;
18
+ --calcite-color-text-highlight: #004874;
18
19
  --calcite-color-text-3: #6b6b6b;
19
20
  --calcite-color-text-2: #4a4a4a;
20
21
  --calcite-color-text-1: #141414;
@@ -60,6 +61,7 @@
60
61
  --calcite-color-border-1: #545454;
61
62
  --calcite-color-text-link: #00a0ff;
62
63
  --calcite-color-text-inverse: #141414;
64
+ --calcite-color-text-highlight: #c7eaff;
63
65
  --calcite-color-text-3: #9e9e9e;
64
66
  --calcite-color-text-2: #bfbfbf;
65
67
  --calcite-color-text-1: #ffffff;
@@ -37,6 +37,7 @@ $calcite-color-inverse-press: #212121;
37
37
  $calcite-color-text-1: #141414;
38
38
  $calcite-color-text-2: #4a4a4a;
39
39
  $calcite-color-text-3: #6b6b6b;
40
+ $calcite-color-text-highlight: #004874;
40
41
  $calcite-color-text-inverse: #ffffff;
41
42
  $calcite-color-text-link: #00619b;
42
43
  $calcite-color-border-1: #c9c9c9;
@@ -132,6 +132,6 @@ $calcite-z-index-overlay: 700;
132
132
  $calcite-z-index-modal: 800;
133
133
  $calcite-z-index-popup: 900;
134
134
  $calcite-z-index-tooltip: 901;
135
- $calcite-corner-radius: $calcite-corner-radius-sharp;
135
+ $calcite-corner-radius: $calcite-corner-radius-none;
136
136
  $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
137
137
  $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "3.1.0-next.6",
3
+ "version": "3.1.0-next.8",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -45,5 +45,5 @@
45
45
  "devDependencies": {
46
46
  "vitest": "2.1.9"
47
47
  },
48
- "gitHead": "aa70ba6158402ccedad58815ba8eea56b4c776aa"
48
+ "gitHead": "85c496902fcecaf6e09b7d21c4665b418d61789e"
49
49
  }