Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

Merge pull request #580 from logto-io/charles-log-2227-update-button-hover-and-pressed-colors

Browse source 
fix(console): button hover and pressed state colors
This commit is contained in:
Charles Zhao 2022-04-20 12:09:13 +08:00 committed by GitHub
commit 1653d020cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/console/src/components/Button/index.module.scss
View file

@ -78,7 +78,7 @@
background: var(--color-pressed);
}
&:not(:disabled):hover {
&:not(:disabled):not(:active):hover {
background: var(--color-hover);
}
}
@ -97,11 +97,11 @@
}
&:active {
background: var(--color-pressed_primary);
background: var(--color-primary-pressed);
}
&:not(:disabled):hover {
background: var(--color-hover-primary);
&:not(:disabled):not(:active):hover {
background: var(--color-primary-hover);
}
}
@ -115,11 +115,15 @@
}
&:focus {
outline: 3px solid var(--color-focused-error);
outline: 3px solid var(--color-danger-focused);
}
&:not(:disabled):hover {
background: var(--color-error);
&:active {
background: var(--color-danger-pressed);
}
&:not(:disabled):not(:active):hover {
background: var(--color-danger-hover);
}
}
@ -143,7 +147,7 @@
background: var(--color-pressed-variant);
}
&:not(:disabled):hover {
&:not(:disabled):not(:active):hover {
background: var(--color-hover-variant);
}
}
@ -166,7 +170,7 @@
background: var(--color-pressed-variant);
}
&:not(:disabled):hover {
&:not(:disabled):not(:active):hover {
background: var(--color-hover-variant);
}
}

20
packages/console/src/scss/_colors.scss
View file

@ -120,6 +120,10 @@
--color-surface-variant: var(--color-neutral-variant-90);
--color-on-surface-variant: var(--color-neutral-variant-30);
--color-outline: var(--color-neutral-variant-50);
--color-primary-hover: var(--color-primary-50);
--color-primary-pressed: var(--color-primary-30);
--color-danger-hover: var(--color-error-50);
--color-danger-pressed: var(--color-error-30);
--color-text: var(--color-neutral-10);
--color-icon: var(--color-neutral-50);
--color-caption: var(--color-neutral-50);
@ -140,11 +144,7 @@
--shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
// Client specific variables
--color-hover-primary: #5832e1; // P40 + 8% N10
--color-pressed_primary: #5531d8; // P40 + 12% N10
--color-hover-danger: #ad1b1b; // ER40 + 8% N10
--color-pressed_danger: #a71b1b; // ER40 + 12% N10
--color-focused-danger: rgba(186, 27, 27, 16%); // 16% ER40
--color-danger-focused: rgba(186, 27, 27, 16%); // 16% ER40
}
@mixin dark-theme {
@ -269,6 +269,10 @@
--color-surface-variant: var(--color-neutral-variant-90);
--color-on-surface-variant: var(--color-neutral-variant-30);
--color-outline: var(--color-neutral-variant-50);
--color-primary-hover: var(--color-primary-60);
--color-primary-pressed: var(--color-primary-80);
--color-danger-hover: var(--color-error-60);
--color-danger-pressed: var(--color-error-80);
--color-text: var(--color-neutral-10);
--color-icon: var(--color-neutral-50);
--color-caption: var(--color-neutral-50);
@ -289,9 +293,5 @@
--shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
// Client specific variables
--color-hover-primary: #cec3fe; // P40 + 8% N10
--color-pressed_primary: #cfc5fe; // P40 + 12% N10
--color-hover-danger: #feb9af; // ER40 + 8% N10
--color-pressed_danger: #febcb2; // ER40 + 12% N10
--color-focused-danger: rgba(255, 180, 169, 16%); // 16% ER40
--color-danger-focused: rgba(255, 180, 169, 16%); // 16% ER40
}