@esri/calcite-design-tokens 3.2.0-next.0 → 3.2.0-next.1

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 (23) hide show
  1. package/dist/css/component.css +11 -0
  2. package/dist/css/dark.css +1 -0
  3. package/dist/css/light.css +1 -0
  4. package/dist/docs/core.json +1 -1
  5. package/dist/docs/dark.json +29 -1
  6. package/dist/docs/global.json +29 -1
  7. package/dist/docs/light.json +29 -1
  8. package/dist/docs/semantic.json +1 -1
  9. package/dist/es6/dark.d.ts +1 -0
  10. package/dist/es6/dark.js +1 -0
  11. package/dist/es6/global.d.ts +1 -0
  12. package/dist/es6/global.js +1 -0
  13. package/dist/es6/light.d.ts +1 -0
  14. package/dist/es6/light.js +1 -0
  15. package/dist/js/dark.d.ts +1 -0
  16. package/dist/js/dark.js +39 -0
  17. package/dist/js/global.d.ts +3 -0
  18. package/dist/js/global.js +42 -0
  19. package/dist/js/light.d.ts +1 -0
  20. package/dist/js/light.js +39 -0
  21. package/dist/scss/dark.scss +1 -0
  22. package/dist/scss/light.scss +1 -0
  23. package/package.json +2 -2
package/dist/css/component.css ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+
6
+ :host {
7
+ --calcite-internal-color-focus: var(
8
+ --calcite-color-focus,
9
+ var(--calcite-ui-focus-color, var(--calcite-color-brand))
10
+ );
11
+ }
package/dist/css/dark.css CHANGED
@@ -49,4 +49,5 @@
49
49
  --calcite-color-border-input: #757575;
50
50
  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
51
51
  --calcite-color-border-white: #f7f7f7;
52
+ --calcite-color-focus: var(--calcite-color-brand);
52
53
  }
package/dist/css/light.css CHANGED
@@ -49,4 +49,5 @@
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;
52
+ --calcite-color-focus: var(--calcite-color-brand);
52
53
  }
package/dist/docs/core.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1749583596348,
2
+ "timestamp": 1750192331476,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{core.color.neutral.blk-000}",
package/dist/docs/dark.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1749583594506,
2
+ "timestamp": 1750192329509,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{semantic.color.background.default}",
@@ -1247,6 +1247,34 @@
1247
1247
  "isSource": true,
1248
1248
  "name": "Color Border White",
1249
1249
  "path": ["semantic", "color", "border", "white"]
1250
+ },
1251
+ {
1252
+ "key": "{semantic.color.focus.default}",
1253
+ "value": "#009af2",
1254
+ "type": "color",
1255
+ "attributes": {
1256
+ "category": "color",
1257
+ "scope": "component",
1258
+ "type": "color",
1259
+ "item": "focus",
1260
+ "subitem": "default",
1261
+ "names": {
1262
+ "scss": "$calcite-color-focus",
1263
+ "css": "var(--calcite-color-focus)",
1264
+ "js": "semantic.color.focus.default",
1265
+ "docs": "semantic.color.focus.default",
1266
+ "es6": "calciteColorFocus"
1267
+ },
1268
+ "calcite-schema": {
1269
+ "system": "calcite",
1270
+ "tier": "color",
1271
+ "type": "color"
1272
+ }
1273
+ },
1274
+ "filePath": "src/tokens/semantic/color/dark.json",
1275
+ "isSource": true,
1276
+ "name": "Color Focus",
1277
+ "path": ["semantic", "color", "focus", "default"]
1250
1278
  }
1251
1279
  ]
1252
1280
  }
package/dist/docs/global.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1749583596093,
2
+ "timestamp": 1750192331219,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{semantic.color.background.default}",
@@ -1246,6 +1246,34 @@
1246
1246
  "name": "Color Border White",
1247
1247
  "path": ["semantic", "color", "border", "white"]
1248
1248
  },
