fix(Alert): Adjust colors

leemonade · Feb 7, 2024 · 465cc65 · 465cc65
1 parent 6b0c4fb
commit 465cc65
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/packages/components/src/feedback/Alert/Alert.styles.js b/packages/components/src/feedback/Alert/Alert.styles.js
@@ -39,9 +39,10 @@ const getColor = (theme, severity) =>
 
 const AlertStyles = createStyles((theme, { variant, severity }) => {
   const alertTheme = theme;
+  const titleSize = variant === 'block' ? 'md--bold' : 'sm--bold';
   return {
     root: {
-      ...getFontExpressive(theme.fontSizes['2']),
+      ...theme.other.global.content.typo.body.sm,
       ...getColor(theme, severity),
       display: 'flex',
       alignItems: 'center',
@@ -66,15 +67,16 @@ const AlertStyles = createStyles((theme, { variant, severity }) => {
       gap: theme.spacing['2'],
     },
     title: {
-      ...getFontExpressive(theme.fontSizes['2'], 500),
-      color: '#4D5358',
+      ...theme.other.global.content.typo.body[titleSize],
+      color: theme.colors.text01, // theme.other.global.content.color.text.default,
       marginRight: pxToRem(15),
       lineHeight: 1.2,
       paddingTop: theme.spacing[2],
       paddingBottom: theme.spacing[2],
     },
     content: {
-      ...getFontProductive(theme.fontSizes['2'], 500),
+      ...theme.other.global.content.typo.body.sm,
+      color: theme.other.global.content.color.text.default,
       flex: '1 1 100%',
       marginRight: variant === 'block' ? pxToRem(24) : pxToRem(28),
       lineHeight: 1.2,

diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1161,7 +1161,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1242,8 +1242,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -4938,12 +4947,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",