Skip to content

Commit

Permalink
Merge pull request #64 from srambach/export-descriptions
Browse files Browse the repository at this point in the history 
feat(exporter): export description to json files
  • Loading branch information
@nicolethoen
nicolethoen authored Jun 7, 2024
2 parents 1d475ce + 7163900 commit 20fee76
Show file tree
Hide file tree
Showing 5 changed files with 281 additions and 58 deletions.
9 changes: 6 additions & 3 deletions packages/module/plugins/export-patternfly-tokens/code.js
View file
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);

if (name.includes("figma-only")) {
Expand All @@ -58,8 +58,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
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
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

0 comments on commit 20fee76

Please sign in to comment.