Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[core] Rename CSS vars to include component name #820

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

[core] Rename CSS vars to include component name #820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b68cb18
[core] Rename CSS vars to include component name
atomiks Nov 15, 2024
1e67f26
--dialog-nested-count
atomiks Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/data/components/alert-dialog/NestedAlertDialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const Popup = styled(BaseAlertDialog.Popup)(
font-family: IBM Plex Sans;
padding: 16px;
z-index: 2100;
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
visibility: hidden;
opacity: 0.5;
transition:
Expand All @@ -82,8 +82,8 @@ const Popup = styled(BaseAlertDialog.Popup)(

visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
transition:
transform var(--transition-duration) ease-out,
opacity var(--transition-duration) ease-out,
Expand Down
8 changes: 4 additions & 4 deletions docs/data/components/alert-dialog/NestedAlertDialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const Popup = styled(BaseAlertDialog.Popup)(
font-family: IBM Plex Sans;
padding: 16px;
z-index: 2100;
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
visibility: hidden;
opacity: 0.5;
transition:
Expand All @@ -82,8 +82,8 @@ const Popup = styled(BaseAlertDialog.Popup)(

visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
transition:
transform var(--transition-duration) ease-out,
opacity var(--transition-duration) ease-out,
Expand Down
8 changes: 4 additions & 4 deletions docs/data/components/dialog/NestedDialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const Popup = styled(BaseDialog.Popup)(
font-family: IBM Plex Sans;
padding: 16px;
z-index: 2100;
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
visibility: hidden;
opacity: 0.5;
transition:
Expand All @@ -82,8 +82,8 @@ const Popup = styled(BaseDialog.Popup)(

visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
transition:
transform var(--transition-duration) ease-out,
opacity var(--transition-duration) ease-out,
Expand Down
8 changes: 4 additions & 4 deletions docs/data/components/dialog/NestedDialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const Popup = styled(BaseDialog.Popup)(
font-family: IBM Plex Sans;
padding: 16px;
z-index: 2100;
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -35%) scale(0.8, calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
visibility: hidden;
opacity: 0.5;
transition:
Expand All @@ -82,8 +82,8 @@ const Popup = styled(BaseDialog.Popup)(

visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--nested-dialogs))))
translateY(calc(-30px * var(--nested-dialogs)));
transform: translate(-50%, -50%) scale(calc(pow(0.95, var(--dialog-nested-count))))
translateY(calc(-30px * var(--dialog-nested-count)));
transition:
transform var(--transition-duration) ease-out,
opacity var(--transition-duration) ease-out,
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/CheckboxItems.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 0;
transform: scale(0.8);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/CheckboxItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 0;
transform: scale(0.8);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
border: 1px solid var(--gray-200);
color: var(--gray-900);
box-shadow: 0px 4px 30px var(--gray-200);
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 0;
transform: scale(0.95, 0.8);
transition:
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/MenuIntroduction/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 1;
transform: scale(1, 1);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/MenuIntroduction/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 1;
transform: scale(1, 1);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/NestedMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 1;
transform: scale(1, 1);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/NestedMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 1;
transform: scale(1, 1);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/RadioItems.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 0;
transform: scale(0.8);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/RadioItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const MenuPopup = styled(Menu.Popup)(
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
z-index: 1;
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
opacity: 0;
transform: scale(0.8);
transition: opacity 100ms ease-in, transform 100ms ease-in;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/menu/menu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th

```css
.MenuPopup {
transform-origin: var(--transform-origin);
transform-origin: var(--menu-arrow-origin);
transition-property: opacity, transform;
transition-duration: 0.2s;
/* Represents the final styles once exited */
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/popover/UnstyledPopoverTransition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const PopoverPopup = styled(Popover.Popup)`
transition-duration: 0.2s;
opacity: 0;
transform: scale(0.9);
transform-origin: var(--transform-origin);
transform-origin: var(--popover-arrow-origin);

&[data-open] {
opacity: 1;
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/popover/UnstyledPopoverTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const PopoverPopup = styled(Popover.Popup)`
transition-duration: 0.2s;
opacity: 0;
transform: scale(0.9);
transform-origin: var(--transform-origin);
transform-origin: var(--popover-arrow-origin);

&[data-open] {
opacity: 1;
Expand Down
26 changes: 13 additions & 13 deletions docs/data/components/popover/popover.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,20 +225,20 @@ By default, the `Trigger` acts as the anchor, but this can be changed to another

The `Popover.Positioner` element receives the following CSS variables, which can be used by `Popover.Popup`:

- `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the popover with its anchor.
- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the popover with its anchor.
- `--available-width`: Specifies the available width of the popup before it overflows the viewport.
- `--available-height`: Specifies the available height of the popup before it overflows the viewport.
- `--transform-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor.
- `--popover-anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the popover with its anchor.
- `--popover-anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the popover with its anchor.
- `--popover-available-width`: Specifies the available width of the popup before it overflows the viewport.
- `--popover-available-height`: Specifies the available height of the popup before it overflows the viewport.
- `--popover-arrow-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center where the arrow points. When animating scale, this allows it to correctly emanate from the center of the anchor.

### Large content

If your popover is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--available-width` and `--available-height` properties are useful to constrain its size to prevent it from overflowing.
If your popover is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--popover-available-width` and `--popover-available-height` properties are useful to constrain its size to prevent it from overflowing.

```css
.PopoverPopup {
max-width: var(--available-width);
max-height: var(--available-height);
max-width: var(--popover-available-width);
max-height: var(--popover-available-height);
overflow: auto;
}
```
Expand All @@ -254,8 +254,8 @@ The `overflow: auto` property will prevent the `Arrow` from appearing, if specif

```css
.PopoverPopup-content {
max-width: var(--available-width);
max-height: var(--available-height);
max-width: var(--popover-available-width);
max-height: var(--popover-available-height);
overflow: auto;
}
```
Expand All @@ -264,8 +264,8 @@ Absolute maximums can also be specified if the popover's size can be too large o

```css
.PopoverPopup-content {
max-width: min(500px, var(--available-width));
max-height: min(500px, var(--available-height));
max-width: min(500px, var(--popover-available-width));
max-height: min(500px, var(--popover-available-height));
overflow: auto;
}
```
Expand All @@ -288,7 +288,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th

```css
.PopoverPopup {
transform-origin: var(--transform-origin);
transform-origin: var(--popover-arrow-origin);
transition-property: opacity, transform;
transition-duration: 0.2s;
/* Represents the final styles once exited */
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)`
filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25));
outline: 0;
padding: 12px 16px;
max-width: min(300px, var(--available-width));
max-width: min(300px, var(--preview-card-available-width));
`;

export const TriggerLink = styled(PreviewCard.Trigger)`
Expand Down
2 changes: 1 addition & 1 deletion docs/data/components/preview-card/UnstyledPreviewCardIntroduction/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)`
filter: drop-shadow(0 2px 4px rgb(0 10 20 / 0.25));
outline: 0;
padding: 12px 16px;
max-width: min(300px, var(--available-width));
max-width: min(300px, var(--preview-card-available-width));
`;

export const TriggerLink = styled(PreviewCard.Trigger)`
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/preview-card/UnstyledPreviewCardTransition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)`
filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25));
outline: 0;
padding: 12px 16px;
max-width: min(300px, var(--available-width));
max-width: min(300px, var(--preview-card-available-width));
transition-property: opacity, transform;
transition-duration: 0.2s;
opacity: 0;
transform-origin: var(--transform-origin);
transform-origin: var(--preview-card-arrow-origin);

&[data-open] {
opacity: 1;
Expand Down
4 changes: 2 additions & 2 deletions docs/data/components/preview-card/UnstyledPreviewCardTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ export const PreviewCardPopup = styled(PreviewCard.Popup)`
filter: drop-shadow(0 0.1rem 0.25rem rgb(0 10 20 / 0.25));
outline: 0;
padding: 12px 16px;
max-width: min(300px, var(--available-width));
max-width: min(300px, var(--preview-card-available-width));
transition-property: opacity, transform;
transition-duration: 0.2s;
opacity: 0;
transform-origin: var(--transform-origin);
transform-origin: var(--preview-card-arrow-origin);

&[data-open] {
opacity: 1;
Expand Down
26 changes: 13 additions & 13 deletions docs/data/components/preview-card/preview-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,20 +181,20 @@ By default, the `Trigger` acts as the anchor, but this can be changed to another

The `PreviewCard.Positioner` element receives the following CSS variables, which can be used by `PreviewCard.Popup`:

- `--anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the Preview Card with its anchor.
- `--anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the Preview Card with its anchor.
- `--available-width`: Specifies the available width of the popup before it overflows the viewport.
- `--available-height`: Specifies the available height of the popup before it overflows the viewport.
- `--transform-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center. When animating scale, this allows it to correctly emanate from the center of the anchor.
- `--preview-card-anchor-width`: Specifies the width of the anchor element. You can use this to match the width of the Preview Card with its anchor.
- `--preview-card-anchor-height`: Specifies the height of the anchor element. You can use this to match the height of the Preview Card with its anchor.
- `--preview-card-available-width`: Specifies the available width of the popup before it overflows the viewport.
- `--preview-card-available-height`: Specifies the available height of the popup before it overflows the viewport.
- `--preview-card-arrow-origin`: Specifies the origin of the popup element that represents the point of the anchor element's center, where the arrow points. When animating scale, this allows it to correctly emanate from the center of the anchor.

### Large content

If your Preview Card is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--available-width` and `--available-height` properties are useful to constrain its size to prevent it from overflowing.
If your Preview Card is large enough that it cannot fit inside the viewport (especially on small or narrow screens as on mobile devices), the `--preview-card-available-width` and `--preview-card-available-height` properties are useful to constrain its size to prevent it from overflowing.

```css
.PreviewCardPopup {
max-width: var(--available-width);
max-height: var(--available-height);
max-width: var(--preview-card-available-width);
max-height: var(--preview-card-available-height);
overflow: auto;
}
```
Expand All @@ -210,8 +210,8 @@ The `overflow: auto` property will prevent the `Arrow` from appearing, if specif

```css
.PreviewCardPopup-content {
max-width: var(--available-width);
max-height: var(--available-height);
max-width: var(--preview-card-available-width);
max-height: var(--preview-card-available-height);
overflow: auto;
}
```
Expand All @@ -220,8 +220,8 @@ Absolute maximums can also be specified if the Preview Card's size can be too la

```css
.PreviewCardPopup-content {
max-width: min(500px, var(--available-width));
max-height: min(500px, var(--available-height));
max-width: min(500px, var(--preview-card-available-width));
max-height: min(500px, var(--preview-card-available-height));
overflow: auto;
}
```
Expand All @@ -244,7 +244,7 @@ Here is an example of how to apply a symmetric scale and fade transition with th

```css
.PreviewCardPopup {
transform-origin: var(--transform-origin);
transform-origin: var(--preview-card-arrow-origin);
transition-property: opacity, transform;
transition-duration: 0.2s;
/* Represents the final styles once exited */
Expand Down
6 changes: 3 additions & 3 deletions docs/data/components/select/SelectAlign.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,10 @@ const SelectPopup = styled(Select.Popup)`
box-shadow:
0 2px 4px rgb(0 0 0 / 0.1),
0 0 0 1px rgb(0 0 0 / 0.1);
max-height: var(--available-height);
max-height: var(--select-available-height);
min-width: min(
calc(var(--available-width) - ${popupPadding * 2}px),
calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
calc(var(--select-available-width) - ${popupPadding * 2}px),
calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
);
scroll-padding: ${popupPadding}px;

Expand Down
6 changes: 3 additions & 3 deletions docs/data/components/select/SelectAlign.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,10 @@ const SelectPopup = styled(Select.Popup)`
box-shadow:
0 2px 4px rgb(0 0 0 / 0.1),
0 0 0 1px rgb(0 0 0 / 0.1);
max-height: var(--available-height);
max-height: var(--select-available-height);
min-width: min(
calc(var(--available-width) - ${popupPadding * 2}px),
calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
calc(var(--select-available-width) - ${popupPadding * 2}px),
calc(var(--select-anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px)
);
scroll-padding: ${popupPadding}px;

Expand Down
Loading