From fdce5daf3b1b421b3e55ddca51534fccd199dc48 Mon Sep 17 00:00:00 2001
From: Alan B Smith <a.bax.smith@gmail.com>
Date: Mon, 18 Mar 2024 15:30:15 -0700
Subject: [PATCH 1/2] feat: Add system color tokens

---
 packages/canvas-tokens/tokens/web/sys.json | 650 ++++++++++++++++++++-
 1 file changed, 647 insertions(+), 3 deletions(-)

diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json
index 1665bcf..46d071f 100644
--- a/packages/canvas-tokens/tokens/web/sys.json
+++ b/packages/canvas-tokens/tokens/web/sys.json
@@ -1,5 +1,617 @@
 {
   "sys": {
+    "color": {
+      "bg": {
+        "default": {
+          "value": "{palette.french-vanilla.100}",
+          "type": "color",
+          "description": "Main background color\n"
+        },
+        "transparent": {
+          "value": "rgba({palette.french-vanilla.100}, 0)",
+          "type": "color",
+          "description": "Transparent background"
+        },
+        "overlay": {
+          "value": "rgba({color.static.black},{opacity.400})",
+          "type": "color",
+          "description": "Overlay background"
+        },
+        "translucent": {
+          "value": "rgba({palette.black-pepper.600} ,{opacity.500})",
+          "type": "color",
+          "description": "Tooltip, Status Indicator"
+        },
+        "alt": {
+          "default": {
+            "value": "{palette.soap.300}",
+            "type": "color",
+            "description": "Hover states"
+          },
+          "soft": {
+            "value": "{palette.soap.200}",
+            "type": "color",
+            "description": "Page background"
+          },
+          "strong": {
+            "value": "{palette.soap.400}",
+            "type": "color",
+            "description": "Active states"
+          },
+          "stronger": {
+            "value": "{palette.soap.500}",
+            "type": "color",
+            "description": "Active states"
+          }
+        },
+        "muted": {
+          "default": {
+            "value": "{palette.licorice.300}",
+            "type": "color"
+          },
+          "soft": {
+            "value": "{palette.licorice.100}",
+            "type": "color"
+          },
+          "strong": {
+            "value": "{palette.licorice.500}",
+            "type": "color"
+          }
+        },
+        "contrast": {
+          "default": {
+            "value": "{palette.black-pepper.400}",
+            "type": "color",
+            "description": "Contrast backgrounds, like Secondary Buttons"
+          },
+          "strong": {
+            "value": "{palette.black-pepper.500}",
+            "type": "color",
+            "description": "Contrast backgrounds, like Secondary Buttons"
+          }
+        },
+        "primary": {
+          "default": {
+            "value": "{palette.blueberry.400}",
+            "type": "color",
+            "description": "Primary brand color"
+          },
+          "soft": {
+            "value": "{palette.blueberry.200}",
+            "type": "color",
+            "description": "Brand selected background"
+          },
+          "strong": {
+            "value": "{palette.blueberry.500}",
+            "type": "color",
+            "description": "Brand hover background"
+          },
+          "stronger": {
+            "value": "{palette.blueberry.600}",
+            "type": "color",
+            "description": "Brand active background"
+          }
+        },
+        "positive": {
+          "default": {
+            "value": "{palette.green-apple.400}",
+            "type": "color",
+            "description": "Disabled success background"
+          },
+          "soft": {
+            "value": "{palette.green-apple.100}",
+            "type": "color",
+            "description": "Default success background"
+          },
+          "strong": {
+            "value": "{palette.green-apple.500}",
+            "type": "color",
+            "description": "Hover success background"
+          },
+          "stronger": {
+            "value": "{palette.green-apple.600}",
+            "type": "color",
+            "description": "Active success background"
+          }
+        },
+        "caution": {
+          "default": {
+            "value": "{palette.cantaloupe.400}",
+            "type": "color",
+            "description": "Default warning background"
+          },
+          "softer": {
+            "value": "{palette.cantaloupe.100}",
+            "type": "color",
+            "description": "Disabled warning background"
+          },
+          "strong": {
+            "value": "{palette.cantaloupe.500}",
+            "type": "color",
+            "description": "Strong warning background"
+          },
+          "stronger": {
+            "value": "{palette.cantaloupe.600}",
+            "type": "color",
+            "description": "Stronger warning background"
+          }
+        },
+        "critical": {
+          "default": {
+            "value": "{palette.cinnamon.500}",
+            "type": "color",
+            "description": "Default error background"
+          },
+          "softer": {
+            "value": "{palette.cinnamon.100}",
+            "type": "color",
+            "description": "Disabled error background"
+          },
+          "strong": {
+            "value": "{palette.cinnamon.600}",
+            "type": "color",
+            "description": "Strong error background"
+          },
+          "stronger": {
+            "value": "#80160E",
+            "type": "color",
+            "description": "Stronger error background"
+          }
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{palette.black-pepper.300}",
+          "type": "color",
+          "description": "Default text color"
+        },
+        "disabled": {
+          "value": "{palette.licorice.100}",
+          "type": "color",
+          "description": "Disabled text color"
+        },
+        "hint": {
+          "value": "{palette.licorice.300}",
+          "type": "color",
+          "description": "Hint text color"
+        },
+        "strong": {
+          "value": "{palette.black-pepper.400}",
+          "type": "color",
+          "description": "Heading text color"
+        },
+        "stronger": {
+          "value": "{palette.black-pepper.500}",
+          "type": "color",
+          "description": "Heading hover text color"
+        },
+        "inverse": {
+          "value": "{palette.french-vanilla.100}",
+          "type": "color",
+          "description": "Inverse text color"
+        },
+        "critical": {
+          "default": {
+            "value": "{palette.cinnamon.500}",
+            "type": "color",
+            "description": "Error text"
+          }
+        },
+        "primary": {
+          "default": {
+            "value": "{palette.blueberry.400}",
+            "type": "color",
+            "description": "Branded text"
+          },
+          "strong": {
+            "value": "{palette.blueberry.500}",
+            "type": "color",
+            "description": "Branded hover text"
+          }
+        },
+        "caution": {
+          "default": {
+            "value": "{color.text.strong}",
+            "type": "color",
+            "description": "Warning text"
+          },
+          "strong": {
+            "value": "{color.text.stronger}",
+            "type": "color",
+            "description": "Strong warning text"
+          }
+        }
+      },
+      "icon": {
+        "default": {
+          "value": "{palette.licorice.200}",
+          "type": "color",
+          "description": "Default icon color"
+        },
+        "soft": {
+          "value": "{palette.licorice.100}",
+          "type": "color",
+          "description": "Disabled icon color"
+        },
+        "strong": {
+          "value": "{palette.licorice.500}",
+          "type": "color",
+          "description": "Hover icon color"
+        },
+        "inverse": {
+          "value": "{palette.french-vanilla.100}",
+          "type": "color",
+          "description": "Inverse icon color"
+        },
+        "primary": {
+          "default": {
+            "value": "{palette.blueberry.400}",
+            "type": "color",
+            "description": "Brand icon color"
+          },
+          "strong": {
+            "value": "{palette.blueberry.500}",
+            "type": "color",
+            "description": "Stronger brand icon color"
+          }
+        },
+        "positive": {
+          "default": {
+            "value": "{palette.green-apple.500}",
+            "type": "color",
+            "description": "Success icon color"
+          }
+        },
+        "critical": {
+          "default": {
+            "value": "{palette.cinnamon.500}",
+            "type": "color",
+            "description": "Error icon color"
+          }
+        },
+        "caution": {
+          "default": {
+            "value": "{palette.black-pepper.400}",
+            "type": "color",
+            "description": "Caution icon color"
+          },
+          "strong": {
+            "value": "{palette.black-pepper.500}",
+            "type": "color",
+            "description": "Strong caution icon color"
+          }
+        }
+      },
+      "fg": {
+        "default": {
+          "value": "{palette.black-pepper.300}",
+          "type": "color",
+          "description": "Body"
+        },
+        "strong": {
+          "value": "{palette.black-pepper.400}",
+          "type": "color",
+          "description": "Headings"
+        },
+        "stronger": {
+          "value": "{palette.black-pepper.500}",
+          "type": "color",
+          "description": "Heading on hover"
+        },
+        "disabled": {
+          "value": "{palette.licorice.100}",
+          "type": "color",
+          "description": "Disabled"
+        },
+        "inverse": {
+          "value": "{palette.french-vanilla.100}",
+          "type": "color",
+          "description": "Inverse"
+        },
+        "critical": {
+          "default": {
+            "value": "{palette.cinnamon.500}",
+            "type": "color",
+            "description": "Error"
+          }
+        },
+        "muted": {
+          "default": {
+            "value": "{palette.licorice.300}",
+            "type": "color",
+            "description": "Hint text"
+          },
+          "strong": {
+            "value": "{palette.licorice.400}",
+            "type": "color"
+          },
+          "stronger": {
+            "value": "{palette.licorice.500}",
+            "type": "color"
+          }
+        },
+        "primary": {
+          "default": {
+            "value": "{palette.blueberry.400}",
+            "type": "color",
+            "description": "Interactive foreground elements"
+          },
+          "strong": {
+            "value": "{palette.blueberry.500}",
+            "type": "color",
+            "description": "Hover interactive foregrounds"
+          }
+        },
+        "caution": {
+          "default": {
+            "value": "{palette.black-pepper.400}",
+            "type": "color",
+            "description": "Warning"
+          },
+          "strong": {
+            "value": "{palette.black-pepper.500}",
+            "type": "color",
+            "description": "Warning on hover"
+          }
+        },
+        "contrast": {
+          "default": {
+            "value": "{palette.black-pepper.400}",
+            "type": "color",
+            "description": "Contrast"
+          },
+          "strong": {
+            "value": "{palette.black-pepper.500}",
+            "type": "color",
+            "description": "Strong contrast"
+          }
+        }
+      },
+      "border": {
+        "input": {
+          "disabled": {
+            "value": "{palette.licorice.100}",
+            "type": "color",
+            "description": "Disabled inputs"
+          },
+          "default": {
+            "value": "{palette.licorice.200}",
+            "type": "color",
+            "description": "Inputs"
+          },
+          "strong": {
+            "value": "{palette.licorice.500}",
+            "type": "color",
+            "description": "Input hover"
+          }
+        },
+        "contrast": {
+          "default": {
+            "value": "{palette.black-pepper.400}",
+            "type": "color",
+            "description": "Secondary Button"
+          },
+          "strong": {
+            "value": "{palette.black-pepper.500}",
+            "type": "color",
+            "description": "Secondary Button Hover"
+          }
+        },
+        "primary": {
+          "default": {
+            "value": "{palette.blueberry.400}",
+            "type": "color",
+            "description": "Brand, Focus"
+          }
+        },
+        "critical": {
+          "default": {
+            "value": "{palette.cinnamon.500}",
+            "type": "color",
+            "description": "Error"
+          }
+        },
+        "caution": {
+          "default": {
+            "value": "{palette.cantaloupe.400}",
+            "type": "color",
+            "description": "Warning inner"
+          },
+          "strong": {
+            "value": "{palette.cantaloupe.600}",
+            "type": "color",
+            "description": "Warning outer (box shadow)"
+          }
+        },
+        "transparent": {
+          "value": "rgba({color.static.white}, 0%)",
+          "type": "color",
+          "description": "Transparent"
+        },
+        "inverse": {
+          "value": "{palette.french-vanilla.100}",
+          "type": "color",
+          "description": "Inverse"
+        },
+        "divider": {
+          "value": "{palette.soap.400}",
+          "type": "color",
+          "description": "Dividers"
+        },
+        "container": {
+          "value": "{palette.soap.500}",
+          "type": "color",
+          "description": "Cards, Toasts"
+        }
+      },
+      "shadow": {
+        "1": {
+          "value": "{color.shadow.default}",
+          "type": "color",
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "{opacity.200}",
+                "space": "lch"
+              }
+            }
+          },
+          "description": "First shadow color"
+        },
+        "2": {
+          "value": "{palette.licorice.600}",
+          "type": "color",
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "{opacity.100}",
+                "space": "lch"
+              }
+            }
+          },
+          "description": "Second shadow color"
+        },
+        "default": {
+          "value": "{palette.licorice.600}",
+          "type": "color",
+          "description": "Main shadow color",
+          "$extensions": {
+            "studio.tokens": {}
+          }
+        }
+      },
+      "static": {
+        "blue": {
+          "default": {
+            "value": "{palette.blueberry.400}",
+            "type": "color",
+            "description": "Blue"
+          },
+          "soft": {
+            "value": "{palette.blueberry.100}",
+            "type": "color",
+            "description": "Light blue"
+          },
+          "strong": {
+            "value": "{palette.blueberry.500}",
+            "type": "color",
+            "description": "Stronger blue"
+          }
+        },
+        "green": {
+          "default": {
+            "value": "{palette.green-apple.400}",
+            "type": "color",
+            "description": "Default green"
+          },
+          "soft": {
+            "value": "{palette.green-apple.100}",
+            "type": "color",
+            "description": "Light green"
+          },
+          "strong": {
+            "value": "{palette.green-apple.600}",
+            "type": "color",
+            "description": "Stronger green"
+          }
+        },
+        "red": {
+          "default": {
+            "value": "{palette.cinnamon.500}",
+            "type": "color",
+            "description": "Red"
+          },
+          "soft": {
+            "value": "{palette.cinnamon.100}",
+            "type": "color",
+            "description": "Light red"
+          },
+          "strong": {
+            "value": "{palette.cinnamon.600}",
+            "type": "color",
+            "description": "Strong red"
+          }
+        },
+        "orange": {
+          "default": {
+            "value": "{palette.cantaloupe.500}",
+            "type": "color",
+            "description": "Orange"
+          },
+          "soft": {
+            "value": "{palette.cantaloupe.100}",
+            "type": "color",
+            "description": "Soft orange"
+          },
+          "strong": {
+            "value": "{palette.cantaloupe.600}",
+            "type": "color",
+            "description": "Stronger orange"
+          }
+        },
+        "gray": {
+          "default": {
+            "value": "{palette.licorice.300}",
+            "type": "color",
+            "description": "Gray"
+          },
+          "soft": {
+            "value": "{palette.soap.300}",
+            "type": "color",
+            "description": "Light gray"
+          },
+          "strong": {
+            "value": "{palette.licorice.400}",
+            "type": "color",
+            "description": "Stronger gray"
+          },
+          "stronger": {
+            "value": "{palette.licorice.500}",
+            "type": "color",
+            "description": "Strongerer gray"
+          }
+        },
+        "white": {
+          "value": "{palette.french-vanilla.100}",
+          "type": "color",
+          "description": "Just white"
+        },
+        "black": {
+          "value": "{palette.black-pepper.600}",
+          "type": "color",
+          "description": "Just black"
+        }
+      }
+    },
+    "breakpoints": {
+      "zero": {
+        "value": "0",
+        "type": "dimension",
+        "description": "Use to set a media query `min-width` below small."
+      },
+      "s": {
+        "value": "{base.unit} * 80",
+        "type": "dimension",
+        "description": "The `min-width` for mobile devices, such as phones and tablets."
+      },
+      "m": {
+        "value": "{base.unit} * 192",
+        "type": "dimension",
+        "description": "Medium screens, such as laptops."
+      },
+      "l": {
+        "value": "{base.unit} * 256",
+        "type": "dimension",
+        "description": "Large screens, such as desktops."
+      },
+      "xl": {
+        "value": "{base.unit} * 360",
+        "type": "dimension",
+        "description": "Used for extra large screens, such as wide monitors and TVs."
+      }
+    },
     "depth": {
       "1": {
         "value": "{shadow.100}",
@@ -33,10 +645,42 @@
       }
     },
     "opacity": {
+      "zero": {
+        "value": "0",
+        "type": "number",
+        "description": "Dev only"
+      },
       "disabled": {
         "value": "{opacity.300}",
-        "type": "opacity",
-        "description": "State layer added on top of disabled elements."
+        "type": "number",
+        "description": "Disabled states"
+      },
+      "overlay": {
+        "value": "{opacity.400}",
+        "type": "number",
+        "description": "Overlay"
+      },
+      "contrast": {
+        "value": "{opacity.500}",
+        "type": "number",
+        "description": "Tooltips, Status Indicator"
+      },
+      "full": {
+        "value": "1",
+        "type": "number",
+        "description": "Dev only"
+      },
+      "shadow": {
+        "first": {
+          "value": "{opacity.200}",
+          "type": "number",
+          "description": "Alpha on first shadow"
+        },
+        "second": {
+          "value": "{opacity.100}",
+          "type": "number",
+          "description": "Alpha on second shadow"
+        }
       }
     },
     "shape": {
@@ -692,7 +1336,7 @@
             "fontFamily": "{font-family.50}",
             "fontWeight": "{font-weight.400}",
             "lineHeight": "{line-height.150}",
-            "fontSize": "{font-size.200}",
+            "fontSize": "{font-size.100}",
             "letterSpacing": "{letter-spacing.100}",
             "textDecoration": "underline"
           },

From cb6747791eb386ff069709fe9a4c6e2ee46beb19 Mon Sep 17 00:00:00 2001
From: Alan B Smith <a.bax.smith@gmail.com>
Date: Wed, 20 Mar 2024 21:06:05 -0600
Subject: [PATCH 2/2] fix: Fix color token parser

---
 .../canvas-tokens/utils/tokenStudioParser.ts  | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/canvas-tokens/utils/tokenStudioParser.ts b/packages/canvas-tokens/utils/tokenStudioParser.ts
index e8af4ae..3698eb3 100644
--- a/packages/canvas-tokens/utils/tokenStudioParser.ts
+++ b/packages/canvas-tokens/utils/tokenStudioParser.ts
@@ -31,10 +31,34 @@ export const tokenStudioParser = ({contents}: any) => {
   return parsed;
 };
 
-const getLevel = (ref: string) => {
-  const levels = ['base', 'brand', 'sys'];
+const levelRefs = {
+  base: [
+    'palette',
+    'opacity',
+    'font-size',
+    'line-height',
+    'typescale',
+    'font-family',
+    'font-weight',
+    'letter-spacing',
+    'shadow',
+    'level',
+    'extended',
+    'unit',
+  ],
+  brand: ['primary', 'alert', 'error', 'success', 'neutral', 'common', 'gradient'],
+  sys: ['color', 'breakpoints', 'depth', 'shape', 'space', 'type'],
+};
+
+const getLevel = (ref: string): string => {
   const [key] = ref.split('.');
-  return !levels.includes(key) && 'base';
+
+  return Object.keys(levelRefs).reduce((acc: string, item: string) => {
+    if (levelRefs[item as 'base' | 'brand' | 'sys'].includes(key)) {
+      return item;
+    }
+    return acc;
+  }, '');
 };
 
 const replaceDescriptionByComment = (token: DesignToken) => {