Skip to content

Commit

Permalink
Merge branch 'main' into dkilgore-eightfold/popup-theme-fixup
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkilgore-eightfold
dkilgore-eightfold authored Apr 12, 2023
2 parents 33e80f0 + f4e3ac5 commit ed69572
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 35 deletions.
92 changes: 57 additions & 35 deletions src/components/Button/button.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -745,27 +745,33 @@
}

.button-neutral {
--button-counter-default-text-color: var(--grey-color-80);
--button-counter-default-text-color: var(
--button-neutral-counter-default-text-color
);

--bg: var(--grey-color-10);
--color: var(--text-secondary-color);
--bg: var(--button-neutral-background-color);
--color: var(--button-neutral-text-color);
color: var(--color);
background-color: var(--bg);

&:hover:not([disabled]) {
--bg: var(--background-color);
--bg: var(--button-neutral-hover-background-color);
--color: var(--button-neutral-hover-text-color);
}

&:active:not([disabled]) {
--bg: var(--grey-color-20);
--bg: var(--button-neutral-active-background-color);
--color: var(--button-neutral-active-text-color);
}
}

.button-system-ui {
--button-counter-default-text-color: var(--grey-color-80);
--button-counter-default-text-color: var(
--button-system-ui-counter-default-text-color
);

--bg: var(--background-color);
--color: var(--grey-color-60);
--bg: var(--button-system-ui-background-color);
--color: var(--button-system-ui-text-color);
color: var(--color);

.inner-nudge {
Expand Down Expand Up @@ -797,11 +803,13 @@
}

&:not(.transparent):not([disabled]):hover {
--bg: var(--grey-color-10);
--bg: var(--button-system-ui-hover-background-color);
--color: var(--button-system-ui-hover-text-color);
}

&:not(.transparent):not([disabled]):active {
--bg: var(--grey-color-20);
--bg: var(--button-system-ui-active-background-color);
--color: var(--button-system-ui-active-text-color);
}
}

Expand Down Expand Up @@ -856,35 +864,35 @@
width: 1px;

&.split-divider-primary {
background-color: var(--primary-color-80);
background-color: var(--button-primary-split-divider-color);
}

&.split-divider-secondary {
background-color: var(--primary-color-70);
background-color: var(--button-secondary-split-divider-color);
}

&.split-divider-system-ui {
background-color: var(--grey-color-70);
background-color: var(--button-system-ui-split-divider-color);
}

&.split-divider-primary-disruptive {
background-color: var(--disruptive-color-80);
background-color: var(--button-primary-disruptive-split-divider-color);
}

&.split-divider-secondary-disruptive {
background-color: var(--disruptive-color-70);
background-color: var(--button-secondary-disruptive-split-divider-color);
}

&.split-divider-default {
background-color: var(--primary-color-70);
background-color: var(--button-default-split-divider-color);
}

&.split-divider-disruptive {
background-color: var(--disruptive-color-70);
background-color: var(--button-default-disruptive-split-divider-color);
}

&.split-divider-neutral {
background-color: var(--grey-color-70);
background-color: var(--button-neutral-split-divider-color);
}
}

Expand All @@ -908,15 +916,27 @@
}

.two-state-button {
--button-counter-default-background-color: var(--green-color-20);
--button-counter-hover-background-color: var(--green-color-20);
--button-counter-checked-background-color: var(--green-color-10);
--button-counter-focus-background-color: var(--green-color-20);
--button-counter-active-background-color: var(--green-color-10);
--button-counter-default-text-color: var(--grey-color-80);

--bg: var(--grey-color-10);
--color: var(--grey-color-70);
--button-counter-default-background-color: var(
--button-two-state-default-counter-background-color
);
--button-counter-hover-background-color: var(
--button-two-state-hover-counter-background-color
);
--button-counter-checked-background-color: var(
--button-two-state-checked-counter-background-color
);
--button-counter-focus-background-color: var(
--button-two-state-focus-counter-background-color
);
--button-counter-active-background-color: var(
--button-two-state-active-counter-background-color
);
--button-counter-default-text-color: var(
--button-two-state-default-counter-text-color
);

--bg: var(--button-two-state-background-color);
--color: var(--button-two-state-text-color);
background-color: var(--bg);
color: var(--color);

Expand Down Expand Up @@ -964,26 +984,26 @@
}

&:hover:not([disabled]) {
--bg: var(--green-color-10);
--color: var(--accent-color-70);
--bg: var(--button-two-state-hover-background-color);
--color: var(--button-two-state-hover-text-color);

.counter {
background-color: var(--button-counter-hover-background-color);
}
}

&:active:not([disabled]) {
--bg: var(--green-color-20);
--color: var(--accent-color);
--bg: var(--button-two-state-active-background-color);
--color: var(--button-two-state-active-text-color);

.counter {
background-color: var(--button-counter-active-background-color);
}
}

