feat(semantic-tokens): add --calcite-color-text-highlight tokens

packages/calcite-design-tokens/src/build/transforms/group/calcite.ts

@@ -3,7 +3,6 @@ import StyleDictionary from "style-dictionary";
 import { TransformValueSizePxToRem } from "../value/px-to-rem.js";
 import { TransformNameRemoveTier } from "../name/remove-tier.js";
 import { TransformNameRemoveDefault } from "../name/remove-default.js";
-import { TransformNameRemoveColorMode } from "../name/remove-color-mode.js";
 import { TransformNameIncludePlusMinus } from "../name/include-plus-minus.js";
 import { TransformValueSizeUnitlessToPx } from "../value/unitless-breakpoint-to-px.js";
 import { TransformAttributePlatformNames } from "../attribute/platform-names.js";
@@ -17,7 +16,6 @@ export const platformTransforms = {
   [Platform.css]: [
     TransformNameRemoveTier,
     TransformNameRemoveDefault,
-    TransformNameRemoveColorMode,
     TransformNameIncludePlusMinus,
     TransformAttributePlatformNames,
     TransformAttributeSchema,
@@ -28,7 +26,6 @@ export const platformTransforms = {
     transforms.nameCamel,
     TransformNameRemoveTier,
     TransformNameRemoveDefault,
-    TransformNameRemoveColorMode,
     TransformNameIncludePlusMinus,
   ],
 };

packages/calcite-design-tokens/src/build/transforms/index.ts

@@ -1,5 +1,4 @@
 import { registerNameRemoveTier } from "./name/remove-tier.js";
-import { registerNameRemoveColorMode } from "./name/remove-color-mode.js";
 import { registerNameIncludePlusMinus } from "./name/include-plus-minus.js";
 import { registerValueSizePxToRem } from "./value/px-to-rem.js";
 import { registerNameRemoveDefault } from "./name/remove-default.js";
@@ -18,7 +17,6 @@ export function registerTransformers(): void {
   registerValueMergeValues();
   registerNameRemoveTier();
   registerNameRemoveDefault();
-  registerNameRemoveColorMode();
   registerNameRemovePrefix();
   registerNameIncludePlusMinus();
   registerNameCapitalCase();
@@ -40,7 +38,6 @@ export { TransformValueCorrectValue } from "./value/correct-value.js";
 export { TransformValueCorrectPropName } from "./value/correct-prop-name.js";
 export { TransformNameRemoveTier } from "./name/remove-tier.js";
 export { TransformNameRemoveDefault } from "./name/remove-default.js";
-export { TransformNameRemoveColorMode } from "./name/remove-color-mode.js";
 export { TransformNameRemovePrefix } from "./name/remove-prefix.js";
 export { TransformNameIncludePlusMinus } from "./name/include-plus-minus.js";
 export { TransformNameCapitalCase } from "./name/capital-case.js";

packages/calcite-design-tokens/src/tokens/semantic/color/dark.json

@@ -269,6 +269,13 @@
             "category": "color"
           }
         },
+        "highlight": {
+          "value": "{core.color.high-saturation.blue.h-bb-010}",
+          "type": "color",
+          "attributes": {
+            "category": "color"
+          }
+        },
         "inverse": {
           "value": "{core.color.neutral.blk-220}",
           "type": "color",

packages/calcite-design-tokens/src/tokens/semantic/color/light.json

@@ -273,6 +273,13 @@
             "category": "color"
           }
         },
