Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

style(ui): add color prefix

Browse source 
add color prefix
This commit is contained in:
simeng-li 2022-10-18 18:43:54 +08:00
parent 9a6075aa56
commit 050ec1346e
No known key found for this signature in database
GPG key ID: 14EA7BB1541E8075
4 changed files with 47 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,19 +3,19 @@
@use '@/scss/desktop' as desktop;
:root {
--light-brand-color: #5d34f2;
--light-overlay-brand-focused: rgba(93, 52, 242, 16%);
--light-overlay-brand-hover: rgba(93, 52, 242, 8%);
--light-overlay-brand-pressed: rgba(93, 52, 242, 12%);
--light-brand-hover: #7350f4;
--light-brand-pressed: #4718f0;
--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;
--dark-brand-color: #7958ff;
--dark-overlay-brand-focused: rgba(121, 88, 255, 16%);
--dark-overlay-brand-hover: rgba(121, 88, 255, 8%);
--dark-overlay-brand-pressed: rgba(121, 88, 255, 12%);
--dark-brand-hover: #957aff;
--dark-brand-pressed: #5d36ff;
--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-brand-color`]: primaryColor.hex(),
[`--light-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--light-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--light-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
[`--light-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
[`--light-overlay-brand-pressed`]: primaryColor.alpha(0.12).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-brand-color`]: primaryColor.hex(),
[`--dark-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
[`--dark-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
[`--dark-overlay-brand-focused`]: absoluteLighten(primaryColor, 17).rgb().alpha(0.16).string(),
[`--dark-overlay-brand-hover`]: absoluteLighten(primaryColor, 17).rgb().alpha(0.08).string(),
[`--dark-overlay-brand-pressed`]: absoluteLighten(primaryColor, 17).rgb().alpha(0.12).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-brand-color);
--color-focused-variant: var(--light-overlay-brand-focused);
--color-hover-variant: var(--light-overlay-brand-hover);
--color-pressed-variant: var(--light-overlay-brand-pressed);
--color-primary-pressed: var(--light-brand-pressed);
--color-primary-hover: var(--light-brand-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-brand-color);
--color-focused-variant: var(--dark-overlay-brand-focused);
--color-hover-variant: var(--dark-overlay-brand-hover);
--color-pressed-variant: var(--dark-overlay-brand-pressed);
--color-primary-pressed: var(--dark-brand-pressed);
--color-primary-hover: var(--dark-brand-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-brand-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-brand-color);
--color-primary: var(--color-dark-brand);
--color-layer: #2a2c32;
--color-error: #dd3730;
--color-dialogue: