adds brand colors to dcs exports

Author: brianchristopherbrady

src/pipeline/fluentui-dcs.ts

@@ -3,50 +3,88 @@ import * as Utils from "./utils"
 import _ from "lodash"
 
 
-const constructCssName = (path: any[]): string =>
+const tokenOverrides = {
+	"globalColorBrand10": "#001919",
+	"globalColorBrand20": "#012826",
+	"globalColorBrand30": "#01322e",
+	"globalColorBrand40": "#033f38",
+	"globalColorBrand50": "#054d43",
+	"globalColorBrand60": "#0a5c50",
+	"globalColorBrand70": "#0c695a",
+	"globalColorBrand80": "#117865",
+	"globalColorBrand90": "#1f937e",
+	"globalColorBrand100": "#2aac94",
+	"globalColorBrand110": "#3abb9f",
+	"globalColorBrand120": "#52c7aa",
+	"globalColorBrand130": "#78d3b9",
+	"globalColorBrand140": "#9ee0cb",
+	"globalColorBrand150": "#c0ecdd",
+	"globalColorBrand160": "#e3f7ef",
+}
+
+const constructCssName = (path: any, prop: any): string =>
 {
-	let newName = path[0] !== "Global" && path[3] === "Color" ? `color${Utils.pascalCase(path)}` : _.camelCase(path.join(" "))
+	let newName = path[0] !== "Global" && prop.attributes.category === "color" ? `color${Utils.pascalCase(path)}` : _.camelCase(path.join(""))
 	newName = newName.replace("Rest", "")
-	newName = newName.replace("set", "")
-	newName = newName.replace("FillColor", "")
-	newName = newName.replace("StrokeColor", "")
-	newName = newName.replace("BorderColor", "")
-	newName = newName.replace("globalColorHc", "globalColorhc")
+
+	// Check if the constructed name is in the tokenOverrides object
+	if (tokenOverrides.hasOwnProperty(newName))
+	{
+		prop.value = tokenOverrides[newName]
+	}
 
 	return newName
 }
 
 StyleDictionary.registerTransform({
 	name: "dcs/name/json",
 	type: "name",
-	transformer: prop => `${constructCssName(Utils.getTokenExportPath(prop))}`,
+	transformer: prop => `${constructCssName(Utils.getTokenExportPath(prop), prop)}`,
 })
 
 StyleDictionary.registerTransform({
 	name: "dcs/alias/json",
 	type: "value",
 	matcher: prop => "resolvedAliasPath" in prop,
-	transformer: prop => `var(--${constructCssName(prop.resolvedAliasPath)})`,
+	transformer: prop => `var(--${constructCssName(prop.resolvedAliasPath, prop)})`,
 })
 
 StyleDictionary.registerTransform({
 	name: "dcs/name/css",
 	type: "name",
-	transformer: prop => `${constructCssName(Utils.getTokenExportPath(prop))}`,
+	transformer: prop => `${constructCssName(Utils.getTokenExportPath(prop), prop)}`,
 })
 
 StyleDictionary.registerTransform({
 	name: "dcs/alias/css",
 	type: "value",
 	matcher: prop => "resolvedAliasPath" in prop,
-	transformer: prop => `var(--${constructCssName(prop.resolvedAliasPath)})`,
+	transformer: prop => `var(--${constructCssName(prop.resolvedAliasPath, prop)})`,
+})
+
+StyleDictionary.registerTransform({
+	name: "dcs/name/mixins",
+	type: "name",
+	transformer: prop => `${constructCssName(Utils.getTokenExportPath(prop), prop)}`,
+})
+
+StyleDictionary.registerTransform({
+	name: "dcs/alias/mixins",
+	type: "value",
+	matcher: prop => "resolvedAliasPath" in prop,
+	transformer: prop => `var(--${constructCssName(prop.resolvedAliasPath, prop)})`,
 })
 
 StyleDictionary.registerTransformGroup({
 	name: "dcs/json",
 	transforms: ["dcs/name/json", "time/seconds", "fluentui/size/css", "fluentui/color/css", "fluentui/strokealignment/css", "fluentui/shadow/css", "fluentui/font/css", "dcs/alias/json"],
 })
 
+StyleDictionary.registerTransformGroup({
+	name: "dcs/mixins",
+	transforms: ["dcs/name/css", "time/seconds", "fluentui/size/css", "fluentui/color/css", "fluentui/strokealignment/css", "fluentui/shadow/css", "fluentui/font/css", "dcs/alias/css"],
+})
+
 StyleDictionary.registerTransformGroup({
 	name: "dcs/css",
 	transforms: ["dcs/name/css", "time/seconds", "fluentui/size/css", "fluentui/color/css", "fluentui/strokealignment/css", "fluentui/shadow/css", "fluentui/font/css", "dcs/alias/css"],
@@ -62,6 +100,17 @@ StyleDictionary.registerFormat({
 	}
 })
 
+StyleDictionary.registerFormat({
+	name: "fluentui/dcs/mixins",
+	formatter: function (dictionary: { allProperties: { name: any; value: any }[] }, config: any)
+	{
+		return `${this.selector} {
+		${dictionary.allProperties.map((prop: { name: any; value: any }) => `  --${prop.name}: ${prop.value};`).join("\n")}
+	  }`
+	}
+})
+
+
 StyleDictionary.registerFormat({
 	name: "fluentui/dcs/json",
 	formatter: (dictionary: { allProperties: any[] }) =>
@@ -71,7 +120,7 @@ StyleDictionary.registerFormat({
 		const tokens: any = {}
 		for (const thisProp of sortedProps)
 		{
-			tokens[constructCssName(thisProp.path)] = thisProp.value
+			tokens[constructCssName(thisProp.path, thisProp)] = thisProp.value
 		}
 
 		return JSON.stringify(tokens, /* replacer: */ undefined, /* space: */ "\t")

src/pipeline/index.ts

@@ -40,7 +40,6 @@ export const buildOutputs = (input: string[] | string, outputPath: string, platf
 				}
 			}
 		}
-		
 	}
 
 
@@ -212,6 +211,15 @@ export const buildOutputs = (input: string[] | string, outputPath: string, platf
 					{ destination: `css/fluent-${theme}.css`, format: "fluentui/dcs/css", selector: `[data-theme="fluent-${theme}"]` },
 				],
 			},
+			dcsMixins:
+			{
+				transformGroup: "dcs/mixins",
+				buildPath: useSubfolders ? `${outputPath}dcs/` : outputPath,
+				files: [
+
+					{ destination: `scss/fluent-${theme}.scss`, format: "fluentui/dcs/mixins", selector: `@mixin install-fluent-${theme}-tokens` },
+				],
+			},
 			dcsJson:
 			{
 				transformGroup: "dcs/json",