jekyll-v4-theme-primer 0.12.0 → 0.14.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 +18 -0
- data/_layouts/default.html +12 -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 +2 -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/forms/form-control.scss +18 -18
- data/_sass/@primer/css/forms/form-group.scss +29 -29
- data/_sass/@primer/css/forms/form-select.scss +1 -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/layout/app-frame.scss +7 -7
- data/_sass/@primer/css/layout/page-layout.scss +2 -6
- data/_sass/@primer/css/layout/stack.scss +1 -1
- 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/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/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 +1 -1
- 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/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/{components/primer/alpha → assets/javascripts/app/components/primer/beta}/nav_list.d.ts +0 -11
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/_sass/@primer/view-components/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts +1 -0
- 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 +21 -16
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.d.ts +26 -4
- data/_sass/@primer/view-components/app/components/primer/alpha/action_menu/action_menu_element.js +318 -65
- data/_sass/@primer/view-components/app/components/primer/alpha/auto_complete.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/banner.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/button_marketing.css +1 -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 +12 -27
- data/_sass/@primer/view-components/app/components/primer/alpha/dropdown.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/layout.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/menu.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/modal_dialog.js +38 -27
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/alpha/overlay.css.json +6 -3
- 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 +11 -13
- 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/text_field.css +1 -3
- data/_sass/@primer/view-components/app/components/primer/alpha/text_field.css.json +16 -6
- 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 +11 -11
- 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/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.js +16 -8
- data/_sass/@primer/view-components/app/components/primer/beta/avatar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/avatar_stack.css +1 -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 +1 -0
- 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 +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/breadcrumbs.css +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 +13 -7
- 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/flash.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/label.css +1 -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 +1 -0
- data/_sass/@primer/view-components/app/components/primer/beta/nav_list.d.ts +17 -0
- data/_sass/@primer/view-components/app/components/primer/{alpha → beta}/nav_list.js +28 -100
- 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/beta/nav_list_group_element.js +107 -0
- data/_sass/@primer/view-components/app/components/primer/beta/popover.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/progress_bar.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/state.css +1 -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 +2 -0
- data/_sass/@primer/view-components/app/components/primer/beta/timeline_item.css +1 -1
- data/_sass/@primer/view-components/app/components/primer/beta/truncate.css +1 -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.js +41 -22
- data/_sass/@primer/view-components/app/components/primer/primer.d.ts +6 -2
- data/_sass/@primer/view-components/app/components/primer/primer.js +6 -2
- 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/lib/primer/forms/primer_multi_input.js +2 -3
- data/_sass/@primer/view-components/lib/primer/forms/primer_text_field.js +42 -9
- data/_sass/@primer/view-components/lib/primer/forms/toggle_switch_input.js +7 -2
- data/_sass/@primer/view-components/package.json +33 -34
- data/_sass/@primer/view-components/static/arguments.json +559 -48
- data/_sass/@primer/view-components/static/audited_at.json +18 -3
- data/_sass/@primer/view-components/static/classes.json +402 -369
- data/_sass/@primer/view-components/static/constants.json +104 -17
- data/_sass/@primer/view-components/static/info_arch.json +8248 -1640
- data/_sass/@primer/view-components/static/previews.json +6225 -1431
- data/_sass/@primer/view-components/static/statuses.json +20 -5
- data/_sass/jekyll-v4-theme-primer.scss +11 -0
- data/assets/js/github-clipboard-copy-element.js +154 -0
- data/assets/js/primer-clipboard-copy.js +70 -0
- metadata +77 -5
@@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
|
|
41
41
|
left: 0;
|
42
42
|
pointer-events: none;
|
43
43
|
content: '';
|
44
|
-
background-color: var(--color-primer-canvas-backdrop);
|
44
|
+
background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
|
45
45
|
|
46
46
|
@include breakpoint(sm) {
|
47
47
|
display: none;
|
@@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
|
|
61
61
|
overflow: hidden; // Enables border radius on scrollable child elements
|
62
62
|
pointer-events: auto;
|
63
63
|
flex-direction: column;
|
64
|
-
background-color: var(--color-canvas-overlay);
|
65
|
-
border: $border-width $border-style var(--color-select-menu-backdrop-border);
|
64
|
+
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
|
65
|
+
border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
|
66
66
|
// stylelint-disable-next-line primer/borders
|
67
67
|
border-radius: $border-radius * 2;
|
68
|
-
box-shadow: var(--color-shadow
|
68
|
+
box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
69
69
|
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
|
70
70
|
|
71
71
|
@keyframes SelectMenu-modal-animation {
|
@@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
|
|
88
88
|
max-height: $SelectMenu-max-height;
|
89
89
|
margin: $spacer-2 0 $spacer-3 0;
|
90
90
|
font-size: $font-size-small;
|
91
|
-
border-color: var(--color-border-default);
|
91
|
+
border-color: var(--borderColor-default, var(--color-border-default));
|
92
92
|
border-radius: $border-radius;
|
93
|
-
box-shadow: var(--color-shadow
|
93
|
+
box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
94
94
|
animation-name: SelectMenu-modal-animation--sm;
|
95
95
|
}
|
96
96
|
}
|
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
|
|
104
104
|
padding: $spacer-3;
|
105
105
|
flex: none; // fixes header from getting squeezed in Safari iOS
|
106
106
|
align-items: center;
|
107
|
-
border-bottom: $border-width $border-style var(--color-border-muted);
|
107
|
+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
108
108
|
|
109
109
|
@include breakpoint(sm) {
|
110
110
|
// stylelint-disable-next-line primer/spacing
|
@@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
|
|
126
126
|
padding: $spacer-3;
|
127
127
|
margin: -$spacer-3;
|
128
128
|
line-height: 1;
|
129
|
-
color: var(--color-fg-muted);
|
129
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
130
130
|
background-color: transparent;
|
131
131
|
border: 0;
|
132
132
|
|
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
|
|
144
144
|
.SelectMenu-filter {
|
145
145
|
padding: $spacer-3;
|
146
146
|
margin: 0;
|
147
|
-
border-bottom: $border-width $border-style var(--color-border-muted);
|
147
|
+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
148
148
|
|
149
149
|
@include breakpoint(sm) {
|
150
150
|
padding: $spacer-2;
|
@@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
|
|
173
173
|
flex: auto;
|
174
174
|
overflow-x: hidden;
|
175
175
|
overflow-y: auto;
|
176
|
-
background-color: var(--color-canvas-overlay);
|
176
|
+
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
|
177
177
|
-webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
|
178
178
|
}
|
179
179
|
|
@@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
|
|
187
187
|
width: 100%;
|
188
188
|
padding: $spacer-3;
|
189
189
|
overflow: hidden;
|
190
|
-
color: var(--color-fg-default);
|
190
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
191
191
|
text-align: left;
|
192
192
|
cursor: pointer;
|
193
|
-
background-color: var(--color-canvas-overlay);
|
193
|
+
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
|
194
194
|
border: 0;
|
195
|
-
border-bottom: $border-width $border-style var(--color-border-muted);
|
195
|
+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
196
196
|
|
197
197
|
@include breakpoint(sm) {
|
198
198
|
// stylelint-disable-next-line primer/spacing
|
@@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
|
|
234
234
|
overflow-x: auto;
|
235
235
|
overflow-y: hidden;
|
236
236
|
// stylelint-disable-next-line primer/box-shadow
|
237
|
-
box-shadow: inset 0 -1px 0 var(--color-border-muted);
|
237
|
+
box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
|
238
238
|
-webkit-overflow-scrolling: touch;
|
239
239
|
|
240
240
|
// Hide scrollbar so it doesn't cover the text
|
@@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
|
|
252
252
|
padding: $spacer-2 $spacer-3;
|
253
253
|
font-size: $font-size-small;
|
254
254
|
font-weight: $font-weight-semibold;
|
255
|
-
color: var(--color-fg-muted);
|
255
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
256
256
|
text-align: center;
|
257
257
|
background-color: transparent;
|
258
258
|
border: 0;
|
259
259
|
// stylelint-disable-next-line primer/box-shadow
|
260
|
-
box-shadow: inset 0 -1px 0 var(--color-border-muted);
|
260
|
+
box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
|
261
261
|
|
262
262
|
@include breakpoint(sm) {
|
263
263
|
flex: none;
|
@@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
|
|
270
270
|
|
271
271
|
&[aria-selected='true'] {
|
272
272
|
z-index: 1; // Keeps box-shadow visible when hovering
|
273
|
-
color: var(--color-fg-default);
|
273
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
274
274
|
cursor: default;
|
275
|
-
background-color: var(--color-canvas-overlay);
|
275
|
+
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
|
276
276
|
// stylelint-disable-next-line primer/box-shadow
|
277
|
-
box-shadow: 0 0 0 1px var(--color-border-muted);
|
277
|
+
box-shadow: 0 0 0 1px var(--borderColor-muted, var(--color-border-muted));
|
278
278
|
|
279
279
|
@include breakpoint(sm) {
|
280
|
-
border-color: var(--color-border-muted);
|
280
|
+
border-color: var(--borderColor-muted, var(--color-border-muted));
|
281
281
|
box-shadow: none;
|
282
282
|
}
|
283
283
|
}
|
@@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
|
|
291
291
|
// stylelint-disable-next-line primer/spacing
|
292
292
|
padding: 7px $spacer-3;
|
293
293
|
text-align: center;
|
294
|
-
background-color: var(--color-canvas-overlay);
|
295
|
-
border-bottom: $border-width $border-style var(--color-border-muted);
|
294
|
+
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
|
295
|
+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
296
296
|
}
|
297
297
|
|
298
298
|
// Blankslate and Loading
|
@@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
|
|
303
303
|
.SelectMenu-loading {
|
304
304
|
padding: $spacer-4 $spacer-3;
|
305
305
|
text-align: center;
|
306
|
-
background-color: var(--color-canvas-overlay);
|
306
|
+
background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
|
307
307
|
}
|
308
308
|
|
309
309
|
// Divider
|
@@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
|
|
315
315
|
margin: 0;
|
316
316
|
font-size: $font-size-small;
|
317
317
|
font-weight: $font-weight-semibold;
|
318
|
-
color: var(--color-fg-muted);
|
319
|
-
background-color: var(--color-canvas-subtle);
|
320
|
-
border-bottom: $border-width $border-style var(--color-border-muted);
|
318
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
319
|
+
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
|
320
|
+
border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
321
321
|
|
322
322
|
// Borderless
|
323
323
|
.SelectMenu-list--borderless & {
|
324
|
-
border-top: $border-width $border-style var(--color-border-muted);
|
324
|
+
border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
325
325
|
|
326
326
|
&:empty {
|
327
327
|
padding: 0;
|
@@ -338,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
|
|
338
338
|
z-index: 0; // Avoid top border from getting covered by the negative margin of the list
|
339
339
|
padding: $spacer-2 $spacer-3;
|
340
340
|
font-size: $font-size-small;
|
341
|
-
color: var(--color-fg-muted);
|
341
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
342
342
|
text-align: center;
|
343
|
-
border-top: $border-width $border-style var(--color-border-muted);
|
343
|
+
border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
|
344
344
|
|
345
345
|
@include breakpoint(sm) {
|
346
346
|
// stylelint-disable-next-line primer/spacing
|
@@ -387,7 +387,7 @@ $SelectMenu-max-height: 480px !default;
|
|
387
387
|
|
388
388
|
.SelectMenu-item[aria-checked='true'] {
|
389
389
|
font-weight: $font-weight-semibold;
|
390
|
-
color: var(--color-fg-default);
|
390
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
391
391
|
|
392
392
|
.SelectMenu-icon--check {
|
393
393
|
visibility: visible;
|
@@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
|
|
402
402
|
|
403
403
|
.SelectMenu-item:disabled,
|
404
404
|
.SelectMenu-item[aria-disabled='true'] {
|
405
|
-
color: var(--color-primer-fg-disabled);
|
405
|
+
color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
|
406
406
|
pointer-events: none;
|
407
407
|
}
|
408
408
|
|
@@ -413,33 +413,33 @@ $SelectMenu-max-height: 480px !default;
|
|
413
413
|
@media (hover: hover) {
|
414
414
|
body:not(.intent-mouse) .SelectMenu-closeButton:focus,
|
415
415
|
.SelectMenu-closeButton:hover {
|
416
|
-
color: var(--color-fg-default);
|
416
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
417
417
|
}
|
418
418
|
|
419
419
|
.SelectMenu-closeButton:active {
|
420
|
-
color: var(--color-fg-muted);
|
420
|
+
color: var(--fgColor-muted, var(--color-fg-muted));
|
421
421
|
}
|
422
422
|
|
423
423
|
body:not(.intent-mouse) .SelectMenu-item:focus,
|
424
424
|
.SelectMenu-item:hover {
|
425
|
-
background-color: var(--color-neutral-subtle);
|
425
|
+
background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
|
426
426
|
}
|
427
427
|
|
428
428
|
.SelectMenu-item:active {
|
429
|
-
background-color: var(--color-canvas-subtle);
|
429
|
+
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
|
430
430
|
}
|
431
431
|
|
432
432
|
body:not(.intent-mouse) .SelectMenu-tab:focus {
|
433
|
-
background-color: var(--color-select-menu-tap-focus-bg);
|
433
|
+
background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
|
434
434
|
}
|
435
435
|
|
436
436
|
.SelectMenu-tab:hover {
|
437
|
-
color: var(--color-fg-default);
|
437
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
438
438
|
}
|
439
439
|
|
440
440
|
.SelectMenu-tab:not([aria-selected='true']):active {
|
441
|
-
color: var(--color-fg-default);
|
442
|
-
background-color: var(--color-canvas-subtle);
|
441
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
442
|
+
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
|
443
443
|
}
|
444
444
|
}
|
445
445
|
|
@@ -451,13 +451,13 @@ $SelectMenu-max-height: 480px !default;
|
|
451
451
|
// Android
|
452
452
|
.SelectMenu-item:focus,
|
453
453
|
.SelectMenu-item:active {
|
454
|
-
background-color: var(--color-canvas-subtle);
|
454
|
+
background-color: var(--bgColor-muted, var(--color-canvas-subtle));
|
455
455
|
}
|
456
456
|
|
457
457
|
// iOS Safari
|
458
458
|
// :active would work if ontouchstart is added to the button
|
459
459
|
// Instead this tweaks the "native" highlight color
|
460
460
|
.SelectMenu-item {
|
461
|
-
-webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
|
461
|
+
-webkit-tap-highlight-color: var(--control-bgColor-active, var(--color-select-menu-tap-highlight));
|
462
462
|
}
|
463
463
|
}
|
@@ -1,34 +1,122 @@
|
|
1
|
+
// This mixin is used to output the tokens/variables from Primitives
|
2
|
+
//
|
3
|
+
// Example:
|
4
|
+
//
|
5
|
+
// @include color-mode-theme(dark) {
|
6
|
+
// --color: black;
|
7
|
+
// }
|
8
|
+
//
|
9
|
+
// Warning!!!
|
10
|
+
// Don't use this mixin with a class. E.g.
|
11
|
+
// @include color-mode-theme(dark) {
|
12
|
+
// .my-class {
|
13
|
+
// color: red;
|
14
|
+
// }
|
15
|
+
// }
|
16
|
+
//
|
17
|
+
// The outputted `::selection .my-class` will make the selector invalid and the entire ruleset is disregarded.
|
18
|
+
// At some point we hopefully can remove the need for `&, &::selection {}` again (once the spec/implementation changes).
|
19
|
+
|
1
20
|
@mixin color-mode-theme($theme-name, $include-root: false) {
|
2
21
|
@if $include-root {
|
3
22
|
:root,
|
4
23
|
[data-color-mode="light"][data-light-theme="#{$theme-name}"],
|
5
24
|
[data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
|
6
|
-
|
25
|
+
&,
|
26
|
+
&::selection {
|
27
|
+
@content;
|
28
|
+
}
|
7
29
|
|
8
30
|
/*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
|
9
31
|
}
|
32
|
+
|
33
|
+
::backdrop,
|
34
|
+
[data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
|
35
|
+
[data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
|
36
|
+
@content;
|
37
|
+
|
38
|
+
/*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
|
39
|
+
}
|
10
40
|
}
|
11
41
|
|
12
42
|
@else {
|
13
43
|
[data-color-mode="light"][data-light-theme="#{$theme-name}"],
|
14
44
|
[data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
|
45
|
+
&,
|
46
|
+
&::selection {
|
47
|
+
@content;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
::backdrop,
|
52
|
+
[data-color-mode="light"][data-light-theme="#{$theme-name}"] ::backdrop,
|
53
|
+
[data-color-mode="dark"][data-dark-theme="#{$theme-name}"] ::backdrop {
|
15
54
|
@content;
|
55
|
+
|
56
|
+
/*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
|
16
57
|
}
|
17
58
|
}
|
18
59
|
|
19
60
|
@media (prefers-color-scheme: light) {
|
20
61
|
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
|
62
|
+
&,
|
63
|
+
&::selection {
|
64
|
+
@content;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
|
21
69
|
@content;
|
70
|
+
|
71
|
+
/*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
|
22
72
|
}
|
23
73
|
}
|
24
74
|
|
25
75
|
@media (prefers-color-scheme: dark) {
|
26
76
|
[data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
|
77
|
+
&,
|
78
|
+
&::selection {
|
79
|
+
@content;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] ::backdrop {
|
27
84
|
@content;
|
85
|
+
|
86
|
+
/*! */ // Must remain separate from the above selector to not break browsers which don't support ::backdrop, e.g. Safari 14.
|
28
87
|
}
|
29
88
|
}
|
30
89
|
}
|
31
90
|
|
91
|
+
// This mixin wraps styles with light or dark mode selectors
|
92
|
+
// If possible, use a color variable instead.
|
93
|
+
//
|
94
|
+
// Example:
|
95
|
+
//
|
96
|
+
// @include color-mode('dark') {
|
97
|
+
// .my-class {
|
98
|
+
// color: red;
|
99
|
+
// }
|
100
|
+
// }
|
101
|
+
//
|
102
|
+
// Returns:
|
103
|
+
//
|
104
|
+
// [data-color-mode=light][data-light-theme*=dark] .my-class,
|
105
|
+
// [data-color-mode=dark][data-dark-theme*=dark] .my-class {
|
106
|
+
// color: red;
|
107
|
+
// }
|
108
|
+
//
|
109
|
+
// @media (prefers-color-scheme: light) {
|
110
|
+
// [data-color-mode=auto][data-light-theme*=dark] .my-class {
|
111
|
+
// color: red;
|
112
|
+
// }
|
113
|
+
// }
|
114
|
+
// @media (prefers-color-scheme: dark) {
|
115
|
+
// [data-color-mode=auto][data-dark-theme*=dark] .my-class {
|
116
|
+
// color: red;
|
117
|
+
// }
|
118
|
+
// }
|
119
|
+
|
32
120
|
@mixin color-mode($mode) {
|
33
121
|
@if $mode == light {
|
34
122
|
:root,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
// Generate a two-color caret for any element.
|
2
|
-
@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
|
2
|
+
@mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
|
3
3
|
&::after,
|
4
4
|
&::before {
|
5
5
|
position: absolute;
|
@@ -17,7 +17,7 @@
|
|
17
17
|
&::after {
|
18
18
|
// stylelint-disable-next-line primer/spacing
|
19
19
|
margin-left: 2px;
|
20
|
-
background-color: var(--color-canvas-default);
|
20
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
21
21
|
background-image: linear-gradient($background, $background);
|
22
22
|
}
|
23
23
|
|
@@ -29,31 +29,31 @@
|
|
29
29
|
// global focus styles
|
30
30
|
|
31
31
|
// inset box-shadow for form controls
|
32
|
-
@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
|
33
|
-
border-color: var(--color-accent-fg);
|
32
|
+
@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
|
33
|
+
border-color: var(--focus-outlineColor, var(--color-accent-fg));
|
34
34
|
outline: none;
|
35
35
|
box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
|
36
36
|
}
|
37
37
|
|
38
38
|
// box-shadow for :target styles (no inset)
|
39
39
|
// !important to override PCSS utilities
|
40
|
-
@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
|
40
|
+
@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
|
41
41
|
outline: none !important;
|
42
42
|
box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
|
43
43
|
}
|
44
44
|
|
45
45
|
// outline
|
46
|
-
@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
|
46
|
+
@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
|
47
47
|
outline: 2px solid $outlineColor;
|
48
48
|
outline-offset: $outlineOffset;
|
49
49
|
box-shadow: none;
|
50
50
|
}
|
51
51
|
|
52
52
|
// outline with fg box-shadow for buttons
|
53
|
-
@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
|
53
|
+
@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
|
54
54
|
outline: 2px solid $outlineColor;
|
55
55
|
outline-offset: $outlineOffset;
|
56
|
-
box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
|
56
|
+
box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
|
57
57
|
}
|
58
58
|
|
59
59
|
// if min-width is undefined, return only min-height
|
@@ -3,8 +3,8 @@
|
|
3
3
|
// Border
|
4
4
|
$border-width: 1px !default;
|
5
5
|
$border-style: solid !default;
|
6
|
-
$border: $border-width $border-style var(--color-border-default) !default;
|
7
|
-
$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default;
|
6
|
+
$border: $border-width $border-style var(--borderColor-default, var(--color-border-default)) !default;
|
7
|
+
$border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !default;
|
8
8
|
|
9
9
|
// Border Radius
|
10
10
|
$border-radius-1: 4px !default;
|
@@ -36,7 +36,7 @@ $body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetic
|
|
36
36
|
|
37
37
|
// Monospace font stack
|
38
38
|
// Note: SFMono-Regular needs to come before SF Mono to fix an older version of the font in Chrome
|
39
|
-
$mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !default;
|
39
|
+
$mono-font: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace) !default;
|
40
40
|
|
41
41
|
// The base body size
|
42
42
|
$body-font-size: 14px !default;
|
@@ -3,10 +3,10 @@
|
|
3
3
|
.Toast {
|
4
4
|
display: flex;
|
5
5
|
margin: $spacer-2;
|
6
|
-
color: var(--color-fg-default);
|
7
|
-
background-color: var(--color-canvas-default);
|
6
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
7
|
+
background-color: var(--bgColor-default, var(--color-canvas-default));
|
8
8
|
border-radius: $border-radius;
|
9
|
-
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow
|
9
|
+
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
10
10
|
|
11
11
|
@include breakpoint(sm) {
|
12
12
|
width: max-content;
|
@@ -21,8 +21,8 @@
|
|
21
21
|
justify-content: center;
|
22
22
|
width: $spacer-3 * 3;
|
23
23
|
flex-shrink: 0;
|
24
|
-
color: var(--color-fg-on-emphasis);
|
25
|
-
background-color: var(--color-accent-emphasis);
|
24
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
|
25
|
+
background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
|
26
26
|
border: $border-width $border-style transparent;
|
27
27
|
border-right: 0;
|
28
28
|
border-top-left-radius: inherit;
|
@@ -52,38 +52,38 @@
|
|
52
52
|
// Modifier
|
53
53
|
|
54
54
|
.Toast--loading {
|
55
|
-
color: var(--color-fg-default);
|
56
|
-
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow
|
55
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
56
|
+
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
57
57
|
|
58
58
|
.Toast-icon {
|
59
|
-
background-color: var(--color-neutral-emphasis);
|
59
|
+
background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
|
60
60
|
}
|
61
61
|
}
|
62
62
|
|
63
63
|
.Toast--error {
|
64
|
-
color: var(--color-fg-default);
|
65
|
-
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow
|
64
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
65
|
+
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
66
66
|
|
67
67
|
.Toast-icon {
|
68
|
-
background-color: var(--color-danger-emphasis);
|
68
|
+
background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
|
69
69
|
}
|
70
70
|
}
|
71
71
|
|
72
72
|
.Toast--warning {
|
73
|
-
color: var(--color-fg-default);
|
74
|
-
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow
|
73
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
74
|
+
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
75
75
|
|
76
76
|
.Toast-icon {
|
77
|
-
background-color: var(--color-attention-emphasis);
|
77
|
+
background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
|
78
78
|
}
|
79
79
|
}
|
80
80
|
|
81
81
|
.Toast--success {
|
82
|
-
color: var(--color-fg-default);
|
83
|
-
box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow
|
82
|
+
color: var(--fgColor-default, var(--color-fg-default));
|
83
|
+
box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
|
84
84
|
|
85
85
|
.Toast-icon {
|
86
|
-
background-color: var(--color-success-emphasis);
|
86
|
+
background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
|
87
87
|
}
|
88
88
|
}
|
89
89
|
|
@@ -1,3 +1,5 @@
|
|
1
|
+
/* stylelint-disable primer/spacing */
|
2
|
+
|
1
3
|
.tooltipped {
|
2
4
|
position: relative;
|
3
5
|
}
|
@@ -7,10 +9,10 @@
|
|
7
9
|
position: absolute;
|
8
10
|
z-index: 1000000;
|
9
11
|
display: none;
|
10
|
-
padding:
|
11
|
-
font: normal normal 11px/1.5 $body-font;
|
12
|
+
padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);
|
13
|
+
font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font);
|
12
14
|
-webkit-font-smoothing: subpixel-antialiased;
|
13
|
-
color: var(--color-fg-on-emphasis);
|
15
|
+
color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
|
14
16
|
text-align: center;
|
15
17
|
text-decoration: none;
|
16
18
|
text-shadow: none;
|
@@ -20,23 +22,9 @@
|
|
20
22
|
white-space: pre;
|
21
23
|
pointer-events: none;
|
22
24
|
content: attr(aria-label);
|
23
|
-
background: var(--color-neutral-emphasis-plus);
|
24
|
-
border-radius: $border-radius;
|
25
|
-
opacity: 0;
|
26
|
-
}
|
27
|
-
|
28
|
-
// This is the tooltip arrow
|
29
|
-
.tooltipped::before {
|
30
|
-
position: absolute;
|
31
|
-
z-index: 1000001;
|
32
|
-
display: none;
|
33
|
-
width: 0;
|
34
|
-
height: 0;
|
35
|
-
color: var(--color-neutral-emphasis-plus);
|
36
|
-
pointer-events: none;
|
37
|
-
content: '';
|
25
|
+
background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
|
38
26
|
// stylelint-disable-next-line primer/borders
|
39
|
-
border:
|
27
|
+
border-radius: var(--borderRadius-medium);
|
40
28
|
opacity: 0;
|
41
29
|
}
|
42
30
|
|
@@ -63,7 +51,6 @@
|
|
63
51
|
animation-duration: $tooltip-duration;
|
64
52
|
animation-fill-mode: forwards;
|
65
53
|
animation-timing-function: ease-in;
|
66
|
-
animation-delay: $tooltip-delay;
|
67
54
|
}
|
68
55
|
}
|
69
56
|
|
@@ -91,18 +78,8 @@
|
|
91
78
|
&::after {
|
92
79
|
top: 100%;
|
93
80
|
right: 50%;
|
94
|
-
// stylelint-disable-next-line primer/spacing
|
95
81
|
margin-top: 6px;
|
96
82
|
}
|
97
|
-
|
98
|
-
&::before {
|
99
|
-
top: auto;
|
100
|
-
right: 50%;
|
101
|
-
bottom: -7px;
|
102
|
-
// stylelint-disable-next-line primer/spacing
|
103
|
-
margin-right: -6px;
|
104
|
-
border-bottom-color: var(--color-neutral-emphasis-plus);
|
105
|
-
}
|
106
83
|
}
|
107
84
|
|
108
85
|
.tooltipped-se {
|
@@ -124,18 +101,8 @@
|
|
124
101
|
&::after {
|
125
102
|
right: 50%;
|
126
103
|
bottom: 100%;
|
127
|
-
// stylelint-disable-next-line primer/spacing
|
128
104
|
margin-bottom: 6px;
|
129
105
|
}
|
130
|
-
|
131
|
-
&::before {
|
132
|
-
top: -7px;
|
133
|
-
right: 50%;
|
134
|
-
bottom: auto;
|
135
|
-
// stylelint-disable-next-line primer/spacing
|
136
|
-
margin-right: -6px;
|
137
|
-
border-top-color: var(--color-neutral-emphasis-plus);
|
138
|
-
}
|
139
106
|
}
|
140
107
|
|
141
108
|
.tooltipped-ne {
|
@@ -161,19 +128,9 @@
|
|
161
128
|
&::after {
|
162
129
|
right: 100%;
|
163
130
|
bottom: 50%;
|
164
|
-
// stylelint-disable-next-line primer/spacing
|
165
131
|
margin-right: 6px;
|
166
132
|
transform: translateY(50%);
|
167
133
|
}
|
168
|
-
|
169
|
-
&::before {
|
170
|
-
top: 50%;
|
171
|
-
bottom: 50%;
|
172
|
-
left: -7px;
|
173
|
-
// stylelint-disable-next-line primer/spacing
|
174
|
-
margin-top: -6px;
|
175
|
-
border-left-color: var(--color-neutral-emphasis-plus);
|
176
|
-
}
|
177
134
|
}
|
178
135
|
|
179
136
|
// tooltipped to the right
|
@@ -181,19 +138,9 @@
|
|
181
138
|
&::after {
|
182
139
|
bottom: 50%;
|
183
140
|
left: 100%;
|
184
|
-
// stylelint-disable-next-line primer/spacing
|
185
141
|
margin-left: 6px;
|
186
142
|
transform: translateY(50%);
|
187
143
|
}
|
188
|
-
|
189
|
-
&::before {
|
190
|
-
top: 50%;
|
191
|
-
right: -7px;
|
192
|
-
bottom: 50%;
|
193
|
-
// stylelint-disable-next-line primer/spacing
|
194
|
-
margin-top: -6px;
|
195
|
-
border-right-color: var(--color-neutral-emphasis-plus);
|
196
|
-
}
|
197
144
|
}
|
198
145
|
|
199
146
|
// Tooltip align right and left
|
@@ -218,7 +165,7 @@
|
|
218
165
|
}
|
219
166
|
|
220
167
|
.tooltipped-align-left-1,
|
221
|
-
.tooltipped-align-left-2
|
168
|
+
.tooltipped-align-left-2 {
|
222
169
|
&::after {
|
223
170
|
left: 0;
|
224
171
|
margin-left: 0;
|
@@ -245,7 +192,7 @@
|
|
245
192
|
.tooltipped-multiline {
|
246
193
|
&::after {
|
247
194
|
width: max-content;
|
248
|
-
max-width:
|
195
|
+
max-width: var(--overlay-width-small, 20rem);
|
249
196
|
word-wrap: break-word;
|
250
197
|
white-space: pre-line;
|
251
198
|
border-collapse: separate;
|