jekyll-v4-theme-primer 0.9.0 → 0.11.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +21 -6
- data/_includes/theme.html +1 -1
- data/_sass/@primer/css/forms/form-validation.scss +0 -104
- data/_sass/@primer/css/labels/states.scss +1 -1
- data/_sass/@primer/css/links/link.scss +1 -60
- data/_sass/@primer/css/markdown/code.scss +1 -0
- data/_sass/@primer/css/markdown/tables.scss +7 -1
- data/_sass/@primer/css/marketing/buttons/button.scss +1 -0
- data/_sass/@primer/css/subhead/subhead.scss +1 -1
- data/_sass/@primer/css/timeline/timeline-item.scss +1 -1
- data/_sass/@primer/primitives/dist/scss/colors/_dark.scss +61 -61
- data/_sass/@primer/primitives/dist/scss/colors/_dark_colorblind.scss +28 -28
- data/_sass/@primer/primitives/dist/scss/colors/_dark_dimmed.scss +29 -29
- data/_sass/@primer/primitives/dist/scss/colors/_dark_high_contrast.scss +29 -29
- data/_sass/@primer/primitives/dist/scss/colors/_dark_tritanopia.scss +28 -28
- data/_sass/@primer/primitives/dist/scss/colors/_light.scss +69 -69
- data/_sass/@primer/primitives/dist/scss/colors/_light_colorblind.scss +27 -27
- data/_sass/@primer/primitives/dist/scss/colors/_light_high_contrast.scss +28 -28
- data/_sass/@primer/primitives/dist/scss/colors/_light_tritanopia.scss +27 -27
- data/_sass/@primer/primitives/tokens-next-private/scss/base/size/size.scss +21 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/base/typography/typography.scss +8 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/border.scss +16 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/breakpoints.scss +10 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size-coarse.scss +7 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size-fine.scss +7 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size.scss +51 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/viewport.scss +19 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-colorblind.scss +391 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-dimmed.scss +391 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-high-contrast.scss +391 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-tritanopia.scss +391 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark.scss +391 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-colorblind.scss +366 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-high-contrast.scss +366 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-tritanopia.scss +366 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light.scss +366 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/typography/typography.scss +49 -0
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/typography/typography.scss +3 -3
- data/_sass/@primer/view-components/app/assets/javascripts/primer_view_components.js +1 -1
- data/_sass/@primer/view-components/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/_sass/@primer/view-components/app/assets/styles/primer_view_components.css +2 -2
- data/_sass/@primer/view-components/app/assets/styles/primer_view_components.css.map +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_list.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_list.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/menu.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/menu.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/modal_dialog.js +26 -12
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/tab_nav.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/tab_nav.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.js +23 -11
- data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.js +3 -10
- data/_sass/@primer/view-components/app/components/primer/alpha/underline_nav.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/underline_nav.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/breadcrumbs.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/breadcrumbs.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css.json +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css.json +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css.json +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/truncate.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/truncate.css.json +1 -1
- data/_sass/@primer/view-components/app/components/primer/primer.d.ts +2 -1
- data/_sass/@primer/view-components/app/components/primer/primer.js +2 -1
- data/_sass/@primer/view-components/lib/primer/forms/toggle_switch_input.d.ts +5 -0
- data/_sass/@primer/view-components/lib/primer/forms/toggle_switch_input.js +29 -0
- data/_sass/@primer/view-components/package.json +4 -2
- data/_sass/@primer/view-components/static/arguments.json +190 -216
- data/_sass/@primer/view-components/static/audited_at.json +6 -3
- data/_sass/@primer/view-components/static/constants.json +78 -76
- data/_sass/@primer/view-components/static/statuses.json +12 -9
- data/_sass/jekyll-theme-primer.scss +22 -1
- data/_sass/rouge-dark.scss +112 -0
- data/_sass/rouge-light.scss +112 -0
- metadata +35 -14
- data/_sass/@primer/view-components/app/components/primer/state_component.css.json +0 -1
- data/_sass/@primer/view-components/app/components/primer/subhead_component.css.json +0 -1
- data/_sass/@primer/view-components/app/components/primer/timeline_item_component.css.json +0 -1
- data/_sass/rouge.scss +0 -213
- /data/_sass/@primer/view-components/app/components/primer/{tab_container_component.d.ts → alpha/tab_container.d.ts} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{tab_container_component.js → alpha/tab_container.js} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{state_component.css → beta/state.css} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{subhead_component.css → beta/subhead.css} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{timeline_item_component.css → beta/timeline_item.css} +0 -0
@@ -19,7 +19,7 @@
|
|
19
19
|
--color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
|
20
20
|
--color-diffstat-deletion-border: rgba(27,31,36,0.15);
|
21
21
|
--color-diffstat-addition-border: rgba(27,31,36,0.15);
|
22
|
-
--color-diffstat-addition-bg: #
|
22
|
+
--color-diffstat-addition-bg: #0969da;
|
23
23
|
--color-search-keyword-hl: #fff8c5;
|
24
24
|
--color-prettylights-syntax-comment: #6e7781;
|
25
25
|
--color-prettylights-syntax-constant: #0550ae;
|
@@ -86,7 +86,7 @@
|
|
86
86
|
--color-checks-input-shadow: none;
|
87
87
|
--color-checks-donut-error: #fa4549;
|
88
88
|
--color-checks-donut-pending: #bf8700;
|
89
|
-
--color-checks-donut-success: #
|
89
|
+
--color-checks-donut-success: #0969da;
|
90
90
|
--color-checks-donut-neutral: #afb8c1;
|
91
91
|
--color-checks-dropdown-text: #afb8c1;
|
92
92
|
--color-checks-dropdown-bg: #32383f;
|
@@ -152,11 +152,12 @@
|
|
152
152
|
--color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
|
153
153
|
--color-mktg-btn-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);
|
154
154
|
--color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
|
155
|
+
--color-control-border-color-emphasis: #858F99;
|
155
156
|
--color-avatar-bg: #ffffff;
|
156
157
|
--color-avatar-border: rgba(27,31,36,0.15);
|
157
158
|
--color-avatar-stack-fade: #afb8c1;
|
158
159
|
--color-avatar-stack-fade-more: #d0d7de;
|
159
|
-
--color-avatar-child-shadow:
|
160
|
+
--color-avatar-child-shadow: 0 0 0 2px rgba(255,255,255,0.8);
|
160
161
|
--color-topic-tag-border: rgba(0,0,0,0);
|
161
162
|
--color-counter-border: rgba(0,0,0,0);
|
162
163
|
--color-select-menu-backdrop-border: rgba(0,0,0,0);
|
@@ -200,14 +201,9 @@
|
|
200
201
|
--color-btn-active-bg: hsla(220,14%,93%,1);
|
201
202
|
--color-btn-active-border: rgba(27,31,36,0.15);
|
202
203
|
--color-btn-selected-bg: hsla(220,14%,94%,1);
|
203
|
-
--color-btn-focus-bg: #f6f8fa;
|
204
|
-
--color-btn-focus-border: rgba(27,31,36,0.15);
|
205
|
-
--color-btn-focus-shadow: 0 0 0 3px rgba(9,105,218,0.3);
|
206
|
-
--color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
|
207
|
-
--color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9,105,218,0.3);
|
208
204
|
--color-btn-counter-bg: rgba(27,31,36,0.08);
|
209
205
|
--color-btn-primary-text: #ffffff;
|
210
|
-
--color-btn-primary-bg: #
|
206
|
+
--color-btn-primary-bg: #0969da;
|
211
207
|
--color-btn-primary-border: rgba(27,31,36,0.15);
|
212
208
|
--color-btn-primary-shadow: 0 1px 0 rgba(27,31,36,0.1);
|
213
209
|
--color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
|
@@ -218,9 +214,6 @@
|
|
218
214
|
--color-btn-primary-disabled-text: rgba(255,255,255,0.8);
|
219
215
|
--color-btn-primary-disabled-bg: #80ccff;
|
220
216
|
--color-btn-primary-disabled-border: rgba(27,31,36,0.15);
|
221
|
-
--color-btn-primary-focus-bg: #218bff;
|
222
|
-
--color-btn-primary-focus-border: rgba(27,31,36,0.15);
|
223
|
-
--color-btn-primary-focus-shadow: 0 0 0 3px rgba(33,139,255,0.4);
|
224
217
|
--color-btn-primary-icon: rgba(255,255,255,0.8);
|
225
218
|
--color-btn-primary-counter-bg: rgba(255,255,255,0.2);
|
226
219
|
--color-btn-outline-text: #0969da;
|
@@ -237,8 +230,6 @@
|
|
237
230
|
--color-btn-outline-disabled-text: rgba(9,105,218,0.5);
|
238
231
|
--color-btn-outline-disabled-bg: #f6f8fa;
|
239
232
|
--color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
|
240
|
-
--color-btn-outline-focus-border: rgba(27,31,36,0.15);
|
241
|
-
--color-btn-outline-focus-shadow: 0 0 0 3px rgba(5,80,174,0.4);
|
242
233
|
--color-btn-outline-counter-bg: rgba(9,105,218,0.1);
|
243
234
|
--color-btn-danger-text: #cf222e;
|
244
235
|
--color-btn-danger-hover-text: #ffffff;
|
@@ -254,8 +245,6 @@
|
|
254
245
|
--color-btn-danger-disabled-text: rgba(207,34,46,0.5);
|
255
246
|
--color-btn-danger-disabled-bg: #f6f8fa;
|
256
247
|
--color-btn-danger-disabled-counter-bg: rgba(207,34,46,0.05);
|
257
|
-
--color-btn-danger-focus-border: rgba(27,31,36,0.15);
|
258
|
-
--color-btn-danger-focus-shadow: 0 0 0 3px rgba(164,14,38,0.4);
|
259
248
|
--color-btn-danger-counter-bg: rgba(207,34,46,0.1);
|
260
249
|
--color-btn-danger-icon: #cf222e;
|
261
250
|
--color-btn-danger-hover-icon: #ffffff;
|
@@ -271,17 +260,29 @@
|
|
271
260
|
--color-action-list-item-danger-active-bg: #ffebe9;
|
272
261
|
--color-action-list-item-danger-hover-text: #cf222e;
|
273
262
|
--color-switch-track-bg: #eaeef2;
|
274
|
-
--color-switch-track-
|
275
|
-
--color-switch-track-
|
276
|
-
--color-switch-track-
|
277
|
-
--color-switch-track-
|
278
|
-
--color-switch-track-
|
279
|
-
--color-switch-
|
280
|
-
--color-switch-
|
263
|
+
--color-switch-track-hover-bg: hsla(210,24%,90%,1);
|
264
|
+
--color-switch-track-active-bg: hsla(210,24%,88%,1);
|
265
|
+
--color-switch-track-disabled-bg: #8c959f;
|
266
|
+
--color-switch-track-fg: #57606a;
|
267
|
+
--color-switch-track-disabled-fg: #ffffff;
|
268
|
+
--color-switch-track-border: rgba(0,0,0,0);
|
269
|
+
--color-switch-track-checked-bg: #0969da;
|
270
|
+
--color-switch-track-checked-hover-bg: #0860CA;
|
271
|
+
--color-switch-track-checked-active-bg: #0757BA;
|
272
|
+
--color-switch-track-checked-fg: #ffffff;
|
273
|
+
--color-switch-track-checked-disabled-fg: #ffffff;
|
274
|
+
--color-switch-track-checked-border: rgba(0,0,0,0);
|
275
|
+
--color-switch-knob-bg: #ffffff;
|
276
|
+
--color-switch-knob-disabled-bg: #f6f8fa;
|
277
|
+
--color-switch-knob-border: #858F99;
|
278
|
+
--color-switch-knob-checked-bg: #ffffff;
|
279
|
+
--color-switch-knob-checked-disabled-bg: #f6f8fa;
|
280
|
+
--color-switch-knob-checked-border: #0969da;
|
281
281
|
--color-segmented-control-bg: #eaeef2;
|
282
|
+
--color-segmented-control-button-bg: #ffffff;
|
282
283
|
--color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
|
283
284
|
--color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
|
284
|
-
--color-segmented-control-button-selected-border: #
|
285
|
+
--color-segmented-control-button-selected-border: #8c959f;
|
285
286
|
--color-tree-view-item-chevron-hover-bg: rgba(208,215,222,0.32);
|
286
287
|
--color-tree-view-item-directory-fill: #54aeff;
|
287
288
|
--color-fg-default: #24292f;
|
@@ -308,11 +309,11 @@
|
|
308
309
|
--color-accent-muted: rgba(84,174,255,0.4);
|
309
310
|
--color-accent-subtle: #ddf4ff;
|
310
311
|
--color-success-fg: #0969da;
|
311
|
-
--color-success-emphasis: #
|
312
|
+
--color-success-emphasis: #0969da;
|
312
313
|
--color-success-muted: rgba(84,174,255,0.4);
|
313
314
|
--color-success-subtle: #ddf4ff;
|
314
315
|
--color-attention-fg: #9a6700;
|
315
|
-
--color-attention-emphasis: #
|
316
|
+
--color-attention-emphasis: #9a6700;
|
316
317
|
--color-attention-muted: rgba(212,167,44,0.4);
|
317
318
|
--color-attention-subtle: #fff8c5;
|
318
319
|
--color-severe-fg: #cf222e;
|
@@ -346,7 +347,6 @@
|
|
346
347
|
--color-primer-border-contrast: rgba(27,31,36,0.1);
|
347
348
|
--color-primer-shadow-highlight: inset 0 1px 0 rgba(255,255,255,0.25);
|
348
349
|
--color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
|
349
|
-
--color-primer-shadow-focus: 0 0 0 3px rgba(9,105,218,0.3);
|
350
350
|
--color-scale-black: #1b1f24;
|
351
351
|
--color-scale-white: #ffffff;
|
352
352
|
--color-scale-gray-0: #f6f8fa;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
@mixin primer-colors-size {
|
2
|
+
& {
|
3
|
+
--base-size-4: 0.25rem;
|
4
|
+
--base-size-8: 0.5rem;
|
5
|
+
--base-size-12: 0.75rem;
|
6
|
+
--base-size-16: 1rem;
|
7
|
+
--base-size-20: 1.25rem;
|
8
|
+
--base-size-24: 1.5rem;
|
9
|
+
--base-size-28: 1.75rem;
|
10
|
+
--base-size-32: 2rem;
|
11
|
+
--base-size-36: 2.25rem;
|
12
|
+
--base-size-40: 2.5rem;
|
13
|
+
--base-size-44: 2.75rem;
|
14
|
+
--base-size-48: 3rem;
|
15
|
+
--base-size-64: 4rem;
|
16
|
+
--base-size-80: 5rem;
|
17
|
+
--base-size-96: 6rem;
|
18
|
+
--base-size-112: 7rem;
|
19
|
+
--base-size-128: 8rem;
|
20
|
+
}
|
21
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@mixin primer-colors-border {
|
2
|
+
& {
|
3
|
+
--boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
|
4
|
+
--boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
|
5
|
+
--boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
|
6
|
+
--borderWidth-thin: max(1px, 0.0625rem);
|
7
|
+
--borderWidth-thick: max(2px, 0.125rem);
|
8
|
+
--borderWidth-thicker: max(4px, 0.25rem);
|
9
|
+
--borderRadius-small: 3px;
|
10
|
+
--borderRadius-medium: 6px;
|
11
|
+
--borderRadius-large: 12px;
|
12
|
+
--borderRadius-full: 100vh;
|
13
|
+
--outline-focus-offset: -0.125rem;
|
14
|
+
--outline-focus-width: 0.125rem;
|
15
|
+
}
|
16
|
+
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
@mixin primer-colors-size {
|
2
|
+
& {
|
3
|
+
--control-minTarget-fine: 1rem;
|
4
|
+
--control-minTarget-coarse: 2.75rem;
|
5
|
+
--control-xsmall-size: 1.5rem;
|
6
|
+
--control-xsmall-lineBoxHeight: 1.25rem;
|
7
|
+
--control-xsmall-paddingBlock: calc((1.5rem - 1.25rem) / 2);
|
8
|
+
--control-xsmall-paddingInline-condensed: 0.25rem;
|
9
|
+
--control-xsmall-paddingInline-normal: 0.5rem;
|
10
|
+
--control-xsmall-paddingInline-spacious: 0.75rem;
|
11
|
+
--control-xsmall-gap: 0.25rem;
|
12
|
+
--control-small-size: 1.75rem;
|
13
|
+
--control-small-lineBoxHeight: 1.25rem;
|
14
|
+
--control-small-paddingBlock: calc((1.75rem - 1.25rem) / 2);
|
15
|
+
--control-small-paddingInline-condensed: 0.5rem;
|
16
|
+
--control-small-paddingInline-normal: 0.75rem;
|
17
|
+
--control-small-gap: 0.25rem;
|
18
|
+
--control-medium-size: 2rem;
|
19
|
+
--control-medium-lineBoxHeight: 1.25rem;
|
20
|
+
--control-medium-paddingBlock: calc((2rem - 1.25rem) / 2);
|
21
|
+
--control-medium-paddingInline-condensed: 0.5rem;
|
22
|
+
--control-medium-paddingInline-normal: 0.75rem;
|
23
|
+
--control-medium-paddingInline-spacious: 1rem;
|
24
|
+
--control-medium-gap: 0.5rem;
|
25
|
+
--control-large-size: 2.5rem;
|
26
|
+
--control-large-lineBoxHeight: 1.25rem;
|
27
|
+
--control-large-paddingBlock: calc((2.5rem - 1.25rem) / 2);
|
28
|
+
--control-large-paddingInline-normal: 0.75rem;
|
29
|
+
--control-large-paddingInline-spacious: 1rem;
|
30
|
+
--control-large-gap: 0.5rem;
|
31
|
+
--control-xlarge-size: 3rem;
|
32
|
+
--control-xlarge-lineBoxHeight: 1.25rem;
|
33
|
+
--control-xlarge-paddingBlock: calc((3rem - 1.25rem) / 2);
|
34
|
+
--control-xlarge-paddingInline-normal: 0.75rem;
|
35
|
+
--control-xlarge-paddingInline-spacious: 1rem;
|
36
|
+
--control-xlarge-gap: 0.5rem;
|
37
|
+
--controlStack-small-gap-condensed: 0.5rem;
|
38
|
+
--controlStack-small-gap-spacious: 1rem;
|
39
|
+
--controlStack-medium-gap-condensed: 0.5rem;
|
40
|
+
--controlStack-medium-gap-spacious: 0.75rem;
|
41
|
+
--controlStack-large-gap-auto: 0.5rem;
|
42
|
+
--controlStack-large-gap-condensed: 0.5rem;
|
43
|
+
--controlStack-large-gap-spacious: 0.75rem;
|
44
|
+
--stack-padding-condensed: 0.5rem;
|
45
|
+
--stack-padding-normal: 1rem;
|
46
|
+
--stack-padding-spacious: 1.5rem;
|
47
|
+
--stack-gap-condensed: 0.5rem;
|
48
|
+
--stack-gap-normal: 1rem;
|
49
|
+
--stack-gap-spacious: 1.5rem;
|
50
|
+
}
|
51
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
@mixin primer-colors-viewport {
|
2
|
+
& {
|
3
|
+
--viewportRange-narrow: (max-width: calc(48rem - 0.02px));
|
4
|
+
--viewportRange-narrowLandscape: (
|
5
|
+
max-width: calc(63.25rem - 0.02px) and
|
6
|
+
(
|
7
|
+
max-height: calc(34rem - 0.02px),
|
8
|
+
)
|
9
|
+
and
|
10
|
+
(
|
11
|
+
orientation: landscape,
|
12
|
+
)
|
13
|
+
);
|
14
|
+
--viewportRange-regular: (min-width: 48rem);
|
15
|
+
--viewportRange-wide: (min-width: 90rem);
|
16
|
+
--viewportRange-portrait: (orientation: portrait);
|
17
|
+
--viewportRange-landscape: (orientation: landscape);
|
18
|
+
}
|
19
|
+
}
|