Primitives 7.0.0 (#267)

* Creating next_major branch for major releases * Rename color blind themes (#254) * Rename protanopia themes to colorblind * Rename protanopia themes to colorblind * Create green-apples-hang.md * Update green-apples-hang.md * Delete pre.json * Add pre.json * Prepare for new gloss buttons with color mode support (#265) * Clean up unused vars * Clean up unused utilities * Clean up light colors * Prep for new color mode supported gloss buttons * Create swift-berries-learn.md Co-authored-by: Jon Rohan <yes@jonrohan.codes> * This changeset was already shipped * Delete pre.json Co-authored-by: Jon Rohan <yes@jonrohan.codes> Co-authored-by: Tobias Ahlin <hello@tobiasahlin.com>
primer · Nov 9, 2021 · 39a664e · 39a664e · vercel · Nov 9, 2021
1 parent e3b357c
commit 39a664e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 122 deletions.
diff --git a/.changeset/swift-berries-learn.md b/.changeset/swift-berries-learn.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": major
+---
+
+Prepare for new gloss buttons with color mode support
diff --git a/data/colors/vars/marketing_dark.ts b/data/colors/vars/marketing_dark.ts
@@ -15,71 +15,16 @@ const mktg = {
   }
 }
 
-// TODO: Migrate once new marketing colors (lemon, lime, indigo) are added
 export default {
   mktg: {
-    success: mix(get('scale.green.5'), get('scale.green.4')),
-    info: mix(get('scale.blue.5'), get('scale.blue.4'), 0.42),
-    bgShadeGradient: {
-      top: alpha(get('scale.black'), 0.065),
-      bottom: alpha(get('scale.black'), 0)
-    },
     btn: {
-      bg: {
-        top: lighten(mktg.blue.primary, 0.05),
-        bottom: mktg.blue.primary
+      bg: '#f6f8fa',
+      shadow: {
+        outline: 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
+        focus: 'rgb(255 255 255 / 25%) 0 0 0 4px',
+        hover: '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
+        hoverMuted: 'rgb(255 255 255) 0 0 0 2px inset'
       },
-      bgOverlay: {
-        top: lighten(mktg.blue.secondary, 0.05),
-        bottom: mktg.blue.secondary
-      },
-      text: get('scale.white'),
-      primary: {
-        bg: {
-          top: lighten(mktg.green.primary, 0.05),
-          bottom: mktg.green.primary
-        },
-        bgOverlay: {
-          top: lighten(mktg.green.secondary, 0.05),
-          bottom: mktg.green.secondary
-        },
-        text: get('scale.white')
-      },
-      enterprise: {
-        bg: {
-          top: lighten(mktg.purple.primary, 0.05),
-          bottom: mktg.purple.primary
-        },
-        bgOverlay: {
-          top: lighten(mktg.purple.secondary, 0.05),
-          bottom: mktg.purple.secondary
-        },
-        text: get('scale.white')
-      },
-      outline: {
-        text: get('scale.white'),
-        border: alpha(get('scale.white'), 0.3),
-        hover: {
-          text: get('scale.white'),
-          border: alpha(get('scale.white'), 0.5)
-        },
-        focus: {
-          border: get('scale.white'),
-          borderInset: alpha(get('scale.white'), 0.5)
-        }
-      },
-      dark: {
-        text: get('scale.white'),
-        border: alpha(get('scale.white'), 0.3),
-        hover: {
-          text: get('scale.white'),
-          border: alpha(get('scale.white'), 0.5)
-        },
-        focus: {
-          border: get('scale.white'),
-          borderInset: alpha(get('scale.white'), 0.5)
-        }
-      }
     }
   }
 }
diff --git a/data/colors/vars/marketing_light.ts b/data/colors/vars/marketing_light.ts
@@ -15,71 +15,16 @@ const mktg = {
   }
 }
 
-// TODO: Migrate once new marketing colors (lemon, lime, indigo) are added
 export default {
   mktg: {
-    success: mix(get('scale.green.5'), get('scale.green.4')),
-    info: mix(get('scale.blue.5'), get('scale.blue.4'), 0.42),
-    bgShadeGradient: {
-      top: alpha(get('scale.black'), 0.065),
-      bottom: alpha(get('scale.black'), 0)
-    },
     btn: {
-      bg: {
-        top: lighten(mktg.blue.primary, 0.05),
-        bottom: mktg.blue.primary
+      bg: '#1b1f23',
+      shadow: {
+        outline: 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
+        focus: 'rgb(0 0 0 / 15%) 0 0 0 4px',
+        hover: '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
+        hoverMuted: 'rgb(0 0 0 / 70%) 0 0 0 2px inset'
       },
-      bgOverlay: {
-        top: lighten(mktg.blue.secondary, 0.05),
-        bottom: mktg.blue.secondary
-      },
-      text: get('scale.white'),
-      primary: {
-        bg: {
-          top: lighten(mktg.green.primary, 0.05),
-          bottom: mktg.green.primary
-        },
-        bgOverlay: {
-          top: lighten(mktg.green.secondary, 0.05),
-          bottom: mktg.green.secondary
-        },
-        text: get('scale.white')
-      },
-      enterprise: {
-        bg: {
-          top: lighten(mktg.purple.primary, 0.05),
-          bottom: mktg.purple.primary
-        },
-        bgOverlay: {
-          top: lighten(mktg.purple.secondary, 0.05),
-          bottom: mktg.purple.secondary
-        },
-        text: get('scale.white')
-      },
-      outline: {
-        text: mktg.blue.primary,
-        border: alpha(mktg.blue.primary, 0.3),
-        hover: {
-          text: mktg.blue.secondary,
-          border: alpha(mktg.blue.secondary, 0.5)
-        },
-        focus: {
-          border: mktg.blue.primary,
-          borderInset: alpha(mktg.blue.primary, 0.5)
-        }
-      },
-      dark: {
-        text: get('scale.white'),
-        border: alpha(get('scale.white'), 0.3),
-        hover: {
-          text: get('scale.white'),
-          border: alpha(get('scale.white'), 0.5)
-        },
-        focus: {
-          border: get('scale.white'),
-          borderInset: alpha(get('scale.white'), 0.5)
-        }
-      }
     }
   }
 }