fix: Fix colors with opacity

packages/canvas-tokens-docs/stories/system/ColorShadow.stories.mdx

@@ -0,0 +1,39 @@
+import {Meta, Unstyled} from '@storybook/blocks';
+
+import {ShadowColors} from './examples/Color/Shadow';
+
+<Meta title="Docs/System Tokens/Color/Shadow" />
+
+<Unstyled>
+
+# System Shadow Color Tokens
+
+System shadow color tokens provide values for box shadow.
+
+## Usage
+
+```ts
+// styles.ts
+import {system} from '@workday/canvas-tokens-web';
+
+const styles = {
+  boxShadow: `0 0 0 var(${system.color.shadow['1']})`,
+};
+```
+
+```css
+// styles.css
+.card-text {
+  boxshadow: 0 0 0 var(--cnvs-sys-color-shadow-1);
+}
+```
+
+---
+
+## Tokens
+
+<ShadowColors />
+
+---
+
+</Unstyled>

packages/canvas-tokens-docs/stories/system/examples/Color/Shadow.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {system} from '@workday/canvas-tokens-web';
+
+import {
+  buildPaletteGroup,
+  ColorGrid,
+  sortSystemColorPalette,
+} from '../../../../components/ColorGrid';
+
+const statusPalettes = buildPaletteGroup(
+  'system.color.shadow',
+  {
+    default: system.color.shadow.default,
+    '1': system.color.shadow['1'],
+    '2': system.color.shadow['2'],
+  },
+  sortSystemColorPalette
+);
+
+export const ShadowColors = () => <ColorGrid name="Text Status Colors" palette={statusPalettes} />;

packages/canvas-tokens-docs/stories/system/visual-testing/Color.stories.tsx

@@ -0,0 +1,100 @@
+import {
+  BackgroundColors,
+  BackgroundAlternateColors,
+  BackgroundMutedColors,
+  BackgroundContrastColors,
+  BackgroundStatusColors,
+} from '../examples/Color/Background';
+import {
+  BorderColors,
+  BorderContrastColors,
+  BorderInputColors,
+  BorderStatusColors,
+} from '../examples/Color/Border';
+import {ForegroundColors, ForegroundStatusColors} from '../examples/Color/Foreground';
+import {IconColors, IconPrimaryColors, IconStatusColors} from '../examples/Color/Icon';
+import {ShadowColors} from '../examples/Color/Shadow';
+import {StaticColors} from '../examples/Color/Static';
+import {TextColors, TextStatusColors} from '../examples/Color/Text';
+
+export default {
+  title: 'Visual Tests/System Tokens/Colors',
+  parameters: {
+    chromatic: {disableSnapshot: false},
+  },
+};
+
+// BACKGROUND COLORS TESTS
+export const Background = {
+  render: BackgroundColors,
+};
+
+export const BackgroundAlternate = {
+  render: BackgroundAlternateColors,
+};
+
+export const BackgroundMuted = {
+  render: BackgroundMutedColors,
+};
+
+export const BackgroundContrast = {
+  render: BackgroundContrastColors,
+};
+
+export const BackgroundStatus = {
+  render: BackgroundStatusColors,
+};
+
+// BORDER COLORS TESTS
+export const Border = {
+  render: BorderColors,
+};
+export const BorderContrast = {
+  render: BorderContrastColors,
+};
+export const BorderInput = {
+  render: BorderInputColors,
+};
+export const BorderStatus = {
+  render: BorderStatusColors,
+};
+
+// FOREGROUND COLORS TESTS
+
+export const Foreground = {
+  render: ForegroundColors,
+};
+export const ForegroundStatus = {
+  render: ForegroundStatusColors,
+};
+
+// ICON COLORS TESTS
+
+export const Icon = {
+  render: IconColors,
+};
+export const IconPrimary = {
+  render: IconPrimaryColors,
+};
+export const IconStatus = {
+  render: IconStatusColors,
+};
+
+// SHADOW COLORS TESTS
+export const Shadow = {
+  render: ShadowColors,
+};
+
+// STATIC COLORS TESTS
+export const Static = {
+  render: StaticColors,
+};
+
+// TEXT COLORS TESTS
+export const Text = {
+  render: TextColors,
+};
+
+export const TextStatus = {
+  render: TextStatusColors,
+};

packages/canvas-tokens/tokens/web/sys.json

@@ -8,7 +8,7 @@
           "description": "Main background color\n"
         },
         "transparent": {
-          "value": "rgba({palette.french-vanilla.100}, 0)",
+          "value": "rgba({palette.french-vanilla.100},0)",
           "type": "color",
           "description": "Transparent background"
         },
@@ -18,7 +18,7 @@
           "description": "Overlay background"
         },
         "translucent": {
-          "value": "rgba({palette.black-pepper.600} ,{opacity.500})",
+          "value": "rgba({palette.black-pepper.600},{opacity.500})",
           "type": "color",
           "description": "Tooltip, Status Indicator"
         },
@@ -448,7 +448,7 @@
           }
         },
         "transparent": {
-          "value": "rgba({color.static.white}, 0%)",
+          "value": "rgba({color.static.white},0)",
           "type": "color",
           "description": "Transparent"
         },

packages/canvas-tokens/utils/tokenStudioParser.ts

@@ -138,6 +138,12 @@ const mapObjectContent = (fn: (token: DesignToken) => DesignToken, obj: DesignTo
 
 const transformExtensions = (token: DesignToken) => {
   if (token['$extensions']) {
+    const {modify} = token['$extensions']['studio.tokens'];
+
+    if (modify && modify.type === 'alpha') {
+      token.value = `rgba(${token.value},${modify.value})`;
+    }
+
     delete token['$extensions'];
   }
 };