1249
+ {
1250
+ "key": "{semantic.color.focus.default}",
1251
+ "value": "{\"light\":\"#007ac2\",\"dark\":\"#009af2\"}",
1252
+ "type": "color",
1253
+ "attributes": {
1254
+ "category": "color",
1255
+ "scope": "component",
1256
+ "type": "color",
1257
+ "item": "focus",
1258
+ "subitem": "default",
1259
+ "names": {
1260
+ "scss": "$calcite-color-focus",
1261
+ "css": "var(--calcite-color-focus)",
1262
+ "js": "semantic.color.focus.default",
1263
+ "docs": "semantic.color.focus.default",
1264
+ "es6": "calciteColorFocus"
1265
+ },
1266
+ "calcite-schema": {
1267
+ "system": "calcite",
1268
+ "tier": "color",
1269
+ "type": "color"
1270
+ }
1271
+ },
1272
+ "filePath": "src/tokens/semantic/color/light.json",
1273
+ "isSource": false,
1274
+ "name": "Color Focus",
1275
+ "path": ["semantic", "color", "focus", "default"]
1276
+ },
1249
1277
  {
1250
1278
  "key": "{semantic.border.width.none}",
1251
1279
  "value": "0",
package/dist/docs/light.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1749583595312,
2
+ "timestamp": 1750192330375,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{semantic.color.background.default}",
@@ -1245,6 +1245,34 @@
1245
1245
  "isSource": true,
1246
1246
  "name": "Color Border White",
1247
1247
  "path": ["semantic", "color", "border", "white"]
1248
+ },
1249
+ {
1250
+ "key": "{semantic.color.focus.default}",
1251
+ "value": "#007ac2",
1252
+ "type": "color",
1253
+ "attributes": {
1254
+ "category": "color",
1255
+ "scope": "component",
1256
+ "type": "color",
1257
+ "item": "focus",
1258
+ "subitem": "default",
1259
+ "names": {
1260
+ "scss": "$calcite-color-focus",
1261
+ "css": "var(--calcite-color-focus)",
1262
+ "js": "semantic.color.focus.default",
1263
+ "docs": "semantic.color.focus.default",
1264
+ "es6": "calciteColorFocus"
1265
+ },
1266
+ "calcite-schema": {
1267
+ "system": "calcite",
1268
+ "tier": "color",
1269
+ "type": "color"
1270
+ }
1271
+ },
1272
+ "filePath": "src/tokens/semantic/color/light.json",
1273
+ "isSource": true,
1274
+ "name": "Color Focus",
1275
+ "path": ["semantic", "color", "focus", "default"]
1248
1276
  }
1249
1277
  ]
1250
1278
  }
package/dist/docs/semantic.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1749583596229,
2
+ "timestamp": 1750192331387,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{semantic.border.width.none}",
package/dist/es6/dark.d.ts CHANGED
@@ -49,3 +49,4 @@ export const calciteColorBorder3: string;
49
49
  export const calciteColorBorderInput: string;
50
50
  export const calciteColorBorderGhost: string;
51
51
  export const calciteColorBorderWhite: string;
52
+ export const calciteColorFocus: string;
package/dist/es6/dark.js CHANGED
@@ -48,3 +48,4 @@ export const calciteColorBorder3 = "#404040";
48
48
  export const calciteColorBorderInput = "#757575";
49
49
  export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
50
50
  export const calciteColorBorderWhite = "#f7f7f7";
51
+ export const calciteColorFocus = "#009af2";
package/dist/es6/global.d.ts CHANGED
@@ -56,6 +56,7 @@ export const calciteColorBorder3: { light: string; dark: string };
56
56
  export const calciteColorBorderInput: { light: string; dark: string };
57
57
  export const calciteColorBorderGhost: { light: string; dark: string };
58
58
  export const calciteColorBorderWhite: { light: string; dark: string };
59
+ export const calciteColorFocus: { light: string; dark: string };
59
60
  export const calciteBorderWidthNone: string;
60
61
  export const calciteBorderWidthSm: string;
61
62
  export const calciteBorderWidthMd: string;