&.checked {
--bg: var(--green-color-20);
--color: var(--accent-color-80);
--bg: var(--button-two-state-checked-background-color);
--color: var(--button-two-state-checked-text-color);

.counter {
background-color: var(--button-counter-checked-background-color);
Expand Down Expand Up @@ -1284,7 +1304,7 @@
&.button-neutral {
&.focus-visible,
&:focus-visible {
background-color: var(--grey-color-10);
background-color: var(--button-neutral-focus-visible-background-color);

&.drop-shadow {
box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
Expand All @@ -1295,7 +1315,9 @@
&.button-system-ui {
&.focus-visible,
&:focus-visible {
background-color: var(--background-color);
background-color: var(
--button-system-ui-focus-visible-background-color
);

&.drop-shadow {
box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
Expand Down
48 changes: 48 additions & 0 deletions src/styles/themes/_default-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,7 @@
--button-default-active-border-color: var(
--button-default-active-background-color
);
--button-default-split-divider-color: var(--primary-color-70);
// ------ Default Button theme ------

// ------ Default Disruptive Button theme ------
Expand Down Expand Up @@ -476,8 +477,21 @@
--button-default-disruptive-active-border-color: var(
--button-default-disruptive-active-background-color
);
--button-default-disruptive-split-divider-color: var(--disruptive-color-70);
// ------ Default Disruptive Button theme ------

// ------ Neutral Button theme ------
--button-neutral-text-color: var(--text-secondary-color);
--button-neutral-background-color: var(--grey-color-10);
--button-neutral-counter-default-text-color: var(--grey-color-80);
--button-neutral-hover-text-color: var(--button-neutral-text-color);
--button-neutral-hover-background-color: var(--background-color);
--button-neutral-focus-visible-background-color: var(--grey-color-10);
--button-neutral-active-text-color: var(--button-neutral-text-color);
--button-neutral-active-background-color: var(--grey-color-20);
--button-neutral-split-divider-color: var(--grey-color-70);
// ------ Neutral Button theme ------

// ------ Primary Button theme ------
--button-primary-text-color: var(--primary-color-80);
--button-primary-background-color: var(--accent-color-20);
Expand All @@ -498,6 +512,7 @@
--button-primary-active-border-color: var(
--button-primary-active-background-color
);
--button-primary-split-divider-color: var(--primary-color-80);
// ------ Primary Button theme ------

// ------ Primary Disruptive Button theme ------
Expand Down Expand Up @@ -538,6 +553,7 @@
--button-primary-disruptive-active-border-color: var(
--button-primary-disruptive-active-background-color
);
--button-primary-disruptive-split-divider-color: var(--disruptive-color-80);
// ------ Primary Disruptive Button theme ------

// ------ Secondary Button theme ------
Expand All @@ -556,6 +572,7 @@
--button-secondary-active-border-width: var(--button-secondary-border-width);
--button-secondary-active-border-style: var(--button-secondary-border-style);
--button-secondary-active-border-color: var(--button-secondary-border-color);
--button-secondary-split-divider-color: var(--primary-color-70);
// ------ Secondary Button theme ------

// ------ Secondary Disruptive Button theme ------
Expand Down Expand Up @@ -594,8 +611,39 @@
--button-secondary-disruptive-active-border-color: var(
--button-secondary-disruptive-active-background-color
);
--button-secondary-disruptive-split-divider-color: var(--disruptive-color-70);
// ------ Secondary Disruptive Button theme ------

// ------ System UI Button theme ------
--button-system-ui-text-color: var(--grey-color-60);
--button-system-ui-background-color: var(--background-color);
--button-system-ui-counter-default-text-color: var(--grey-color-80);
--button-system-ui-hover-text-color: var(--button-system-ui-text-color);
--button-system-ui-hover-background-color: var(--grey-color-10);
--button-system-ui-focus-visible-background-color: var(--background-color);
--button-system-ui-active-text-color: var(--button-system-ui-text-color);
--button-system-ui-active-background-color: var(--grey-color-20);
--button-system-ui-split-divider-color: var(--grey-color-70);
// ------ System UI Button theme ------

// ------ Two State Button theme ------
--button-two-state-text-color: var(--grey-color-70);
--button-two-state-background-color: var(--grey-color-10);
--button-two-state-border-color: var(--button-two-state-background-color);
--button-two-state-default-counter-background-color: var(--green-color-20);
--button-two-state-hover-counter-background-color: var(--green-color-20);
--button-two-state-checked-counter-background-color: var(--green-color-10);
--button-two-state-focus-counter-background-color: var(--green-color-20);
--button-two-state-active-counter-background-color: var(--green-color-10);
--button-two-state-default-counter-text-color: var(--grey-color-80);
--button-two-state-hover-text-color: var(--accent-color-70);
--button-two-state-hover-background-color: var(--green-color-10);
--button-two-state-active-text-color: var(--accent-color);
--button-two-state-active-background-color: var(--green-color-20);
--button-two-state-checked-text-color: var(--accent-color-80);
--button-two-state-checked-background-color: var(--green-color-20);
// ------ Two State Button theme ------

// ------ Button Counter theme ------
--button-counter-default-background-color: var(--grey-color-20);
--button-counter-hover-background-color: var(--grey-color-20);
Expand Down

0 comments on commit ed69572

Please sign in to comment.