chore: add new transparency tokens

Author: kyledurand

polaris-react/playground/Playground.tsx

@@ -1,11 +1,28 @@
 import React from 'react';
 
-import {Page} from '../src';
+import {Box, Card, Page, Text} from '../src';
 
 export function Playground() {
   return (
     <Page title="Playground">
-      {/* Add the code you want to test in here */}
+      <Card padding="4">
+        <div style={{background: 'black'}}>
+          <Box padding="4">
+            <div
+              style={{
+                backgroundColor:
+                  'var(--p-color-experimental-bg-inverse-transparent-active)',
+              }}
+            >
+              <Box padding="4">
+                <Text as="p" color="text-inverse">
+                  transparency!
+                </Text>
+              </Box>
+            </div>
+          </Box>
+        </div>
+      </Card>
     </Page>
   );
 }

polaris-tokens/src/colors-experimental.ts

@@ -20,23 +20,27 @@ type Color = {
   [Scale in ColorScale]: string;
 };
 
-export const gray: Color = {
-  '1': 'rgba(255, 255, 255, 1)',
-  '2': 'rgba(253, 253, 253, 1)',
-  '3': 'rgba(250, 250, 250, 1)',
-  '4': 'rgba(247, 247, 247, 1)',
-  '5': 'rgba(243, 243, 243, 1)',
-  '6': 'rgba(241, 241, 241, 1)',
-  '7': 'rgba(235, 235, 235, 1)',
-  '8': 'rgba(227, 227, 227, 1)',
-  '9': 'rgba(212, 212, 212, 1)',
-  '10': 'rgba(204, 204, 204, 1)',
-  '11': 'rgba(181, 181, 181, 1)',
-  '12': 'rgba(138, 138, 138, 1)',
-  '13': 'rgba(97, 97, 97, 1)',
-  '14': 'rgba(74, 74, 74, 1)',
-  '15': 'rgba(48, 48, 48, 1)',
-  '16': 'rgba(26, 26, 26, 1)',
+type ColorWithAlpha = {
+  [Scale in ColorScale]: (alpha?: string) => string;
+};
+
+export const gray: ColorWithAlpha = {
+  '1': (alpha = '1') => `rgba(255, 255, 255, ${alpha})`,
+  '2': (alpha = '1') => `rgba(253, 253, 253, ${alpha})`,
+  '3': (alpha = '1') => `rgba(250, 250, 250, ${alpha})`,
+  '4': (alpha = '1') => `rgba(247, 247, 247, ${alpha})`,
+  '5': (alpha = '1') => `rgba(243, 243, 243, ${alpha})`,
+  '6': (alpha = '1') => `rgba(241, 241, 241, ${alpha})`,
+  '7': (alpha = '1') => `rgba(235, 235, 235, ${alpha})`,
+  '8': (alpha = '1') => `rgba(227, 227, 227, ${alpha})`,
+  '9': (alpha = '1') => `rgba(212, 212, 212, ${alpha})`,
+  '10': (alpha = '1') => `rgba(204, 204, 204, ${alpha})`,
+  '11': (alpha = '1') => `rgba(181, 181, 181, ${alpha})`,
+  '12': (alpha = '1') => `rgba(138, 138, 138, ${alpha})`,
+  '13': (alpha = '1') => `rgba(97, 97, 97, ${alpha})`,
+  '14': (alpha = '1') => `rgba(74, 74, 74, ${alpha})`,
+  '15': (alpha = '1') => `rgba(48, 48, 48, ${alpha})`,
+  '16': (alpha = '1') => `rgba(26, 26, 26, ${alpha})`,
 };
 
 export const azure: Color = {