package/dist/es6/global.js CHANGED
@@ -106,6 +106,7 @@ export const calciteColorBorderGhost = {
106
106
  dark: "rgba(117, 117, 117, 0.3)",
107
107
  };
108
108
  export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
109
+ export const calciteColorFocus = { light: "#007ac2", dark: "#009af2" };
109
110
  export const calciteBorderWidthNone = "0";
110
111
  export const calciteBorderWidthSm = "1px";
111
112
  export const calciteBorderWidthMd = "2px";
package/dist/es6/light.d.ts CHANGED
@@ -49,3 +49,4 @@ export const calciteColorBorder3: string;
49
49
  export const calciteColorBorderInput: string;
50
50
  export const calciteColorBorderGhost: string;
51
51
  export const calciteColorBorderWhite: string;
52
+ export const calciteColorFocus: string;
package/dist/es6/light.js CHANGED
@@ -48,3 +48,4 @@ export const calciteColorBorder3 = "#dedede";
48
48
  export const calciteColorBorderInput = "#949494";
49
49
  export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
50
50
  export const calciteColorBorderWhite = "#ffffff";
51
+ export const calciteColorFocus = "#007ac2";
package/dist/js/dark.d.ts CHANGED
@@ -49,3 +49,4 @@ export const calciteColorBorder3: string;
49
49
  export const calciteColorBorderInput: string;
50
50
  export const calciteColorBorderGhost: string;
51
51
  export const calciteColorBorderWhite: string;
52
+ export const calciteColorFocus: string;
package/dist/js/dark.js CHANGED
@@ -1645,6 +1645,45 @@ export default {
1645
1645
  path: ["semantic", "color", "border", "white"],
1646
1646
  },
1647
1647
  },
1648
+ focus: {
1649
+ default: {
1650
+ key: "{semantic.color.focus.default}",
1651
+ value: "#009af2",
1652
+ type: "color",
1653
+ attributes: {
1654
+ category: "color",
1655
+ scope: "component",
1656
+ type: "color",
1657
+ item: "focus",
1658
+ subitem: "default",
1659
+ names: {
1660
+ scss: "$calcite-color-focus",
1661
+ css: "var(--calcite-color-focus)",
1662
+ js: "semantic.color.focus.default",
1663
+ docs: "semantic.color.focus.default",
1664
+ es6: "calciteColorFocus",
1665
+ },
1666
+ "calcite-schema": {
1667
+ system: "calcite",
1668
+ tier: "color",
1669
+ type: "color",
1670
+ },
1671
+ },
1672
+ filePath: "src/tokens/semantic/color/dark.json",
1673
+ isSource: true,
1674
+ original: {
1675
+ value: "{semantic.color.brand.default.default}",
1676
+ type: "color",
1677
+ attributes: {
1678
+ category: "color",
1679
+ scope: "component",
1680
+ },
1681
+ key: "{semantic.color.focus.default}",
1682
+ },
1683
+ name: "calciteColorFocus",
1684
+ path: ["semantic", "color", "focus", "default"],
1685
+ },
1686
+ },
1648
1687
  },
1649
1688
  },
1650
1689
  };
package/dist/js/global.d.ts CHANGED
@@ -94,6 +94,9 @@ declare const tokens: {
94
94
  ghost: DesignToken;
95
95
  white: DesignToken;
96
96
  };
97
+ focus: {
98
+ default: DesignToken;
99
+ };
97
100
  };
