Skip to content

Commit

Permalink
Fixing fallback plugin imports for multi files (#2058)
Browse files Browse the repository at this point in the history 
Co-authored-by: Katie Langerman <langermank@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
  • Loading branch information
@jonrohan @langermank
3 people authored Jun 8, 2023
1 parent dd74257 commit 3e50e06
Show file tree
Hide file tree
Showing 32 changed files with 498 additions and 491 deletions.
6 changes: 6 additions & 0 deletions .changeset/rotten-kiwis-change.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@primer/view-components": patch
---

- Remove manual fallbacks for CSS vars
- Update PostCSS plugin to add fallbacks at build time
Binary file modified ...ywright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/default.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ywright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
112 changes: 56 additions & 56 deletions app/components/primer/alpha/action_list.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
:root {
--actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);
--actionListContent-paddingBlock: var(--control-medium-paddingBlock);
}

/* ActionList */

.ActionListHeader {
margin-left: var(--base-size-8, 8px);
margin-bottom: var(--base-size-16, 16px);
margin-left: var(--base-size-8);
margin-bottom: var(--base-size-16);
}

/* <ul> */
Expand All @@ -15,7 +15,7 @@
}

.ActionListWrap--inset {
padding: var(--base-size-8, 8px);
padding: var(--base-size-8);
}

/* list dividers */
Expand All @@ -38,7 +38,7 @@
top: calc(-1 * var(--actionListContent-paddingBlock));
display: block;
width: 100%;
height: var(--borderWidth-thin, 1px);
height: var(--borderWidth-thin);
content: '';
background: var(--color-action-list-item-inline-divider);
}
Expand Down Expand Up @@ -76,7 +76,7 @@
position: relative;
list-style: none;
background-color: transparent;
border-radius: var(--borderRadius-medium, 6px);
border-radius: var(--borderRadius-medium);

/* state */

Expand Down Expand Up @@ -134,9 +134,9 @@

&:not(.ActionListItem--navActive, :focus-visible) {
/* Support for "Windows high contrast mode" */
outline: solid var(--borderWidth-thin, 1px) transparent;
outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
outline: solid var(--borderWidth-thin) transparent;
outline-offset: calc(-1 * var(--borderWidth-thin));
box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
}
}
}
Expand All @@ -146,9 +146,9 @@

&:not(.ActionListItem--navActive) {
/* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
outline: solid var(--borderWidth-thin, 1px) transparent;
outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
outline: solid var(--borderWidth-thin) transparent;
outline-offset: calc(-1 * var(--borderWidth-thin));
box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
}

& .ActionListItem-label::before,
Expand All @@ -161,7 +161,7 @@
/* Autocomplete [aria-selected] items */

&[aria-selected='true'] {
font-weight: var(--base-text-weight-normal, 400);
font-weight: var(--base-text-weight-normal);
background: var(--color-action-list-item-default-selected-bg);

@media (hover: hover) {
Expand All @@ -178,7 +178,7 @@
/* blue accent line */

&::after {
@mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));
@mixin activeIndicatorLine calc(-1 * var(--base-size-4));
}
}

Expand All @@ -187,7 +187,7 @@
&.ActionListItem--navActive {
&:not(.ActionListItem--subItem) {
& .ActionListItem-label {
font-weight: var(--base-text-weight-semibold, 600);
font-weight: var(--base-text-weight-semibold);
}
}

Expand Down Expand Up @@ -277,13 +277,13 @@
display: grid;
width: 100%;
padding-block: var(--actionListContent-paddingBlock);
padding-inline: var(--control-medium-paddingInline-condensed, 8px);
padding-inline: var(--control-medium-paddingInline-condensed);
color: var(--color-fg-default);
text-align: left;
user-select: none;
background-color: transparent;
border: none;
border-radius: var(--borderRadius-medium, 6px);
border-radius: var(--borderRadius-medium);
transition: background 33.333ms linear;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
Expand All @@ -294,7 +294,7 @@

/* column-gap persists with empty grid-areas, margin applies only when children exist */
& > :not(:last-child) {
margin-right: var(--control-medium-gap, 8px);
margin-right: var(--control-medium-gap);
}

/* state */
Expand Down Expand Up @@ -333,28 +333,28 @@
}

& .ActionListContent {
padding-left: var(--base-size-24, 24px);
padding-left: var(--base-size-24);
}
}

/* has 16px leading visual */
&.ActionListContent--visual16 + .ActionList--subGroup {
& .ActionListContent {
padding-left: var(--base-size-32, 32px);
padding-left: var(--base-size-32);
}
}

/* has 20px leading visual */
&.ActionListContent--visual20 + .ActionList--subGroup {
& .ActionListContent {
padding-left: var(--base-size-36, 36px);
padding-left: var(--base-size-36);
}
}

/* has 24px leading visual */
&.ActionListContent--visual24 + .ActionList--subGroup {
& .ActionListContent {
padding-left: var(--base-size-40, 40px);
padding-left: var(--base-size-40);
}
}
}
Expand All @@ -375,7 +375,7 @@

&.ActionListContent--hasActiveSubItem {
& > .ActionListItem-label {
font-weight: var(--base-text-weight-semibold, 600);
font-weight: var(--base-text-weight-semibold);
}
}
}
Expand All @@ -391,15 +391,15 @@
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: translateY(calc(-1 * var(--base-size-16, 16px)));
transform: translateY(calc(-1 * var(--base-size-16)));
}

