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

package/dist/es6/global.d.ts

@@ -9,7 +9,9 @@ export const calciteColorBackgroundNone: string;
 export const calciteColorForeground1: { light: string; dark: string };
 export const calciteColorForeground2: { light: string; dark: string };
 export const calciteColorForeground3: { light: string; dark: string };
+/** deprecated, use --calcite-color-foreground-highlight instead */
 export const calciteColorForegroundCurrent: { light: string; dark: string };
+export const calciteColorForegroundHighlight: { 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 };
@@ -54,6 +56,7 @@ export const calciteColorBorder3: { light: string; dark: string };
 export const calciteColorBorderInput: { light: string; dark: string };
 export const calciteColorBorderGhost: { light: string; dark: string };
 export const calciteColorBorderWhite: { light: string; dark: string };
+export const calciteColorFocus: { light: string; dark: string };
 export const calciteBorderWidthNone: string;
 export const calciteBorderWidthSm: string;
 export const calciteBorderWidthMd: string;
@@ -89,7 +92,7 @@ export const calciteContainerSizeContentFluid: string;
 /** only for lg breakpoint fixed grid width */
 export const calciteContainerSizeContentFixed: string;
 export const calciteCornerRadius: string;
-/** deprecated, use --calcite-conder-radius-none instead */
+/** deprecated, use --calcite-corner-radius-none instead */
 export const calciteCornerRadiusSharp: string;
 export const calciteCornerRadiusNone: string;
 export const calciteCornerRadiusXs: string;

package/dist/es6/global.js

@@ -10,8 +10,12 @@ export const calciteColorForeground1 = { light: "#ffffff", dark: "#2b2b2b" };
 export const calciteColorForeground2 = { light: "#f2f2f2", dark: "#212121" };
 export const calciteColorForeground3 = { light: "#ebebeb", dark: "#141414" };
 export const calciteColorForegroundCurrent = {
-  light: "#c7eaff",
-  dark: "#214155",
+  light: "#d6efff",
+  dark: "#2b465f",
+}; // deprecated, use --calcite-color-foreground-highlight instead
+export const calciteColorForegroundHighlight = {
+  light: "#d6efff",
+  dark: "#2b465f",
 };
 export const calciteColorTransparent = {
   light: "rgba(0, 0, 0, 0)",
@@ -90,7 +94,7 @@ export const calciteColorInversePress = { light: "#212121", dark: "#f2f2f2" };
 export const calciteColorText1 = { light: "#141414", dark: "#ffffff" };
 export const calciteColorText2 = { light: "#4a4a4a", dark: "#bfbfbf" };
 export const calciteColorText3 = { light: "#6b6b6b", dark: "#9e9e9e" };
-export const calciteColorTextHighlight = { light: "#004874", dark: "#c7eaff" };
+export const calciteColorTextHighlight = { light: "#004874", dark: "#d6efff" };
 export const calciteColorTextInverse = { light: "#ffffff", dark: "#141414" };
 export const calciteColorTextLink = { light: "#00619b", dark: "#00a0ff" };
 export const calciteColorBorder1 = { light: "#c9c9c9", dark: "#545454" };
@@ -102,6 +106,7 @@ export const calciteColorBorderGhost = {
   dark: "rgba(117, 117, 117, 0.3)",
 };
 export const calciteColorBorderWhite = { light: "#ffffff", dark: "#f7f7f7" };
+export const calciteColorFocus = { light: "#007ac2", dark: "#009af2" };
 export const calciteBorderWidthNone = "0";
 export const calciteBorderWidthSm = "1px";
 export const calciteBorderWidthMd = "2px";
@@ -123,7 +128,7 @@ export const calciteContainerSizeGutter = "16px";
 export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
 export const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
 export const calciteCornerRadius = "0";
-export const calciteCornerRadiusSharp = "0"; // deprecated, use --calcite-conder-radius-none instead
+export const calciteCornerRadiusSharp = "0"; // deprecated, use --calcite-corner-radius-none instead
 export const calciteCornerRadiusNone = "0";
 export const calciteCornerRadiusXs = "2px";
 export const calciteCornerRadiusSm = "4px";

package/dist/es6/light.d.ts

@@ -8,7 +8,9 @@ export const calciteColorBackgroundNone: string;
 export const calciteColorForeground1: string;
 export const calciteColorForeground2: string;
 export const calciteColorForeground3: string;
+/** deprecated, use --calcite-color-foreground-highlight instead */
 export const calciteColorForegroundCurrent: string;
+export const calciteColorForegroundHighlight: string;
 export const calciteColorTransparent: string;
 export const calciteColorTransparentHover: string;
 export const calciteColorTransparentPress: string;
@@ -47,3 +49,4 @@ export const calciteColorBorder3: string;
 export const calciteColorBorderInput: string;
 export const calciteColorBorderGhost: string;
 export const calciteColorBorderWhite: string;
+export const calciteColorFocus: string;

package/dist/es6/light.js

@@ -8,7 +8,8 @@ export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
 export const calciteColorForeground1 = "#ffffff";
 export const calciteColorForeground2 = "#f2f2f2";
 export const calciteColorForeground3 = "#ebebeb";
-export const calciteColorForegroundCurrent = "#c7eaff";
+export const calciteColorForegroundCurrent = "#d6efff"; // deprecated, use --calcite-color-foreground-highlight instead
+export const calciteColorForegroundHighlight = "#d6efff";
 export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
 export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
 export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
@@ -47,3 +48,4 @@ export const calciteColorBorder3 = "#dedede";
 export const calciteColorBorderInput = "#949494";
 export const calciteColorBorderGhost = "rgba(0, 0, 0, 0.3)";
 export const calciteColorBorderWhite = "#ffffff";
+export const calciteColorFocus = "#007ac2";

package/dist/es6/semantic.d.ts

@@ -38,7 +38,7 @@ export const calciteContainerSizeContentFluid: string;
 /** only for lg breakpoint fixed grid width */
 export const calciteContainerSizeContentFixed: string;
 export const calciteCornerRadius: string;
-/** deprecated, use --calcite-conder-radius-none instead */
+/** deprecated, use --calcite-corner-radius-none instead */
 export const calciteCornerRadiusSharp: string;
 export const calciteCornerRadiusNone: string;
 export const calciteCornerRadiusXs: string;

package/dist/es6/semantic.js

@@ -24,7 +24,7 @@ export const calciteContainerSizeGutter = "16px";
 export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths
 export const calciteContainerSizeContentFixed = "1440px"; // only for lg breakpoint fixed grid width
 export const calciteCornerRadius = "0";
-export const calciteCornerRadiusSharp = "0"; // deprecated, use --calcite-conder-radius-none instead
+export const calciteCornerRadiusSharp = "0"; // deprecated, use --calcite-corner-radius-none instead
 export const calciteCornerRadiusNone = "0";
 export const calciteCornerRadiusXs = "2px";
 export const calciteCornerRadiusSm = "4px";

package/dist/js/core.js

@@ -6073,7 +6073,7 @@ export default {
           },
           "m-bb-090": {
             key: "{core.color.medium-saturation.blue.m-bb-090}",
-            value: "#214155",
+            value: "#2b465f",
             type: "color",
             attributes: {
               category: "color",
@@ -6097,7 +6097,7 @@ export default {
             filePath: "src/tokens/core/color.json",
             isSource: false,
             original: {
-              value: "#214155",
+              value: "#2b465f",
               type: "color",
               attributes: {
                 category: "color",
@@ -10793,7 +10793,7 @@ export default {
         blue: {
           "h-bb-010": {
             key: "{core.color.high-saturation.blue.h-bb-010}",
-            value: "#c7eaff",
+            value: "#d6efff",
             type: "color",
             attributes: {
               category: "color",
@@ -10817,7 +10817,7 @@ export default {
             filePath: "src/tokens/core/color.json",
             isSource: false,
             original: {
-              value: "#c7eaff",
+              value: "#d6efff",
               type: "color",
               attributes: {
                 category: "color",

package/dist/js/dark.d.ts

@@ -8,7 +8,9 @@ export const calciteColorBackgroundNone: string;
 export const calciteColorForeground1: string;
 export const calciteColorForeground2: string;
 export const calciteColorForeground3: string;
+/** deprecated, use --calcite-color-foreground-highlight instead */
 export const calciteColorForegroundCurrent: string;
+export const calciteColorForegroundHighlight: string;
 export const calciteColorTransparent: string;
 export const calciteColorTransparentHover: string;
 export const calciteColorTransparentPress: string;
@@ -47,3 +49,4 @@ export const calciteColorBorder3: string;
 export const calciteColorBorderInput: string;
 export const calciteColorBorderGhost: string;
 export const calciteColorBorderWhite: string;
+export const calciteColorFocus: string;

package/dist/js/dark.js

@@ -186,13 +186,23 @@ export default {
         },
         current: {
           key: "{semantic.color.foreground.current}",
-          value: "#214155",
+          value: "#2b465f",
           type: "color",
           attributes: {
             category: "color",
             type: "color",
             item: "foreground",
             subitem: "current",
+            value: "#2b465f",
+            description:
+              "deprecated, use --calcite-color-foreground-highlight instead",
+            filePath: "src/tokens/semantic/color/dark.json",
+            isSource: true,
+            key: "{semantic.color.foreground.current}",
+            name: "calcite-semantic-color-foreground-current",
+            path: ["semantic", "color", "foreground", "current"],
+            comment:
+              "deprecated, use --calcite-color-foreground-highlight instead",
             names: {
               scss: "$calcite-color-foreground-current",
               css: "var(--calcite-color-foreground-current)",
@@ -206,6 +216,8 @@ export default {
               type: "color",
             },
           },
+          description:
+            "deprecated, use --calcite-color-foreground-highlight instead",
           filePath: "src/tokens/semantic/color/dark.json",
           isSource: true,
           original: {
@@ -214,10 +226,49 @@ export default {
             attributes: {
               category: "color",
             },
+            description:
+              "deprecated, use --calcite-color-foreground-highlight instead",
             key: "{semantic.color.foreground.current}",
           },
           name: "calciteColorForegroundCurrent",
           path: ["semantic", "color", "foreground", "current"],
+          comment:
+            "deprecated, use --calcite-color-foreground-highlight instead",
+        },
+        highlight: {
+          key: "{semantic.color.foreground.highlight}",
+          value: "#2b465f",
+          type: "color",
+          attributes: {
+            category: "color",
+            type: "color",
+            item: "foreground",
+            subitem: "highlight",
+            names: {
+              scss: "$calcite-color-foreground-highlight",
+              css: "var(--calcite-color-foreground-highlight)",
+              js: "semantic.color.foreground.highlight",
+              docs: "semantic.color.foreground.highlight",
+              es6: "calciteColorForegroundHighlight",
+            },
+            "calcite-schema": {
+              system: "calcite",
+              tier: "color",
+              type: "color",
+            },
+          },
+          filePath: "src/tokens/semantic/color/dark.json",
+          isSource: true,
+          original: {
+            value: "{core.color.medium-saturation.blue.m-bb-090}",
+            type: "color",
+            attributes: {
+              category: "color",
+            },
+            key: "{semantic.color.foreground.highlight}",
+          },
+          name: "calciteColorForegroundHighlight",
+          path: ["semantic", "color", "foreground", "highlight"],
         },
       },
       transparent: {
@@ -1278,7 +1329,7 @@ export default {
         },
         highlight: {
           key: "{semantic.color.text.highlight}",
-          value: "#c7eaff",
+          value: "#d6efff",
           type: "color",
           attributes: {
             category: "color",
@@ -1594,6 +1645,45 @@ export default {
           path: ["semantic", "color", "border", "white"],
         },
       },
+      focus: {
+        default: {
+          key: "{semantic.color.focus.default}",
+          value: "#009af2",
+          type: "color",
+          attributes: {
+            category: "color",
+            scope: "component",
+            type: "color",
+            item: "focus",
+            subitem: "default",
+            names: {
+              scss: "$calcite-color-focus",
+              css: "var(--calcite-color-focus)",
+              js: "semantic.color.focus.default",
+              docs: "semantic.color.focus.default",
+              es6: "calciteColorFocus",
+            },
+            "calcite-schema": {
+              system: "calcite",
+              tier: "color",
+              type: "color",
+            },
+          },
+          filePath: "src/tokens/semantic/color/dark.json",
+          isSource: true,
+          original: {
+            value: "{semantic.color.brand.default.default}",
+            type: "color",
+            attributes: {
+              category: "color",
+              scope: "component",
+            },
+            key: "{semantic.color.focus.default}",
+          },
+          name: "calciteColorFocus",
+          path: ["semantic", "color", "focus", "default"],
+        },
+      },
     },
   },
 };

package/dist/js/global.d.ts

@@ -28,6 +28,7 @@ declare const tokens: {
         "2": DesignToken;
         "3": DesignToken;
         current: DesignToken;
+        highlight: DesignToken;
       };
       transparent: {
         default: {
@@ -93,6 +94,9 @@ declare const tokens: {
         ghost: DesignToken;
         white: DesignToken;
       };
+      focus: {
+        default: DesignToken;
+      };
     };
     border: {
       width: {

package/dist/js/global.js

@@ -200,8 +200,8 @@ export default {
         current: {
           key: "{semantic.color.foreground.current}",
           value: {
-            light: "#c7eaff",
-            dark: "#214155",
+            light: "#d6efff",
+            dark: "#2b465f",
           },
           type: "color",
           attributes: {
@@ -209,6 +209,16 @@ export default {
             type: "color",
             item: "foreground",
             subitem: "current",
+            value: "#d6efff",
+            description:
+              "deprecated, use --calcite-color-foreground-highlight instead",
+            filePath: "src/tokens/semantic/color/light.json",
+            isSource: false,
+            key: "{semantic.color.foreground.current}",
+            name: "calcite-semantic-color-foreground-current",
+            path: ["semantic", "color", "foreground", "current"],
+            comment:
+              "deprecated, use --calcite-color-foreground-highlight instead",
             names: {
               scss: "$calcite-color-foreground-current",
               css: "var(--calcite-color-foreground-current)",
@@ -222,6 +232,8 @@ export default {
               type: "color",
             },
           },
+          description:
+            "deprecated, use --calcite-color-foreground-highlight instead",
           filePath: "src/tokens/semantic/color/light.json",
           isSource: false,
           original: {
@@ -230,10 +242,52 @@ export default {
             attributes: {
               category: "color",
             },
+            description:
+              "deprecated, use --calcite-color-foreground-highlight instead",
             key: "{semantic.color.foreground.current}",
           },
           name: "Color Foreground Current",
           path: ["semantic", "color", "foreground", "current"],
+          comment:
+            "deprecated, use --calcite-color-foreground-highlight instead",
+        },
+        highlight: {
+          key: "{semantic.color.foreground.highlight}",
+          value: {
+            light: "#d6efff",
+            dark: "#2b465f",
+          },
+          type: "color",
+          attributes: {
+            category: "color",
+            type: "color",
+            item: "foreground",
+            subitem: "highlight",
+            names: {
+              scss: "$calcite-color-foreground-highlight",
+              css: "var(--calcite-color-foreground-highlight)",
+              js: "semantic.color.foreground.highlight",
+              docs: "semantic.color.foreground.highlight",
+              es6: "calciteColorForegroundHighlight",
+            },
+            "calcite-schema": {
+              system: "calcite",
+              tier: "color",
+              type: "color",
+            },
+          },
+          filePath: "src/tokens/semantic/color/light.json",
+          isSource: false,
+          original: {
+            value: "{core.color.high-saturation.blue.h-bb-010}",
+            type: "color",
+            attributes: {
+              category: "color",
+            },
+            key: "{semantic.color.foreground.highlight}",
+          },
+          name: "Color Foreground Highlight",
+          path: ["semantic", "color", "foreground", "highlight"],
         },
       },
       transparent: {
@@ -1386,7 +1440,7 @@ export default {
           key: "{semantic.color.text.highlight}",
           value: {
             light: "#004874",
-            dark: "#c7eaff",
+            dark: "#d6efff",
           },
           type: "color",
           attributes: {
@@ -1727,6 +1781,48 @@ export default {
           path: ["semantic", "color", "border", "white"],
         },
       },
+      focus: {
+        default: {
+          key: "{semantic.color.focus.default}",
+          value: {
+            light: "#007ac2",
+            dark: "#009af2",
+          },
+          type: "color",
+          attributes: {
+            category: "color",
+            scope: "component",
+            type: "color",
+            item: "focus",
+            subitem: "default",
+            names: {
+              scss: "$calcite-color-focus",
+              css: "var(--calcite-color-focus)",
+              js: "semantic.color.focus.default",
+              docs: "semantic.color.focus.default",
+              es6: "calciteColorFocus",
+            },
+            "calcite-schema": {
+              system: "calcite",
+              tier: "color",
+              type: "color",
+            },
+          },
+          filePath: "src/tokens/semantic/color/light.json",
+          isSource: false,
+          original: {
+            value: "{semantic.color.brand.default.default}",
+            type: "color",
+            attributes: {
+              category: "color",
+              scope: "component",
+            },
+            key: "{semantic.color.focus.default}",
+          },
+          name: "Color Focus",
+          path: ["semantic", "color", "focus", "default"],
+        },
+      },
     },
     border: {
       width: {
@@ -2741,13 +2837,13 @@ export default {
             item: "radius",
             subitem: "sharp",
             value: "0",
-            description: "deprecated, use --calcite-conder-radius-none instead",
+            description: "deprecated, use --calcite-corner-radius-none instead",
             filePath: "src/tokens/semantic/corner.json",
             isSource: true,
             key: "{semantic.corner.radius.sharp}",
             name: "calcite-semantic-corner-radius-sharp",
             path: ["semantic", "corner", "radius", "sharp"],
-            comment: "deprecated, use --calcite-conder-radius-none instead",
+            comment: "deprecated, use --calcite-corner-radius-none instead",
             names: {
               scss: "$calcite-corner-radius-sharp",
               css: "var(--calcite-corner-radius-sharp)",
@@ -2761,7 +2857,7 @@ export default {
               type: "dimension",
             },
           },
-          description: "deprecated, use --calcite-conder-radius-none instead",
+          description: "deprecated, use --calcite-corner-radius-none instead",
           filePath: "src/tokens/semantic/corner.json",
           isSource: true,
           original: {
@@ -2770,12 +2866,12 @@ export default {
             attributes: {
               category: "corner",
             },
-            description: "deprecated, use --calcite-conder-radius-none instead",
+            description: "deprecated, use --calcite-corner-radius-none instead",
             key: "{semantic.corner.radius.sharp}",
           },
           name: "Corner Radius Sharp",
           path: ["semantic", "corner", "radius", "sharp"],
-          comment: "deprecated, use --calcite-conder-radius-none instead",
+          comment: "deprecated, use --calcite-corner-radius-none instead",
         },
         none: {
           key: "{semantic.corner.radius.none}",

package/dist/js/light.d.ts

@@ -8,7 +8,9 @@ export const calciteColorBackgroundNone: string;
 export const calciteColorForeground1: string;
 export const calciteColorForeground2: string;
 export const calciteColorForeground3: string;
+/** deprecated, use --calcite-color-foreground-highlight instead */
 export const calciteColorForegroundCurrent: string;
+export const calciteColorForegroundHighlight: string;
 export const calciteColorTransparent: string;
 export const calciteColorTransparentHover: string;
 export const calciteColorTransparentPress: string;
@@ -47,3 +49,4 @@ export const calciteColorBorder3: string;
 export const calciteColorBorderInput: string;
 export const calciteColorBorderGhost: string;
 export const calciteColorBorderWhite: string;
+export const calciteColorFocus: string;

package/dist/js/light.js

@@ -186,13 +186,23 @@ export default {
         },
         current: {
           key: "{semantic.color.foreground.current}",
-          value: "#c7eaff",
+          value: "#d6efff",
           type: "color",
           attributes: {
             category: "color",
             type: "color",
             item: "foreground",
             subitem: "current",
+            value: "#d6efff",
+            description:
+              "deprecated, use --calcite-color-foreground-highlight instead",
+            filePath: "src/tokens/semantic/color/light.json",
+            isSource: true,
+            key: "{semantic.color.foreground.current}",
+            name: "calcite-semantic-color-foreground-current",
+            path: ["semantic", "color", "foreground", "current"],
+            comment:
+              "deprecated, use --calcite-color-foreground-highlight instead",
             names: {
               scss: "$calcite-color-foreground-current",
               css: "var(--calcite-color-foreground-current)",
@@ -206,6 +216,8 @@ export default {
               type: "color",
             },
           },
+          description:
+            "deprecated, use --calcite-color-foreground-highlight instead",
           filePath: "src/tokens/semantic/color/light.json",
           isSource: true,
           original: {
@@ -214,10 +226,49 @@ export default {
             attributes: {
               category: "color",
             },
+            description:
+              "deprecated, use --calcite-color-foreground-highlight instead",
             key: "{semantic.color.foreground.current}",
           },
           name: "calciteColorForegroundCurrent",
           path: ["semantic", "color", "foreground", "current"],
+          comment:
+            "deprecated, use --calcite-color-foreground-highlight instead",
+        },
+        highlight: {
+          key: "{semantic.color.foreground.highlight}",
+          value: "#d6efff",
+          type: "color",
+          attributes: {
+            category: "color",
+            type: "color",
+            item: "foreground",
+            subitem: "highlight",
+            names: {
+              scss: "$calcite-color-foreground-highlight",
+              css: "var(--calcite-color-foreground-highlight)",
+              js: "semantic.color.foreground.highlight",
+              docs: "semantic.color.foreground.highlight",
+              es6: "calciteColorForegroundHighlight",
+            },
+            "calcite-schema": {
+              system: "calcite",
+              tier: "color",
+              type: "color",
+            },
+          },
+          filePath: "src/tokens/semantic/color/light.json",
+          isSource: true,
+          original: {
+            value: "{core.color.high-saturation.blue.h-bb-010}",
+            type: "color",
+            attributes: {
+              category: "color",
+            },
+            key: "{semantic.color.foreground.highlight}",
+          },
+          name: "calciteColorForegroundHighlight",
+          path: ["semantic", "color", "foreground", "highlight"],
         },
       },
       transparent: {
@@ -1597,6 +1648,45 @@ export default {
           path: ["semantic", "color", "border", "white"],
         },
       },
+      focus: {
+        default: {
+          key: "{semantic.color.focus.default}",
+          value: "#007ac2",
+          type: "color",
+          attributes: {
+            category: "color",
+            scope: "component",
+            type: "color",
+            item: "focus",
+            subitem: "default",
+            names: {
+              scss: "$calcite-color-focus",
+              css: "var(--calcite-color-focus)",
+              js: "semantic.color.focus.default",
+              docs: "semantic.color.focus.default",
+              es6: "calciteColorFocus",
+            },
+            "calcite-schema": {
+              system: "calcite",
+              tier: "color",
+              type: "color",
+            },
+          },
+          filePath: "src/tokens/semantic/color/light.json",
+          isSource: true,
+          original: {
+            value: "{semantic.color.brand.default.default}",
+            type: "color",
+            attributes: {
+              category: "color",
+              scope: "component",
+            },
+            key: "{semantic.color.focus.default}",
+          },
+          name: "calciteColorFocus",
+          path: ["semantic", "color", "focus", "default"],
+        },
+      },
     },
   },
 };