fix(design-tokens): fix SendGrid token values (#71)

* fix(design-tokens): update sg token to use correct alias values * fix(theme): change theme-provider test to correct color
twilio-labs · Aug 28, 2019 · 396fccf · 396fccf · vercel · Aug 28, 2019
1 parent c3e48fd
commit 396fccf
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
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
@@ -43,13 +43,13 @@ props:
 
   # primary background
   color-background-primary-darker:
-    value: "{!palette-blue-80}"
+    value: "{!palette-blue-70}"
     comment: Darker background for primary actions or highlights
   color-background-primary-dark:
-    value: "{!palette-blue-70}"
+    value: "{!palette-blue-60}"
     comment: Dark background for primary actions or highlights
   color-background-primary:
-    value: "{!palette-blue-60}"
+    value: "{!palette-blue-50}"
     comment: Background for primary actions or highlights
   color-background-primary-light:
     value: "{!palette-blue-40}"

diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/border-color.yml
@@ -29,13 +29,13 @@ props:
 
   # primary action borders
   color-border-primary-darker:
-    value: "{!palette-blue-80}"
+    value: "{!palette-blue-70}"
     comment: Darker primary border color
   color-border-primary-dark:
-    value: "{!palette-blue-70}"
+    value: "{!palette-blue-60}"
     comment: Dark primary border color
   color-border-primary:
-    value: "{!palette-blue-60}"
+    value: "{!palette-blue-50}"
     comment: Primary border color
   color-border-primary-light:
     value: "{!palette-blue-40}"
@@ -66,13 +66,13 @@ props:
 
   # destructive borders
   color-border-destructive-darker:
-    value: "{!palette-red-80}"
+    value: "{!palette-red-70}"
     comment: Destructive hover border color
   color-border-destructive-dark:
-    value: "{!palette-red-70}"
+    value: "{!palette-red-60}"
     comment: Destructive focus border color
   color-border-destructive:
-    value: "{!palette-red-60}"
+    value: "{!palette-red-50}"
     comment: Destructive border color
   color-border-destructive-light:
     value: "{!palette-red-40}"

diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/palette-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/palette-color.yml
@@ -37,8 +37,8 @@ props:
     value: "{!palette-gray-100}"
     comment: "Gray Color 10"
   color-brand:
-    value: "{!curious-blue}"
-    comment: "Default branding color"
+    value: "{!palette-gray-100}"
+    comment: "SendGrid product dark gray"
   color-brand-highlight:
-    value: "{!san-juan}"
-    comment: "SendGrid brand slate"
+    value: "{!palette-blue-50}"
+    comment: "SendGrid product blue"
diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/text-color.yml
@@ -25,7 +25,7 @@ props:
 
   # links
   color-text-link:
-    value: "{!palette-blue-60}"
+    value: "{!palette-blue-50}"
     comment: Link text
   color-text-link-light:
     value: "{!palette-blue-40}"
@@ -37,16 +37,16 @@ props:
     value: "{!palette-blue-80}"
     comment: Darker shade of link text to be used in interactions
   color-text-link-destructive:
-    value: "{!palette-red-60}"
+    value: "{!palette-red-50}"
     comment: Destructive link text
   color-text-link-destructive-light:
     value: "{!palette-red-40}"
     comment: Light shade of destructive link text to be used in interactions
   color-text-link-destructive-dark:
-    value: "{!palette-red-70}"
+    value: "{!palette-red-60}"
     comment: Dark shade of destructive link text to be used in interactions
   color-text-link-destructive-darker:
-    value: "{!palette-red-80}"
+    value: "{!palette-red-70}"
     comment: Darker shade of destructive link text to be used in interactions
 
   #status

diff --git a/packages/paste-theme/__tests__/themeProvider.spec.tsx b/packages/paste-theme/__tests__/themeProvider.spec.tsx
@@ -31,7 +31,7 @@ describe('Theme.Provider', () => {
         <ThemeConsumerExampleTextColor />
       </Theme.Provider>
     );
-    expect(wrapper.find('p').text()).toBe('Color: #003adb');
+    expect(wrapper.find('p').text()).toBe('Color: #3368fa');
   });
 
   it('should rely on the default breakpoints set on the theme object', () => {