Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(exporter): export description to json files #64

Merged
merged 1 commit into from
Jun 7, 2024
Merged

feat(exporter): export description to json files #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions packages/module/plugins/export-patternfly-tokens/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function processCollection({ name, modes, variableIds }) {
let file = { fileName: `${name}.${mode.name}.tokens.json`, body: {} };

variableIds.forEach((variableId) => {
const { name, resolvedType, valuesByMode } =
const { name, resolvedType, valuesByMode, description } =
figma.variables.getVariableById(variableId);
const value = valuesByMode[mode.modeId];

Expand All @@ -53,8 +53,11 @@ function processCollection({ name, modes, variableIds }) {
obj[groupName] = obj[groupName] || {};
obj = obj[groupName];
});



if (description) {
obj.description = description;
}

if (value.type === "VARIABLE_ALIAS") {
obj.$type = resolvedType === "COLOR" ? "color" : "number";
obj.$value = `{${figma.variables
Expand Down
40 changes: 32 additions & 8 deletions packages/module/tokens/dark/semantic.dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,80 @@
"color": {
"primary": {
"default": {
"description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
"type": "color",
"value": "{global.dark.background.color.200}"
},
"hover": {
"description": "Use as the hover state for primary backgrounds",
"type": "color",
"value": "{global.dark.background.color.300}"
},
"clicked": {
"description": "Use as the selected state for primary backgrounds",
"type": "color",
"value": "{global.dark.background.color.300}"
}
},
"secondary": {
"default": {
"description": "Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).",
"type": "color",
"value": "{global.dark.background.color.100}"
},
"hover": {
"description": "Use as the hover state for secondary backgrounds",
"type": "color",
"value": "{global.dark.background.color.200}"
},
"clicked": {
"description": "Use as the selected state for secondary backgrounds",
"type": "color",
"value": "{global.dark.background.color.200}"
}
},
"floating": {
"default": {
"description": "Use as background color for components that show over top of other content such as toast alerts, menus, modals, overlay drawers, etc.",
"type": "color",
"value": "{global.dark.background.color.300}"
},
"hover": {
"description": "Use as the hover state for floating backgrounds",
"type": "color",
"value": "{global.dark.background.color.200}"
},
"clicked": {
"description": "Use as the selected state for floating backgrounds",
"type": "color",
"value": "{global.dark.background.color.200}"
}
},
"action": {
"plain": {
"default": {
"description": "Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.",
"type": "color",
"value": "rgba(0, 0, 0, 0.0000)"
},
"hover": {
"description": "Use as the hover state for components that use the plain action default background.",
"type": "color",
"value": "{global.dark.background.color.600}"
},
"clicked": {
"description": "Use as the active/pressed state for components that use the plain action default background.",
"type": "color",
"value": "{global.dark.background.color.600}"
},
"alt": {
"hover": {
"description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
"type": "color",
"value": "{global.dark.background.color.200}"
},
"clicked": {
"description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
"type": "color",
"value": "{global.dark.background.color.200}"
}
Expand All @@ -73,34 +87,40 @@
},
"control": {
"default": {
"description": "Use as the default background for control elements like form inputs and menu toggles.",
"type": "color",
"value": "{global.dark.background.color.300}"
}
},
"highlight": {
"default": {
"description": "Use as the background color for highlighted elements",
"type": "color",
"value": "{global.dark.background.color.highlight.100}"
},
"clicked": {
"description": "Use as the active state for for highlighted elements",
"type": "color",
"value": "{global.dark.background.color.highlight.200}"
}
},
"inverse": {
"default": {
"description": "Use as the background color components with inversed backgrounds like tooltips.",
"type": "color",
"value": "{global.dark.background.color.400}"
}
},
"disabled": {
"default": {
"description": "Use as the background color for disabled components.",
"type": "color",
"value": "{global.dark.color.disabled.100}"
}
},
"backdrop": {
"default": {
"description": "Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.",
"type": "color",
"value": "{global.dark.background.color.500}"
}
Expand Down Expand Up @@ -291,7 +311,7 @@
"value": "{global.dark.color.nonstatus.orangered.200}"
}
},
"gold": {
"yellow": {
"default": {
"type": "color",
"value": "{global.dark.color.nonstatus.gold.100}"
Expand Down Expand Up @@ -319,7 +339,7 @@
"value": "{global.dark.color.nonstatus.green.200}"
}
},
"cyan": {
"teal": {
"default": {
"type": "color",
"value": "{global.dark.color.nonstatus.cyan.100}"
Expand Down Expand Up @@ -606,10 +626,12 @@
"value": "{global.dark.icon.color.300}"
},
"disabled": {
"description": "for use without disabled background color",
"type": "color",
"value": "{global.dark.color.disabled.200}"
},
"on-disabled": {
"description": "pair with disabled background color",
"type": "color",
"value": "{global.dark.color.disabled.300}"
},
Expand Down Expand Up @@ -694,7 +716,7 @@
"value": "{global.icon.color.inverse}"
}
},
"on-gold": {
"on-yellow": {
"default": {
"type": "color",
"value": "{global.icon.color.inverse}"
Expand Down Expand Up @@ -722,7 +744,7 @@
"value": "{global.icon.color.inverse}"
}
},
"on-cyan": {
"on-teal": {
"default": {
"type": "color",
"value": "{global.icon.color.inverse}"
Expand Down Expand Up @@ -936,7 +958,7 @@
"value": "{global.dark.color.nonstatus.orange.200}"
}
},
"gold": {
"yellow": {
"default": {
"type": "color",
"value": "{global.dark.color.nonstatus.gold.100}"
Expand Down Expand Up @@ -964,7 +986,7 @@
"value": "{global.dark.color.nonstatus.green.200}"
}
},
"cyan": {
"teal": {
"default": {
"type": "color",
"value": "{global.dark.color.nonstatus.cyan.100}"
Expand Down Expand Up @@ -1070,10 +1092,12 @@
"value": "{global.text.color.subtle}"
},
"disabled": {
"description": "for use without disabled background color",
"type": "color",
"value": "{global.dark.color.disabled.200}"
},
"on-disabled": {
"description": "pair with disabled background color",
"type": "color",
"value": "{global.dark.color.disabled.300}"
},
Expand Down Expand Up @@ -1314,7 +1338,7 @@
"value": "{global.text.color.inverse}"
}
},
"on-gold": {
"on-yellow": {
"default": {
"type": "color",
"value": "{global.text.color.inverse}"
Expand Down Expand Up @@ -1342,7 +1366,7 @@
"value": "{global.text.color.inverse}"
}
},
"on-cyan": {
"on-teal": {
"default": {
"type": "color",
"value": "{global.text.color.inverse}"
Expand Down
80 changes: 80 additions & 0 deletions packages/module/tokens/default/base.dimension.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,86 @@
}
},
"font": {
"family": {
"100": {
"type": "string",
"value": "Red Hat Text VF"
},
"200": {
"type": "string",
"value": "Red Hat Display VF"
},
"300": {
"type": "string",
"value": "Red Hat Mono VF"
}
},
"weight": {
"body": {
"100": {
"type": "number",
"value": 400
},
"200": {
"type": "number",
"value": 500
}
},
"heading": {
"100": {
"type": "number",
"value": 700
},
"200": {
"type": "number",
"value": 700
}
}
},
"line-height": {
"100": {
"type": "number",
"value": 1.2999999523162842
},
"200": {
"type": "number",
"value": 1.5
},
"figma-only": {
"100": {
"type": "number",
"value": 18
},
"200": {
"type": "number",
"value": 21
},
"300": {
"type": "number",
"value": 24
},
"400": {
"type": "number",
"value": 23.399999618530273
},
"500": {
"type": "number",
"value": 26
},
"600": {
"type": "number",
"value": 28.600000381469727
},
"700": {
"type": "number",
"value": 36.400001525878906
},
"800": {
"type": "number",
"value": 46.79999923706055
}
}
},
"size": {
"100": {
"type": "number",
Expand Down
Loading
Loading