Skip to content

Commit

Permalink
adds brand colors to dcs exports
Browse files Browse the repository at this point in the history
  • Loading branch information
brianchristopherbrady committed Nov 14, 2023
1 parent d6a6cfd commit d45129b
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 13 deletions.
73 changes: 61 additions & 12 deletions src/pipeline/fluentui-dcs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand All @@ -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[] }) =>
Expand All @@ -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")
Expand Down
10 changes: 9 additions & 1 deletion src/pipeline/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ export const buildOutputs = (input: string[] | string, outputPath: string, platf
}
}
}

}


Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit d45129b

Please sign in to comment.