@primer/css 0.0.0-202110945521 → 0.0.0-202110984749
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/deprecations.json +4 -0
- package/dist/color-modes.css +1 -1
- package/dist/color-modes.css.map +1 -1
- package/dist/deprecations.json +4 -0
- package/dist/marketing-buttons.css +1 -1
- package/dist/marketing-buttons.css.map +1 -1
- package/dist/marketing.css +1 -1
- package/dist/marketing.css.map +1 -1
- package/dist/meta.json +31 -31
- package/dist/primer.css +2 -2
- package/dist/primer.css.map +1 -1
- package/dist/stats/color-modes.json +1 -1
- package/dist/stats/marketing-buttons.json +1 -1
- package/dist/stats/marketing.json +1 -1
- package/dist/stats/primer.json +1 -1
- package/marketing/buttons/button.scss +8 -32
- package/package.json +2 -2
|
@@ -1,27 +1,3 @@
|
|
|
1
|
-
// Temp variables (awaiting primitives update)
|
|
2
|
-
:root {
|
|
3
|
-
--color-bg-button-default: #1b1f23;
|
|
4
|
-
--shadow-button-border-mktg: rgb(0 0 0 / 15%) 0 0 0 1px inset;
|
|
5
|
-
--shadow-button-focus-mktg: rgb(0 0 0 / 15%) 0 0 0 4px;
|
|
6
|
-
// stylelint-disable-next-line declaration-colon-newline-after
|
|
7
|
-
--shadow-button-hover-mktg: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04),
|
|
8
|
-
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),
|
|
9
|
-
0 100px 80px rgba(0, 0, 0, 0.02);
|
|
10
|
-
--shadow-button-hover-muted-mktg: rgb(0 0 0 / 70%) 0 0 0 2px inset;
|
|
11
|
-
|
|
12
|
-
[data-color-mode="dark"] {
|
|
13
|
-
--color-bg-button-default: #f6f8fa;
|
|
14
|
-
--shadow-button-border-mktg: rgb(255 255 255 / 25%) 0 0 0 1px inset;
|
|
15
|
-
--shadow-button-focus-mktg: rgb(255 255 255 / 25%) 0 0 0 4px;
|
|
16
|
-
// stylelint-disable-next-line declaration-colon-newline-after
|
|
17
|
-
--shadow-button-hover-mktg: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02),
|
|
18
|
-
0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028),
|
|
19
|
-
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);
|
|
20
|
-
--shadow-button-hover-muted-mktg: var(--color-fg-default) 0 0 0 2px inset;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
// End of temp variables
|
|
24
|
-
|
|
25
1
|
.btn-mktg {
|
|
26
2
|
color: var(--color-canvas-default);
|
|
27
3
|
position: relative;
|
|
@@ -42,7 +18,7 @@
|
|
|
42
18
|
// stylelint-disable-next-line primer/borders
|
|
43
19
|
border-radius: 0.375rem;
|
|
44
20
|
background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%),
|
|
45
|
-
var(--color-
|
|
21
|
+
var(--color-mktg-btn-bg) !important;
|
|
46
22
|
transition: box-shadow 0.2s;
|
|
47
23
|
|
|
48
24
|
&::before {
|
|
@@ -63,12 +39,12 @@
|
|
|
63
39
|
}
|
|
64
40
|
|
|
65
41
|
&:hover {
|
|
66
|
-
box-shadow: var(--shadow-
|
|
42
|
+
box-shadow: var(--color-mktg-btn-shadow-hover) !important;
|
|
67
43
|
}
|
|
68
44
|
|
|
69
45
|
&:focus,
|
|
70
46
|
&.focus {
|
|
71
|
-
box-shadow: var(--shadow-
|
|
47
|
+
box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
|
|
72
48
|
outline: 0;
|
|
73
49
|
}
|
|
74
50
|
|
|
@@ -97,19 +73,19 @@
|
|
|
97
73
|
.btn-muted-mktg {
|
|
98
74
|
color: var(--color-fg-default) !important;
|
|
99
75
|
background: none !important;
|
|
100
|
-
box-shadow: var(--
|
|
76
|
+
box-shadow: var(--color-mktg-btn-shadow-outline);
|
|
101
77
|
|
|
102
78
|
&::before {
|
|
103
79
|
display: none;
|
|
104
80
|
}
|
|
105
81
|
|
|
106
82
|
&:hover {
|
|
107
|
-
box-shadow: var(--shadow-
|
|
83
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
|
|
108
84
|
}
|
|
109
85
|
|
|
110
86
|
&:focus,
|
|
111
87
|
&.focus {
|
|
112
|
-
box-shadow: var(--shadow-
|
|
88
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
|
|
113
89
|
}
|
|
114
90
|
|
|
115
91
|
&:active {
|
|
@@ -131,12 +107,12 @@
|
|
|
131
107
|
}
|
|
132
108
|
|
|
133
109
|
&:hover {
|
|
134
|
-
box-shadow: var(--shadow-
|
|
110
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
|
|
135
111
|
}
|
|
136
112
|
|
|
137
113
|
&:focus,
|
|
138
114
|
.focus {
|
|
139
|
-
box-shadow: var(--shadow-
|
|
115
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
|
|
140
116
|
}
|
|
141
117
|
}
|
|
142
118
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/css",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-202110984749",
|
|
4
4
|
"description": "The CSS implementation of GitHub's Primer Design System",
|
|
5
5
|
"homepage": "https://primer.style/css",
|
|
6
6
|
"author": "GitHub, Inc.",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"storybook": "cd docs && yarn && yarn storybook"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@primer/primitives": "^
|
|
38
|
+
"@primer/primitives": "^7.0.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@changesets/changelog-github": "0.4.1",
|