Skip to content

Commit

Permalink
feat(shallow-disabled-button-pill): fix coloring
Browse files Browse the repository at this point in the history
  • Loading branch information
@nataliadelmar
ndelmar authored and nataliadelmar committed Jul 20, 2023
1 parent 4041ba9 commit 3f269ee
Show file tree
Hide file tree
Showing 2 changed files with 216 additions and 200 deletions.
208 changes: 108 additions & 100 deletions src/components/ButtonCircle/ButtonCircle.style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

// PRIMARY GHOST
&[data-ghost='true'] {
&[data-ghost='true'][data-solid='false'] {
background-color: var(--mds-color-theme-button-secondary-normal);
color: var(--mds-color-theme-text-primary-normal);

Expand Down Expand Up @@ -78,34 +78,36 @@
}
}

// PRIMARY OUTLINE SOLID
&[data-outline='true'][data-ghost='false'],
&[data-outline='true'][data-solid='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-button-normal);
color: var(--mds-color-theme-text-primary-normal);

&:hover,
&.hover {
background-color: var(--mds-color-theme-button-inverted-hover);
// PRIMARY OUTLINE SOLID N0T-GHOST
&[data-ghost='false'],
&[data-solid='true'] {
&[data-outline='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-button-normal);
color: var(--mds-color-theme-text-primary-normal);
}

&:active,
&.active {
background-color: var(--mds-color-theme-button-inverted-pressed);
border-color: var(--mds-color-theme-outline-button-normal);
color: var(--mds-color-theme-text-primary-normal);
}
&:hover,
&.hover {
background-color: var(--mds-color-theme-button-inverted-hover);
border-color: var(--mds-color-theme-outline-button-normal);
color: var(--mds-color-theme-text-primary-normal);
}

&[data-disabled='true'],
&.disable,
&[data-shallow-disabled='true'] {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
&:active,
&.active {
background-color: var(--mds-color-theme-button-inverted-pressed);
border-color: var(--mds-color-theme-outline-button-normal);
color: var(--mds-color-theme-text-primary-normal);
}

&[data-disabled='true'],
&.disable,
&[data-shallow-disabled='true'] {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
}
}
}

Expand Down Expand Up @@ -134,7 +136,7 @@
cursor: auto;
}

&[data-ghost='true'] {
&[data-ghost='true'][data-solid='false'] {
background-color: var(--mds-color-theme-button-secondary-normal);
color: var(--mds-color-theme-text-success-normal);

Expand Down Expand Up @@ -188,33 +190,35 @@
}
}

&[data-outline='true'][data-ghost='false'],
&[data-outline='true'][data-solid='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-join-normal);
color: var(--mds-color-theme-text-success-normal);
&[data-ghost='false'],
&[data-solid='true'] {
&[data-outline='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-join-normal);
color: var(--mds-color-theme-text-success-normal);

&:hover,
&.hover {
background-color: var(--mds-color-theme-button-join-hover);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}
&:hover,
&.hover {
background-color: var(--mds-color-theme-button-join-hover);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}

&:active,
&.active {
background-color: var(--mds-color-theme-button-join-pressed);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}
&:active,
&.active {
background-color: var(--mds-color-theme-button-join-pressed);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}

&[data-shallow-disabled='true'],
&[data-disabled='true'],
&.disable {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
&[data-shallow-disabled='true'],
&[data-disabled='true'],
&.disable {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
}
}
}
}
Expand Down Expand Up @@ -243,7 +247,7 @@
cursor: auto;
}

&[data-ghost='true'] {
&[data-ghost='true'][data-solid='false'] {
background-color: var(--mds-color-theme-button-secondary-normal);
color: var(--mds-color-theme-text-error-normal);

Expand Down Expand Up @@ -297,33 +301,35 @@
}
}

&[data-outline='true'][data-ghost='false'],
&[data-outline='true'][data-solid='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-cancel-normal);
color: var(--mds-color-theme-text-error-normal);
&[data-ghost='false'],
&[data-solid='true'] {
&[data-outline='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-cancel-normal);
color: var(--mds-color-theme-text-error-normal);

&:hover,
&.hover {
background-color: var(--mds-color-theme-button-cancel-hover);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}
&:hover,
&.hover {
background-color: var(--mds-color-theme-button-cancel-hover);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}

&:active,
&.active {
background-color: var(--mds-color-theme-button-cancel-pressed);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}
&:active,
&.active {
background-color: var(--mds-color-theme-button-cancel-pressed);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}

&[data-shallow-disabled='true'],
&[data-disabled='true'],
&.disable {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
&[data-shallow-disabled='true'],
&[data-disabled='true'],
&.disable {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
}
}
}
}
Expand Down Expand Up @@ -353,7 +359,7 @@
cursor: auto;
}

&[data-ghost='true'] {
&[data-ghost='true'][data-solid='false'] {
background-color: var(--mds-color-theme-button-secondary-normal);
color: var(--mds-color-theme-text-accent-normal);

Expand Down Expand Up @@ -407,33 +413,35 @@
}
}

&[data-outline='true'][data-ghost='false'],
&[data-outline='true'][data-solid='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-theme-normal);
color: var(--mds-color-theme-text-accent-normal);
&[data-ghost='false'],
&[data-solid='true'] {
&[data-outline='true'] {
background-color: var(--mds-color-theme-button-inverted-normal);
border-color: var(--mds-color-theme-outline-theme-normal);
color: var(--mds-color-theme-text-accent-normal);

&:hover,
&.hover {
background-color: var(--mds-color-theme-button-accent-hover);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}
&:hover,
&.hover {
background-color: var(--mds-color-theme-button-accent-hover);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}

&:active,
&.active {
background-color: var(--mds-color-theme-button-accent-pressed);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}
&:active,
&.active {
background-color: var(--mds-color-theme-button-accent-pressed);
border-color: rgba(0, 0, 0, 0);
color: var(--mds-color-theme-common-text-white);
}

&[data-shallow-disabled='true'],
&[data-disabled='true'],
&.disable {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
&[data-shallow-disabled='true'],
&[data-disabled='true'],
&.disable {
background-color: var(--mds-color-theme-button-secondary-normal);
border-color: var(--mds-color-theme-outline-disabled-normal);
color: var(--mds-color-theme-text-primary-disabled);
cursor: auto;
}
}
}
}
Expand Down
Loading

0 comments on commit 3f269ee

Please sign in to comment.