Merge branch 'main' into add-system-color-stories

Workday · Apr 3, 2024 · ff67e89 · ff67e89
2 parents dec368d + ed9b451
commit ff67e89
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 4 deletions.
diff --git a/packages/canvas-tokens-web/CHANGELOG.md b/packages/canvas-tokens-web/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @workday/canvas-tokens-web
 
+## 1.3.0
+
+### Minor Changes
+
+- **Infrastructure**
+
+  - chore: Add transform to handle opacity as percentage
+    ([#100](https://github.com/Workday/canvas-tokens/pull/100))
+    ([@RayRedGoose](https://github.com/RayRedGoose))
+
+  **Other**
+
+  - feat: Add missing system color tokens ([@alanbsmith](https://github.com/alanbsmith))
+
 ## 1.2.0
 
 ### Minor Changes

diff --git a/packages/canvas-tokens-web/package.json b/packages/canvas-tokens-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-tokens-web",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Canvas design tokens for web",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "CC-BY-ND-4.0",

diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json
@@ -33,6 +33,11 @@
             "type": "color",
             "description": "Page background"
           },
+          "softer": {
+            "value": "{palette.soap.100}",
+            "type": "color",
+            "description": "Disabled inputs and column headers"
+          },
           "strong": {
             "value": "{palette.soap.400}",
             "type": "color",
@@ -45,12 +50,16 @@
           }
         },
         "muted": {
-          "default": {
-            "value": "{palette.licorice.300}",
+          "softer": {
+            "value": "{palette.licorice.100}",
             "type": "color"
           },
           "soft": {
-            "value": "{palette.licorice.100}",
+            "value": "{palette.licorice.200}",
+            "type": "color"
+          },
+          "default": {
+            "value": "{palette.licorice.300}",
             "type": "color"
           },
           "strong": {
@@ -207,6 +216,11 @@
             "value": "{palette.blueberry.500}",
             "type": "color",
             "description": "Branded hover text"
+          },
+          "stronger": {
+            "value": "{palette.blueberry.600}",
+            "type": "color",
+            "description": "Active links"
           }
         },
         "caution": {
@@ -316,6 +330,11 @@
           }
         },
         "muted": {
+          "soft": {
+            "value": "{palette.licorice.200}",
+            "type": "color",
+            "description": "Tab item text"
+          },
           "default": {
             "value": "{palette.licorice.300}",
             "type": "color",
@@ -383,6 +402,11 @@
             "value": "{palette.licorice.500}",
             "type": "color",
             "description": "Input hover"
+          },
+          "inverse": {
+            "value": "{palette.soap.300}",
+            "type": "color",
+            "description": "Borders on checkboxes and radios"
           }
         },
         "contrast": {
@@ -500,6 +524,13 @@
             "description": "Stronger blue"
           }
         },
+        "gold": {
+          "stronger": {
+            "value": "{palette.toasted-marshmallow.600}",
+            "type": "color",
+            "description": "Foregrounds in low emphasis status indicators"
+          }
+        },
         "green": {
           "default": {
             "value": "{palette.green-apple.400}",

diff --git a/packages/canvas-tokens/utils/filters/index.ts b/packages/canvas-tokens/utils/filters/index.ts
@@ -39,3 +39,8 @@ export const isComposite: Matcher = ({type}) => {
 export const isNotComposite: Matcher = token => {
   return !isComposite(token);
 };
+
+export const isBaseOpacity: Matcher = token => {
+  const [level, category] = token.path;
+  return level === 'base' && category === 'opacity' && parseFloat(token.value) > 1;
+};
diff --git a/packages/canvas-tokens/utils/spec/transforms.spec.ts b/packages/canvas-tokens/utils/spec/transforms.spec.ts
@@ -225,4 +225,14 @@ describe('transforms', () => {
 
     expect(result).toBe(expected);
   });
+
+  it('should convert opacity to number below 1', () => {
+    const result = transforms['value/opacity'].transformer(
+      {...defaultToken, value: '40'},
+      defaultOptions
+    );
+    const expected = '0.4';
+
+    expect(result).toBe(expected);
+  });
 });
diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/packages/canvas-tokens/utils/transformers/index.ts
@@ -28,6 +28,12 @@ export const transforms: Record<string, Transform> = {
     matcher: filter.isSysColor,
     transformer: flatRGBAColor,
   },
+  'value/opacity': {
+    type: 'value',
+    transitive: true,
+    matcher: filter.isBaseOpacity,
+    transformer: ({value}) => `${value / 100}`,
+  },
   // transform function that changes a value to its CSS var name
   'value/variables': {
     type: 'value',