@primer/components 29.0.0-rc.ae627848 → 29.1.0-rc.4e9b967e
Sign up to get free protection for your applications and to get access to all the features.
- package/.eslintrc.json +2 -1
- package/.storybook/preview.js +58 -0
- package/CHANGELOG.md +13 -1
- package/dist/browser.esm.js +240 -194
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +339 -293
- package/dist/browser.umd.js.map +1 -1
- package/docs/content/AnchoredOverlay.mdx +2 -0
- package/docs/content/Overlay.mdx +4 -0
- package/docs/content/Portal.mdx +11 -9
- package/docs/content/overriding-styles.mdx +0 -1
- package/docs/content/theme-reference.md +8 -0
- package/docs/content/theming.md +1 -2
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +1 -1
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +1 -1
- package/lib/ActionList/Divider.js +1 -1
- package/lib/ActionList/Header.js +2 -2
- package/lib/ActionList/Item.js +10 -10
- package/lib/ActionList/List.js +1 -1
- package/lib/AvatarPair.js +1 -1
- package/lib/AvatarStack.js +1 -1
- package/lib/BranchName.js +1 -1
- package/lib/Breadcrumb.js +2 -2
- package/lib/Button/Button.js +1 -1
- package/lib/Button/ButtonClose.js +1 -1
- package/lib/Button/ButtonInvisible.js +1 -1
- package/lib/Button/ButtonTableList.js +1 -1
- package/lib/CircleBadge.js +1 -1
- package/lib/CircleOcticon.js +1 -1
- package/lib/CounterLabel.js +2 -2
- package/lib/Dialog/ConfirmationDialog.js +1 -1
- package/lib/Dialog/Dialog.js +5 -5
- package/lib/Dialog.js +4 -4
- package/lib/Dropdown.js +2 -2
- package/lib/DropdownStyles.js +6 -6
- package/lib/FilterList.js +1 -1
- package/lib/FilteredActionList/FilteredActionList.js +2 -2
- package/lib/Flash.js +1 -1
- package/lib/Label.js +2 -2
- package/lib/Link.js +1 -1
- package/lib/Overlay.js +1 -1
- package/lib/Pagehead.js +1 -1
- package/lib/Pagination/Pagination.js +1 -1
- package/lib/Popover.js +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib/SelectMenu/SelectMenuItem.js +1 -1
- package/lib/SelectMenu/SelectMenuList.js +1 -1
- package/lib/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib/SelectMenu/SelectMenuModal.js +2 -2
- package/lib/SelectMenu/SelectMenuTab.js +1 -1
- package/lib/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib/SideNav.js +5 -5
- package/lib/StateLabel.js +1 -1
- package/lib/SubNav.js +1 -1
- package/lib/TabNav.js +2 -2
- package/lib/TextInput.js +2 -2
- package/lib/Timeline.js +16 -19
- package/lib/Tooltip.js +1 -1
- package/lib/UnderlineNav.js +2 -2
- package/lib/__tests__/BorderBox.js +1 -1
- package/lib/__tests__/CircleOcticon.js +1 -1
- package/lib/__tests__/Link.js +1 -1
- package/lib/__tests__/PointerBox.js +2 -2
- package/lib/__tests__/Position.js +4 -4
- package/lib/__tests__/ThemeProvider.js +1 -1
- package/lib/stories/ActionList.stories.js +1 -1
- package/lib/stories/ThemeProvider.stories.js +6 -6
- package/lib/stories/useFocusTrap.stories.js +1 -1
- package/lib/theme-preval.d.ts +12 -6
- package/lib/theme-preval.js +2930 -1738
- package/lib/utils/testing.d.ts +4707 -2355
- package/lib-esm/ActionList/Divider.js +1 -1
- package/lib-esm/ActionList/Header.js +2 -2
- package/lib-esm/ActionList/Item.js +10 -10
- package/lib-esm/ActionList/List.js +1 -1
- package/lib-esm/AvatarPair.js +1 -1
- package/lib-esm/AvatarStack.js +1 -1
- package/lib-esm/BranchName.js +1 -1
- package/lib-esm/Breadcrumb.js +2 -2
- package/lib-esm/Button/Button.js +1 -1
- package/lib-esm/Button/ButtonClose.js +1 -1
- package/lib-esm/Button/ButtonInvisible.js +1 -1
- package/lib-esm/Button/ButtonTableList.js +1 -1
- package/lib-esm/CircleBadge.js +1 -1
- package/lib-esm/CircleOcticon.js +1 -1
- package/lib-esm/CounterLabel.js +2 -2
- package/lib-esm/Dialog/ConfirmationDialog.js +1 -1
- package/lib-esm/Dialog/Dialog.js +5 -5
- package/lib-esm/Dialog.js +4 -4
- package/lib-esm/Dropdown.js +2 -2
- package/lib-esm/DropdownStyles.js +6 -6
- package/lib-esm/FilterList.js +1 -1
- package/lib-esm/FilteredActionList/FilteredActionList.js +2 -2
- package/lib-esm/Flash.js +1 -1
- package/lib-esm/Label.js +2 -2
- package/lib-esm/Link.js +1 -1
- package/lib-esm/Overlay.js +1 -1
- package/lib-esm/Pagehead.js +1 -1
- package/lib-esm/Pagination/Pagination.js +1 -1
- package/lib-esm/Popover.js +1 -1
- package/lib-esm/ProgressBar.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuDivider.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFilter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuFooter.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuHeader.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuItem.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuList.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.js +2 -2
- package/lib-esm/SelectMenu/SelectMenuTab.js +1 -1
- package/lib-esm/SelectMenu/SelectMenuTabPanel.js +1 -1
- package/lib-esm/SideNav.js +5 -5
- package/lib-esm/StateLabel.js +1 -1
- package/lib-esm/SubNav.js +1 -1
- package/lib-esm/TabNav.js +2 -2
- package/lib-esm/TextInput.js +2 -2
- package/lib-esm/Timeline.js +12 -17
- package/lib-esm/Tooltip.js +1 -1
- package/lib-esm/UnderlineNav.js +2 -2
- package/lib-esm/__tests__/BorderBox.js +1 -1
- package/lib-esm/__tests__/CircleOcticon.js +1 -1
- package/lib-esm/__tests__/Link.js +1 -1
- package/lib-esm/__tests__/PointerBox.js +2 -2
- package/lib-esm/__tests__/Position.js +4 -4
- package/lib-esm/__tests__/ThemeProvider.js +1 -1
- package/lib-esm/stories/ActionList.stories.js +1 -1
- package/lib-esm/stories/ThemeProvider.stories.js +6 -6
- package/lib-esm/stories/useFocusTrap.stories.js +1 -1
- package/lib-esm/theme-preval.d.ts +12 -6
- package/lib-esm/theme-preval.js +2930 -1738
- package/lib-esm/utils/testing.d.ts +4707 -2355
- package/package-lock.json +9 -4
- package/package.json +3 -2
- package/src/ActionList/Divider.tsx +1 -1
- package/src/ActionList/Header.tsx +4 -4
- package/src/ActionList/Item.tsx +10 -10
- package/src/ActionList/List.tsx +1 -1
- package/src/AvatarPair.tsx +5 -1
- package/src/AvatarStack.tsx +2 -2
- package/src/BranchName.tsx +2 -2
- package/src/Breadcrumb.tsx +3 -3
- package/src/Button/Button.tsx +1 -1
- package/src/Button/ButtonClose.tsx +2 -2
- package/src/Button/ButtonInvisible.tsx +2 -2
- package/src/Button/ButtonTableList.tsx +2 -2
- package/src/CircleBadge.tsx +1 -1
- package/src/CircleOcticon.tsx +1 -1
- package/src/CounterLabel.tsx +6 -6
- package/src/Dialog/ConfirmationDialog.tsx +1 -1
- package/src/Dialog/Dialog.tsx +5 -5
- package/src/Dialog.tsx +4 -4
- package/src/Dropdown.tsx +12 -12
- package/src/DropdownStyles.ts +6 -6
- package/src/FilterList.tsx +5 -5
- package/src/FilteredActionList/FilteredActionList.tsx +2 -2
- package/src/Flash.tsx +1 -1
- package/src/Label.tsx +3 -3
- package/src/Link.tsx +2 -2
- package/src/Overlay.tsx +1 -1
- package/src/Pagehead.tsx +1 -1
- package/src/Pagination/Pagination.tsx +7 -7
- package/src/Popover.tsx +10 -10
- package/src/ProgressBar.tsx +1 -1
- package/src/SelectMenu/SelectMenuDivider.tsx +3 -3
- package/src/SelectMenu/SelectMenuFilter.tsx +2 -2
- package/src/SelectMenu/SelectMenuFooter.tsx +2 -2
- package/src/SelectMenu/SelectMenuHeader.tsx +2 -2
- package/src/SelectMenu/SelectMenuItem.tsx +6 -6
- package/src/SelectMenu/SelectMenuList.tsx +5 -5
- package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +1 -1
- package/src/SelectMenu/SelectMenuModal.tsx +3 -3
- package/src/SelectMenu/SelectMenuTab.tsx +6 -6
- package/src/SelectMenu/SelectMenuTabPanel.tsx +1 -1
- package/src/SideNav.tsx +11 -11
- package/src/StateLabel.tsx +1 -1
- package/src/SubNav.tsx +11 -11
- package/src/TabNav.tsx +6 -6
- package/src/TextInput.tsx +9 -9
- package/src/Timeline.tsx +11 -11
- package/src/Tooltip.tsx +7 -7
- package/src/UnderlineNav.tsx +8 -8
- package/src/__tests__/BorderBox.tsx +1 -1
- package/src/__tests__/CircleOcticon.tsx +1 -1
- package/src/__tests__/Link.tsx +1 -1
- package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +6 -6
- package/src/__tests__/PointerBox.tsx +2 -2
- package/src/__tests__/Position.tsx +4 -4
- package/src/__tests__/ThemeProvider.tsx +1 -1
- package/src/__tests__/__snapshots__/ActionList.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/ActionMenu.tsx.snap +11 -11
- package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap +28 -28
- package/src/__tests__/__snapshots__/BorderBox.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/BranchName.tsx.snap +2 -2
- package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +6 -6
- package/src/__tests__/__snapshots__/Button.tsx.snap +116 -116
- package/src/__tests__/__snapshots__/Caret.tsx.snap +12 -12
- package/src/__tests__/__snapshots__/CircleBadge.tsx.snap +4 -4
- package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/CounterLabel.tsx.snap +2 -2
- package/src/__tests__/__snapshots__/Dialog.tsx.snap +11 -11
- package/src/__tests__/__snapshots__/Dropdown.tsx.snap +18 -18
- package/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +11 -11
- package/src/__tests__/__snapshots__/FilterListItem.tsx.snap +4 -4
- package/src/__tests__/__snapshots__/Flash.tsx.snap +5 -5
- package/src/__tests__/__snapshots__/Header.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/Label.tsx.snap +6 -6
- package/src/__tests__/__snapshots__/Link.tsx.snap +10 -10
- package/src/__tests__/__snapshots__/Pagehead.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/PointerBox.tsx.snap +10 -10
- package/src/__tests__/__snapshots__/Popover.tsx.snap +70 -70
- package/src/__tests__/__snapshots__/ProgressBar.tsx.snap +4 -4
- package/src/__tests__/__snapshots__/SelectMenu.tsx.snap +28 -28
- package/src/__tests__/__snapshots__/SelectPanel.tsx.snap +12 -12
- package/src/__tests__/__snapshots__/SideNav.tsx.snap +14 -14
- package/src/__tests__/__snapshots__/StateLabel.tsx.snap +7 -7
- package/src/__tests__/__snapshots__/SubNavLink.tsx.snap +24 -24
- package/src/__tests__/__snapshots__/TabNav.tsx.snap +5 -5
- package/src/__tests__/__snapshots__/TextInput.tsx.snap +36 -36
- package/src/__tests__/__snapshots__/ThemeProvider.tsx.snap +2 -2
- package/src/__tests__/__snapshots__/Timeline.tsx.snap +9 -7
- package/src/__tests__/__snapshots__/Tooltip.tsx.snap +6 -6
- package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap +21 -21
- package/src/stories/ActionList.stories.tsx +1 -1
- package/src/stories/ThemeProvider.stories.tsx +6 -6
- package/src/stories/useFocusTrap.stories.tsx +1 -1
- package/src/theme-preval.js +16 -0
- package/stats.html +1 -1
@@ -6,6 +6,8 @@ status: Alpha
|
|
6
6
|
An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
|
7
7
|
The overlay can be opened and navigated using keyboard or mouse.
|
8
8
|
|
9
|
+
See also [Overlay positioning](/Overlay#positioning).
|
10
|
+
|
9
11
|
## Example
|
10
12
|
|
11
13
|
```jsx live
|
package/docs/content/Overlay.mdx
CHANGED
@@ -24,6 +24,10 @@ Behaviors include:
|
|
24
24
|
|
25
25
|
See the W3C accessibility recommendations for modals [here](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_roles_states_props).
|
26
26
|
|
27
|
+
## Positioning
|
28
|
+
|
29
|
+
`Overlay` renders its `children` within a div positioned absolutely within a portal within the default portal root. The overlay will not update its positioning if the portal root's positioning changes (e.g., if the portal root is statically positioned after some DOM element that dynamically resizes). You may consider [customizing the portal or specifying a different portal root](/Portal#customizing-the-portal-root) to achieve different positioning behavior.
|
30
|
+
|
27
31
|
## Default example
|
28
32
|
|
29
33
|
```javascript live noinline
|
package/docs/content/Portal.mdx
CHANGED
@@ -2,14 +2,13 @@
|
|
2
2
|
title: Portal
|
3
3
|
---
|
4
4
|
|
5
|
-
|
6
5
|
Portals allow you to create a separation between the logical React component hierarchy and the physical DOM. See the [React documentation on portals](https://reactjs.org/docs/portals.html) for an in-depth explanation.
|
7
6
|
|
8
7
|
This Portal component will render all children into the portal root DOM node instead of as children of this Portal's parent DOM element. This is useful for breaking out of the current stacking context. For example, popup menus and tooltips may need to render on top of (read: covering up) other UI. The best way to guarantee this is to add these elements to top-level DOM, such as directly on `document.body`. These elements can then be moved to the correct location using absolute positioning.
|
9
8
|
|
10
9
|
## Customizing the portal root
|
11
10
|
|
12
|
-
By default, Primer will create a portal root for you as a child of the closest `<BaseStyles>` element, or `document.body` if none is found. If you would like to specify your own portal root, there are two options:
|
11
|
+
By default, Primer will create a portal root for you as a child of the closest `<BaseStyles>` element, or `document.body` if none is found. That root will be positioned absolutely in the top-left corner of its parent element. If you would like to specify your own portal root, there are two options:
|
13
12
|
|
14
13
|
1. Before rendering a `<Portal>` for the first time, ensure that an element exists with id `__primerPortalRoot__`. If that exists, it will be used as the default portal root.
|
15
14
|
2. Call the `registerPortalRoot` function, passing in the element you would like to use as your default portal root.
|
@@ -19,15 +18,15 @@ Keep in mind that any inherited styles applied to portaled elements are based on
|
|
19
18
|
Also, as `<ThemeProvider>` affects the _React_ context, which applies to the logical React component hierarchy, the portal root is not required to be a child of a `<ThemeProvider>` for its children to receive that context.
|
20
19
|
|
21
20
|
## Multiple portal roots
|
21
|
+
|
22
22
|
There may be situations where you want to have multiple portal roots. Advanced scenarios may necessitate multiple stacking contexts for overlays. You can set up multiple roots using the `registerPortalRoot` function. Calling this function with an element and a string `name` will register the root, which can then be used by creating a `<Portal>` with a `name` prop matching the one you registered.
|
23
23
|
|
24
24
|
## Default example
|
25
25
|
|
26
26
|
```jsx
|
27
27
|
<Portal>
|
28
|
-
|
29
|
-
|
30
|
-
portal root at document.body.
|
28
|
+
Regardless of where this appears in the React component tree, this text will be rendered in the DOM within the portal
|
29
|
+
root at document.body.
|
31
30
|
</Portal>
|
32
31
|
```
|
33
32
|
|
@@ -37,13 +36,16 @@ There may be situations where you want to have multiple portal roots. Advanced s
|
|
37
36
|
<!-- Wherever in your DOM tree you would like to have the default portal root -->
|
38
37
|
<div id="__primerPortalRoot__"></div>
|
39
38
|
```
|
39
|
+
|
40
40
|
or
|
41
|
+
|
41
42
|
```js
|
42
43
|
import { registerPortalRoot } from "@primer/components"
|
43
44
|
registerPortalRoot(document.querySelector(".my-portal-root")!)
|
44
45
|
```
|
45
46
|
|
46
47
|
## Example: multiple portal roots
|
48
|
+
|
47
49
|
```jsx
|
48
50
|
import { Portal, registerPortalRoot } from "@primer/components"
|
49
51
|
registerPortalRoot(document.querySelector(".scrolling-canvas-root")!, "scrolling-canvas")
|
@@ -65,7 +67,7 @@ Since Portals do not render UI on their own, they do not accept any system props
|
|
65
67
|
|
66
68
|
## Component props
|
67
69
|
|
68
|
-
| Name
|
69
|
-
|
|
70
|
-
| onMount
|
71
|
-
| containerName | string
|
70
|
+
| Name | Type | Default | Description |
|
71
|
+
| :------------ | :--------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------- |
|
72
|
+
| onMount | () => void | | Called when this portal is added to the DOM |
|
73
|
+
| containerName | string | | Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root. |
|
@@ -11,7 +11,6 @@ The `sx` prop allows ad-hoc styling that is still theme-aware. Declare the style
|
|
11
11
|
The `sx` prop provides a lot of power, which means it is an easy tool to abuse. To best make use of it, we recommend following these guidelines:
|
12
12
|
|
13
13
|
- Use the `sx` prop for small stylistic changes to components. For more substantial changes, consider abstracting your style changes into your own wrapper component.
|
14
|
-
- Use [system props](/system-props) instead of the `sx` prop whenever possible.
|
15
14
|
- Avoid nesting and pseudo-selectors in `sx` prop values when possible.
|
16
15
|
|
17
16
|
## Basic example
|
@@ -5,4 +5,12 @@ description: The default theme object for Primer React components
|
|
5
5
|
|
6
6
|
import {theme} from '@primer/components'
|
7
7
|
|
8
|
+
<Note>
|
9
|
+
|
10
|
+
See [Theming](/theming) to learn how theming works in Primer React.
|
11
|
+
|
12
|
+
</Note>
|
13
|
+
|
14
|
+
Colors in this theme object are imported from [Primer Primitives](https://primer.style/primitives/colors).
|
15
|
+
|
8
16
|
<pre><code class="language-json">{JSON.stringify(theme, null, 2)}</code></pre>
|
package/docs/content/theming.md
CHANGED
@@ -1,9 +1,8 @@
|
|
1
1
|
---
|
2
2
|
title: Theming
|
3
|
+
description: Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more.
|
3
4
|
---
|
4
5
|
|
5
|
-
Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more.
|
6
|
-
|
7
6
|
## ThemeProvider
|
8
7
|
|
9
8
|
To give components access to the theme object, you must add `ThemeProvider` to the root of your application:
|
@@ -29,7 +29,7 @@ function ThemeSwitcher({children}) {
|
|
29
29
|
function LivePreviewWrapper({children}) {
|
30
30
|
return (
|
31
31
|
<ThemeSwitcher>
|
32
|
-
<Box width="100%" p={3} bg="
|
32
|
+
<Box width="100%" p={3} bg="canvas.default" sx={{borderTopLeftRadius: 2, borderTopRightRadius: 2}}>
|
33
33
|
<BaseStyles>{children}</BaseStyles>
|
34
34
|
</Box>
|
35
35
|
</ThemeSwitcher>
|
@@ -17,7 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
17
17
|
const StyledDivider = _styledComponents.default.div.withConfig({
|
18
18
|
displayName: "Divider__StyledDivider",
|
19
19
|
componentId: "sc-42656i-0"
|
20
|
-
})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], (0, _constants.get)('colors.
|
20
|
+
})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'));
|
21
21
|
/**
|
22
22
|
* Visually separates `Item`s or `Group`s in an `ActionList`.
|
23
23
|
*/
|
package/lib/ActionList/Header.js
CHANGED
@@ -25,9 +25,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
25
25
|
const StyledHeader = _styledComponents.default.div.withConfig({
|
26
26
|
displayName: "Header__StyledHeader",
|
27
27
|
componentId: "qmofje-0"
|
28
|
-
})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.
|
28
|
+
})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.fg.muted'), ({
|
29
29
|
variant
|
30
|
-
}) => variant === 'filled' && (0, _styledComponents.css)(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], (0, _constants.get)('colors.
|
30
|
+
}) => variant === 'filled' && (0, _styledComponents.css)(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.muted')), _sx.default);
|
31
31
|
/**
|
32
32
|
* Displays the name and description of a `Group`.
|
33
33
|
*/
|
package/lib/ActionList/Item.js
CHANGED
@@ -72,9 +72,9 @@ const customItemThemes = {
|
|
72
72
|
const getItemVariant = (variant = 'default', disabled) => {
|
73
73
|
if (disabled) {
|
74
74
|
return {
|
75
|
-
color: (0, _constants.get)('colors.
|
76
|
-
iconColor: (0, _constants.get)('colors.
|
77
|
-
annotationColor: (0, _constants.get)('colors.
|
75
|
+
color: (0, _constants.get)('colors.fg.muted'),
|
76
|
+
iconColor: (0, _constants.get)('colors.fg.muted'),
|
77
|
+
annotationColor: (0, _constants.get)('colors.fg.muted'),
|
78
78
|
hoverCursor: 'default'
|
79
79
|
};
|
80
80
|
}
|
@@ -82,17 +82,17 @@ const getItemVariant = (variant = 'default', disabled) => {
|
|
82
82
|
switch (variant) {
|
83
83
|
case 'danger':
|
84
84
|
return {
|
85
|
-
color: (0, _constants.get)('colors.
|
86
|
-
iconColor: (0, _constants.get)('colors.
|
87
|
-
annotationColor: (0, _constants.get)('colors.
|
85
|
+
color: (0, _constants.get)('colors.danger.fg'),
|
86
|
+
iconColor: (0, _constants.get)('colors.danger.fg'),
|
87
|
+
annotationColor: (0, _constants.get)('colors.fg.muted'),
|
88
88
|
hoverCursor: 'pointer'
|
89
89
|
};
|
90
90
|
|
91
91
|
default:
|
92
92
|
return {
|
93
93
|
color: 'inherit',
|
94
|
-
iconColor: (0, _constants.get)('colors.
|
95
|
-
annotationColor: (0, _constants.get)('colors.
|
94
|
+
iconColor: (0, _constants.get)('colors.fg.muted'),
|
95
|
+
annotationColor: (0, _constants.get)('colors.fg.muted'),
|
96
96
|
hoverCursor: 'pointer'
|
97
97
|
};
|
98
98
|
}
|
@@ -121,7 +121,7 @@ const StyledItem = _styledComponents.default.div.withConfig({
|
|
121
121
|
item
|
122
122
|
}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, _Divider.StyledDivider, _Header.StyledHeader, ({
|
123
123
|
showDivider
|
124
|
-
}) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.
|
124
|
+
}) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
|
125
125
|
showDivider
|
126
126
|
}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
|
127
127
|
focusBackground
|
@@ -167,7 +167,7 @@ const TrailingContent = (0, _styledComponents.default)(ColoredVisualContainer).w
|
|
167
167
|
const DescriptionContainer = _styledComponents.default.span.withConfig({
|
168
168
|
displayName: "Item__DescriptionContainer",
|
169
169
|
componentId: "jqpvy8-8"
|
170
|
-
})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], (0, _constants.get)('colors.
|
170
|
+
})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.0'));
|
171
171
|
|
172
172
|
const MultiSelectInput = _styledComponents.default.input.withConfig({
|
173
173
|
displayName: "Item__MultiSelectInput",
|
package/lib/ActionList/List.js
CHANGED
@@ -38,7 +38,7 @@ function isGroupedListProps(props) {
|
|
38
38
|
const StyledList = _styledComponents.default.div.withConfig({
|
39
39
|
displayName: "List__StyledList",
|
40
40
|
componentId: "yr2k7d-0"
|
41
|
-
})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.
|
41
|
+
})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
|
42
42
|
/**
|
43
43
|
* Returns `sx` prop values for `List` children matching the given `List` style variation.
|
44
44
|
* @param variant `List` style variation.
|
package/lib/AvatarPair.js
CHANGED
@@ -33,7 +33,7 @@ const AvatarPair = ({
|
|
33
33
|
return i === 0 ? /*#__PURE__*/_react.default.cloneElement(child, {
|
34
34
|
size: 40
|
35
35
|
}) : /*#__PURE__*/_react.default.createElement(ChildAvatar, _extends({
|
36
|
-
bg: "
|
36
|
+
bg: "canvas.default"
|
37
37
|
}, child.props, {
|
38
38
|
size: 20
|
39
39
|
}));
|
package/lib/AvatarStack.js
CHANGED
@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
24
24
|
const AvatarStackWrapper = _styledComponents.default.span.withConfig({
|
25
25
|
displayName: "AvatarStack__AvatarStackWrapper",
|
26
26
|
componentId: "sc-1qgzd2v-0"
|
27
|
-
})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.
|
27
|
+
})(["display:flex;position:relative;height:20px;min-width:", ";.pc-AvatarItem{flex-shrink:0;height:20px;width:20px;box-shadow:0 0 0 1px ", ";margin-left:-11px;position:relative;overflow:hidden;transition:margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;&:first-child{margin-left:0;}&:nth-child(n + 4){display:none;}}&.pc-AvatarStack--two{min-width:30px;.pc-AvatarItem{&:nth-child(n + 3){display:none;}}}&.pc-AvatarStack--three-plus{min-width:38px;.pc-AvatarItem{&:nth-child(3){opacity:", "%;margin-left:-17px;}&:nth-child(4){opacity:", "%;margin-left:-17px;}&:nth-child(5){opacity:", "%;margin-left:-17px;}&:nth-child(n + 4){display:block;}&:nth-child(n + 6){opacity:0;visibility:hidden;}}}&.pc-AvatarStack--right{justify-content:flex-end;.pc-AvatarItem{margin-left:0 !important;margin-right:-11px;&:first-child{margin-right:0;}}.pc-AvatarStackBody{flex-direction:row-reverse;&:hover{.pc-AvatarItem{margin-right:", "!important;margin-left:0 !important;&:first-child{margin-right:0 !important;}}}}}&.pc-AvatarStack--three-plus.pc-AvatarStack--right{.pc-AvatarItem{&:nth-child(3){margin-right:-17px;}&:nth-child(4){margin-right:-17px;}&:nth-child(5){margin-right:-17px;}}}.pc-AvatarStackBody:hover{width:auto;.pc-AvatarItem{margin-left:", ";opacity:100%;visibility:visible;box-shadow:0 0 0 4px ", ";&:first-child{margin-left:0;}}}", " ", ";"], props => props.count === 1 ? '20px' : props.count === 2 ? '30px' : '38px', (0, _constants.get)('colors.canvas.default'), 100 - 3 * 15, 100 - 4 * 15, 100 - 5 * 15, (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.canvas.default'), _constants.COMMON, _sx.default);
|
28
28
|
|
29
29
|
const transformChildren = children => {
|
30
30
|
return _react.default.Children.map(children, (child, index) => {
|
package/lib/BranchName.js
CHANGED
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
16
16
|
const BranchName = _styledComponents.default.a.withConfig({
|
17
17
|
displayName: "BranchName",
|
18
18
|
componentId: "sc-167ouzm-0"
|
19
|
-
})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.
|
19
|
+
})(["display:inline-block;padding:2px 6px;font-size:", ";font-family:", ";color:", ";background-color:", ";border-radius:", ";", ";", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.accent.subtle'), (0, _constants.get)('radii.2'), _constants.COMMON, _sx.default);
|
20
20
|
|
21
21
|
var _default = BranchName;
|
22
22
|
exports.default = _default;
|
package/lib/Breadcrumb.js
CHANGED
@@ -26,7 +26,7 @@ const SELECTED_CLASS = 'selected';
|
|
26
26
|
const Wrapper = _styledComponents.default.li.withConfig({
|
27
27
|
displayName: "Breadcrumb__Wrapper",
|
28
28
|
componentId: "c1r3ff-0"
|
29
|
-
})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.
|
29
|
+
})(["display:inline-block;white-space:nowrap;list-style:none;&::after{padding-right:0.5em;padding-left:0.5em;color:", ";font-size:", ";content:'/';}&:first-child{margin-left:0;}&:last-child{&::after{content:none;}}"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.1'));
|
30
30
|
|
31
31
|
const BreadcrumbBase = _styledComponents.default.nav.withConfig({
|
32
32
|
displayName: "Breadcrumb__BreadcrumbBase",
|
@@ -65,7 +65,7 @@ const BreadcrumbItem = _styledComponents.default.a.attrs(props => ({
|
|
65
65
|
})).withConfig({
|
66
66
|
displayName: "Breadcrumb__BreadcrumbItem",
|
67
67
|
componentId: "c1r3ff-2"
|
68
|
-
})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.
|
68
|
+
})(["color:", ";display:inline-block;font-size:", ";text-decoration:none;&:hover{text-decoration:underline;}&.selected{color:", ";pointer-events:none;}", " ", ";"], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
|
69
69
|
|
70
70
|
Breadcrumb.displayName = 'Breadcrumb';
|
71
71
|
BreadcrumbItem.displayName = 'Breadcrumb.Item';
|
package/lib/Button/Button.js
CHANGED
@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
22
22
|
const Button = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
|
23
23
|
displayName: "Button",
|
24
24
|
componentId: "xjtz72-0"
|
25
|
-
})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.
|
25
|
+
})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
|
26
26
|
var _default = Button;
|
27
27
|
exports.default = _default;
|
@@ -26,7 +26,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
26
26
|
const StyledButton = _styledComponents.default.button.withConfig({
|
27
27
|
displayName: "ButtonClose__StyledButton",
|
28
28
|
componentId: "sc-13mzqph-0"
|
29
|
-
})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('colors.
|
29
|
+
})(["border:none;padding:0;background:transparent;outline:none;cursor:pointer;border-radius:", ";color:", ";&:focus{box-shadow:", ";}&:hover{color:", ";}", ";", ";", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.accent.fg'), _constants.COMMON, _constants.LAYOUT, _sx.default);
|
30
30
|
|
31
31
|
const ButtonClose = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
32
32
|
return /*#__PURE__*/_react.default.createElement(StyledButton, _extends({
|
@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
22
22
|
const ButtonInvisible = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
|
23
23
|
displayName: "ButtonInvisible",
|
24
24
|
componentId: "sc-1195tpn-0"
|
25
|
-
})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], (0, _constants.get)('colors.
|
25
|
+
})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('shadows.btn.focusShadow'), _ButtonBase.buttonSystemProps, _sx.default);
|
26
26
|
var _default = ButtonInvisible;
|
27
27
|
exports.default = _default;
|
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
16
16
|
const ButtonTableList = _styledComponents.default.summary.withConfig({
|
17
17
|
displayName: "ButtonTableList",
|
18
18
|
componentId: "sc-1m4q8ia-0"
|
19
|
-
})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.
|
19
|
+
})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
|
20
20
|
|
21
21
|
var _default = ButtonTableList;
|
22
22
|
exports.default = _default;
|
package/lib/CircleBadge.js
CHANGED
@@ -37,7 +37,7 @@ const sizeStyles = ({
|
|
37
37
|
const CircleBadge = _styledComponents.default.div.withConfig({
|
38
38
|
displayName: "CircleBadge",
|
39
39
|
componentId: "sc-1lho816-0"
|
40
|
-
})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.
|
40
|
+
})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.canvas.default'), (0, _constants.get)('shadows.shadow.medium'), _constants.COMMON, sizeStyles, _sx.default);
|
41
41
|
|
42
42
|
const CircleBadgeIcon = (0, _styledComponents.default)(_StyledOcticon.default).withConfig({
|
43
43
|
displayName: "CircleBadge__CircleBadgeIcon",
|
package/lib/CircleOcticon.js
CHANGED
@@ -31,7 +31,7 @@ function CircleOcticon(props) {
|
|
31
31
|
size: size,
|
32
32
|
borderRadius: "50%",
|
33
33
|
borderStyle: "solid",
|
34
|
-
borderColor: "border.
|
34
|
+
borderColor: "border.default"
|
35
35
|
}, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
|
36
36
|
display: "flex"
|
37
37
|
}, rest, {
|
package/lib/CounterLabel.js
CHANGED
@@ -18,7 +18,7 @@ const colorStyles = ({
|
|
18
18
|
...props
|
19
19
|
}) => {
|
20
20
|
return {
|
21
|
-
color: scheme === 'secondary' ? (0, _constants.get)('colors.
|
21
|
+
color: scheme === 'secondary' ? (0, _constants.get)('colors.fg.default')(props) : scheme === 'primary' ? (0, _constants.get)('colors.fg.onEmphasis')(props) : (0, _constants.get)('colors.fg.default')(props)
|
22
22
|
};
|
23
23
|
};
|
24
24
|
|
@@ -27,7 +27,7 @@ const bgStyles = ({
|
|
27
27
|
...props
|
28
28
|
}) => {
|
29
29
|
return {
|
30
|
-
backgroundColor: scheme === 'secondary' ? (0, _constants.get)('colors.
|
30
|
+
backgroundColor: scheme === 'secondary' ? (0, _constants.get)('colors.neutral.muted')(props) : scheme === 'primary' ? (0, _constants.get)('colors.neutral.emphasis')(props) : (0, _constants.get)('colors.neutral.muted')(props)
|
31
31
|
};
|
32
32
|
};
|
33
33
|
|
@@ -61,7 +61,7 @@ ConfirmationHeader.displayName = "ConfirmationHeader";
|
|
61
61
|
const StyledConfirmationBody = (0, _styledComponents.default)(_Box.default).withConfig({
|
62
62
|
displayName: "ConfirmationDialog__StyledConfirmationBody",
|
63
63
|
componentId: "sc-1ub32x2-2"
|
64
|
-
})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.
|
64
|
+
})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'), (0, _constants.get)('colors.fg.muted'));
|
65
65
|
|
66
66
|
const ConfirmationBody = ({
|
67
67
|
children
|
package/lib/Dialog/Dialog.js
CHANGED
@@ -68,7 +68,7 @@ const widthMap = {
|
|
68
68
|
const StyledDialog = _styledComponents.default.div.withConfig({
|
69
69
|
displayName: "Dialog__StyledDialog",
|
70
70
|
componentId: "sc-11pkgky-1"
|
71
|
-
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], (0, _constants.get)('colors.
|
71
|
+
})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('shadows.overlay.shadow'), props => {
|
72
72
|
var _props$width;
|
73
73
|
|
74
74
|
return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
|
@@ -184,7 +184,7 @@ const Header = (0, _styledComponents.default)(_Box.default).attrs({
|
|
184
184
|
}).withConfig({
|
185
185
|
displayName: "Dialog__Header",
|
186
186
|
componentId: "sc-11pkgky-2"
|
187
|
-
})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], (0, _constants.get)('colors.border.
|
187
|
+
})(["box-shadow:0 1px 0 ", ";padding:", ";z-index:1;flex-shrink:0;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.2'));
|
188
188
|
const Title = (0, _styledComponents.default)(_Box.default).withConfig({
|
189
189
|
displayName: "Dialog__Title",
|
190
190
|
componentId: "sc-11pkgky-3"
|
@@ -192,7 +192,7 @@ const Title = (0, _styledComponents.default)(_Box.default).withConfig({
|
|
192
192
|
const Subtitle = (0, _styledComponents.default)(_Box.default).withConfig({
|
193
193
|
displayName: "Dialog__Subtitle",
|
194
194
|
componentId: "sc-11pkgky-4"
|
195
|
-
})(["font-size:", ";margin-top:", ";color:", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.
|
195
|
+
})(["font-size:", ";margin-top:", ";color:", ";"], (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.muted'));
|
196
196
|
const Body = (0, _styledComponents.default)(_Box.default).withConfig({
|
197
197
|
displayName: "Dialog__Body",
|
198
198
|
componentId: "sc-11pkgky-5"
|
@@ -202,7 +202,7 @@ const Footer = (0, _styledComponents.default)(_Box.default).attrs({
|
|
202
202
|
}).withConfig({
|
203
203
|
displayName: "Dialog__Footer",
|
204
204
|
componentId: "sc-11pkgky-6"
|
205
|
-
})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], (0, _constants.get)('colors.border.
|
205
|
+
})(["box-shadow:0 -1px 0 ", ";padding:", ";display:flex;flex-flow:wrap;justify-content:flex-end;z-index:1;flex-shrink:0;button{margin-left:", ";&:first-child{margin-left:0;}}"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.3'), (0, _constants.get)('space.1'));
|
206
206
|
const buttonTypes = {
|
207
207
|
normal: _Button.default,
|
208
208
|
primary: _Button.ButtonPrimary,
|
@@ -244,7 +244,7 @@ const Buttons = ({
|
|
244
244
|
const DialogCloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
|
245
245
|
displayName: "Dialog__DialogCloseButton",
|
246
246
|
componentId: "sc-11pkgky-7"
|
247
|
-
})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], (0, _constants.get)('colors.
|
247
|
+
})(["border-radius:4px;background:transparent;border:0;vertical-align:middle;color:", ";padding:", ";align-self:flex-start;line-height:normal;box-shadow:none;"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'));
|
248
248
|
|
249
249
|
const CloseButton = ({
|
250
250
|
onClose
|
package/lib/Dialog.js
CHANGED
@@ -36,12 +36,12 @@ const noop = () => null;
|
|
36
36
|
const DialogBase = _styledComponents.default.div.withConfig({
|
37
37
|
displayName: "Dialog__DialogBase",
|
38
38
|
componentId: "sc-1vcjhsg-0"
|
39
|
-
})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.
|
39
|
+
})(["box-shadow:", ";border-radius:", ";position:fixed;top:0;left:50%;transform:translateX(-50%);max-height:80vh;z-index:999;margin:10vh auto;background-color:", ";width:", ";outline:none;@media screen and (max-width:750px){width:100vw;margin:0;border-radius:0;height:100vh;}", ";", ";", ";"], (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.canvas.default'), props => props.narrow ? '320px' : props.wide ? '640px' : '440px', _constants.LAYOUT, _constants.COMMON, _sx.default);
|
40
40
|
|
41
41
|
const DialogHeaderBase = (0, _styledComponents.default)(_Box.default).withConfig({
|
42
42
|
displayName: "Dialog__DialogHeaderBase",
|
43
43
|
componentId: "sc-1vcjhsg-1"
|
44
|
-
})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.
|
44
|
+
})(["border-radius:", " ", " 0px 0px;border-bottom:1px solid ", ";display:flex;@media screen and (max-width:750px){border-radius:0px;}", ";"], (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), _sx.default);
|
45
45
|
|
46
46
|
function DialogHeader({
|
47
47
|
theme,
|
@@ -52,7 +52,7 @@ function DialogHeader({
|
|
52
52
|
if (_react.default.Children.toArray(children).every(ch => typeof ch === 'string')) {
|
53
53
|
children = /*#__PURE__*/_react.default.createElement(_Text.default, {
|
54
54
|
theme: theme,
|
55
|
-
color: "
|
55
|
+
color: "fg.default",
|
56
56
|
fontSize: 1,
|
57
57
|
fontWeight: "bold",
|
58
58
|
fontFamily: "sans-serif"
|
@@ -71,7 +71,7 @@ DialogHeader.displayName = "DialogHeader";
|
|
71
71
|
const Overlay = _styledComponents.default.span.withConfig({
|
72
72
|
displayName: "Dialog__Overlay",
|
73
73
|
componentId: "sc-1vcjhsg-2"
|
74
|
-
})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], (0, _constants.get)('colors.
|
74
|
+
})(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:' ';background:transparent;z-index:99;background:", ";}"], (0, _constants.get)('colors.primer.canvas.backdrop'));
|
75
75
|
|
76
76
|
const Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
|
77
77
|
children,
|
package/lib/Dropdown.js
CHANGED
@@ -67,12 +67,12 @@ const DropdownCaret = _styledComponents.default.div.withConfig({
|
|
67
67
|
const DropdownMenu = _styledComponents.default.ul.withConfig({
|
68
68
|
displayName: "Dropdown__DropdownMenu",
|
69
69
|
componentId: "sc-16yoecj-2"
|
70
|
-
})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], (0, _constants.get)('colors.
|
70
|
+
})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.canvas.overlay'), props => props.direction ? (0, _DropdownStyles.default)(props.theme, props.direction) : '', _constants.COMMON, _sx.default);
|
71
71
|
|
72
72
|
const DropdownItem = _styledComponents.default.li.withConfig({
|
73
73
|
displayName: "Dropdown__DropdownItem",
|
74
74
|
componentId: "sc-16yoecj-3"
|
75
|
-
})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.
|
75
|
+
})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), _constants.COMMON, _sx.default);
|
76
76
|
|
77
77
|
DropdownMenu.defaultProps = {
|
78
78
|
direction: 'sw'
|
package/lib/DropdownStyles.js
CHANGED
@@ -22,7 +22,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
22
22
|
right: -16px;
|
23
23
|
left: auto;
|
24
24
|
border-color: transparent;
|
25
|
-
border-left-color: ${(0, _constants.get)('colors.border.
|
25
|
+
border-left-color: ${(0, _constants.get)('colors.border.default')(theme)};
|
26
26
|
}
|
27
27
|
|
28
28
|
&::after {
|
@@ -30,7 +30,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
30
30
|
right: -14px;
|
31
31
|
left: auto;
|
32
32
|
border-color: transparent;
|
33
|
-
border-left-color: ${(0, _constants.get)('colors.border.
|
33
|
+
border-left-color: ${(0, _constants.get)('colors.border.default')(theme)};
|
34
34
|
}
|
35
35
|
`,
|
36
36
|
e: `
|
@@ -44,14 +44,14 @@ const getDirectionStyles = (theme, direction) => {
|
|
44
44
|
top: 10px;
|
45
45
|
left: -16px;
|
46
46
|
border-color: transparent;
|
47
|
-
border-right-color: ${(0, _constants.get)('colors.border.
|
47
|
+
border-right-color: ${(0, _constants.get)('colors.border.default')(theme)};
|
48
48
|
}
|
49
49
|
|
50
50
|
&::after {
|
51
51
|
top: 11px;
|
52
52
|
left: -14px;
|
53
53
|
border-color: transparent;
|
54
|
-
border-right-color: ${(0, _constants.get)('colors.border.
|
54
|
+
border-right-color: ${(0, _constants.get)('colors.border.default')(theme)};
|
55
55
|
}
|
56
56
|
`,
|
57
57
|
ne: `
|
@@ -69,7 +69,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
69
69
|
&::before {
|
70
70
|
bottom: -8px;
|
71
71
|
left: 9px;
|
72
|
-
border-top: 8px solid ${(0, _constants.get)('colors.border.
|
72
|
+
border-top: 8px solid ${(0, _constants.get)('colors.border.default')(theme)};
|
73
73
|
border-bottom: 0;
|
74
74
|
border-left: 8px solid transparent;
|
75
75
|
}
|
@@ -77,7 +77,7 @@ const getDirectionStyles = (theme, direction) => {
|
|
77
77
|
&::after {
|
78
78
|
bottom: -7px;
|
79
79
|
left: 10px;
|
80
|
-
border-top: 7px solid ${(0, _constants.get)('colors.border.
|
80
|
+
border-top: 7px solid ${(0, _constants.get)('colors.border.default')(theme)};
|
81
81
|
border-right: 7px solid transparent;
|
82
82
|
border-bottom: 0;
|
83
83
|
border-left: 7px solid transparent;
|
package/lib/FilterList.js
CHANGED
@@ -36,7 +36,7 @@ FilterList.displayName = "FilterList";
|
|
36
36
|
const FilterListItemBase = _styledComponents.default.a.withConfig({
|
37
37
|
displayName: "FilterList__FilterListItemBase",
|
38
38
|
componentId: "sc-1l4pxmz-1"
|
39
|
-
})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.
|
39
|
+
})(["position:relative;display:block;padding:", ";margin:", ";overflow:hidden;font-size:", ";color:", ";background-color:", "!important;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;border-radius:", ";&:hover{text-decoration:none;background-color:", ";}&:active{color:", ";background-color:", ";}.count{float:right;font-weight:", ";}", ";", ";"], props => props.small ? `${(0, _constants.get)('space.1')(props)} 10px` : `${(0, _constants.get)('space.2')(props)} 11px`, props => props.small ? '0 0 2px' : '0 0 5px 0', (0, _constants.get)('fontSizes.1'), props => props.selected ? (0, _constants.get)('colors.fg.onEmphasis') : (0, _constants.get)('colors.fg.muted'), props => props.selected ? (0, _constants.get)('colors.accent.emphasis') : '', (0, _constants.get)('radii.1'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('fontWeights.bold'), _constants.COMMON, _sx.default);
|
40
40
|
|
41
41
|
function FilterListItem({
|
42
42
|
children,
|
@@ -68,7 +68,7 @@ function scrollIntoViewingArea(child, container, margin = 8, behavior = 'smooth'
|
|
68
68
|
const StyledHeader = _styledComponents.default.div.withConfig({
|
69
69
|
displayName: "FilteredActionList__StyledHeader",
|
70
70
|
componentId: "yg3jkv-0"
|
71
|
-
})(["box-shadow:0 1px 0 ", ";z-index:1;"], (0, _constants.get)('colors.border.
|
71
|
+
})(["box-shadow:0 1px 0 ", ";z-index:1;"], (0, _constants.get)('colors.border.default'));
|
72
72
|
|
73
73
|
function FilteredActionList({
|
74
74
|
loading = false,
|
@@ -131,7 +131,7 @@ function FilteredActionList({
|
|
131
131
|
ref: inputRef,
|
132
132
|
block: true,
|
133
133
|
width: "auto",
|
134
|
-
color: "
|
134
|
+
color: "fg.default",
|
135
135
|
value: filterValue,
|
136
136
|
onChange: onInputChange,
|
137
137
|
onKeyPress: onInputKeyPress,
|
package/lib/Flash.js
CHANGED
@@ -55,7 +55,7 @@ const variants = (0, _styledSystem.variant)({
|
|
55
55
|
const Flash = _styledComponents.default.div.withConfig({
|
56
56
|
displayName: "Flash",
|
57
57
|
componentId: "sc-4y90bn-0"
|
58
|
-
})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], (0, _constants.get)('colors.
|
58
|
+
})(["position:relative;color:", ";padding:", ";border-style:solid;border-width:", ";border-radius:", ";margin-top:", ";p:last-child{margin-bottom:0;}svg{margin-right:", ";}", ";", ";", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.3'), props => props.full ? '1px 0px' : '1px', props => props.full ? '0' : (0, _constants.get)('radii.2'), props => props.full ? '-1px' : '0', (0, _constants.get)('space.2'), _constants.COMMON, variants, _sx.default);
|
59
59
|
|
60
60
|
Flash.defaultProps = {
|
61
61
|
variant: 'default'
|