98
101
  border: {
99
102
  width: {
package/dist/js/global.js CHANGED
@@ -1781,6 +1781,48 @@ export default {
1781
1781
  path: ["semantic", "color", "border", "white"],
1782
1782
  },
1783
1783
  },
1784
+ focus: {
1785
+ default: {
1786
+ key: "{semantic.color.focus.default}",
1787
+ value: {
1788
+ light: "#007ac2",
1789
+ dark: "#009af2",
1790
+ },
1791
+ type: "color",
1792
+ attributes: {
1793
+ category: "color",
1794
+ scope: "component",
1795
+ type: "color",
1796
+ item: "focus",
1797
+ subitem: "default",
1798
+ names: {
1799
+ scss: "$calcite-color-focus",
1800
+ css: "var(--calcite-color-focus)",
1801
+ js: "semantic.color.focus.default",
1802
+ docs: "semantic.color.focus.default",
1803
+ es6: "calciteColorFocus",
1804
+ },
1805
+ "calcite-schema": {
1806
+ system: "calcite",
1807
+ tier: "color",
1808
+ type: "color",
1809
+ },
1810
+ },
1811
+ filePath: "src/tokens/semantic/color/light.json",
1812
+ isSource: false,
1813
+ original: {
1814
+ value: "{semantic.color.brand.default.default}",
1815
+ type: "color",
1816
+ attributes: {
1817
+ category: "color",
1818
+ scope: "component",
1819
+ },
1820
+ key: "{semantic.color.focus.default}",
1821
+ },
1822
+ name: "Color Focus",
1823
+ path: ["semantic", "color", "focus", "default"],
1824
+ },
1825
+ },
1784
1826
  },
1785
1827
  border: {
1786
1828
  width: {
package/dist/js/light.d.ts CHANGED
@@ -49,3 +49,4 @@ export const calciteColorBorder3: string;
49
49
  export const calciteColorBorderInput: string;
50
50
  export const calciteColorBorderGhost: string;
51
51
  export const calciteColorBorderWhite: string;
52
+ export const calciteColorFocus: string;
package/dist/js/light.js CHANGED
@@ -1648,6 +1648,45 @@ export default {
1648
1648
  path: ["semantic", "color", "border", "white"],
1649
1649
  },
1650
1650
  },
1651
+ focus: {
1652
+ default: {
1653
+ key: "{semantic.color.focus.default}",
1654
+ value: "#007ac2",
1655
+ type: "color",
1656
+ attributes: {
1657
+ category: "color",
1658
+ scope: "component",
1659
+ type: "color",
1660
+ item: "focus",
1661
+ subitem: "default",
1662
+ names: {
1663
+ scss: "$calcite-color-focus",
1664
+ css: "var(--calcite-color-focus)",
1665
+ js: "semantic.color.focus.default",
1666
+ docs: "semantic.color.focus.default",
1667
+ es6: "calciteColorFocus",
1668
+ },
1669
+ "calcite-schema": {
1670
+ system: "calcite",
1671
+ tier: "color",
1672
+ type: "color",
1673
+ },
1674
+ },
1675
+ filePath: "src/tokens/semantic/color/light.json",
1676
+ isSource: true,
1677
+ original: {
1678
+ value: "{semantic.color.brand.default.default}",
1679
+ type: "color",
1680
+ attributes: {
1681
+ category: "color",
1682
+ scope: "component",
1683
+ },
1684
+ key: "{semantic.color.focus.default}",
1685
+ },
1686
+ name: "calciteColorFocus",
1687
+ path: ["semantic", "color", "focus", "default"],
1688
+ },
1689
+ },
1651
1690
  },
1652
1691
  },
1653
1692
  };
package/dist/scss/dark.scss CHANGED
@@ -47,3 +47,4 @@ $calcite-color-border-3: #404040;
47
47
  $calcite-color-border-input: #757575;
48
48
  $calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
49
49
  $calcite-color-border-white: #f7f7f7;
50
+ $calcite-color-focus: $calcite-color-brand;
package/dist/scss/light.scss CHANGED
@@ -47,3 +47,4 @@ $calcite-color-border-3: #dedede;
47
47
  $calcite-color-border-input: #949494;
48
48
  $calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
49
49
  $calcite-color-border-white: #ffffff;
50
+ $calcite-color-focus: $calcite-color-brand;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "3.2.0-next.0",
3
+ "version": "3.2.0-next.1",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -46,5 +46,5 @@
46
46
  "devDependencies": {
47
47
  "vitest": "3.1.4"
48
48
  },
49
- "gitHead": "286845f59ea34438157a1ece5070a4e9ced18c9f"
49
+ "gitHead": "457d8ff40fbf4e8803ea759b97cba2fac50c71bc"
50
50
  }