@primer/brand-primitives 0.8.0 → 0.9.0-rc.540ca60
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/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
- package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +5 -9
- package/lib/design-tokens/css/tokens/functional/colors/global.css +3 -5
- package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +5 -5
- package/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +11 -7
- package/lib/design-tokens/css/tokens/functional/components/comparison-table/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/cta-banner/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/colors/global.js +11 -47
- package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/functional/colors/global.js +3 -5
- package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +3 -5
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +3 -5
- package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Dec 2022 14:45:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root,
|
|
@@ -13,10 +13,8 @@
|
|
|
13
13
|
--brand-color-error-emphasis: var(--base-color-scale-red-5);
|
|
14
14
|
--brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
|
|
15
15
|
--brand-color-error-subtle: var(--base-color-scale-red-0);
|
|
16
|
-
--brand-color-accent-
|
|
17
|
-
--brand-color-accent-
|
|
18
|
-
--brand-color-accent-muted: hsl(var(--base-color-scale-pink-3-hsl) / 60%);
|
|
19
|
-
--brand-color-accent-subtle: var(--base-color-scale-pink-0);
|
|
16
|
+
--brand-color-accent-primary: var(--base-color-scale-pink-5);
|
|
17
|
+
--brand-color-accent-secondary: var(--base-color-scale-purple-5);
|
|
20
18
|
--brand-color-text-default: var(--base-color-scale-gray-9);
|
|
21
19
|
--brand-color-text-muted: var(--base-color-scale-gray-6);
|
|
22
20
|
--brand-color-text-subtle: var(--base-color-scale-gray-5);
|
|
@@ -44,10 +42,8 @@
|
|
|
44
42
|
--brand-color-error-emphasis: var(--base-color-scale-red-5);
|
|
45
43
|
--brand-color-error-muted: hsl(var(--base-color-scale-red-4-hsl) / 60%);
|
|
46
44
|
--brand-color-error-subtle: hsl(var(--base-color-scale-red-4-hsl) / 85%);
|
|
47
|
-
--brand-color-accent-
|
|
48
|
-
--brand-color-accent-
|
|
49
|
-
--brand-color-accent-muted: hsl(var(--base-color-scale-pink-4-hsl) / 60%);
|
|
50
|
-
--brand-color-accent-subtle: hsl(var(--base-color-scale-pink-4-hsl) / 85%);
|
|
45
|
+
--brand-color-accent-primary: var(--base-color-scale-pink-3);
|
|
46
|
+
--brand-color-accent-secondary: var(--base-color-scale-purple-3);
|
|
51
47
|
--brand-color-text-default: var(--base-color-scale-white-0);
|
|
52
48
|
--brand-color-text-muted: var(--base-color-scale-gray-3);
|
|
53
49
|
--brand-color-text-subtle: var(--base-color-scale-gray-4);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Dec 2022 14:45:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -20,10 +20,8 @@
|
|
|
20
20
|
--brand-color-text-subtle: var(--base-color-scale-gray-5);
|
|
21
21
|
--brand-color-text-muted: var(--base-color-scale-gray-6);
|
|
22
22
|
--brand-color-text-default: var(--base-color-scale-gray-9);
|
|
23
|
-
--brand-color-accent-
|
|
24
|
-
--brand-color-accent-
|
|
25
|
-
--brand-color-accent-emphasis: var(--base-color-scale-pink-5);
|
|
26
|
-
--brand-color-accent-fg: var(--base-color-scale-pink-5);
|
|
23
|
+
--brand-color-accent-secondary: var(--base-color-scale-purple-5);
|
|
24
|
+
--brand-color-accent-primary: var(--base-color-scale-pink-5);
|
|
27
25
|
--brand-color-error-subtle: var(--base-color-scale-red-0);
|
|
28
26
|
--brand-color-error-muted: hsl(var(--base-color-scale-red-3-hsl) / 60%);
|
|
29
27
|
--brand-color-error-emphasis: var(--base-color-scale-red-5);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Dec 2022 14:45:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root,
|
|
7
7
|
[data-color-mode="light"] {
|
|
8
|
-
--brand-Accordion-toggle-color-start: var(--brand-color-accent-
|
|
9
|
-
--brand-Accordion-toggle-color-end: var(--brand-color-accent-
|
|
8
|
+
--brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
|
|
9
|
+
--brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
[data-color-mode="dark"] {
|
|
13
|
-
--brand-Accordion-toggle-color-start: var(--brand-color-accent-
|
|
14
|
-
--brand-Accordion-toggle-color-end: var(--brand-color-accent-
|
|
13
|
+
--brand-Accordion-toggle-color-start: var(--brand-color-accent-primary);
|
|
14
|
+
--brand-Accordion-toggle-color-end: var(--brand-color-accent-primary);
|
|
15
15
|
}
|
|
@@ -1,27 +1,31 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Dec 2022 14:45:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root,
|
|
7
7
|
[data-color-mode="light"] {
|
|
8
|
-
--brand-Button-background-base: var(--base-color-scale-
|
|
8
|
+
--brand-Button-background-base: var(--base-color-scale-gray-9);
|
|
9
9
|
--brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-black-0);
|
|
10
10
|
--brand-Button-background-disabled: var(--base-color-scale-gray-4);
|
|
11
11
|
--brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
|
|
12
12
|
--brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-3);
|
|
13
|
-
--brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-black-0);
|
|
14
|
-
--brand-Button-shadow-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);
|
|
13
|
+
--brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-black-0);
|
|
14
|
+
--brand-Button-shadow-primary-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);
|
|
15
|
+
--brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
|
|
16
|
+
--brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
|
|
15
17
|
--brand-Button-shadow-focus: var(--brand-color-focus);
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
[data-color-mode="dark"] {
|
|
19
|
-
--brand-Button-background-base: var(--base-color-scale-
|
|
21
|
+
--brand-Button-background-base: var(--base-color-scale-gray-0);
|
|
20
22
|
--brand-Button-background-overlay: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0) 100%), var(--base-color-scale-white-0);
|
|
21
23
|
--brand-Button-background-disabled: var(--base-color-scale-gray-4);
|
|
22
24
|
--brand-Button-fg-primary-disabled: var(--base-color-scale-gray-2);
|
|
23
25
|
--brand-Button-fg-secondary-disabled: var(--base-color-scale-gray-4);
|
|
24
|
-
--brand-Button-shadow-default: 0 0 0 1px var(--base-color-scale-white-0);
|
|
25
|
-
--brand-Button-shadow-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);
|
|
26
|
+
--brand-Button-shadow-primary-default: inset 0 0 0 1px var(--base-color-scale-white-0);
|
|
27
|
+
--brand-Button-shadow-primary-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);
|
|
28
|
+
--brand-Button-shadow-secondary-default: inset 0 0 0 1px var(--brand-color-border-default);
|
|
29
|
+
--brand-Button-shadow-secondary-hover: inset 0 0 0 2px var(--brand-color-neutral-emphasisPlus);
|
|
26
30
|
--brand-Button-shadow-focus: var(--brand-color-focus);
|
|
27
31
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 15 Dec 2022 14:45:29 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -155,7 +155,7 @@ module.exports = {
|
|
|
155
155
|
}
|
|
156
156
|
},
|
|
157
157
|
"accent": {
|
|
158
|
-
"
|
|
158
|
+
"primary": {
|
|
159
159
|
"value": "var(--base-color-scale-pink-5)",
|
|
160
160
|
"dark": "var(--base-color-scale-pink-3)",
|
|
161
161
|
"filePath": "tokens/functional/colors/global.json",
|
|
@@ -164,67 +164,31 @@ module.exports = {
|
|
|
164
164
|
"value": "var(--base-color-scale-pink-5)",
|
|
165
165
|
"dark": "var(--base-color-scale-pink-3)"
|
|
166
166
|
},
|
|
167
|
-
"name": "
|
|
168
|
-
"attributes": {},
|
|
169
|
-
"path": [
|
|
170
|
-
"brand",
|
|
171
|
-
"color",
|
|
172
|
-
"accent",
|
|
173
|
-
"fg"
|
|
174
|
-
]
|
|
175
|
-
},
|
|
176
|
-
"emphasis": {
|
|
177
|
-
"value": "var(--base-color-scale-pink-5)",
|
|
178
|
-
"dark": "var(--base-color-scale-pink-5)",
|
|
179
|
-
"filePath": "tokens/functional/colors/global.json",
|
|
180
|
-
"isSource": true,
|
|
181
|
-
"original": {
|
|
182
|
-
"value": "var(--base-color-scale-pink-5)",
|
|
183
|
-
"dark": "var(--base-color-scale-pink-5)"
|
|
184
|
-
},
|
|
185
|
-
"name": "emphasis",
|
|
186
|
-
"attributes": {},
|
|
187
|
-
"path": [
|
|
188
|
-
"brand",
|
|
189
|
-
"color",
|
|
190
|
-
"accent",
|
|
191
|
-
"emphasis"
|
|
192
|
-
]
|
|
193
|
-
},
|
|
194
|
-
"muted": {
|
|
195
|
-
"value": "hsl(var(--base-color-scale-pink-3-hsl) / 60%)",
|
|
196
|
-
"dark": "hsl(var(--base-color-scale-pink-4-hsl) / 60%)",
|
|
197
|
-
"filePath": "tokens/functional/colors/global.json",
|
|
198
|
-
"isSource": true,
|
|
199
|
-
"original": {
|
|
200
|
-
"value": "hsl(var(--base-color-scale-pink-3-hsl) / 60%)",
|
|
201
|
-
"dark": "hsl(var(--base-color-scale-pink-4-hsl) / 60%)"
|
|
202
|
-
},
|
|
203
|
-
"name": "muted",
|
|
167
|
+
"name": "primary",
|
|
204
168
|
"attributes": {},
|
|
205
169
|
"path": [
|
|
206
170
|
"brand",
|
|
207
171
|
"color",
|
|
208
172
|
"accent",
|
|
209
|
-
"
|
|
173
|
+
"primary"
|
|
210
174
|
]
|
|
211
175
|
},
|
|
212
|
-
"
|
|
213
|
-
"value": "var(--base-color-scale-
|
|
214
|
-
"dark": "
|
|
176
|
+
"secondary": {
|
|
177
|
+
"value": "var(--base-color-scale-purple-5)",
|
|
178
|
+
"dark": "var(--base-color-scale-purple-3)",
|
|
215
179
|
"filePath": "tokens/functional/colors/global.json",
|
|
216
180
|
"isSource": true,
|
|
217
181
|
"original": {
|
|
218
|
-
"value": "var(--base-color-scale-
|
|
219
|
-
"dark": "
|
|
182
|
+
"value": "var(--base-color-scale-purple-5)",
|
|
183
|
+
"dark": "var(--base-color-scale-purple-3)"
|
|
220
184
|
},
|
|
221
|
-
"name": "
|
|
185
|
+
"name": "secondary",
|
|
222
186
|
"attributes": {},
|
|
223
187
|
"path": [
|
|
224
188
|
"brand",
|
|
225
189
|
"color",
|
|
226
190
|
"accent",
|
|
227
|
-
"
|
|
191
|
+
"secondary"
|
|
228
192
|
]
|
|
229
193
|
}
|
|
230
194
|
},
|