Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

style(experience): use brand loading color for buttons (#6302)

Browse source
This commit is contained in:
Xiao Yijun 2024-07-22 15:43:34 +08:00 • committed by GitHub
parent 9af38c9e5e
commit 1d8a33e760
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/experience/src/Providers/AppBoundary/use-color-theme.ts
View file

@ -9,6 +9,7 @@ const generateLightColorLibrary = (primaryColor: color) => ({
[`--color-brand-default`]: primaryColor.hex(),
[`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-brand-loading`]: absoluteLighten(primaryColor, 15).string(),
[`--color-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
[`--color-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
[`--color-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
@ -18,6 +19,7 @@ const generateDarkColorLibrary = (primaryColor: color) => ({
[`--color-brand-default`]: primaryColor.hex(),
[`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-brand-loading`]: absoluteDarken(primaryColor, 10).string(),
[`--color-overlay-brand-focused`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.16).string(),
[`--color-overlay-brand-hover`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.08).string(),
[`--color-overlay-brand-pressed`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.12).string(),

2
packages/experience/src/components/Button/SocialLinkButton.module.scss
View file

@ -16,7 +16,7 @@
display: block;
// To avoid the layout shift, add padding manually (keep the same size as the icon)
padding: 0 1.5px;
color: var(--color-brand-70);
color: var(--color-brand-loading);
font-size: 0;
line-height: normal;
}

2
packages/experience/src/components/Button/index.module.scss
View file

@ -65,7 +65,7 @@
}
&.loading {
background-color: var(--color-brand-70);
background-color: var(--color-brand-loading);
}
}

2
packages/experience/src/scss/_colors.scss
View file

@ -80,6 +80,7 @@
--color-brand-default: var(--color-brand-40);
--color-brand-hover: var(--color-brand-50);
--color-brand-pressed: var(--color-brand-30);
--color-brand-loading: var(--color-brand-60);
/* Danger */
--color-danger-default: var(--color-danger-40);
@ -199,6 +200,7 @@
--color-brand-default: var(--color-brand-70);
--color-brand-hover: var(--color-brand-50);
--color-brand-pressed: var(--color-brand-30);
--color-brand-loading: var(--color-brand-60);
/* Danger */
--color-danger-default: var(--color-danger-70);