feat: add default focus color token (#10512)

**Related Issue:** #7180 #10510 ## Summary This adds `calcite-color-focus` to replace the deprecated `calcite-ui-focus-color`
Esri · Feb 8, 2025 · 92a2be0 · 92a2be0
1 parent 729e487
commit 92a2be0
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 27 deletions.
diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -258,14 +258,14 @@ export default {
           "outline-color": "transparent",
         },
         ".focus-normal": {
-          outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))",
+          outline: "2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
         },
         ".focus-outset": {
-          outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))",
+          outline: "2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
           "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
         },
         ".focus-inset": {
-          outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))",
+          outline: "2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
           "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
         },
         ".focus-outset-danger": {

diff --git a/packages/calcite-design-tokens/src/semantic/color.json b/packages/calcite-design-tokens/src/semantic/color.json
@@ -54,6 +54,27 @@
           }
         }
       },
+      "focus": {
+        "type": "color",
+        "value": "{semantic.color.brand.default.default}",
+        "attributes": {
+          "calcite-schema": {
+            "system": "calcite",
+            "tier": "semantic",
+            "domain": "",
+            "component": "",
+            "element": "",
+            "type": "color",
+            "group": "",
+            "kind": "",
+            "appearance": "",
+            "state": "focus",
+            "scale": "",
+            "context": "",
+            "mode": ""
+          }
+        }
+      },
       "foreground": {
         "1": {
           "value": {

diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap
@@ -367,6 +367,7 @@ exports[`generated tokens CSS dark should match 1`] = `
   --calcite-color-foreground-2: #202020;
   --calcite-color-foreground-1: #2b2b2b;
   --calcite-color-background: #353535;
+  --calcite-color-focus: #009af2;
 }
 "
 `;
@@ -515,6 +516,7 @@ exports[`generated tokens CSS light should match 1`] = `
   --calcite-color-foreground-2: #f3f3f3;
   --calcite-color-foreground-1: #ffffff;
   --calcite-color-background: #f8f8f8;
+  --calcite-color-focus: #007ac2;
 }
 "
 `;
@@ -846,6 +848,7 @@ export const calciteBorderWidthMd = "2px";
 export const calciteBorderWidthLg = "4px";
 export const calciteColorBackground = {"light":"#f8f8f8","dark":"#353535"};
 export const calciteColorBackgroundNone = "rgba(255, 255, 255, 0)";
+export const calciteColorFocus = {"light":"#007ac2","dark":"#009af2"};
 export const calciteColorForeground1 = {"light":"#ffffff","dark":"#2b2b2b"};
 export const calciteColorForeground2 = {"light":"#f3f3f3","dark":"#202020"};
 export const calciteColorForeground3 = {"light":"#eaeaea","dark":"#151515"};
@@ -1049,6 +1052,7 @@ export const calciteBorderWidthMd : string;
 export const calciteBorderWidthLg : string;
 export const calciteColorBackground : { light: string, dark: string };
 export const calciteColorBackgroundNone : string;
+export const calciteColorFocus : { light: string, dark: string };
 export const calciteColorForeground1 : { light: string, dark: string };
 export const calciteColorForeground2 : { light: string, dark: string };
 export const calciteColorForeground3 : { light: string, dark: string };
@@ -1960,6 +1964,7 @@ $calcite-color-foreground-3: #151515;
 $calcite-color-foreground-2: #202020;
 $calcite-color-foreground-1: #2b2b2b;
 $calcite-color-background: #353535;
+$calcite-color-focus: #009af2;
 "
 `;
 
@@ -2106,5 +2111,6 @@ $calcite-color-foreground-3: #eaeaea;
 $calcite-color-foreground-2: #f3f3f3;
 $calcite-color-foreground-1: #ffffff;
 $calcite-color-background: #f8f8f8;
+$calcite-color-focus: #007ac2;
 "
 `;
diff --git a/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.ts b/packages/calcite-design-tokens/support/token-transformer/helpers/createCalciteTokenFiles.ts
@@ -2,7 +2,9 @@ import { CalciteTokenFile, CalciteTokenFileArguments } from "../../types/config.
 import { getFiles } from "./getFiles.js";
 
 export async function createCalciteTokenFiles(args: CalciteTokenFileArguments): Promise<CalciteTokenFile> {
-  const sourceFiles = await getFiles(args.path);
+  const sourceFiles = await Promise.all(
+    Array.isArray(args.path) ? args.path.map(getFiles) : [getFiles(args.path)],
+  ).then((files) => files.reduce((acc, file) => ({ ...acc, ...file }), {}));
   const sourcePaths = Object.values(sourceFiles);
 
   const tokenFile = {

diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/css.ts
@@ -14,7 +14,7 @@ export const formatCssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return prettierSync.format(header + `:root {${tokens.join(EOL)}}`, { parser: "css" });
+  return prettierSync.format(header + (tokens ? `:root {${tokens.join(EOL)}}` : ""), { parser: "css" });
 };
 
 export const registerFormatterCss = (sd: StyleDictionary): void => {

diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/formatter/scss.ts
@@ -15,7 +15,8 @@ export const formatScssPlatform: CalledFormatterFunction = (args) => {
   if (Object.keys(extraOutput).length > 0) {
     formatExtraOutput(extraOutput, { ...args.options, header, buildPath: args.platform.buildPath });
   }
-  return prettierSync.format(header + tokens.join(EOL), { parser: "scss" });
+
+  return prettierSync.format(header + (tokens ? tokens.join(EOL) : ""), { parser: "scss" });
 };
 
 export const registerFormatterScss = (sd: StyleDictionary): void => {

diff --git a/...ign-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts b/...ign-tokens/support/token-transformer/styleDictionary/formatter/utils/formatExtraOutput.ts
@@ -104,39 +104,37 @@ export function formatExtraOutput(
 
     Object.entries(outputObject).forEach(([fileName, outputList]) => {
       const absoluteFilePath = resolve(args.buildPath, fileName);
+      let format;
+      let parser;
+
       switch (args.platform) {
         case Platform.CSS:
-          if (typeof outputList[0] === "string" && outputList[0].slice(0, 2) === "--") {
-            writeFileSync(
-              absoluteFilePath,
-              prettierSync.format(`${args.header}:root{${outputList.join("")}}`, { parser: "css" }),
-            );
-          } else {
-            writeFileSync(
-              absoluteFilePath,
-              prettierSync.format(`${args.header}${outputList.join("")}`, { parser: "css" }),
-            );
-          }
+          parser = "css";
+          format =
+            typeof outputList[0] === "string" && outputList[0].slice(0, 2) === "--"
+              ? `${args.header}:root{${outputList.join("")}}`
+              : `${args.header}${outputList.join("")}`;
           break;
         case Platform.SCSS:
         case Platform.SASS:
-          writeFileSync(
-            absoluteFilePath,
-            prettierSync.format(`${args.header}${outputList.join("")}`, { parser: "scss" }),
-          );
+          parser = "scss";
+          format = `${args.header}${outputList.join("")}`;
           break;
         case Platform.JS:
-          writeFileSync(
-            absoluteFilePath,
-            prettierSync.format(args.header + "export default " + outputList[0] + "", { parser: "babel" }),
-          );
+          parser = "babel";
+          format = args.header + "export default " + outputList[0] + "";
           break;
         case Platform.DOCS:
-          writeFileSync(absoluteFilePath, prettierSync.format(outputList[0].join(""), { parser: "json" }));
+          parser = "json";
+          format = outputList[0].join("");
           break;
         default:
           break;
       }
+
+      if (parser && format) {
+        writeFileSync(absoluteFilePath, prettierSync.format(format, { parser }));
+      }
     });
   }
 }
diff --git a/packages/calcite-design-tokens/support/types/config.ts b/packages/calcite-design-tokens/support/types/config.ts
@@ -48,7 +48,7 @@ export type CalciteTokenFile = {
 
 export type CalciteTokenFileArguments = {
   name: string;
-  path: string;
+  path: string | string[];
   source?: string[];
   references?: string[];
   options?: ConfigOptions;