Open mdacic01 opened 11 months ago
aaronreed708
commented
9 months ago We need to do research to identify possibilities. Need to also identify a tool chain upon which to work (if others than Discover already uses). Moving to "Future" for now.
aaronreed708
commented
4 months ago Depends on #532
lwnoble
commented
3 months ago In order to get the tool chain working we need to be able to enable to following:
lwnoble
commented
3 months ago Use the filter attribute in the files array to:
I would to write transforms that convert the following:
"letter-spacing": { "0": { "value": "-.15", "type": "letterSpacing" }, }
to the following css with the comment
/ letter spacing / --letter-spacing-0
3.) I would to write transforms that convert the following: "navbar": { "mobile-menu": { "value": "true", "type": "boolean" }, }
to the following css converging the boolean true to 'block' and false to 'none'
/ navbar / --navbar-mobile-menu: 'block';
I would to write transforms that convert the following: "core-colors": { "transparent": { "value": "#00000000", "type": "color" } },
to the following css format using 'core-colors' appears only in the comment, not in the name Note: the color transformation is taken care of
/ core colors/ --transparent: rgba(0,0,0,0);
lwnoble
commented
3 months ago This is an example of the code I want to transform:
lwnoble
commented
2 months ago lwnoble
commented
2 months ago Helpful documentation: https://style-dictionary-v4.netlify.app/reference/utils/references/#outputreferencesfilter
evangk6
commented
2 months ago Building on what you did I was able to do likewise for the navbar. I couldn't quite get the core-colors exactly the way you wanted, but it is close. As for the file splitting, I could not use the tools provided to do that, but I wrote a python script to split the transform.json into the correct files:
# filename: split.py
import json
# Usage: python split.py
# make sure to specify OUTPUT_DIR
# Save anything in core to core.json
# Save anything in base to base.json
# Save anything in light-mode to light-mode.json
# Save anything in dark-mode to dark-mode.json
# Save anything in AAA-light-mode to AAA-light-mode.json
# Save anything in AAA-dark-mode to AAA-dark-mode.json
# Save everything else to group.json
KEYS = ["core","base","light-mode","dark-mode","AAA-light-mode","AAA-dark-mode"]
OUTPUT_DIR = "output"
f = open('transform.json')
data = json.load(f)
otherExists=False
group_json = {}
for key in data:
value = data[key]
if key in KEYS:
with open(OUTPUT_DIR + '/' + key + '.json', 'w') as f:
json.dump(value, f)
else:
if otherExists == False:
otherExists = True
group_json[key] = value
if otherExists:
with open(OUTPUT_DIR + '/group.json', 'w') as f:
json.dump(group_json, f)
Prepare a demo and documentation for setting up the toolchain workflow for keeping the Design Component Library, the Digital Component Library and the CSS Library in sync. See DesignOps Toolchain for more details.