feat(design-tokens): add overlay background token, switch to rgb colors

twilio-labs · Apr 7, 2020 · d9f783b · d9f783b
1 parent 3cd7ae9
commit d9f783b
Show file tree

Hide file tree

Showing 7 changed files with 290 additions and 260 deletions.
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/packages/paste-design-tokens/__tests__/index.test.tsx b/packages/paste-design-tokens/__tests__/index.test.tsx
@@ -2,7 +2,7 @@ import theo from 'theo';
 import path from 'path';
 
 beforeAll(() => {
-  theo.registerTransform('web', ['color/rgb', 'color/hex']);
+  theo.registerTransform('web', ['color/rgb']);
 });
 
 describe('Design Tokens', () => {

diff --git a/packages/paste-design-tokens/gulpfile.ts b/packages/paste-design-tokens/gulpfile.ts
@@ -27,7 +27,7 @@ theo.registerFormat('common.d.ts', dTSTokenFormat);
 theo.registerFormat('es6.d.ts', dTSTokenFormat);
 theo.registerFormat('sketchpalette', sketchpaletteTokenFormat);
 theo.registerFormat('gatsby.json', gatsbyJsonTokenFormat);
-theo.registerTransform('web', ['color/rgb', 'color/hex']);
+theo.registerTransform('web', ['color/rgb']);
 
 gulp.task('clean', () => del([paths.dist]));
 

diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -96,3 +96,8 @@ props:
   color-background-destructive-lightest:
     value: "{!palette-red-10}"
     comment: Lightest background for destructive actions or highlights
+
+  # overlay backgrounds
+  color-background-overlay:
+    value: "{!palette-gray-100-transparent-50}"
+    comment: Default background for overlays
diff --git a/packages/paste-design-tokens/tokens/themes/console/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/console/global/background-color.yml
@@ -97,3 +97,8 @@ props:
   color-background-destructive-lightest:
     value: "{!palette-red-10}"
     comment: Lightest background for destructive actions or highlights
+
+  # overlay backgrounds
+  color-background-overlay:
+    value: "{!palette-gray-100-transparent-50}"
+    comment: Default background for overlays
diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/aliases/color-palette.yml
@@ -145,6 +145,18 @@ aliases:
   palette-gray-90: "#1d2944"
   palette-gray-100: "#08152c"
 
+  ## Grays transparent based on darkest gray
+  palette-gray-100-transparent-10: "rgba(8, 21, 44, 0.1)"
+  palette-gray-100-transparent-20: "rgba(8, 21, 44, 0.2)"
+  palette-gray-100-transparent-30: "rgba(8, 21, 44, 0.3)"
+  palette-gray-100-transparent-40: "rgba(8, 21, 44, 0.4)"
+  palette-gray-100-transparent-50: "rgba(8, 21, 44, 0.5)"
+  palette-gray-100-transparent-60: "rgba(8, 21, 44, 0.6)"
+  palette-gray-100-transparent-70: "rgba(8, 21, 44, 0.7)"
+  palette-gray-100-transparent-80: "rgba(8, 21, 44, 0.8)"
+  palette-gray-100-transparent-90: "rgba(8, 21, 44, 0.9)"
+  palette-gray-100-transparent-100: "rgba(8, 21, 44, 1)"
+
   ## Gray-Blues
   palette-gray-blue-10: "#f5f8fd"
   palette-gray-blue-20: "#ebf2ff"

diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/background-color.yml
@@ -89,3 +89,8 @@ props:
   color-background-destructive-lightest:
     value: "{!palette-red-10}"
     comment: Lightest background for destructive actions or highlights
+
+  # overlay backgrounds
+  color-background-overlay:
+    value: "{!palette-gray-100-transparent-50}"
+    comment: Default background for overlays