+        "highlight": {
+          "value": "{core.color.high-saturation.blue.h-bb-080}",
+          "type": "color",
+          "attributes": {
+            "category": "color"
+          }
+        },
         "inverse": {
           "value": "{core.color.neutral.blk-000}",
           "type": "color",

packages/calcite-design-tokens/tests/spec/__snapshots__/index.spec.ts.snap

@@ -936,6 +936,7 @@ exports[`generated tokens > CSS > dark should match 1`] = `
   --calcite-color-text-1: #ffffff;
   --calcite-color-text-2: #bfbfbf;
   --calcite-color-text-3: #9e9e9e;
+  --calcite-color-text-highlight: #c7eaff;
   --calcite-color-text-inverse: #141414;
   --calcite-color-text-link: #00a0ff;
   --calcite-color-border-1: #545454;
@@ -1089,6 +1090,7 @@ exports[`generated tokens > CSS > index should match 1`] = `
   --calcite-color-border-1: #c9c9c9;
   --calcite-color-text-link: #00619b;
   --calcite-color-text-inverse: #ffffff;
+  --calcite-color-text-highlight: #004874;
   --calcite-color-text-3: #6b6b6b;
   --calcite-color-text-2: #4a4a4a;
   --calcite-color-text-1: #141414;
@@ -1135,6 +1137,7 @@ exports[`generated tokens > CSS > index should match 1`] = `
     --calcite-color-border-1: #c9c9c9;
     --calcite-color-text-link: #00619b;
     --calcite-color-text-inverse: #ffffff;
+    --calcite-color-text-highlight: #004874;
     --calcite-color-text-3: #6b6b6b;
     --calcite-color-text-2: #4a4a4a;
     --calcite-color-text-1: #141414;
@@ -1182,6 +1185,7 @@ exports[`generated tokens > CSS > index should match 1`] = `
     --calcite-color-border-1: #545454;
     --calcite-color-text-link: #00a0ff;
     --calcite-color-text-inverse: #141414;
+    --calcite-color-text-highlight: #c7eaff;
     --calcite-color-text-3: #9e9e9e;
     --calcite-color-text-2: #bfbfbf;
     --calcite-color-text-1: #ffffff;
@@ -1228,6 +1232,7 @@ exports[`generated tokens > CSS > index should match 1`] = `
   --calcite-color-border-1: #c9c9c9;
   --calcite-color-text-link: #00619b;
   --calcite-color-text-inverse: #ffffff;
+  --calcite-color-text-highlight: #004874;
   --calcite-color-text-3: #6b6b6b;
   --calcite-color-text-2: #4a4a4a;
   --calcite-color-text-1: #141414;
@@ -1273,6 +1278,7 @@ exports[`generated tokens > CSS > index should match 1`] = `
   --calcite-color-border-1: #545454;
   --calcite-color-text-link: #00a0ff;
   --calcite-color-text-inverse: #141414;
+  --calcite-color-text-highlight: #c7eaff;
   --calcite-color-text-3: #9e9e9e;
   --calcite-color-text-2: #bfbfbf;
   --calcite-color-text-1: #ffffff;
@@ -1354,6 +1360,7 @@ exports[`generated tokens > CSS > light should match 1`] = `
   --calcite-color-text-1: #141414;
   --calcite-color-text-2: #4a4a4a;
   --calcite-color-text-3: #6b6b6b;
+  --calcite-color-text-highlight: #004874;
   --calcite-color-text-inverse: #ffffff;
   --calcite-color-text-link: #00619b;
   --calcite-color-border-1: #c9c9c9;
@@ -18670,6 +18677,33 @@ exports[`generated tokens > DOCS (internal) > global (internal) should match 1`]
       "path": ["semantic", "color", "text", "3"],
       "key": "{semantic.color.text.3}"
     },
+    {
+      "value": "{\\"light\\":\\"#004874\\",\\"dark\\":\\"#c7eaff\\"}",
+      "type": "color",
+      "attributes": {
+        "category": "color",
+        "type": "color",
+        "item": "text",
+        "subitem": "highlight",
+        "names": {
+          "scss": "$calcite-color-text-highlight",
+          "css": "var(--calcite-color-text-highlight)",
+          "js": "semantic.color.text.highlight",
+          "docs": "semantic.color.text.highlight",
+          "es6": "calciteColorTextHighlight"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "color",
+          "type": "color"
+        }
+      },
+      "filePath": "src/tokens/semantic/color/light.json",
+      "isSource": false,
+      "name": "Color Text Highlight",
+      "path": ["semantic", "color", "text", "highlight"],
+      "key": "{semantic.color.text.highlight}"
+    },
     {
       "value": "{\\"light\\":\\"#ffffff\\",\\"dark\\":\\"#141414\\"}",
       "type": "color",
@@ -30322,6 +30356,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 calciteColorTextInverse = { light: "#ffffff", dark: "#141414" };
 export const calciteColorTextLink = { light: "#00619b", dark: "#00a0ff" };
 export const calciteColorBorder1 = { light: "#c9c9c9", dark: "#545454" };
@@ -30791,6 +30826,7 @@ export const calciteColorInversePress: { light: string; dark: string };
 export const calciteColorText1: { light: string; dark: string };
 export const calciteColorText2: { light: string; dark: string };
 export const calciteColorText3: { light: string; dark: string };
+export const calciteColorTextHighlight: { light: string; dark: string };
 export const calciteColorTextInverse: { light: string; dark: string };
 export const calciteColorTextLink: { light: string; dark: string };
 export const calciteColorBorder1: { light: string; dark: string };
@@ -54625,6 +54661,43 @@ export default {
           path: ["semantic", "color", "text", "3"],
           key: "{semantic.color.text.3}",
         },
+        highlight: {
+          value: {
+            light: "#004874",
+            dark: "#c7eaff",
+          },
+          type: "color",
+          attributes: {
+            category: "color",
+            type: "color",
+            item: "text",
+            subitem: "highlight",
+            names: {
+              scss: "$calcite-color-text-highlight",
+              css: "var(--calcite-color-text-highlight)",
+              js: "semantic.color.text.highlight",
+              docs: "semantic.color.text.highlight",
+              es6: "calciteColorTextHighlight",
+            },
+            "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-080}",
+            type: "color",
+            attributes: {
+              category: "color",
+            },
+          },
+          name: "Color Text Highlight",
+          path: ["semantic", "color", "text", "highlight"],
+          key: "{semantic.color.text.highlight}",
+        },
         inverse: {
           value: {
             light: "#ffffff",
@@ -63278,6 +63351,7 @@ declare const tokens: {
         "1": DesignToken;
         "2": DesignToken;
         "3": DesignToken;
+        highlight: DesignToken;
         inverse: DesignToken;
         link: DesignToken;
       };
@@ -69413,6 +69487,7 @@ $calcite-color-inverse-press: #f2f2f2;
 $calcite-color-text-1: #ffffff;
 $calcite-color-text-2: #bfbfbf;
 $calcite-color-text-3: #9e9e9e;
+$calcite-color-text-highlight: #c7eaff;
 $calcite-color-text-inverse: #141414;
 $calcite-color-text-link: #00a0ff;
 $calcite-color-border-1: #545454;
@@ -69563,6 +69638,7 @@ exports[`generated tokens > SCSS > index should match 1`] = `
   --calcite-color-border-1: #c9c9c9;
   --calcite-color-text-link: #00619b;
   --calcite-color-text-inverse: #ffffff;
+  --calcite-color-text-highlight: #004874;
   --calcite-color-text-3: #6b6b6b;
   --calcite-color-text-2: #4a4a4a;
   --calcite-color-text-1: #141414;
@@ -69608,6 +69684,7 @@ exports[`generated tokens > SCSS > index should match 1`] = `
   --calcite-color-border-1: #545454;
   --calcite-color-text-link: #00a0ff;
   --calcite-color-text-inverse: #141414;
+  --calcite-color-text-highlight: #c7eaff;
   --calcite-color-text-3: #9e9e9e;
   --calcite-color-text-2: #bfbfbf;
   --calcite-color-text-1: #ffffff;
@@ -69687,6 +69764,7 @@ $calcite-color-inverse-press: #212121;
 $calcite-color-text-1: #141414;
 $calcite-color-text-2: #4a4a4a;
 $calcite-color-text-3: #6b6b6b;
+$calcite-color-text-highlight: #004874;
 $calcite-color-text-inverse: #ffffff;
 $calcite-color-text-link: #00619b;
 $calcite-color-border-1: #c9c9c9;