@primer/css 18.2.0 → 19.0.0-rc.dbdedf98
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 +10 -0
- 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/labels.css +1 -1
- package/dist/labels.css.map +1 -1
- package/dist/marketing-buttons.css +1 -1
- package/dist/marketing-buttons.css.map +1 -1
- package/dist/marketing-type.css.map +1 -1
- package/dist/marketing-utilities.css.map +1 -1
- package/dist/marketing.css +1 -1
- package/dist/marketing.css.map +1 -1
- package/dist/meta.json +82 -82
- package/dist/primer.css +3 -3
- package/dist/primer.css.map +1 -1
- package/dist/product.css +1 -1
- package/dist/product.css.map +1 -1
- package/dist/stats/color-modes.json +1 -1
- package/dist/stats/labels.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/dist/stats/product.json +1 -1
- package/labels/labels.scss +0 -1
- package/marketing/buttons/button.scss +86 -50
- package/marketing/support/index.scss +0 -1
- package/package.json +5 -5
- package/marketing/support/mixins.scss +0 -66
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.btn-mktg {
|
|
2
|
+
color: var(--color-canvas-default);
|
|
2
3
|
position: relative;
|
|
3
4
|
z-index: 1;
|
|
4
5
|
display: inline-block;
|
|
@@ -9,23 +10,18 @@
|
|
|
9
10
|
font-size: 1rem;
|
|
10
11
|
font-weight: $font-weight-bold;
|
|
11
12
|
line-height: 1;
|
|
13
|
+
text-align: center;
|
|
12
14
|
white-space: nowrap;
|
|
13
15
|
vertical-align: middle;
|
|
14
16
|
user-select: none;
|
|
15
17
|
border: 0;
|
|
16
18
|
// stylelint-disable-next-line primer/borders
|
|
17
19
|
border-radius: 0.375rem;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
var(--color-mktg-btn-bg-top),
|
|
22
|
-
var(--color-mktg-btn-bg-bottom),
|
|
23
|
-
var(--color-mktg-btn-bg-overlay-top),
|
|
24
|
-
var(--color-mktg-btn-bg-overlay-bottom),
|
|
25
|
-
);
|
|
20
|
+
background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%),
|
|
21
|
+
var(--color-mktg-btn-bg) !important;
|
|
22
|
+
transition: box-shadow 0.2s;
|
|
26
23
|
|
|
27
24
|
&::before {
|
|
28
|
-
background-blend-mode: overlay, normal;
|
|
29
25
|
position: absolute;
|
|
30
26
|
top: 0;
|
|
31
27
|
right: 0;
|
|
@@ -34,63 +30,103 @@
|
|
|
34
30
|
z-index: -1;
|
|
35
31
|
content: "";
|
|
36
32
|
// stylelint-disable-next-line primer/borders
|
|
37
|
-
border-radius:
|
|
33
|
+
border-radius: inherit;
|
|
34
|
+
opacity: 0;
|
|
35
|
+
background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%) !important;
|
|
38
36
|
opacity: 0;
|
|
39
|
-
transition: opacity 0.
|
|
37
|
+
transition: opacity 0.2s;
|
|
38
|
+
background-blend-mode: normal;
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
&:hover {
|
|
43
|
-
|
|
42
|
+
box-shadow: var(--color-mktg-btn-shadow-hover) !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:focus,
|
|
46
|
+
&.focus {
|
|
47
|
+
box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
|
|
48
|
+
outline: 0;
|
|
49
|
+
}
|
|
44
50
|
|
|
51
|
+
&:hover,
|
|
52
|
+
&:focus,
|
|
53
|
+
&.focus {
|
|
45
54
|
&::before {
|
|
46
55
|
opacity: 1;
|
|
47
|
-
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:disabled {
|
|
59
|
+
box-shadow: none !important;
|
|
48
60
|
}
|
|
49
61
|
}
|
|
50
|
-
}
|
|
51
62
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
&:active {
|
|
64
|
+
outline: none;
|
|
65
|
+
box-shadow: 0 0 0 transparent;
|
|
66
|
+
|
|
67
|
+
&::before {
|
|
68
|
+
opacity: 0.5 !important;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
60
71
|
}
|
|
61
72
|
|
|
62
|
-
.btn-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
73
|
+
.btn-muted-mktg {
|
|
74
|
+
color: var(--color-fg-default) !important;
|
|
75
|
+
background: none !important;
|
|
76
|
+
box-shadow: var(--color-mktg-btn-shadow-outline);
|
|
77
|
+
|
|
78
|
+
&::before {
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&:focus,
|
|
87
|
+
&.focus {
|
|
88
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:active {
|
|
92
|
+
box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:disabled {
|
|
96
|
+
box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
|
|
97
|
+
}
|
|
70
98
|
}
|
|
71
99
|
|
|
72
|
-
.btn-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
100
|
+
.btn-subtle-mktg {
|
|
101
|
+
color: var(--color-fg-default) !important;
|
|
102
|
+
background: none !important;
|
|
103
|
+
box-shadow: none !important;
|
|
104
|
+
|
|
105
|
+
&::before {
|
|
106
|
+
background: none !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:hover {
|
|
110
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:focus,
|
|
114
|
+
.focus {
|
|
115
|
+
box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
|
|
116
|
+
}
|
|
82
117
|
}
|
|
83
118
|
|
|
84
|
-
.btn-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
119
|
+
.btn-signup-mktg {
|
|
120
|
+
color: #fff;
|
|
121
|
+
background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
|
|
122
|
+
|
|
123
|
+
&::before {
|
|
124
|
+
background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&:focus {
|
|
128
|
+
box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
|
|
129
|
+
}
|
|
94
130
|
}
|
|
95
131
|
|
|
96
132
|
// Size modifiers
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "19.0.0-rc.dbdedf98",
|
|
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,11 +35,11 @@
|
|
|
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",
|
|
42
|
-
"@changesets/cli": "2.
|
|
42
|
+
"@changesets/cli": "2.18.0",
|
|
43
43
|
"@github/prettier-config": "0.0.4",
|
|
44
44
|
"@koddsson/postcss-sass": "5.0.0",
|
|
45
45
|
"@primer/stylelint-config": "12.1.0",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"cssstats": "4.0.2",
|
|
48
48
|
"eslint": "8.2.0",
|
|
49
49
|
"eslint-plugin-github": "4.3.3",
|
|
50
|
-
"eslint-plugin-jest": "25.2.
|
|
50
|
+
"eslint-plugin-jest": "25.2.4",
|
|
51
51
|
"eslint-plugin-prettier": "4.0.0",
|
|
52
52
|
"filesize": "8.0.6",
|
|
53
53
|
"front-matter": "4.0.2",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"postcss-simple-vars": "6.0.3",
|
|
64
64
|
"prettier": "2.4.1",
|
|
65
65
|
"semver": "7.3.5",
|
|
66
|
-
"stylelint": "14.0
|
|
66
|
+
"stylelint": "14.1.0",
|
|
67
67
|
"stylelint-scss": "4.0.0",
|
|
68
68
|
"table": "6.7.3"
|
|
69
69
|
},
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
@mixin btn-solid-mktg($color, $bg, $bg2, $bg3, $bg4) {
|
|
2
|
-
color: $color;
|
|
3
|
-
background-color: $bg2;
|
|
4
|
-
background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
|
|
5
|
-
|
|
6
|
-
&::before {
|
|
7
|
-
background-image: linear-gradient(-180deg, $bg3 0%, $bg4 100%);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
&:hover,
|
|
11
|
-
&.hover,
|
|
12
|
-
&:active,
|
|
13
|
-
&.selected,
|
|
14
|
-
&[aria-selected=true],
|
|
15
|
-
[open] > & {
|
|
16
|
-
background-color: $bg2;
|
|
17
|
-
background-image: linear-gradient(-180deg, $bg 0%, $bg2 100%);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&:focus,
|
|
21
|
-
&.focus {
|
|
22
|
-
outline: 0;
|
|
23
|
-
box-shadow: 0 0 0 0.2em rgba($bg2, 0.4);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:disabled,
|
|
27
|
-
&.disabled,
|
|
28
|
-
&[aria-disabled=true] {
|
|
29
|
-
pointer-events: none;
|
|
30
|
-
cursor: default;
|
|
31
|
-
opacity: 0.5;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
@mixin btn-outline-mktg($color, $color2, $border, $borderHover, $borderFocus, $borderFocusInset) {
|
|
36
|
-
color: $color;
|
|
37
|
-
background: none;
|
|
38
|
-
box-shadow: 0 0 0 1px $border inset;
|
|
39
|
-
|
|
40
|
-
&::before {
|
|
41
|
-
display: none;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&:hover,
|
|
45
|
-
&.hover,
|
|
46
|
-
&:active,
|
|
47
|
-
&.selected,
|
|
48
|
-
&[aria-selected=true],
|
|
49
|
-
[open] > & {
|
|
50
|
-
color: $color2;
|
|
51
|
-
background: none;
|
|
52
|
-
box-shadow: 0 0 0 2px $borderHover inset;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&:focus,
|
|
56
|
-
&.focus {
|
|
57
|
-
outline: 0;
|
|
58
|
-
box-shadow: 0 0 0 2px $borderFocus inset, 0 0 0 4px $borderFocusInset;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&:disabled,
|
|
62
|
-
&.disabled,
|
|
63
|
-
&[aria-disabled=true] {
|
|
64
|
-
opacity: 0.5;
|
|
65
|
-
}
|
|
66
|
-
}
|