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

package/dist/docs/dark.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": 1744685045301,
+  "timestamp": 1745007320254,
   "tokens": [
     {
-      "value": "#353535",
+      "value": "#363636",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -83,7 +83,7 @@
       "key": "{semantic.color.foreground.1}"
     },
     {
-      "value": "#202020",
+      "value": "#212121",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -110,7 +110,7 @@
       "key": "{semantic.color.foreground.2}"
     },
     {
-      "value": "#151515",
+      "value": "#141414",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -192,7 +192,7 @@
       "key": "{semantic.color.transparent.default.default}"
     },
     {
-      "value": "rgba(255, 255, 255, 0.04)",
+      "value": "rgba(255, 255, 255, 0.12)",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -220,7 +220,7 @@
       "key": "{semantic.color.transparent.default.hover}"
     },
     {
-      "value": "rgba(255, 255, 255, 0.08)",
+      "value": "rgba(255, 255, 255, 0.16)",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -247,6 +247,62 @@
       "path": ["semantic", "color", "transparent", "default", "press"],
       "key": "{semantic.color.transparent.default.press}"
     },
+    {
+      "value": "rgba(0, 0, 0, 0.04)",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "transparent",
+        "subitem": "inverse",
+        "state": "hover",
+        "names": {
+          "scss": "$calcite-color-transparent-inverse-hover",
+          "css": "var(--calcite-color-transparent-inverse-hover)",
+          "js": "semantic.color.transparent.inverse.hover",
+          "docs": "semantic.color.transparent.inverse.hover",
+          "es6": "calciteColorTransparentInverseHover"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/dark.json",
+      "isSource": true,
+      "name": "Color Transparent Inverse Hover",
+      "path": ["semantic", "color", "transparent", "inverse", "hover"],
+      "key": "{semantic.color.transparent.inverse.hover}"
+    },
+    {
+      "value": "rgba(0, 0, 0, 0.08)",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "transparent",
+        "subitem": "inverse",
+        "state": "press",
+        "names": {
+          "scss": "$calcite-color-transparent-inverse-press",
+          "css": "var(--calcite-color-transparent-inverse-press)",
+          "js": "semantic.color.transparent.inverse.press",
+          "docs": "semantic.color.transparent.inverse.press",
+          "es6": "calciteColorTransparentInversePress"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/dark.json",
+      "isSource": true,
+      "name": "Color Transparent Inverse Press",
+      "path": ["semantic", "color", "transparent", "inverse", "press"],
+      "key": "{semantic.color.transparent.inverse.press}"
+    },
     {
       "value": "rgba(0, 0, 0, 0.85)",
       "type": "color",
@@ -751,7 +807,7 @@
       "key": "{semantic.color.status.danger.press}"
     },
     {
-      "value": "#f8f8f8",
+      "value": "#f7f7f7",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -805,7 +861,7 @@
       "key": "{semantic.color.inverse.hover}"
     },
     {
-      "value": "#f3f3f3",
+      "value": "#f2f2f2",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -886,7 +942,7 @@
       "key": "{semantic.color.text.2}"
     },
     {
-      "value": "#9f9f9f",
+      "value": "#9e9e9e",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -913,7 +969,7 @@
       "key": "{semantic.color.text.3}"
     },
     {
-      "value": "#151515",
+      "value": "#141414",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -967,7 +1023,7 @@
       "key": "{semantic.color.text.link}"
     },
     {
-      "value": "#555555",
+      "value": "#545454",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -1102,7 +1158,7 @@
       "key": "{semantic.color.border.ghost}"
     },
     {
-      "value": "#f8f8f8",
+      "value": "#f7f7f7",
       "type": "color",
       "attributes": {
         "category": "color",

package/dist/docs/global.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": 1744685049908,
+  "timestamp": 1745007323287,
   "tokens": [
     {
-      "value": "{\"light\":\"#f8f8f8\",\"dark\":\"#353535\"}",
+      "value": "{\"light\":\"#f7f7f7\",\"dark\":\"#363636\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -83,7 +83,7 @@
       "key": "{semantic.color.foreground.1}"
     },
     {
-      "value": "{\"light\":\"#f3f3f3\",\"dark\":\"#202020\"}",
+      "value": "{\"light\":\"#f2f2f2\",\"dark\":\"#212121\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -110,7 +110,7 @@
       "key": "{semantic.color.foreground.2}"
     },
     {
-      "value": "{\"light\":\"#eaeaea\",\"dark\":\"#151515\"}",
+      "value": "{\"light\":\"#ebebeb\",\"dark\":\"#141414\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -192,7 +192,7 @@
       "key": "{semantic.color.transparent.default.default}"
     },
     {
-      "value": "{\"light\":\"rgba(0, 0, 0, 0.04)\",\"dark\":\"rgba(255, 255, 255, 0.04)\"}",
+      "value": "{\"light\":\"rgba(0, 0, 0, 0.04)\",\"dark\":\"rgba(255, 255, 255, 0.12)\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -220,7 +220,7 @@
       "key": "{semantic.color.transparent.default.hover}"
     },
     {
-      "value": "{\"light\":\"rgba(0, 0, 0, 0.08)\",\"dark\":\"rgba(255, 255, 255, 0.08)\"}",
+      "value": "{\"light\":\"rgba(0, 0, 0, 0.08)\",\"dark\":\"rgba(255, 255, 255, 0.16)\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -247,6 +247,62 @@
       "path": ["semantic", "color", "transparent", "default", "press"],
       "key": "{semantic.color.transparent.default.press}"
     },
+    {
+      "value": "{\"light\":\"rgba(255, 255, 255, 0.12)\",\"dark\":\"rgba(0, 0, 0, 0.04)\"}",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "transparent",
+        "subitem": "inverse",
+        "state": "hover",
+        "names": {
+          "scss": "$calcite-color-transparent-inverse-hover",
+          "css": "var(--calcite-color-transparent-inverse-hover)",
+          "js": "semantic.color.transparent.inverse.hover",
+          "docs": "semantic.color.transparent.inverse.hover",
+          "es6": "calciteColorTransparentInverseHover"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/light.json",
+      "isSource": false,
+      "name": "Color Transparent Inverse Hover",
+      "path": ["semantic", "color", "transparent", "inverse", "hover"],
+      "key": "{semantic.color.transparent.inverse.hover}"
+    },
+    {
+      "value": "{\"light\":\"rgba(255, 255, 255, 0.16)\",\"dark\":\"rgba(0, 0, 0, 0.08)\"}",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "transparent",
+        "subitem": "inverse",
+        "state": "press",
+        "names": {
+          "scss": "$calcite-color-transparent-inverse-press",
+          "css": "var(--calcite-color-transparent-inverse-press)",
+          "js": "semantic.color.transparent.inverse.press",
+          "docs": "semantic.color.transparent.inverse.press",
+          "es6": "calciteColorTransparentInversePress"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/light.json",
+      "isSource": false,
+      "name": "Color Transparent Inverse Press",
+      "path": ["semantic", "color", "transparent", "inverse", "press"],
+      "key": "{semantic.color.transparent.inverse.press}"
+    },
     {
       "value": "{\"light\":\"rgba(255, 255, 255, 0.85)\",\"dark\":\"rgba(0, 0, 0, 0.85)\"}",
       "type": "color",
@@ -749,7 +805,7 @@
       "key": "{semantic.color.status.danger.press}"
     },
     {
-      "value": "{\"light\":\"#353535\",\"dark\":\"#f8f8f8\"}",
+      "value": "{\"light\":\"#363636\",\"dark\":\"#f7f7f7\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -803,7 +859,7 @@
       "key": "{semantic.color.inverse.hover}"
     },
     {
-      "value": "{\"light\":\"#202020\",\"dark\":\"#f3f3f3\"}",
+      "value": "{\"light\":\"#212121\",\"dark\":\"#f2f2f2\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -830,7 +886,7 @@
       "key": "{semantic.color.inverse.press}"
     },
     {
-      "value": "{\"light\":\"#151515\",\"dark\":\"#ffffff\"}",
+      "value": "{\"light\":\"#141414\",\"dark\":\"#ffffff\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -884,7 +940,7 @@
       "key": "{semantic.color.text.2}"
     },
     {
-      "value": "{\"light\":\"#6a6a6a\",\"dark\":\"#9f9f9f\"}",
+      "value": "{\"light\":\"#6b6b6b\",\"dark\":\"#9e9e9e\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -911,7 +967,7 @@
       "key": "{semantic.color.text.3}"
     },
     {
-      "value": "{\"light\":\"#ffffff\",\"dark\":\"#151515\"}",
+      "value": "{\"light\":\"#ffffff\",\"dark\":\"#141414\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -965,7 +1021,7 @@
       "key": "{semantic.color.text.link}"
     },
     {
-      "value": "{\"light\":\"#cacaca\",\"dark\":\"#555555\"}",
+      "value": "{\"light\":\"#c9c9c9\",\"dark\":\"#545454\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -1019,7 +1075,7 @@
       "key": "{semantic.color.border.2}"
     },
     {
-      "value": "{\"light\":\"#dfdfdf\",\"dark\":\"#404040\"}",
+      "value": "{\"light\":\"#dedede\",\"dark\":\"#404040\"}",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -1100,7 +1156,7 @@
       "key": "{semantic.color.border.ghost}"
     },
     {
-      "value": "{\"light\":\"#ffffff\",\"dark\":\"#f8f8f8\"}",
+      "value": "{\"light\":\"#ffffff\",\"dark\":\"#f7f7f7\"}",
       "type": "color",
       "attributes": {
         "category": "color",

package/dist/docs/light.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": 1744685047010,
+  "timestamp": 1745007321412,
   "tokens": [
     {
-      "value": "#f8f8f8",
+      "value": "#f7f7f7",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -83,7 +83,7 @@
       "key": "{semantic.color.foreground.1}"
     },
     {
-      "value": "#f3f3f3",
+      "value": "#f2f2f2",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -110,7 +110,7 @@
       "key": "{semantic.color.foreground.2}"
     },
     {
-      "value": "#eaeaea",
+      "value": "#ebebeb",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -247,6 +247,62 @@
       "path": ["semantic", "color", "transparent", "default", "press"],
       "key": "{semantic.color.transparent.default.press}"
     },
+    {
+      "value": "rgba(255, 255, 255, 0.12)",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "transparent",
+        "subitem": "inverse",
+        "state": "hover",
+        "names": {
+          "scss": "$calcite-color-transparent-inverse-hover",
+          "css": "var(--calcite-color-transparent-inverse-hover)",
+          "js": "semantic.color.transparent.inverse.hover",
+          "docs": "semantic.color.transparent.inverse.hover",
+          "es6": "calciteColorTransparentInverseHover"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/light.json",
+      "isSource": true,
+      "name": "Color Transparent Inverse Hover",
+      "path": ["semantic", "color", "transparent", "inverse", "hover"],
+      "key": "{semantic.color.transparent.inverse.hover}"
+    },
+    {
+      "value": "rgba(255, 255, 255, 0.16)",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "transparent",
+        "subitem": "inverse",
+        "state": "press",
+        "names": {
+          "scss": "$calcite-color-transparent-inverse-press",
+          "css": "var(--calcite-color-transparent-inverse-press)",
+          "js": "semantic.color.transparent.inverse.press",
+          "docs": "semantic.color.transparent.inverse.press",
+          "es6": "calciteColorTransparentInversePress"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/light.json",
+      "isSource": true,
+      "name": "Color Transparent Inverse Press",
+      "path": ["semantic", "color", "transparent", "inverse", "press"],
+      "key": "{semantic.color.transparent.inverse.press}"
+    },
     {
       "value": "rgba(255, 255, 255, 0.85)",
       "type": "color",
@@ -749,7 +805,7 @@
       "key": "{semantic.color.status.danger.press}"
     },
     {
-      "value": "#353535",
+      "value": "#363636",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -803,7 +859,7 @@
       "key": "{semantic.color.inverse.hover}"
     },
     {
-      "value": "#202020",
+      "value": "#212121",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -830,7 +886,7 @@
       "key": "{semantic.color.inverse.press}"
     },
     {
-      "value": "#151515",
+      "value": "#141414",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -884,7 +940,7 @@
       "key": "{semantic.color.text.2}"
     },
     {
-      "value": "#6a6a6a",
+      "value": "#6b6b6b",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -965,7 +1021,7 @@
       "key": "{semantic.color.text.link}"
     },
     {
-      "value": "#cacaca",
+      "value": "#c9c9c9",
       "type": "color",
       "attributes": {
         "category": "color",
@@ -1019,7 +1075,7 @@
       "key": "{semantic.color.border.2}"
     },
     {
-      "value": "#dfdfdf",
+      "value": "#dedede",
       "type": "color",
       "attributes": {
         "category": "color",

package/dist/docs/semantic.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1744685050358,
+  "timestamp": 1745007323560,
   "tokens": [
     {
       "value": "0",

package/dist/es6/core.d.ts

@@ -510,6 +510,8 @@ export const calciteOpacity0: string;
 export const calciteOpacity4: string;
 export const calciteOpacity8: string;
 export const calciteOpacity10: string;
+export const calciteOpacity12: string;
+export const calciteOpacity16: string;
 export const calciteOpacity20: string;
 export const calciteOpacity30: string;
 export const calciteOpacity40: string;

package/dist/es6/core.js

@@ -4,31 +4,31 @@
  */
 
 export const calciteColorNeutralBlk000 = "#ffffff";
-export const calciteColorNeutralBlk005 = "#f8f8f8";
-export const calciteColorNeutralBlk010 = "#f3f3f3";
-export const calciteColorNeutralBlk020 = "#eaeaea";
-export const calciteColorNeutralBlk030 = "#dfdfdf";
+export const calciteColorNeutralBlk005 = "#f7f7f7";
+export const calciteColorNeutralBlk010 = "#f2f2f2";
+export const calciteColorNeutralBlk020 = "#ebebeb";
+export const calciteColorNeutralBlk030 = "#dedede";
 export const calciteColorNeutralBlk040 = "#d4d4d4";
-export const calciteColorNeutralBlk050 = "#cacaca";
+export const calciteColorNeutralBlk050 = "#c9c9c9";
 export const calciteColorNeutralBlk060 = "#bfbfbf";
 export const calciteColorNeutralBlk070 = "#b5b5b5";
-export const calciteColorNeutralBlk080 = "#aaaaaa";
-export const calciteColorNeutralBlk090 = "#9f9f9f";
+export const calciteColorNeutralBlk080 = "#ababab";
+export const calciteColorNeutralBlk090 = "#9e9e9e";
 export const calciteColorNeutralBlk100 = "#949494";
 export const calciteColorNeutralBlk110 = "#8a8a8a";
 export const calciteColorNeutralBlk120 = "#808080";
 export const calciteColorNeutralBlk130 = "#757575";
-export const calciteColorNeutralBlk140 = "#6a6a6a";
-export const calciteColorNeutralBlk150 = "#606060";
-export const calciteColorNeutralBlk160 = "#555555";
+export const calciteColorNeutralBlk140 = "#6b6b6b";
+export const calciteColorNeutralBlk150 = "#616161";
+export const calciteColorNeutralBlk160 = "#545454";
 export const calciteColorNeutralBlk170 = "#4a4a4a";
 export const calciteColorNeutralBlk180 = "#404040";
-export const calciteColorNeutralBlk190 = "#353535";
+export const calciteColorNeutralBlk190 = "#363636";
 export const calciteColorNeutralBlk200 = "#2b2b2b";
-export const calciteColorNeutralBlk210 = "#202020";
-export const calciteColorNeutralBlk220 = "#151515";
-export const calciteColorNeutralBlk230 = "#0b0b0b";
-export const calciteColorNeutralBlk235 = "#060606";
+export const calciteColorNeutralBlk210 = "#212121";
+export const calciteColorNeutralBlk220 = "#141414";
+export const calciteColorNeutralBlk230 = "#0a0a0a";
+export const calciteColorNeutralBlk235 = "#050505";
 export const calciteColorNeutralBlk240 = "#000000";
 export const calciteColorLowSaturationBlueLBb010 = "#edf3f7";
 export const calciteColorLowSaturationBlueLBb020 = "#d7e1e7";
@@ -510,6 +510,8 @@ export const calciteOpacity0 = "0";
 export const calciteOpacity4 = "0.04";
 export const calciteOpacity8 = "0.08";
 export const calciteOpacity10 = "0.1";
+export const calciteOpacity12 = "0.12";
+export const calciteOpacity16 = "0.16";
 export const calciteOpacity20 = "0.2";
 export const calciteOpacity30 = "0.3";
 export const calciteOpacity40 = "0.4";

package/dist/es6/dark.d.ts

@@ -12,6 +12,8 @@ export const calciteColorForegroundCurrent: string;
 export const calciteColorTransparent: string;
 export const calciteColorTransparentHover: string;
 export const calciteColorTransparentPress: string;
+export const calciteColorTransparentInverseHover: string;
+export const calciteColorTransparentInversePress: string;
 export const calciteColorTransparentScrim: string;
 export const calciteColorTransparentTint: string;
 export const calciteColorBrand: string;

package/dist/es6/dark.js

@@ -3,15 +3,17 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteColorBackground = "#353535";
+export const calciteColorBackground = "#363636";
 export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
 export const calciteColorForeground1 = "#2b2b2b";
-export const calciteColorForeground2 = "#202020";
-export const calciteColorForeground3 = "#151515";
+export const calciteColorForeground2 = "#212121";
+export const calciteColorForeground3 = "#141414";
 export const calciteColorForegroundCurrent = "#214155";
 export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
-export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.04)";
-export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.08)";
+export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
+export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
+export const calciteColorTransparentInverseHover = "rgba(0, 0, 0, 0.04)";
+export const calciteColorTransparentInversePress = "rgba(0, 0, 0, 0.08)";
 export const calciteColorTransparentScrim = "rgba(0, 0, 0, 0.85)";
 export const calciteColorTransparentTint = "rgba(43, 43, 43, 0.8)";
 export const calciteColorBrand = "#009af2";
@@ -30,17 +32,17 @@ export const calciteColorStatusWarningPress = "#f5d000";
 export const calciteColorStatusDanger = "#fe583e";
 export const calciteColorStatusDangerHover = "#ff0015";
 export const calciteColorStatusDangerPress = "#d90012";
-export const calciteColorInverse = "#f8f8f8";
+export const calciteColorInverse = "#f7f7f7";
 export const calciteColorInverseHover = "#ffffff";
-export const calciteColorInversePress = "#f3f3f3";
+export const calciteColorInversePress = "#f2f2f2";
 export const calciteColorText1 = "#ffffff";
 export const calciteColorText2 = "#bfbfbf";
-export const calciteColorText3 = "#9f9f9f";
-export const calciteColorTextInverse = "#151515";
+export const calciteColorText3 = "#9e9e9e";
+export const calciteColorTextInverse = "#141414";
 export const calciteColorTextLink = "#00a0ff";
-export const calciteColorBorder1 = "#555555";
+export const calciteColorBorder1 = "#545454";
 export const calciteColorBorder2 = "#4a4a4a";
 export const calciteColorBorder3 = "#404040";
 export const calciteColorBorderInput = "#757575";
 export const calciteColorBorderGhost = "rgba(117, 117, 117, 0.3)";
-export const calciteColorBorderWhite = "#f8f8f8";
+export const calciteColorBorderWhite = "#f7f7f7";

package/dist/es6/global.d.ts

@@ -13,6 +13,14 @@ export const calciteColorForegroundCurrent: { light: string; dark: string };
 export const calciteColorTransparent: { light: string; dark: string };
 export const calciteColorTransparentHover: { light: string; dark: string };
 export const calciteColorTransparentPress: { light: string; dark: string };
+export const calciteColorTransparentInverseHover: {
+  light: string;
+  dark: string;
+};
+export const calciteColorTransparentInversePress: {
+  light: string;
+  dark: string;
+};
 export const calciteColorTransparentScrim: { light: string; dark: string };
 export const calciteColorTransparentTint: { light: string; dark: string };
 export const calciteColorBrand: { light: string; dark: string };