Add mktg CSS vars to PCSS (#2426)

* add color vars to pcss * Create spotty-carpets-complain.md
primer · Apr 25, 2023 · 713d9a5 · 713d9a5
1 parent 7dc4d9f
commit 713d9a5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/spotty-carpets-complain.md b/.changeset/spotty-carpets-complain.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add `mktg` CSS vars to PCSS
diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss
@@ -125,3 +125,18 @@ $marketing-position-variants: (
   md: '-md',
   lg: '-lg',
 ) !default;
+
+$mktg-btn-shadow-hover-light: 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);
+$mktg-btn-shadow-hover-dark: 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);
+
+@include color-variables(
+  (
+    (mktg-btn-shadow-outline, (light: rgb(0,0,0,0.15) 0 0 0 1px inset, dark: rgb(255,255,255,0.25) 0 0 0 1px inset)),
+    (marketing-icon-primary, (light: var(--color-scale-blue-4), dark: var(--color-scale-blue-2))),
+    (marketing-icon-secondary, (light: var(--color-scale-blue-3), dark: var(--color-scale-blue-5))),
+    (mktg-btn-bg, (light: #1b1f23, dark: #f6f8fa)),
+    (mktg-btn-shadow-focus, (light: rgb(0 0 0 / 15%) 0 0 0 4px, dark: rgb(255 255 255 / 25%) 0 0 0 4px)),
+    (mktg-btn-shadow-hover, (light: $mktg-btn-shadow-hover-light, dark: $mktg-btn-shadow-hover-dark)),
+    (mktg-btn-shadow-hover-muted, (light: rgb(0 0 0 / 70%) 0 0 0 2px inset, dark: rgb(255 255 255) 0 0 0 2px inset)),
+  )
+);