primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-25 07:03:35 +03:00
Code Issues Projects Releases Wiki Activity

Add mktg CSS vars to PCSS (#2426)

Browse Source 
* add color vars to pcss

* Create spotty-carpets-complain.md
This commit is contained in:
Katie Langerman 2023-04-25 09:36:05 -07:00 committed by GitHub
parent 7dc4d9f43a
commit 713d9a5921
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/spotty-carpets-complain.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Add `mktg` CSS vars to PCSS

15
src/marketing/support/variables.scss
View File

@ -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)),
)
);