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

Merge pull request #2185 from logto-io/simeng-log-4412

Browse source 
style(ui): update branding color token name
This commit is contained in:
simeng-li 2022-10-20 11:38:44 +08:00 committed by GitHub
commit 2e03d18c3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/ui/src/containers/AppContent/index.module.scss
View file

@ -3,18 +3,19 @@
@use '@/scss/desktop' as desktop;
:root {
--light-primary-color: #5d34f2;
--light-focused-variant: rgba(93, 52, 242, 16%);
--light-hover-variant: rgba(93, 52, 242, 8%);
--light-pressed-variant: rgba(93, 52, 242, 12%);
--light-hover: #7350f4;
--light-pressed: #4718f0;
--dark-primary-color: #7958ff;
--dark-focused-variant: rgba(121, 88, 255, 16%);
--dark-hover-variant: rgba(121, 88, 255, 8%);
--dark-pressed-variant: rgba(121, 88, 255, 12%);
--dark-hover: #957aff;
--dark-pressed: #5d36ff;
--color-light-brand: #5d34f2;
--color-light-overlay-brand-focused: rgba(93, 52, 242, 16%);
--color-light-overlay-brand-hover: rgba(93, 52, 242, 8%);
--color-light-overlay-brand-pressed: rgba(93, 52, 242, 12%);
--color-light-brand-hover: #7350f4;
--color-light-brand-pressed: #4718f0;
--color-dark-brand: #7958ff;
--color-dark-overlay-brand-focused: rgba(121, 88, 255, 16%);
--color-dark-overlay-brand-hover: rgba(121, 88, 255, 8%);
--color-dark-overlay-brand-pressed: rgba(121, 88, 255, 12%);
--color-dark-brand-hover: #957aff;
--color-dark-brand-pressed: #5d36ff;
}
body {

33
packages/ui/src/hooks/use-color-theme.ts
View file

@ -3,21 +3,30 @@ import color from 'color';
import { useEffect } from 'react';
const generateLightColorLibrary = (primaryColor: color) => ({
[`--light-primary-color`]: primaryColor.hex(),
[`--light-focused-variant`]: primaryColor.alpha(0.16).string(),
[`--light-hover-variant`]: primaryColor.alpha(0.08).string(),
[`--light-pressed-variant`]: primaryColor.alpha(0.12).string(),
[`--light-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--light-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-light-brand`]: primaryColor.hex(),
[`--color-light-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-light-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-light-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
[`--color-light-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
[`--color-light-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
});
const generateDarkColorLibrary = (primaryColor: color) => ({
[`--dark-primary-color`]: primaryColor.hex(),
[`--dark-focused-variant`]: absoluteLighten(primaryColor, 17).rgb().alpha(0.16).string(),
[`--dark-hover-variant`]: absoluteLighten(primaryColor, 17).rgb().alpha(0.08).string(),
[`--dark-pressed-variant`]: absoluteLighten(primaryColor, 17).rgb().alpha(0.12).string(),
[`--dark-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--dark-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-dark-brand`]: primaryColor.hex(),
[`--color-dark-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--color-dark-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--color-dark-overlay-brand-focused`]: absoluteLighten(primaryColor, 17)
.rgb()
.alpha(0.16)
.string(),
[`--color-dark-overlay-brand-hover`]: absoluteLighten(primaryColor, 17)
.rgb()
.alpha(0.08)
.string(),
[`--color-dark-overlay-brand-pressed`]: absoluteLighten(primaryColor, 17)
.rgb()
.alpha(0.12)
.string(),
});
const useColorTheme = (primaryColor?: string, darkPrimaryColor?: string) => {

24
packages/ui/src/scss/_desktop.scss
View file

@ -16,12 +16,12 @@ $font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Robot
--color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
--color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
--color-primary: var(--light-primary-color);
--color-focused-variant: var(--light-focused-variant);
--color-hover-variant: var(--light-hover-variant);
--color-pressed-variant: var(--light-pressed-variant);
--color-primary-pressed: var(--light-pressed);
--color-primary-hover: var(--light-hover);
--color-primary: var(--color-light-brand);
--color-focused-variant: var(--color-light-overlay-brand-focused);
--color-hover-variant: var(--color-light-overlay-brand-hover);
--color-pressed-variant: var(--color-light-overlay-brand-pressed);
--color-primary-pressed: var(--color-light-brand-pressed);
--color-primary-hover: var(--color-light-brand-hover);
--color-inverse-on-surface: #f3effa;
--color-outline: #78767f;
@ -50,12 +50,12 @@ $font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Robot
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
--color-primary: var(--dark-primary-color);
--color-focused-variant: var(--dark-focused-variant);
--color-hover-variant: var(--dark-hover-variant);
--color-pressed-variant: var(--dark-pressed-variant);
--color-primary-pressed: var(--dark-pressed);
--color-primary-hover: var(--dark-hover);
--color-primary: var(--color-dark-brand);
--color-focused-variant: var(--color-dark-overlay-brand-focused);
--color-hover-variant: var(--color-dark-overlay-brand-hover);
--color-pressed-variant: var(--color-dark-overlay-brand-pressed);
--color-primary-pressed: var(--color-dark-brand-pressed);
--color-primary-hover: var(--color-dark-brand-hover);
--color-inverse-on-surface: #2d3132;
--color-outline: #928f9a;

4
packages/ui/src/scss/_mobile.scss
View file

@ -13,7 +13,7 @@ $font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Robot
--color-divider: #e0e3e3;
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-primary: var(--light-primary-color);
--color-primary: var(--color-light-brand);
--color-layer: #eff1f1;
--color-error: #ba1b1b;
--color-dialogue: #fff;
@ -33,7 +33,7 @@ $font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Robot
--color-divider: #444748;
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
--color-primary: var(--dark-primary-color);
--color-primary: var(--color-dark-brand);
--color-layer: #2a2c32;
--color-error: #dd3730;
--color-dialogue: