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

Audit copy-button styles #10570

Closed
Tracked by #9805
tay1orjones opened this issue Jan 31, 2022 · 1 comment
Closed
Tracked by #9805

Audit copy-button styles #10570

tay1orjones opened this issue Jan 31, 2022 · 1 comment
Assignees
@joshblack
Milestone
v11 Release Candi...

Comments

@tay1orjones
Copy link
Member

tay1orjones commented Jan 31, 2022 •
edited
Loading

High level steps to take for each component are outlined in the parent issue.

If there's no actionable items to PR, just close this issue without a linked PR
@tay1orjones tay1orjones mentioned this issue Jan 31, 2022
Closed
47 tasks
@tay1orjones tay1orjones moved this to ⏱ Backlog in Design System Jan 31, 2022
@tay1orjones tay1orjones added this to the v11 Release Candidate 1 milestone Jan 31, 2022
@joshblack joshblack moved this from ⏱ Backlog to 🏗 In Progress in Design System Feb 9, 2022
@joshblack
Copy link
Contributor

joshblack commented Feb 9, 2022 •
edited
Loading

Notes

  • Previous version used button styles, bringing those back
  • Removing reset styles
  • Removing button style changes

Changes

Selector Change Declaration Change Value
.c--btn--copy__feedback::before box-shadow Changed ⚠️ 0 2px 6px rgba(0, 0, 0, 0.3) vs 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3))
.c--btn--copy__feedback::before color Changed ⚠️ #ffffff vs var(--cds-text-inverse, #ffffff)
.c--btn--copy__feedback::after border-right Changed ⚠️ 1px solid #393939 vs 1px solid var(--cds-background-inverse, #393939)
.c--btn--copy__feedback::after border-bottom Changed ⚠️ 1px solid #393939 vs 1px solid var(--cds-background-inverse, #393939)
.c--btn--copy__feedback::before position Removed 🚫
.c--btn--copy__feedback::before display Removed 🚫
.c--btn--copy__feedback::before background Removed 🚫
.c--btn--copy__feedback::after position Removed 🚫
.c--btn--copy__feedback::after display Removed 🚫
.c--btn--copy__feedback::after background Removed 🚫
.c--copy-btn box-sizing Removed 🚫
.c--copy-btn border Changed ⚠️ 0 vs none
.c--copy-btn margin Removed 🚫
.c--copy-btn font-family Removed 🚫
.c--copy-btn font-size Removed 🚫
.c--copy-btn vertical-align Removed 🚫
.c--copy-btn background-color Changed ⚠️ #f4f4f4 vs var(--cds-layer)
.c--copy-btn * Removed 🚫
.c--copy-btn *::before Removed 🚫
.c--copy-btn *::after Removed 🚫
.c--copy-btn:hover background-color Changed ⚠️ #e5e5e5 vs var(--cds-layer-hover)
.c--copy-btn:active background-color Changed ⚠️ #c6c6c6 vs var(--cds-layer-active)
.c--copy-btn .c--copy-btn__feedback box-shadow Changed ⚠️ 0 2px 6px rgba(0, 0, 0, 0.3) vs 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3))
.c--copy-btn .c--copy-btn__feedback background-color Changed ⚠️ #393939 vs var(--cds-background-inverse, #393939)
.c--copy-btn .c--copy-btn__feedback color Changed ⚠️ #ffffff vs var(--cds-text-inverse, #ffffff)
.c--copy-btn::before bottom Removed 🚫
.c--copy-btn::before left Removed 🚫
.c--copy-btn::before bottom Removed 🚫
.c--copy-btn::before border-width Removed 🚫
.c--copy-btn::before border-color Removed 🚫
.c--copy-btn::before transform Removed 🚫
.c--copy-btn::after bottom Changed ⚠️ -0.8125rem vs 0
.c--copy-btn::after transform Removed 🚫
.c--copy-btn .c--assistive-text bottom Changed ⚠️ -0.8125rem vs 0
.c--copy-btn .c--assistive-text transform Removed 🚫
.c--copy-btn + .c--assistive-text bottom Changed ⚠️ -0.8125rem vs 0
.c--copy-btn + .c--assistive-text transform Removed 🚫
.c--copy-btn:focus outline Changed ⚠️ 2px solid #0f62fe vs 2px solid var(--cds-focus, #0f62fe)
.c--copy-btn:focus outline-color Changed ⚠️ #0f62fe vs var(--cds-focus, #0f62fe)
.c--btn width New ✨ max-content
.c--btn--primary:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--secondary:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--secondary:focus color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--tertiary:hover color New ✨ var(--cds-text-inverse, #ffffff)
.c--btn--tertiary:focus background-color New ✨ var(--cds-button-tertiary, #0f62fe)
.c--btn--tertiary:focus color New ✨ var(--cds-text-inverse, #ffffff)
.c--btn--tertiary:active border-color New ✨ transparent
.c--btn--tertiary:active color New ✨ var(--cds-text-inverse, #ffffff)
.c--btn--ghost .c--btn__icon position New ✨ static
.c--btn--ghost .c--btn__icon margin-left New ✨ 0.5rem
.c--btn--ghost:hover color New ✨ var(--cds-link-primary-hover, #0043ce)
.c--btn--ghost:active color New ✨ var(--cds-link-primary-hover, #0043ce)
.c--btn--ghost:not([disabled]) svg New ✨
.c--btn--danger:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger-tertiary:hover border-color New ✨ var(--cds-button-danger-hover, #b81922)
.c--btn--danger-tertiary:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger--tertiary:hover border-color New ✨ var(--cds-button-danger-hover, #b81922)
.c--btn--danger--tertiary:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger-tertiary:focus background-color New ✨ var(--cds-button-danger-primary, #da1e28)
.c--btn--danger-tertiary:focus color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger--tertiary:focus background-color New ✨ var(--cds-button-danger-primary, #da1e28)
.c--btn--danger--tertiary:focus color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger-tertiary:active border-color New ✨ var(--cds-button-danger-active, #750e13)
.c--btn--danger-tertiary:active color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger--tertiary:active border-color New ✨ var(--cds-button-danger-active, #750e13)
.c--btn--danger--tertiary:active color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger-ghost .c--btn__icon position New ✨ static
.c--btn--danger-ghost .c--btn__icon margin-left New ✨ 0.5rem
.c--btn--danger--ghost .c--btn__icon position New ✨ static
.c--btn--danger--ghost .c--btn__icon margin-left New ✨ 0.5rem
.c--btn--danger-ghost:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger-ghost:active color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger--ghost:hover color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--danger--ghost:active color New ✨ var(--cds-text-on-color, #ffffff)
.c--btn--copy__feedback::before position New ✨ absolute
.c--btn--copy__feedback::before display New ✨ block
.c--btn--copy__feedback::before background New ✨ var(--cds-background-inverse, #393939)
.c--btn--copy__feedback::after position New ✨ absolute
.c--btn--copy__feedback::after display New ✨ block
.c--btn--copy__feedback::after background New ✨ var(--cds-background-inverse, #393939)
.c--copy-btn html New ✨
.c--copy-btn body New ✨
.c--copy-btn code New ✨
.c--copy-btn strong New ✨
.c--copy-btn::before bottom New ✨ 0
.c--copy-btn::before left New ✨ 50%
.c--copy-btn::before bottom New ✨ -0.5rem
.c--copy-btn::before border-width New ✨ 0 0.25rem 0.3125rem 0.25rem
.c--copy-btn::before border-color New ✨ transparent transparent var(--cds-background-inverse, #393939) transparent
.c--copy-btn::before transform New ✨ translate(-50%, 100%)
.c--copy-btn::after transform New ✨ translate(-50%, 100%)
.c--copy-btn .c--assistive-text transform New ✨ translate(-50%, 100%)
.c--copy-btn + .c--assistive-text transform New ✨ translate(-50%, 100%)

Repository owner moved this from 🏗 In Progress to ✅ Done in Design System Feb 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@joshblack joshblack

Labels
None yet
Projects
Design System
Archived in project
Milestone
v11 Release Candidate 1
Development

No branches or pull requests
2 participants
@tay1orjones @joshblack