From 93ae558bad0a00009265455c1104d795f020fb69 Mon Sep 17 00:00:00 2001 From: Jessie Date: Tue, 14 May 2024 11:34:23 -0400 Subject: [PATCH] Update export plugin to handle strings --- .../module/build/css/tokens-charts-dark.scss | 8 ++++++-- packages/module/build/css/tokens-charts.scss | 8 ++++++-- packages/module/build/css/tokens-dark.scss | 2 +- packages/module/build/css/tokens-default.scss | 2 +- packages/module/build/css/tokens-palette.scss | 2 +- .../plugins/export-patternfly-tokens/code.js | 18 ++++++++++++----- packages/module/tokens/dark/charts.dark.json | 20 ++++++++++++++++++- packages/module/tokens/default/charts.json | 20 ++++++++++++++++++- 8 files changed, 66 insertions(+), 14 deletions(-) diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index 8c36953..4f09ea3 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,14 +1,18 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Tue, 14 May 2024 15:28:40 GMT @mixin pf-v6-tokens { + --pf-t--chart--global--stroke-line-join: "round"; --pf-t--chart--global--layout--width: 450; --pf-t--chart--global--layout--height: 300; --pf-t--chart--global--layout--padding: 50; - --pf-t--chart--global--label--stroke--width: 0; + --pf-t--chart--global--label--text-anchor: "middle"; + --pf-t--chart--global--label--stroke: "transparent"; --pf-t--chart--global--label--margin: 8; --pf-t--chart--global--label--padding: 10; + --pf-t--chart--global--stroke-line-cap: "round"; + --pf-t--chart--global--letter-spacing: "normal"; --pf-t--chart--global--FontSize--2xl: 22; --pf-t--chart--global--FontSize--lg: 18; --pf-t--chart--global--FontSize--sm: 14; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index b5818dd..55b1e19 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,14 +1,18 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Tue, 14 May 2024 15:28:40 GMT @mixin pf-v6-tokens { + --pf-t--chart--global--stroke-line-join: "round"; --pf-t--chart--global--layout--width: 450; --pf-t--chart--global--layout--height: 300; --pf-t--chart--global--layout--padding: 50; - --pf-t--chart--global--label--stroke--width: 0; + --pf-t--chart--global--label--text-anchor: "middle"; + --pf-t--chart--global--label--stroke: "transparent"; --pf-t--chart--global--label--margin: 8; --pf-t--chart--global--label--padding: 10; + --pf-t--chart--global--stroke-line-cap: "round"; + --pf-t--chart--global--letter-spacing: "normal"; --pf-t--chart--global--FontSize--2xl: 22; --pf-t--chart--global--FontSize--lg: 18; --pf-t--chart--global--FontSize--sm: 14; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index 7437e76..0a851bb 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Tue, 14 May 2024 15:28:40 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 17f992b..7bd1077 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Tue, 14 May 2024 15:28:40 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index c8364cb..4961279 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Thu, 09 May 2024 17:55:04 GMT +// Generated on Tue, 14 May 2024 15:28:40 GMT @mixin pf-v6-tokens { --pf-t--color--red--70: #5f0000; diff --git a/packages/module/plugins/export-patternfly-tokens/code.js b/packages/module/plugins/export-patternfly-tokens/code.js index 1c59f2e..f7ebd34 100644 --- a/packages/module/plugins/export-patternfly-tokens/code.js +++ b/packages/module/plugins/export-patternfly-tokens/code.js @@ -47,20 +47,28 @@ function processCollection({ name, modes, variableIds }) { figma.variables.getVariableById(variableId); const value = valuesByMode[mode.modeId]; - if (value !== undefined && ["COLOR", "FLOAT"].includes(resolvedType)) { + if (value !== undefined && ["COLOR", "FLOAT", "STRING"].includes(resolvedType)) { let obj = file.body; name.split("/").forEach((groupName) => { obj[groupName] = obj[groupName] || {}; obj = obj[groupName]; }); - - obj.$type = resolvedType === "COLOR" ? "color" : "number"; + + if (value.type === "VARIABLE_ALIAS") { + obj.$type = resolvedType === "COLOR" ? "color" : "number"; obj.$value = `{${figma.variables .getVariableById(value.id) .name.replace(/\//g, ".")}}`; - } else { - obj.$value = resolvedType === "COLOR" ? rgbToHex(value) : value; + } else if (resolvedType === "COLOR") { + obj.$type = "color" + obj.$value = rgbToHex(value); + } else if (resolvedType === "FLOAT") { + obj.$type = "number"; + obj.$value = value + } else if (resolvedType === "STRING") { + obj.$type = "string"; + obj.$value = value } } }); diff --git a/packages/module/tokens/dark/charts.dark.json b/packages/module/tokens/dark/charts.dark.json index 80e85e1..d1bb3a8 100644 --- a/packages/module/tokens/dark/charts.dark.json +++ b/packages/module/tokens/dark/charts.dark.json @@ -288,6 +288,14 @@ "value": 22 } }, + "letter-spacing": { + "type": "string", + "value": "\"normal\"" + }, + "stroke-line-cap": { + "type": "string", + "value": "\"round\"" + }, "label": { "padding": { "type": "number", @@ -301,7 +309,13 @@ "width": { "type": "number", "value": 0 - } + }, + "type": "string", + "value": "\"transparent\"" + }, + "text-anchor": { + "type": "string", + "value": "\"middle\"" }, "fill": { "type": "color", @@ -321,6 +335,10 @@ "type": "number", "value": 450 } + }, + "stroke-line-join": { + "type": "string", + "value": "\"round\"" } }, "theme": { diff --git a/packages/module/tokens/default/charts.json b/packages/module/tokens/default/charts.json index a7364ef..8bf6068 100644 --- a/packages/module/tokens/default/charts.json +++ b/packages/module/tokens/default/charts.json @@ -288,6 +288,14 @@ "value": 22 } }, + "letter-spacing": { + "type": "string", + "value": "\"normal\"" + }, + "stroke-line-cap": { + "type": "string", + "value": "\"round\"" + }, "label": { "padding": { "type": "number", @@ -301,7 +309,13 @@ "width": { "type": "number", "value": 0 - } + }, + "type": "string", + "value": "\"transparent\"" + }, + "text-anchor": { + "type": "string", + "value": "\"middle\"" }, "fill": { "type": "color", @@ -321,6 +335,10 @@ "type": "number", "value": 450 } + }, + "stroke-line-join": { + "type": "string", + "value": "\"round\"" } }, "theme": {