jekyll-v4-theme-primer 0.11.0 → 0.13.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 +24 -3
- data/_layouts/default.html +4 -2
- data/_sass/@primer/css/autocomplete/suggester.scss +11 -11
- data/_sass/@primer/css/avatars/avatar-parent-child.scss +2 -2
- data/_sass/@primer/css/avatars/circle-badge.scss +3 -3
- data/_sass/@primer/css/base/base.scss +5 -5
- data/_sass/@primer/css/base/kbd.scss +5 -5
- data/_sass/@primer/css/base/normalize.scss +3 -2
- data/_sass/@primer/css/box/box-overlay.scss +3 -3
- data/_sass/@primer/css/branch-name/branch-name.scss +6 -6
- data/_sass/@primer/css/buttons/button.scss +63 -63
- data/_sass/@primer/css/buttons/misc.scss +26 -26
- data/_sass/@primer/css/color-modes/native.scss +4 -2
- data/_sass/@primer/css/core/index.scss +0 -1
- data/_sass/@primer/css/forms/form-control.scss +18 -18
- data/_sass/@primer/css/forms/form-group.scss +31 -30
- data/_sass/@primer/css/forms/form-select.scss +1 -1
- data/_sass/@primer/css/forms/index.scss +0 -1
- data/_sass/@primer/css/forms/input-group.scss +10 -0
- data/_sass/@primer/css/forms/radio-group.scss +6 -6
- data/_sass/@primer/css/header/header.scss +7 -7
- data/_sass/@primer/css/labels/index.scss +0 -1
- data/_sass/@primer/css/layout/app-frame.scss +13 -13
- data/_sass/@primer/css/layout/page-layout.scss +2 -6
- data/_sass/@primer/css/layout/stack.scss +7 -7
- data/_sass/@primer/css/markdown/blob-csv.scss +2 -2
- data/_sass/@primer/css/markdown/code.scss +3 -3
- data/_sass/@primer/css/markdown/footnotes.scss +3 -3
- data/_sass/@primer/css/markdown/headings.scss +4 -4
- data/_sass/@primer/css/markdown/images.scss +3 -3
- data/_sass/@primer/css/markdown/lists.scss +4 -4
- data/_sass/@primer/css/markdown/markdown-body.scss +4 -4
- data/_sass/@primer/css/markdown/tables.scss +4 -4
- data/_sass/@primer/css/marketing/buttons/button.scss +9 -10
- data/_sass/@primer/css/marketing/support/variables.scss +15 -0
- data/_sass/@primer/css/marketing/utilities/layout.scss +0 -1
- data/_sass/@primer/css/navigation/filter-list.scss +8 -8
- data/_sass/@primer/css/navigation/sidenav.scss +12 -12
- data/_sass/@primer/css/navigation/subnav.scss +9 -9
- data/_sass/@primer/css/pagination/pagination.scss +7 -7
- data/_sass/@primer/css/primitives/index.scss +9 -9
- data/_sass/@primer/css/select-menu/select-menu.scss +41 -41
- data/_sass/@primer/css/support/mixins/color-modes.scss +89 -1
- data/_sass/@primer/css/support/mixins/misc.scss +8 -8
- data/_sass/@primer/css/support/variables/misc.scss +2 -2
- data/_sass/@primer/css/support/variables/typography.scss +1 -1
- data/_sass/@primer/css/toasts/toasts.scss +17 -17
- data/_sass/@primer/css/tooltips/tooltips.scss +9 -62
- data/_sass/@primer/css/utilities/borders.scss +9 -9
- data/_sass/@primer/css/utilities/box-shadow.scss +8 -4
- data/_sass/@primer/css/utilities/colors.scss +59 -60
- data/_sass/@primer/css/utilities/details.scss +1 -1
- data/_sass/@primer/css/utilities/flexbox.scss +0 -1
- data/_sass/@primer/css/utilities/layout.scss +7 -5
- data/_sass/@primer/css/utilities/margin.scss +0 -2
- data/_sass/@primer/css/utilities/padding.scss +0 -1
- data/_sass/@primer/css/utilities/typography.scss +8 -8
- data/_sass/@primer/css/utilities/visibility-display.scss +10 -9
- data/_sass/@primer/primitives/dist/scss/base/size/size.scss +17 -0
- data/_sass/@primer/primitives/dist/scss/base/typography/typography.scss +4 -0
- data/_sass/@primer/primitives/dist/scss/colors/_dark.scss +29 -20
- data/_sass/@primer/primitives/dist/scss/colors/_dark_colorblind.scss +14 -5
- data/_sass/@primer/primitives/dist/scss/colors/_dark_dimmed.scss +14 -5
- data/_sass/@primer/primitives/dist/scss/colors/_dark_high_contrast.scss +12 -3
- data/_sass/@primer/primitives/dist/scss/colors/_dark_tritanopia.scss +14 -5
- data/_sass/@primer/primitives/dist/scss/colors/_light.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/colors/_light_colorblind.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/colors/_light_high_contrast.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/colors/_light_tritanopia.scss +13 -4
- data/_sass/@primer/primitives/dist/scss/functional/motion/motion.scss +3 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/border.scss +12 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/breakpoints.scss +6 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/size-coarse.scss +3 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/size-fine.scss +3 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/size.scss +72 -0
- data/_sass/@primer/primitives/dist/scss/functional/size/viewport.scss +6 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-colorblind.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-dimmed.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-high-contrast.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark-tritanopia.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/dark.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light-colorblind.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light-high-contrast.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light-tritanopia.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/themes/light.scss +503 -0
- data/_sass/@primer/primitives/dist/scss/functional/typography/typography.scss +45 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/base/size/size.scss +17 -21
- data/_sass/@primer/primitives/tokens-next-private/scss/base/typography/typography.scss +4 -8
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/motion/motion.scss +3 -0
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/border.scss +12 -16
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/breakpoints.scss +6 -10
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size-coarse.scss +3 -7
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size-fine.scss +3 -7
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/size.scss +72 -51
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/size/viewport.scss +6 -19
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-colorblind.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-dimmed.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-high-contrast.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark-tritanopia.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/dark.scss +503 -391
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-colorblind.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-high-contrast.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light-tritanopia.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/themes/light.scss +503 -366
- data/_sass/@primer/primitives/tokens-next-private/scss/functional/typography/typography.scss +45 -49
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/base/size/size.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/base/typography/typography.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/border.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/size.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/size/viewport.scss +2 -2
- data/_sass/@primer/primitives/tokens-v2-private/scss/tokens/functional/typography/typography.scss +2 -2
- data/_sass/@primer/view-components/README.md +1 -1
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +17 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +51 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts +18 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts +12 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +30 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts +27 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +13 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/anchored_position.d.ts +27 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +17 -0
- data/_sass/@primer/view-components/app/{components/primer/alpha/nav_list.d.ts → assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts} +3 -9
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/dialog_helper.d.ts +15 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/focus_group.d.ts +19 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/primer.d.ts +23 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/scrollable_region.d.ts +13 -0
- data/_sass/@primer/view-components/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +10 -0
- data/_sass/@primer/view-components/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +1 -0
- data/_sass/@primer/view-components/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +5 -0
- 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 +1 -3
- 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_bar.css +1 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar.css.json +14 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar_element.d.ts +17 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_bar_element.js +180 -0
- 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 +136 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.d.ts +51 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.js +470 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/auto_complete.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/auto_complete.css.json +23 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/banner.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/banner.css.json +24 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/button_marketing.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/button_marketing.css.json +33 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dialog.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dialog.css.json +65 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dropdown.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/dropdown.css.json +40 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/layout.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/layout.css.json +80 -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 +28 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/modal_dialog.js +50 -27
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css +1 -0
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css.json +11 -0
- 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 +29 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/segmented_control.js +4 -4
- 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 +24 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css +1 -3
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css.json +144 -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 +40 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.d.ts +2 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/toggle_switch.js +54 -45
- data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.d.ts +4 -2
- data/_sass/@primer/view-components/app/components/primer/alpha/tool_tip.js +159 -72
- 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 +28 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/x_banner.d.ts +3 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/x_banner.js +25 -10
- data/_sass/@primer/view-components/app/components/primer/anchored_position.d.ts +27 -0
- data/_sass/@primer/view-components/app/components/primer/anchored_position.js +157 -0
- data/_sass/@primer/view-components/app/components/primer/beta/avatar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar.css.json +17 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar_stack.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar_stack.css.json +28 -1
- data/_sass/@primer/view-components/app/components/primer/beta/blankslate.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/blankslate.css.json +23 -1
- data/_sass/@primer/view-components/app/components/primer/beta/border_box.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/border_box.css.json +54 -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 +11 -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 +77 -1
- data/_sass/@primer/view-components/app/components/primer/beta/button_group.css +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/button_group.css.json +12 -0
- data/_sass/@primer/view-components/app/components/primer/beta/counter.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/counter.css.json +10 -1
- data/_sass/@primer/view-components/app/components/primer/beta/flash.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/flash.css.json +27 -1
- data/_sass/@primer/view-components/app/components/primer/beta/label.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/label.css.json +25 -1
- data/_sass/@primer/view-components/app/components/primer/beta/link.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/link.css.json +20 -1
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list.d.ts +17 -0
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list.js +170 -0
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/_sass/@primer/view-components/app/components/primer/{alpha/nav_list.js → beta/nav_list_group_element.js} +30 -53
- data/_sass/@primer/view-components/app/components/primer/beta/popover.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/popover.css.json +39 -1
- data/_sass/@primer/view-components/app/components/primer/beta/progress_bar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/progress_bar.css.json +10 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css.json +13 -1
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/subhead.css.json +14 -1
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css.json +16 -1
- 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 +12 -1
- data/_sass/@primer/view-components/app/components/primer/dialog_helper.d.ts +15 -0
- data/_sass/@primer/view-components/app/components/primer/dialog_helper.js +117 -0
- data/_sass/@primer/view-components/app/components/primer/focus_group.d.ts +19 -0
- data/_sass/@primer/view-components/app/components/primer/focus_group.js +163 -0
- data/_sass/@primer/view-components/app/components/primer/primer.d.ts +10 -3
- data/_sass/@primer/view-components/app/components/primer/primer.js +10 -3
- data/_sass/@primer/view-components/app/components/primer/scrollable_region.d.ts +13 -0
- data/_sass/@primer/view-components/app/components/primer/scrollable_region.js +52 -0
- data/_sass/@primer/view-components/app/components/primer/truncate.css.json +13 -1
- data/_sass/@primer/view-components/lib/primer/forms/primer_multi_input.js +2 -3
- data/_sass/@primer/view-components/lib/primer/forms/primer_text_field.js +55 -11
- data/_sass/@primer/view-components/lib/primer/forms/toggle_switch_input.js +7 -2
- data/_sass/@primer/view-components/package.json +34 -33
- data/_sass/@primer/view-components/static/arguments.json +2786 -454
- data/_sass/@primer/view-components/static/audited_at.json +39 -24
- data/_sass/@primer/view-components/static/classes.json +612 -0
- data/_sass/@primer/view-components/static/constants.json +318 -77
- data/_sass/@primer/view-components/static/info_arch.json +15698 -0
- data/_sass/@primer/view-components/static/previews.json +6814 -0
- data/_sass/@primer/view-components/static/statuses.json +41 -26
- data/_sass/{jekyll-theme-primer.scss → jekyll-v4-theme-primer.scss} +14 -3
- data/_sass/primer.scss +1 -1
- data/assets/css/style.scss +1 -1
- data/assets/js/github-clipboard-copy-element.js +154 -0
- data/assets/js/primer-clipboard-copy.js +106 -0
- metadata +77 -18
- data/_sass/@primer/css/actionlist/action-list-item-divider.scss +0 -48
- data/_sass/@primer/css/actionlist/action-list-item.scss +0 -593
- data/_sass/@primer/css/actionlist/action-list-tree.scss +0 -118
- data/_sass/@primer/css/actionlist/action-list-variables.scss +0 -8
- data/_sass/@primer/css/actionlist/action-list.scss +0 -67
- data/_sass/@primer/css/actionlist/index.scss +0 -6
- data/_sass/@primer/css/forms/form-validation.scss +0 -265
- data/_sass/@primer/css/labels/diffstat.scss +0 -37
- data/_sass/@primer/view-components/app/components/primer/time_ago_component.js +0 -1
- /data/_sass/@primer/view-components/app/{components/primer/local_time.d.ts → assets/javascripts/app/components/primer/beta/relative_time.d.ts} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{local_time.js → beta/relative_time.d.ts} +0 -0
- /data/_sass/@primer/view-components/app/components/primer/{time_ago_component.d.ts → beta/relative_time.js} +0 -0
@@ -7,7 +7,7 @@
|
|
7
7
|
display: inline-block;
|
8
8
|
padding: 0;
|
9
9
|
font-size: inherit;
|
10
|
-
color: var(--color-accent-fg);
|
10
|
+
color: var(--fgColor-accent, var(--color-accent-fg));
|
11
11
|
text-decoration: none;
|
12
12
|
white-space: nowrap;
|
13
13
|
cursor: pointer;
|
@@ -24,7 +24,7 @@
|
|
24
24
|
&[aria-disabled='true'] {
|
25
25
|
&,
|
26
26
|
&:hover {
|
27
|
-
color: var(--color-primer-fg-disabled);
|
27
|
+
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
|
28
28
|
cursor: default;
|
29
29
|
}
|
30
30
|
}
|
@@ -42,7 +42,7 @@
|
|
42
42
|
//
|
43
43
|
// Typically used as a "cancel" button next to a .btn
|
44
44
|
.btn-invisible {
|
45
|
-
color: var(--color-accent-fg);
|
45
|
+
color: var(--fgColor-accent, var(--color-accent-fg));
|
46
46
|
background-color: transparent; // Reset default gradient backgrounds and colors
|
47
47
|
border: 0;
|
48
48
|
border-radius: $border-radius;
|
@@ -50,8 +50,8 @@
|
|
50
50
|
|
51
51
|
&:hover,
|
52
52
|
&.zeroclipboard-is-hover {
|
53
|
-
color: var(--color-accent-fg);
|
54
|
-
background-color: var(--color-btn-hover-bg);
|
53
|
+
color: var(--fgColor-accent, var(--color-accent-fg));
|
54
|
+
background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
|
55
55
|
outline: none;
|
56
56
|
box-shadow: none;
|
57
57
|
}
|
@@ -60,21 +60,21 @@
|
|
60
60
|
&.selected,
|
61
61
|
&[aria-selected='true'],
|
62
62
|
&.zeroclipboard-is-active {
|
63
|
-
color: var(--color-accent-fg);
|
63
|
+
color: var(--fgColor-accent, var(--color-accent-fg));
|
64
64
|
background: none;
|
65
|
-
border-color: var(--color-btn-active-border);
|
65
|
+
border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
|
66
66
|
|
67
67
|
@include focusOutline;
|
68
68
|
}
|
69
69
|
|
70
70
|
&:active &.zeroclipboard-is-active {
|
71
|
-
background-color: var(--color-btn-selected-bg);
|
71
|
+
background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
|
72
72
|
}
|
73
73
|
|
74
74
|
&:disabled,
|
75
75
|
&.disabled,
|
76
76
|
&[aria-disabled='true'] {
|
77
|
-
color: var(--color-primer-fg-disabled);
|
77
|
+
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
|
78
78
|
background-color: transparent;
|
79
79
|
}
|
80
80
|
}
|
@@ -89,7 +89,7 @@
|
|
89
89
|
// stylelint-disable-next-line primer/spacing
|
90
90
|
margin-left: 5px;
|
91
91
|
line-height: $lh-condensed-ultra;
|
92
|
-
color: var(--color-fg-muted);
|
92
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
93
93
|
vertical-align: middle;
|
94
94
|
|
95
95
|
// For `<button>` elements
|
@@ -98,7 +98,7 @@
|
|
98
98
|
box-shadow: none;
|
99
99
|
|
100
100
|
&:hover {
|
101
|
-
color: var(--color-accent-fg);
|
101
|
+
color: var(--fgColor-accent, var(--color-accent-fg));
|
102
102
|
}
|
103
103
|
|
104
104
|
&:focus,
|
@@ -108,17 +108,17 @@
|
|
108
108
|
|
109
109
|
&.disabled,
|
110
110
|
&[aria-disabled='true'] {
|
111
|
-
color: var(--color-primer-fg-disabled);
|
111
|
+
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
|
112
112
|
cursor: default;
|
113
113
|
|
114
114
|
&:hover {
|
115
|
-
color: var(--color-primer-fg-disabled);
|
115
|
+
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
|
116
116
|
}
|
117
117
|
}
|
118
118
|
}
|
119
119
|
|
120
120
|
.btn-octicon-danger:hover {
|
121
|
-
color: var(--color-danger-fg);
|
121
|
+
color: var(--fgColor-danger, var(--color-danger-fg));
|
122
122
|
}
|
123
123
|
|
124
124
|
// Close button
|
@@ -126,12 +126,12 @@
|
|
126
126
|
// Typically used with an octicon-x
|
127
127
|
.close-button {
|
128
128
|
padding: 0;
|
129
|
-
color: var(--color-fg-muted);
|
129
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
130
130
|
background: transparent;
|
131
131
|
border: 0;
|
132
132
|
|
133
133
|
&:hover {
|
134
|
-
color: var(--color-fg-default);
|
134
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
135
135
|
}
|
136
136
|
|
137
137
|
&:active {
|
@@ -165,22 +165,22 @@
|
|
165
165
|
font-weight: $font-weight-bold;
|
166
166
|
// stylelint-disable-next-line primer/typography
|
167
167
|
line-height: 6px;
|
168
|
-
color: var(--color-fg-default);
|
168
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
169
169
|
text-decoration: none;
|
170
170
|
vertical-align: middle;
|
171
|
-
background: var(--color-neutral-muted);
|
171
|
+
background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
|
172
172
|
border: 0;
|
173
173
|
// stylelint-disable-next-line primer/borders
|
174
174
|
border-radius: 1px;
|
175
175
|
|
176
176
|
&:hover {
|
177
177
|
text-decoration: none;
|
178
|
-
background-color: var(--color-accent-muted);
|
178
|
+
background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
|
179
179
|
}
|
180
180
|
|
181
181
|
&:active {
|
182
|
-
color: var(--color-fg-on-emphasis);
|
183
|
-
background-color: var(--color-accent-emphasis);
|
182
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
|
183
|
+
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
|
184
184
|
}
|
185
185
|
}
|
186
186
|
|
@@ -210,14 +210,14 @@
|
|
210
210
|
font-weight: $font-weight-bold;
|
211
211
|
// stylelint-disable-next-line primer/typography
|
212
212
|
line-height: 20px;
|
213
|
-
color: var(--color-fg-default);
|
213
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
214
214
|
vertical-align: middle;
|
215
|
-
background-color: var(--color-canvas-default);
|
216
|
-
border: $border-width $border-style var(--color-btn-border);
|
215
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
216
|
+
border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
|
217
217
|
border-left: 0;
|
218
218
|
border-top-right-radius: $border-radius;
|
219
219
|
border-bottom-right-radius: $border-radius;
|
220
|
-
box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
|
220
|
+
box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
|
221
221
|
|
222
222
|
&:hover,
|
223
223
|
&:active {
|
@@ -225,7 +225,7 @@
|
|
225
225
|
}
|
226
226
|
|
227
227
|
&:hover {
|
228
|
-
color: var(--color-accent-fg);
|
228
|
+
color: var(--fgColor-accent, var(--color-accent-fg));
|
229
229
|
cursor: pointer;
|
230
230
|
}
|
231
231
|
}
|
@@ -6,8 +6,8 @@
|
|
6
6
|
@include color-mode(dark) { color-scheme: dark; }
|
7
7
|
|
8
8
|
[data-color-mode] {
|
9
|
-
color: var(--color-fg-default);
|
10
|
-
background-color: var(--color-canvas-default);
|
9
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
10
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
11
11
|
}
|
12
12
|
|
13
13
|
// Windows High Contrast mode
|
@@ -18,5 +18,7 @@
|
|
18
18
|
body {
|
19
19
|
--color-accent-emphasis: Highlight;
|
20
20
|
--color-fg-on-emphasis: LinkText;
|
21
|
+
--fgColor-onEmphasis: LinkText;
|
22
|
+
--fgColor-accent: Highlight;
|
21
23
|
}
|
22
24
|
}
|
@@ -12,14 +12,14 @@
|
|
12
12
|
font-size: $body-font-size;
|
13
13
|
// stylelint-disable-next-line primer/typography
|
14
14
|
line-height: 20px;
|
15
|
-
color: var(--color-fg-default);
|
15
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
16
16
|
vertical-align: middle;
|
17
|
-
background-color: var(--color-canvas-default);
|
17
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
18
18
|
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
|
19
19
|
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
|
20
|
-
border: $border-width $border-style var(--color-border-default);
|
20
|
+
border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
|
21
21
|
border-radius: $border-radius;
|
22
|
-
box-shadow: var(--color-primer-shadow-inset);
|
22
|
+
box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
|
23
23
|
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
|
24
24
|
transition-property: color, background-color, box-shadow, border-color;
|
25
25
|
|
@@ -43,20 +43,20 @@
|
|
43
43
|
&.border-0 {
|
44
44
|
&:focus,
|
45
45
|
&:focus-visible {
|
46
|
-
border: $border-width $border-style var(--color-accent-fg) !important;
|
46
|
+
border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
|
47
47
|
}
|
48
48
|
}
|
49
49
|
|
50
50
|
&[disabled],
|
51
51
|
fieldset[disabled] & {
|
52
|
-
color: var(--color-primer-fg-disabled);
|
53
|
-
background-color: var(--color-input-disabled-bg);
|
54
|
-
border-color: var(--color-border-default);
|
55
|
-
-webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
|
52
|
+
color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
|
53
|
+
background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
|
54
|
+
border-color: var(--control-borderColor-disabled, var(--color-border-default));
|
55
|
+
-webkit-text-fill-color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
|
56
56
|
opacity: 1; // Fix for Safari iOS
|
57
57
|
|
58
58
|
&::placeholder {
|
59
|
-
color: var(--color-primer-fg-disabled);
|
59
|
+
color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
|
60
60
|
}
|
61
61
|
}
|
62
62
|
|
@@ -79,10 +79,10 @@ textarea.form-control {
|
|
79
79
|
|
80
80
|
// Inputs with contrast for easy light gray backgrounds against white.
|
81
81
|
.input-contrast {
|
82
|
-
background-color: var(--color-canvas-inset);
|
82
|
+
background-color: var(--bgColor-muted, var(--color-canvas-inset));
|
83
83
|
|
84
84
|
&:focus {
|
85
|
-
background-color: var(--color-canvas-default);
|
85
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
86
86
|
}
|
87
87
|
}
|
88
88
|
|
@@ -142,7 +142,7 @@ textarea.form-control {
|
|
142
142
|
// stylelint-disable-next-line primer/spacing
|
143
143
|
padding: 2px $spacer-1;
|
144
144
|
font-style: normal;
|
145
|
-
background: var(--color-attention-subtle);
|
145
|
+
background: var(--bgColor-attention-muted, var(--color-attention-subtle));
|
146
146
|
border-radius: $border-radius;
|
147
147
|
}
|
148
148
|
}
|
@@ -160,7 +160,7 @@ textarea.form-control {
|
|
160
160
|
margin: 0;
|
161
161
|
font-size: $font-size-small;
|
162
162
|
font-weight: $font-weight-normal;
|
163
|
-
color: var(--color-fg-muted);
|
163
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
164
164
|
}
|
165
165
|
}
|
166
166
|
|
@@ -199,7 +199,7 @@ textarea.form-control {
|
|
199
199
|
display: inline-block;
|
200
200
|
// stylelint-disable-next-line primer/spacing
|
201
201
|
margin: 5px 0 0;
|
202
|
-
color: var(--color-fg-muted);
|
202
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
203
203
|
}
|
204
204
|
|
205
205
|
img {
|
@@ -251,9 +251,9 @@ input::-webkit-inner-spin-button {
|
|
251
251
|
// stylelint-disable-next-line primer/spacing
|
252
252
|
margin: 10px 0;
|
253
253
|
font-size: $h5-size;
|
254
|
-
color: var(--color-attention-fg);
|
255
|
-
background: var(--color-attention-subtle);
|
256
|
-
border: $border-width $border-style var(--color-attention-emphasis);
|
254
|
+
color: var(--fgColor-attention, var(--color-attention-fg));
|
255
|
+
background: var(--bgColor-attention-muted, var(--color-attention-subtle));
|
256
|
+
border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
|
257
257
|
border-radius: $border-radius;
|
258
258
|
|
259
259
|
p {
|
@@ -17,7 +17,7 @@
|
|
17
17
|
// Autocomplete with embedded icon
|
18
18
|
.form-control.autocomplete-embedded-icon-wrap {
|
19
19
|
&:focus-within {
|
20
|
-
background-color: var(--color-canvas-default);
|
20
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
21
21
|
}
|
22
22
|
}
|
23
23
|
|
@@ -28,10 +28,10 @@
|
|
28
28
|
max-width: 100%;
|
29
29
|
// stylelint-disable-next-line primer/spacing
|
30
30
|
margin-right: 5px;
|
31
|
-
background-color: var(--color-canvas-inset);
|
31
|
+
background-color: var(--bgColor-muted, var(--color-canvas-inset));
|
32
32
|
|
33
33
|
&:focus {
|
34
|
-
background-color: var(--color-canvas-default);
|
34
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
35
35
|
}
|
36
36
|
|
37
37
|
&.shorter {
|
@@ -70,7 +70,8 @@
|
|
70
70
|
}
|
71
71
|
|
72
72
|
label {
|
73
|
-
|
73
|
+
// fix for chrome bug, see https://github.com/github/github/issues/53931
|
74
|
+
position: static;
|
74
75
|
}
|
75
76
|
|
76
77
|
&.flattened dt, // TODO: Deprecate
|
@@ -97,11 +98,11 @@
|
|
97
98
|
margin: $spacer-1 0 0;
|
98
99
|
|
99
100
|
&.is-error {
|
100
|
-
color: var(--color-danger-fg);
|
101
|
+
color: var(--fgColor-danger, var(--color-danger-fg));
|
101
102
|
}
|
102
103
|
|
103
104
|
&.is-success {
|
104
|
-
color: var(--color-success-fg);
|
105
|
+
color: var(--fgColor-success, var(--color-success-fg));
|
105
106
|
}
|
106
107
|
|
107
108
|
+ .note {
|
@@ -120,7 +121,7 @@
|
|
120
121
|
.form-group-header label::after {
|
121
122
|
// stylelint-disable-next-line primer/spacing
|
122
123
|
padding-left: 5px;
|
123
|
-
color: var(--color-danger-fg);
|
124
|
+
color: var(--fgColor-danger, var(--color-danger-fg));
|
124
125
|
content: '*';
|
125
126
|
}
|
126
127
|
}
|
@@ -153,7 +154,7 @@
|
|
153
154
|
&.successful {
|
154
155
|
.success {
|
155
156
|
display: inline;
|
156
|
-
color: var(--color-success-fg);
|
157
|
+
color: var(--fgColor-success, var(--color-success-fg));
|
157
158
|
}
|
158
159
|
}
|
159
160
|
|
@@ -209,63 +210,63 @@
|
|
209
210
|
|
210
211
|
&.successed {
|
211
212
|
.success {
|
212
|
-
color: var(--color-fg-default);
|
213
|
-
background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
|
214
|
-
background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
|
215
|
-
border-color: var(--color-success-muted);
|
213
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
214
|
+
background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
|
215
|
+
background-image: linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))), var(--color-success-subtle));
|
216
|
+
border-color: var(--borderColor-success-muted, var(--color-success-muted));
|
216
217
|
|
217
218
|
&::after {
|
218
|
-
border-bottom-color: var(--color-success-
|
219
|
+
border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
|
219
220
|
}
|
220
221
|
|
221
222
|
&::before {
|
222
|
-
border-bottom-color: var(--color-success-muted);
|
223
|
+
border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
|
223
224
|
}
|
224
225
|
}
|
225
226
|
}
|
226
227
|
|
227
228
|
&.warn {
|
228
229
|
.form-control:not(:focus, :focus-visible) {
|
229
|
-
border-color: var(--color-attention-emphasis);
|
230
|
+
border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
|
230
231
|
}
|
231
232
|
|
232
233
|
.warning {
|
233
|
-
color: var(--color-fg-default);
|
234
|
-
background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
|
235
|
-
background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
|
236
|
-
border-color: var(--color-attention-muted);
|
234
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
235
|
+
background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
|
236
|
+
background-image: linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))), var(--color-attention-subtle));
|
237
|
+
border-color: var(--borderColor-attention-muted, var(--color-attention-muted));
|
237
238
|
|
238
239
|
&::after {
|
239
|
-
border-bottom-color: var(--color-attention-
|
240
|
+
border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
|
240
241
|
}
|
241
242
|
|
242
243
|
&::before {
|
243
|
-
border-bottom-color: var(--color-attention-muted);
|
244
|
+
border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
|
244
245
|
}
|
245
246
|
}
|
246
247
|
}
|
247
248
|
|
248
249
|
&.errored {
|
249
250
|
.form-control:not(:focus, :focus-visible) {
|
250
|
-
border-color: var(--color-danger-emphasis);
|
251
|
+
border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
|
251
252
|
}
|
252
253
|
|
253
254
|
label {
|
254
|
-
color: var(--color-danger-fg);
|
255
|
+
color: var(--fgColor-danger, var(--color-danger-fg));
|
255
256
|
}
|
256
257
|
|
257
258
|
.error {
|
258
|
-
color: var(--color-fg-default);
|
259
|
-
background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
|
260
|
-
background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
|
261
|
-
border-color: var(--color-danger-muted);
|
259
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
260
|
+
background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
|
261
|
+
background-image: linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))), var(--color-danger-subtle));
|
262
|
+
border-color: var(--borderColor-danger-muted, var(--color-danger-muted));
|
262
263
|
|
263
264
|
&::after {
|
264
|
-
border-bottom-color: var(--color-danger-
|
265
|
+
border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
|
265
266
|
}
|
266
267
|
|
267
268
|
&::before {
|
268
|
-
border-bottom-color: var(--color-danger-muted);
|
269
|
+
border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
|
269
270
|
}
|
270
271
|
}
|
271
272
|
}
|
@@ -277,7 +278,7 @@
|
|
277
278
|
// stylelint-disable-next-line primer/spacing
|
278
279
|
margin: $spacer-1 0 2px;
|
279
280
|
font-size: $font-size-small;
|
280
|
-
color: var(--color-fg-muted);
|
281
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
281
282
|
|
282
283
|
.spinner {
|
283
284
|
// stylelint-disable-next-line primer/spacing
|
@@ -6,7 +6,7 @@
|
|
6
6
|
max-width: 100%;
|
7
7
|
height: $size-5;
|
8
8
|
padding-right: $spacer-4;
|
9
|
-
background-color: var(--color-canvas-default);
|
9
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
10
10
|
// SVG with fill: #586069 (--color-icon-secondary)
|
11
11
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
|
12
12
|
background-repeat: no-repeat;
|
@@ -54,6 +54,11 @@
|
|
54
54
|
border-bottom-right-radius: 0;
|
55
55
|
}
|
56
56
|
|
57
|
+
.input-group .form-control:first-child,
|
58
|
+
.input-group-button:first-child .btn:not(.btn-primary) {
|
59
|
+
border-color: var(--control-borderColor-rest, var(--color-border-default));
|
60
|
+
}
|
61
|
+
|
57
62
|
.input-group-button:first-child .btn {
|
58
63
|
// stylelint-disable-next-line primer/spacing
|
59
64
|
margin-right: -1px;
|
@@ -65,6 +70,11 @@
|
|
65
70
|
border-bottom-left-radius: 0;
|
66
71
|
}
|
67
72
|
|
73
|
+
.input-group .form-control:last-child,
|
74
|
+
.input-group-button:last-child .btn:not(.btn-primary) {
|
75
|
+
border-color: var(--control-borderColor-rest, var(--color-border-default));
|
76
|
+
}
|
77
|
+
|
68
78
|
.input-group-button:last-child .btn {
|
69
79
|
// stylelint-disable-next-line primer/spacing
|
70
80
|
margin-left: -1px;
|
@@ -13,14 +13,14 @@
|
|
13
13
|
font-size: $body-font-size;
|
14
14
|
// stylelint-disable-next-line primer/typography
|
15
15
|
line-height: 20px; // Specifically not inherit our `<body>` default
|
16
|
-
color: var(--color-fg-default);
|
16
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
17
17
|
cursor: pointer;
|
18
|
-
border: $border-width $border-style var(--color-border-default);
|
18
|
+
border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
|
19
19
|
|
20
20
|
:checked + & {
|
21
21
|
position: relative;
|
22
22
|
z-index: 1;
|
23
|
-
border-color: var(--color-accent-emphasis);
|
23
|
+
border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
|
24
24
|
}
|
25
25
|
|
26
26
|
&:first-of-type {
|
@@ -36,7 +36,7 @@
|
|
36
36
|
|
37
37
|
.octicon {
|
38
38
|
margin-left: $spacer-1;
|
39
|
-
color: var(--color-fg-subtle);
|
39
|
+
color: var(--fgColor-muted, var(--color-fg-subtle));
|
40
40
|
}
|
41
41
|
}
|
42
42
|
|
@@ -50,9 +50,9 @@
|
|
50
50
|
position: relative; // enables z-index
|
51
51
|
|
52
52
|
+ .radio-label {
|
53
|
-
color: var(--color-primer-fg-disabled);
|
53
|
+
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
|
54
54
|
cursor: default;
|
55
|
-
background-color: var(--color-neutral-subtle);
|
55
|
+
background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
|
56
56
|
|
57
57
|
.octicon {
|
58
58
|
color: inherit;
|
@@ -4,8 +4,8 @@
|
|
4
4
|
padding: $spacer-3;
|
5
5
|
font-size: $h5-size;
|
6
6
|
line-height: $lh-default;
|
7
|
-
color: var(--color-header-text);
|
8
|
-
background-color: var(--color-header-bg);
|
7
|
+
color: var(--header-fgColor-default, var(--color-header-text));
|
8
|
+
background-color: var(--header-bgColor, var(--color-header-bg));
|
9
9
|
align-items: center;
|
10
10
|
flex-wrap: nowrap;
|
11
11
|
}
|
@@ -24,20 +24,20 @@
|
|
24
24
|
|
25
25
|
.Header-link {
|
26
26
|
font-weight: $font-weight-bold;
|
27
|
-
color: var(--color-header-logo);
|
27
|
+
color: var(--header-fgColor-logo, var(--color-header-logo));
|
28
28
|
white-space: nowrap;
|
29
29
|
|
30
30
|
&:hover,
|
31
31
|
&:focus {
|
32
|
-
color: var(--color-header-text);
|
32
|
+
color: var(--header-fgColor-default, var(--color-header-text));
|
33
33
|
text-decoration: none;
|
34
34
|
}
|
35
35
|
}
|
36
36
|
|
37
37
|
.Header-input {
|
38
|
-
color: var(--color-header-text);
|
39
|
-
background-color: var(--color-header-search-bg);
|
40
|
-
border: $border-width $border-style var(--color-header-search-border);
|
38
|
+
color: var(--header-fgColor-default, var(--color-header-text));
|
39
|
+
background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
|
40
|
+
border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
|
41
41
|
box-shadow: none;
|
42
42
|
|
43
43
|
&::placeholder {
|
@@ -29,8 +29,8 @@
|
|
29
29
|
display: flex;
|
30
30
|
width: 100%;
|
31
31
|
padding: var(--base-size-16, 16px);
|
32
|
-
background: var(--color-canvas-inset);
|
33
|
-
padding-block-end: calc(var(--base-size-16, 16px) - var(--
|
32
|
+
background: var(--bgColor-inset, var(--color-canvas-inset));
|
33
|
+
padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
|
34
34
|
isolation: isolate;
|
35
35
|
align-items: center;
|
36
36
|
gap: var(--base-size-8, 8px);
|
@@ -66,8 +66,8 @@
|
|
66
66
|
overflow: hidden;
|
67
67
|
text-indent: var(--base-size-128, 128px);
|
68
68
|
pointer-events: none;
|
69
|
-
background: var(--color-border-default);
|
70
|
-
border-radius: var(--
|
69
|
+
background: var(--borderColor-default, var(--color-border-default));
|
70
|
+
border-radius: var(--borderRadius-full, 100vh);
|
71
71
|
}
|
72
72
|
|
73
73
|
&:focus {
|
@@ -75,17 +75,17 @@
|
|
75
75
|
display: grid;
|
76
76
|
width: auto;
|
77
77
|
height: auto;
|
78
|
-
min-height: var(--
|
79
|
-
padding: 0 var(--
|
78
|
+
min-height: var(--control-medium-size, 32px);
|
79
|
+
padding: 0 var(--control-medium-paddingInline-spacious, 16px);
|
80
80
|
overflow: auto;
|
81
|
-
color: var(--color-fg-on-emphasis);
|
82
|
-
background: var(--color-accent-emphasis);
|
83
|
-
border-radius: var(--
|
81
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
|
82
|
+
background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
|
83
|
+
border-radius: var(--borderRadius-full, 100vh);
|
84
84
|
align-items: center;
|
85
85
|
|
86
86
|
@media (pointer: coarse) {
|
87
87
|
&::after {
|
88
|
-
@include minTouchTarget(var(--
|
88
|
+
@include minTouchTarget(var(--control-minTarget-coarse, 44px));
|
89
89
|
}
|
90
90
|
}
|
91
91
|
|
@@ -95,17 +95,17 @@
|
|
95
95
|
|
96
96
|
@keyframes AppFrame-a11yLink-focus {
|
97
97
|
0% {
|
98
|
-
color: var(--color-accent-emphasis);
|
98
|
+
color: var(--fgColor-accent, var(--color-accent-emphasis));
|
99
99
|
transform: scale(0.3, 0.25);
|
100
100
|
}
|
101
101
|
|
102
102
|
50% {
|
103
|
-
color: var(--color-accent-emphasis);
|
103
|
+
color: var(--fgColor-accent, var(--color-accent-emphasis));
|
104
104
|
transform: scale(1, 1);
|
105
105
|
}
|
106
106
|
|
107
107
|
55% {
|
108
|
-
color: var(--color-fg-on-emphasis);
|
108
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
|
109
109
|
}
|
110
110
|
|
111
111
|
100% {
|