/* show active indicator on parent collapse if child is active */
&.ActionListContent--hasActiveSubItem {
background: var(--color-action-list-item-default-selected-bg);

& .ActionListItem-label {
font-weight: var(--base-text-weight-semibold, 600);
font-weight: var(--base-text-weight-semibold);
}

&::before,
Expand Down Expand Up @@ -506,16 +506,16 @@
/* sizes */

&.ActionListContent--sizeLarge {
--actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
--actionListContent-paddingBlock: var(--control-large-paddingBlock);
}

&.ActionListContent--sizeXLarge {
--actionListContent-paddingBlock: var(--control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
--actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);
}

/* On pointer:coarse (mobile), all list items are large */
@media (pointer: coarse) {
--actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
--actionListContent-paddingBlock: var(--control-large-paddingBlock);
}

&.ActionListContent--blockDescription {
Expand Down Expand Up @@ -550,10 +550,10 @@
grid-area: label;
display: flex;
flex-direction: column;
gap: var(--base-size-4, 4px);
gap: var(--base-size-4);

& .ActionListItem-label {
font-weight: var(--base-text-weight-semibold, 600);
font-weight: var(--base-text-weight-semibold);
}
}

Expand All @@ -562,14 +562,14 @@
position: relative;
flex-direction: row;
align-items: baseline;
gap: var(--base-size-8, 8px);
gap: var(--base-size-8);
}

/* description */
.ActionListItem-description {
font-size: var(--text-body-size-small, 12px);
font-weight: var(--base-text-weight-normal, 400);
line-height: var(--text-body-lineHeight-small, calc(20 / 12));
font-size: var(--text-body-size-small);
font-weight: var(--base-text-weight-normal);
line-height: var(--text-body-lineHeight-small);
color: var(--color-fg-muted);
}

Expand All @@ -578,7 +578,7 @@
.ActionListItem-visual,
.ActionListItem-action {
display: flex;
min-height: var(--control-medium-lineBoxHeight, 20px);
min-height: var(--control-medium-lineBoxHeight);
color: var(--color-fg-muted);
pointer-events: none;
fill: var(--color-fg-muted);
Expand All @@ -588,9 +588,9 @@
/* text */
.ActionListItem-label {
position: relative;
font-size: var(--text-body-size-medium, 14px);
font-weight: var(--base-text-weight-normal, 400);
line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
font-size: var(--text-body-size-medium);
font-weight: var(--base-text-weight-normal);
line-height: var(--text-body-lineHeight-medium);
color: var(--color-fg-default);
grid-area: label;
}
Expand All @@ -605,8 +605,8 @@
target ActionListItem--subItem for padding-left to maintain :active :after state */

.ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
font-size: var(--text-body-size-small, 12px);
line-height: var(--text-body-lineHeight-small, calc(20 / 12));
font-size: var(--text-body-size-small);
line-height: var(--text-body-lineHeight-small);
}

/* trailing action icon button */
Expand Down Expand Up @@ -644,45 +644,45 @@
&:not(:empty) {
display: flex;
padding-inline: var(--actionListContent-paddingBlock);
padding-block: var(--base-size-8, 8px);
font-size: var(--text-body-size-small, 12px);
line-height: var(--text-body-lineHeight-small, calc(20 / 12));
font-weight: var(--base-text-weight-semibold, 600);
padding-block: var(--base-size-8);
font-size: var(--text-body-size-small);
line-height: var(--text-body-lineHeight-small);
font-weight: var(--base-text-weight-semibold);
color: var(--color-fg-muted);
flex-direction: column;
}

/* no children */
&:empty {
display: block;
height: var(--borderWidth-thin, 1px);
height: var(--borderWidth-thin);
padding: 0;
margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
margin-block-end: var(--base-size-8, 8px);
margin-inline: calc(-1 * var(--base-size-8, 8px));
margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
margin-block-end: var(--base-size-8);
margin-inline: calc(-1 * var(--base-size-8));
list-style: none;
background: var(--color-action-list-item-inline-divider);
border: 0;
}

& .ActionList-sectionDivider-title {
font-size: var(--text-body-size-small, 12px);
font-weight: var(--base-text-weight-semibold, 600);
font-size: var(--text-body-size-small);
font-weight: var(--base-text-weight-semibold);
color: var(--color-fg-muted);
}
}

.ActionList-sectionDivider--filled {
margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
margin-block-end: var(--base-size-8, 8px);
margin-inline: calc(-1 * var(--base-size-8, 8px));
margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
margin-block-end: var(--base-size-8);
margin-inline: calc(-1 * var(--base-size-8));
background: var(--color-canvas-subtle);
border-top: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
border-bottom: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
border-top: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
border-bottom: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);

/* if no children, treat as divider */
&:empty {
height: var(--base-size-8, 8px);
height: var(--base-size-8);
box-sizing: border-box;
}

Expand Down
6 changes: 3 additions & 3 deletions app/components/primer/alpha/auto_complete.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@
font-size: 13px;
list-style: none;
background: var(--color-canvas-overlay);
border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
border-radius: var(--borderRadius-medium, 6px);
border: var(--borderWidth-thin) solid var(--color-border-default);
border-radius: var(--borderRadius-medium);
box-shadow: var(--color-shadow-medium);
}

Expand All @@ -82,7 +82,7 @@
width: 100%;
padding: 4px 8px;
overflow: hidden;
font-weight: var(--base-text-weight-semibold, 600);
font-weight: var(--base-text-weight-semibold);
color: var(--color-fg-default);
text-align: left;
text-decoration: none;
Expand Down
Loading

0 comments on commit 3e50e06

Please sign in to comment.