Skip to content

Commit

Permalink
Merge 39a39ad into 82a7ed5
Browse files Browse the repository at this point in the history
  • Loading branch information
langermank authored Feb 16, 2024
2 parents 82a7ed5 + 39a39ad commit 16a2b21
Show file tree
Hide file tree
Showing 243 changed files with 99 additions and 75 deletions.
5 changes: 5 additions & 0 deletions .changeset/khaki-schools-lay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Address a few v8 color bugs
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ exports[`Button respects block prop 1`] = `
cursor: not-allowed;
box-shadow: none;
color: primer.fg.disabled;
border-color: var(--button-default-borderColor-disabled,undefined);
}
.c0:disabled [data-component=ButtonCounter] {
Expand All @@ -107,6 +108,7 @@ exports[`Button respects block prop 1`] = `
.c0 [data-component=ButtonCounter] {
font-size: 12px;
background-color: btn.counterBg;
}
.c0[data-component=IconButton] {
Expand Down Expand Up @@ -353,6 +355,7 @@ exports[`Button respects the alignContent prop 1`] = `
cursor: not-allowed;
box-shadow: none;
color: primer.fg.disabled;
border-color: var(--button-default-borderColor-disabled,undefined);
}
.c0:disabled [data-component=ButtonCounter] {
Expand All @@ -361,6 +364,7 @@ exports[`Button respects the alignContent prop 1`] = `
.c0 [data-component=ButtonCounter] {
font-size: 12px;
background-color: btn.counterBg;
}
.c0[data-component=IconButton] {
Expand Down Expand Up @@ -606,6 +610,7 @@ exports[`Button respects the large size prop 1`] = `
cursor: not-allowed;
box-shadow: none;
color: primer.fg.disabled;
border-color: var(--button-default-borderColor-disabled,undefined);
}
.c0:disabled [data-component=ButtonCounter] {
Expand All @@ -614,6 +619,7 @@ exports[`Button respects the large size prop 1`] = `
.c0 [data-component=ButtonCounter] {
font-size: 12px;
background-color: btn.counterBg;
}
.c0[data-component=IconButton] {
Expand Down Expand Up @@ -860,6 +866,7 @@ exports[`Button respects the small size prop 1`] = `
cursor: not-allowed;
box-shadow: none;
color: primer.fg.disabled;
border-color: var(--button-default-borderColor-disabled,undefined);
}
.c0:disabled [data-component=ButtonCounter] {
Expand All @@ -868,6 +875,7 @@ exports[`Button respects the small size prop 1`] = `
.c0 [data-component=ButtonCounter] {
font-size: 12px;
background-color: btn.counterBg;
}
.c0[data-component=IconButton] {
Expand Down Expand Up @@ -1115,7 +1123,7 @@ exports[`Button styles danger button appropriately 1`] = `
box-shadow: none;
color: btn.danger.disabledText;
background-color: btn.danger.disabledBg;
border-color: btn.danger.disabledBorder;
border-color: var(--button-default-borderColor-disabled,undefined);
}
.c0:disabled [data-component=ButtonCounter] {
Expand Down Expand Up @@ -1646,6 +1654,7 @@ exports[`Button styles primary button appropriately 1`] = `
box-shadow: none;
color: btn.primary.disabledText;
background-color: btn.primary.disabledBg;
border-color: btn.primary.disabledBorder;
}
.c0:disabled [data-component=ButtonCounter] {
Expand Down
7 changes: 6 additions & 1 deletion packages/react/src/Button/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
},
'&:disabled': {
color: 'primer.fg.disabled',
borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`,
'[data-component=ButtonCounter]': {
color: 'inherit',
},
Expand All @@ -28,6 +29,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
'[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
color: `var(--button-color, ${theme?.colors.fg.muted})`,
},
'[data-component=ButtonCounter]': {
backgroundColor: 'btn.counterBg',
},
},
primary: {
color: 'btn.primary.text',
Expand All @@ -51,6 +55,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
'&:disabled': {
color: 'btn.primary.disabledText',
backgroundColor: 'btn.primary.disabledBg',
borderColor: 'btn.primary.disabledBorder',
'[data-component=ButtonCounter]': {
color: 'inherit',
},
Expand Down Expand Up @@ -87,7 +92,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
'&:disabled': {
color: 'btn.danger.disabledText',
backgroundColor: 'btn.danger.disabledBg',
borderColor: 'btn.danger.disabledBorder',
borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`,
'[data-component=ButtonCounter]': {
color: 'btn.danger.disabledCounterFg',
backgroundColor: 'btn.danger.disabledCounterBg',
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/CounterLabel/CounterLabel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const CounterLabel = forwardRef<HTMLSpanElement, CounterLabelProps>(
lineHeight: 'condensedUltra',
borderRadius: '20px',
backgroundColor: scheme === 'primary' ? 'neutral.emphasis' : 'neutral.muted',
border:
'var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border))',
color: scheme === 'primary' ? 'fg.onEmphasis' : 'fg.default',
'&:empty': {
display: 'none',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
line-height: condensedUltra;
border-radius: 20px;
background-color: neutral.muted;
border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
color: fg.default;
}
Expand Down Expand Up @@ -55,6 +56,7 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = `
line-height: condensedUltra;
border-radius: 20px;
background-color: neutral.emphasis;
border: var(--borderWidth-thin,max(1px,0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
color: fg.onEmphasis;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
.c6:hover,
.c6:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c6:active {
Expand Down Expand Up @@ -336,7 +336,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
.c6:hover,
.c6:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c6:active {
Expand Down Expand Up @@ -562,7 +562,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
.c6:hover,
.c6:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c6:active {
Expand Down Expand Up @@ -790,7 +790,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
.c6:hover,
.c6:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c6:active {
Expand Down Expand Up @@ -1144,7 +1144,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
.c6:hover,
.c6:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c6:active {
Expand Down Expand Up @@ -1345,7 +1345,7 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -1518,7 +1518,7 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -1691,7 +1691,7 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -1866,7 +1866,7 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -2039,7 +2039,7 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -2212,7 +2212,7 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -2496,7 +2496,7 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
.c2:hover,
.c2:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c2:active {
Expand Down Expand Up @@ -2671,7 +2671,7 @@ exports[`Token components Token renders all sizes 1`] = `
.c3:hover,
.c3:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c3:active {
Expand Down Expand Up @@ -2851,7 +2851,7 @@ exports[`Token components Token renders all sizes 2`] = `
.c3:hover,
.c3:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c3:active {
Expand Down Expand Up @@ -3031,7 +3031,7 @@ exports[`Token components Token renders all sizes 3`] = `
.c3:hover,
.c3:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c3:active {
Expand Down Expand Up @@ -3213,7 +3213,7 @@ exports[`Token components Token renders all sizes 4`] = `
.c3:hover,
.c3:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c3:active {
Expand Down Expand Up @@ -3576,7 +3576,7 @@ exports[`Token components Token renders with a remove button 1`] = `
.c3:hover,
.c3:focus {
background-color: var(--borderColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));
}
.c3:active {
Expand Down
Loading

0 comments on commit 16a2b21

Please sign in to comment.