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

Implement functional color variables 4 [ButtonDanger, ButtonOutline, ButtonPrimary, ButtonClose] #1100

Merged
merged 9 commits into from
Mar 4, 2021
Merged

Implement functional color variables 4 [ButtonDanger, ButtonOutline, ButtonPrimary, ButtonClose] #1100

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
198e24a
Use functional color variables in ButtonDanger
VanAnderson Mar 2, 2021
756191e
Use functional color variables in ButtonOutline
VanAnderson Mar 2, 2021
8f2b4d2
Use functional color variables in ButtonPrimary
VanAnderson Mar 2, 2021
9259750
Use functional color variables in ButtonClose
VanAnderson Mar 2, 2021
81d6e84
Merge branch 'main' into VanAnderson/implement-functional-color-vars-4
VanAnderson Mar 3, 2021
fec73e5
Update button styles
colebemis Mar 4, 2021
7feb98b
Fix button styles
colebemis Mar 4, 2021
4d9bff6
update button snapshot
VanAnderson Mar 4, 2021
deaf900
Merge branch 'main' into VanAnderson/implement-functional-color-vars-4
colebemis Mar 4, 2021
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
5 changes: 5 additions & 0 deletions .changeset/fuzzy-geese-decide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in ButtonOutline
5 changes: 5 additions & 0 deletions .changeset/moody-readers-warn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in ButtonPrimary
5 changes: 5 additions & 0 deletions .changeset/tender-ways-battle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in ButtonDanger
5 changes: 5 additions & 0 deletions .changeset/violet-months-give.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/components': patch
---

Use functional color variables in ButtonClose
7 changes: 4 additions & 3 deletions src/Button/ButtonClose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ const StyledButton = styled.button<StyledButtonProps>`
outline: none;
cursor: pointer;
border-radius: ${get('radii.2')};
colebemis marked this conversation as resolved.
Show resolved Hide resolved
color: ${get('colors.text.secondary')};

&:focus {
box-shadow: ${get('buttons.close.shadow.focus')};
box-shadow: ${get('shadows.btn.focusShadow')};
}

&:active {
color: ${get('buttons.close.color.default')};
&:hover {
color: ${get('colors.text.link')};
}
${COMMON};
${LAYOUT};
Expand Down
34 changes: 17 additions & 17 deletions src/Button/ButtonDanger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,34 @@ import {ComponentProps} from '../utils/types'
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'

const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
color: ${get('buttons.danger.color.default')};
border: 1px solid ${get('buttons.danger.border.default')};
background-color: ${get('buttons.danger.bg.default')};
box-shadow: ${get('buttons.danger.shadow.default')};
color: ${get('colors.btn.danger.text')};
border: 1px solid ${get('colors.btn.border')};
background-color: ${get('colors.btn.bg')};
box-shadow: ${get('shadows.btn.shadow')};

&:hover {
color: ${get('buttons.danger.color.hover')};
background-color: ${get('buttons.danger.bg.hover')};
border-color: ${get('buttons.danger.border.hover')};
box-shadow: ${get('buttons.danger.shadow.hover')};
color: ${get('colors.btn.danger.hoverText')};
background-color: ${get('colors.btn.danger.hoverBg')};
border-color: ${get('colors.btn.danger.hoverBorder')};
box-shadow: ${get('shadows.btn.danger.hoverShadow')};
}
// focus must come before :active so that the active box shadow overrides
&:focus {
border-color: transparent;
box-shadow: ${get('buttons.danger.shadow.focus')};
border-color: ${get('btn.danger.focusBorder')};
colebemis marked this conversation as resolved.
Show resolved Hide resolved
box-shadow: ${get('colors.btn.danger.focusShadow')};
colebemis marked this conversation as resolved.
Show resolved Hide resolved
}

&:active {
color: ${get('buttons.danger.color.active')};
background-color: ${get('buttons.danger.bg.active')};
box-shadow: ${get('buttons.danger.shadow.active')};
border-color: ${get('buttons.danger.border.active')};
color: ${get('colors.btn.danger.selectedText')};
background-color: ${get('colors.btn.danger.selectedBg')};
box-shadow: ${get('shadows.btn.danger.selectedShadow')};
border-color: ${get('colors.btn.danger.selectedBorder')};
}

&:disabled {
color: ${get('buttons.danger.color.disabled')};
background-color: ${get('buttons.danger.bg.disabled')};
border: 1px solid ${get('buttons.danger.border.default')};
color: ${get('colors.btn.danger.disabledText')};
background-color: ${get('colors.btn.danger.disabledBg')};
border: ${get('colors.btn.danger.disabledBorder')};
colebemis marked this conversation as resolved.
Show resolved Hide resolved
}

${buttonSystemProps};
Expand Down
34 changes: 17 additions & 17 deletions src/Button/ButtonOutline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,34 @@ import {ComponentProps} from '../utils/types'
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'

const ButtonOutline = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
color: ${get('buttons.outline.color.default')};
border: 1px solid ${get('buttons.outline.border.default')};
background-color: ${get('buttons.outline.bg.default')};
box-shadow: ${get('buttons.outline.shadow.default')};
color: ${get('colors.btn.outline.text')};
border: 1px solid ${get('colors.btn.border')};
background-color: ${get('colors.btn.bg')};
box-shadow: ${get('shadows.btn.shadow')};

&:hover {
color: ${get('buttons.outline.color.hover')};
background-color: ${get('buttons.outline.bg.hover')};
border-color: ${get('buttons.outline.border.hover')};
box-shadow: ${get('buttons.outline.shadow.hover')};
color: ${get('colors.btn.outline.hoverText')};
background-color: ${get('colors.btn.outline.hoverBg')};
border-color: ${get('colors.btn.outline.hoverBorder')};
box-shadow: ${get('shadows.btn.outline.hoverShadow')};
}
// focus must come before :active so that the active box shadow overrides
&:focus {
border-color: transparent;
box-shadow: ${get('buttons.outline.shadow.focus')};
border-color: ${get('colors.btn.outline.focusBorder')};
box-shadow: ${get('shadows..btn.outline.focusShadow')};
colebemis marked this conversation as resolved.
Show resolved Hide resolved
}

&:active {
color: ${get('buttons.outline.color.active')};
background-color: ${get('buttons.outline.bg.active')};
border-color: ${get('buttons.outline.border.active')};
box-shadow: ${get('buttons.outline.shadow.active')};
color: ${get('colors.btn.outline.selectedText')};
background-color: ${get('colors.btn.outline.selectedBg')};
box-shadow: ${get('shadows.btn.outline.selectedShadow')};
border-color: ${get('colors.btn.outline.selectedBorder')};
}

&:disabled {
color: ${get('buttons.outline.color.disabled')};
border-color: ${get('buttons.outline.border.default')};
background-color: ${get('buttons.outline.bg.disabled')};
color: ${get('colors.btn.outline.disabledText')};
background-color: ${get('colors.btn.outline.disabledBg')};
border-color: ${get('colors.btn.border')};
}

${buttonSystemProps};
Expand Down
30 changes: 15 additions & 15 deletions src/Button/ButtonPrimary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,32 @@ import {ComponentProps} from '../utils/types'
import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'

export const ButtonPrimary = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
color: ${get('buttons.primary.color.default')};
background-color: ${get('buttons.primary.bg.default')};
border: 1px solid ${get('buttons.primary.border.default')};
box-shadow: ${get('buttons.primary.shadow.default')};
color: ${get('colors.btn.primary.text')};
border: 1px solid ${get('colors.btn.primary.border')};
background-color: ${get('colors.btn.primary.bg')};
box-shadow: ${get('shadows.btn.primary.shadow')};

&:hover {
background-color: ${get('buttons.primary.bg.hover')};
border-color: ${get('buttons.primary.border.hover')};
color: ${get('colors.btn.primary.hoverText')};
background-color: ${get('colors.btn.primary.hoverBg')};
border-color: ${get('colors.btn.primary.hoverBorder')};
box-shadow: ${get('shadows.btn.primary.hoverShadow')};
}
// focus must come before :active so that the active box shadow overrides
&:focus {
border-color: transparent;
box-shadow: ${get('buttons.primary.shadow.focus')};
background-color: ${get('buttons.primary.bg.focus')};
border-color: ${get('colors.btn.primary.focusBorder')};
box-shadow: ${get('shadows.btn.primary.focusShadow')};
}

&:active {
background-color: ${get('buttons.primary.bg.active')};
box-shadow: ${get('buttons.primary.shadow.active')};
border-color: ${get('buttons.primary.border.active')};
background-color: ${get('colors.btn.primary.selectedBg')};
box-shadow: ${get('shadows.btn.primary.selectedShadow')};
}

&:disabled {
color: ${get('buttons.primary.color.disabled')};
background-color: ${get('buttons.primary.bg.disabled')};
border-color: ${get('buttons.primary.border.disabled')};
color: ${get('colors.btn.primary.disabledText')};
background-color: ${get('colors.btn.primary.disabledBg')};
border-color: ${get('colors.btn.primary.disabledBorder')};
}

${buttonSystemProps};
Expand Down
Loading