Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-23 20:33:16 -05:00
Code Issues Activity
logto/packages/toolkit/core-kit/scss/_console-themes.scss

405 lines
16 KiB
SCSS
Raw Normal View History

refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
@mixin light {
// tonal palettes
--color-all-0: #000;
--color-all-100: #fff;
--color-primary-10: #190064;
--color-primary-20: #2d009d;
--color-primary-30: #4300da;
--color-primary-40: #5d34f2;
--color-primary-50: #7958ff;
--color-primary-60: #947dff;
--color-primary-70: #af9eff;
--color-primary-80: #cabeff;
--color-primary-90: #e6deff;
--color-primary-95: #f5eeff;
--color-primary-99: #fffbff;
--color-secondary-10: #201c00;
--color-secondary-20: #373100;
--color-secondary-30: #4f4700;
--color-secondary-40: #695f00;
--color-secondary-50: #847900;
--color-secondary-60: #9f930d;
--color-secondary-70: #baad2d;
--color-secondary-80: #d7c947;
--color-secondary-90: #f4e560;
--color-secondary-95: #fff480;
--color-secondary-99: #fffbf7;
--color-tertiary-10: #350041;
--color-tertiary-20: #560068;
--color-tertiary-30: #7b0093;
--color-tertiary-40: #9927af;
--color-tertiary-50: #b545ca;
--color-tertiary-60: #d361e7;
--color-tertiary-70: #f07eff;
--color-tertiary-80: #faabff;
--color-tertiary-90: #ffd5ff;
--color-tertiary-95: #ffeafe;
--color-tertiary-99: #fcfcfc;
--color-error-10: #410001;
--color-error-20: #680003;
--color-error-30: #930006;
--color-error-40: #ba1b1b;
--color-error-50: #dd3730;
--color-error-60: #ff5449;
--color-error-70: #ff897a;
--color-error-80: #ffb4a9;
--color-error-90: #ffdad4;
--color-error-95: #ffede9;
--color-error-99: #fcfcfc;
--color-neutral-10: #191c1d;
--color-neutral-20: #2d3132;
--color-neutral-30: #444748;
--color-neutral-40: #5c5f60;
--color-neutral-50: #747778;
--color-neutral-60: #8e9192;
--color-neutral-70: #a9acac;
--color-neutral-80: #c4c7c7;
--color-neutral-90: #e0e3e3;
--color-neutral-95: #eff1f1;
--color-neutral-99: #f7f8f8;
--color-neutral-variant-10: #1b1b22;
--color-neutral-variant-20: #302f38;
--color-neutral-variant-30: #47464e;
--color-neutral-variant-40: #5f5d67;
--color-neutral-variant-50: #78767f;
--color-neutral-variant-60: #928f9a;
--color-neutral-variant-70: #adaab4;
--color-neutral-variant-80: #c9c5d0;
--color-neutral-variant-90: #e5e1ec;
--color-neutral-variant-95: #f3effa;
--color-neutral-variant-99: #fffbff;
--color-success-10: #002106;
--color-success-20: #00390b;
--color-success-30: #005314;
--color-success-40: #116d26;
--color-success-50: #32873d;
--color-success-60: #4ea254;
--color-success-70: #68be6c;
--color-success-80: #83da85;
--color-success-90: #9fe79f;
--color-success-95: #bdefbd;
--color-success-99: #ebf9eb;
--color-alert-10: #2b1700;
--color-alert-20: #472a00;
--color-alert-30: #663e00;
--color-alert-40: #865300;
--color-alert-50: #a76900;
--color-alert-60: #ca8000;
--color-alert-70: #eb9918;
--color-alert-80: #ffb95a;
--color-alert-90: #ffddb5;
--color-alert-95: #ffeedc;
--color-alert-99: #fff5eb;
// color aliases
--color-primary: var(--color-primary-40);
--color-on-primary: var(--color-all-100);
--color-primary-container: var(--color-primary-90);
--color-on-primary-container: var(--color-primary-10);
--color-secondary: var(--color-secondary-40);
--color-on-secondary: var(--color-all-100);
--color-secondary-container: var(--color-secondary-30);
--color-on-secondary-container: var(--color-secondary-10);
--color-tertiary: var(--color-tertiary-40);
--color-on-tertiary: var(--color-all-100);
--color-tertiary-container: var(--color-tertiary-90);
--color-on-tertiary-container: var(--color-tertiary-10);
--color-error: var(--color-error-40);
feat(console): implement tag component (#3853)
2023-05-16 22:30:08 -05:00
--color-error-hover: var(--color-error-50);
--color-error-container: var(--color-error-95);
--color-on-error-container: var(--color-error-50);
--color-alert-container: var(--color-alert-95);
--color-on-alert-container: var(--color-alert-70);
--color-success-container: var(--color-success-99);
--color-on-success-container: var(--color-success-70);
--color-info-container: var(--color-neutral-variant-90);
--color-on-info-container: var(--color-neutral-variant-60);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
--color-background: var(--color-neutral-99);
--color-on-background: var(--color-neutral-10);
--color-surface: var(--color-neutral-99);
--color-surface-1: #ecebf6; // Neutral-99 + 2% Neutral-Variant-50 + 5% Primary-40
--color-surface-2: #e8e6f6; // Neutral-99 + 2% Neutral-Variant-50 + 8% Primary-40
--color-surface-3: #e3e0f6; // Neutral-99 + 2% Neutral-Variant-50 + 11% Primary-40
--color-surface-4: #dfdaf5; // Neutral-99 + 2% Neutral-Variant-50 + 14% Primary-40
--color-surface-5: #dcd6f5; // Neutral-99 + 2% Neutral-Variant-50 + 16% Primary-40
--color-on-surface: var(--color-neutral-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-text-link: var(--color-primary-40);
--color-text-secondary: var(--color-neutral-50);
--color-placeholder: var(--color-neutral-70);
--color-border: var(--color-neutral-80);
--color-divider: var(--color-neutral-90);
--color-disabled: var(--color-neutral-80);
--color-base: var(--color-surface-1);
--color-layer-1: var(--color-all-100);
--color-layer-2: var(--color-neutral-95);
--color-float: var(--color-all-100);
--color-layer-light: var(--color-neutral-99);
--color-inverse-surface: var(--color-neutral-20);
--color-inverse-on-surface: var(--color-neutral-95);
--color-inverse-primary: var(--color-primary-50);
--color-shadow: var(--color-all-100);
--color-white: #fff;
--color-button-icon: var(--color-primary-80);
--color-icon-background: var(--color-neutral-variant-95);
--color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
--color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
--color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
--color-hover-variant: rgba(93, 52, 242, 8%); // 8% Primary-40
--color-pressed-variant: rgba(93, 52, 242, 12%); // 12% Primary-40
--color-focused-variant: rgba(93, 52, 242, 16%); // 16% Primary-40
chore(console,phrases,toolkit): polish ui styles and phrases (#4068) * chore(console,phrases,toolkit): polish ui styles and phrases * chore(phrases): use settings key for create tenant modal for ssot * chore(phrases): add i18n for docs and help button text * chore(phrases): merge tenants and tenant_settings phrases file * chore(phrases): use tenant phrases for delete modal content
2023-06-21 02:25:23 -05:00
--color-env-tag-development: rgba(93, 52, 242, 15%);
--color-env-tag-staging: rgba(255, 185, 90, 35%);
--color-env-tag-production: rgba(131, 218, 133, 35%);
feat(console): init organization table
2023-10-23 01:32:17 -05:00
--color-specific-icon-bg: #f3effa;
style: update mfa-related styles (#4793)
2023-10-31 02:30:51 -05:00
--color-specific-toggle-off-enable: var(--color-neutral-90);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
// Shadows
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
--shadow-2-reversed: 0 -4px 12px rgba(0, 0, 0, 12%);
--shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
// Client specific variables (not available in design system)
refactor(console): checkbox component (#2717)
2022-12-25 12:54:59 -05:00
--color-checkbox-disabled-background: var(--color-neutral-95);
--color-checkbox-checked-disabled-background: var(--color-primary-80);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
--color-danger-toast-background: var(--color-error-95);
--color-danger-focused: rgba(186, 27, 27, 16%); // 16% Error-40
--color-tooltip-background: #34353f; // dark theme Surface-4
--color-tooltip-text: var(--color-neutral-99);
--color-overlay: rgba(0, 0, 0, 30%);
refactor(console): support using keyboard to remove option (#4824) * refactor(console): support using keyboard to remove option * refactor(console): update multi-select option focused color
2023-11-08 23:35:35 -05:00
--color-overlay-default-focused: rgba(25, 28, 29, 16%);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
--color-drawer-overlay: rgba(0, 0, 0, 40%);
--color-guide-dropdown-background: var(--color-white);
--color-guide-dropdown-border: var(--color-border);
--color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
style(console): add color token for upsell tags (#4266)
2023-07-31 03:27:37 -05:00
--color-specific-tag-upsell: var(--color-primary-50);
style(console): update disable style of switch component (#4667)
2023-10-16 04:17:40 -05:00
--color-specific-toggle-thumb-disabled: #ffffffb3;
feat(console): guide modal v2
2023-08-14 02:05:41 -05:00
// Background
--color-bg-body-base: var(--color-neutral-95);
--color-bg-body: var(--color-neutral-100);
--color-bg-layer-1: var(--color-static-white);
--color-bg-layer-2: var(--color-neutral-95);
--color-bg-body-overlay: var(--color-neutral-100);
--color-bg-float-base: var(--color-neutral-variant-90);
--color-bg-float: var(--color-neutral-100);
--color-bg-float-overlay: var(--color-neutral-100);
--color-bg-mask: rgba(0, 0, 0, 40%); // 4% --color-neutral-0
--color-bg-toast: var(--color-neutral-20);
--color-bg-state-unselected: var(--color-neutral-90);
--color-bg-state-disabled: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
feat(console): add console UI for private keys rotation (#4632)
2023-10-11 03:11:22 -05:00
--color-bg-info-tag: rgba(229, 225, 236, 80%); // 80% --color-neutral-variant-90
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
}
@mixin dark {
// tonal palettes
--color-all-0: #fff;
--color-all-100: #000;
--color-primary-10: #fffbff;
--color-primary-20: #f5eeff;
--color-primary-30: #e6deff;
--color-primary-40: #cabeff;
--color-primary-50: #af9eff;
--color-primary-60: #947dff;
--color-primary-70: #7958ff;
--color-primary-80: #5d34f2;
--color-primary-90: #4300da;
--color-primary-95: #2d009d;
--color-primary-99: #190064;
--color-secondary-10: #fffbf7;
--color-secondary-20: #fff480;
--color-secondary-30: #f4e560;
--color-secondary-40: #d7c947;
--color-secondary-50: #baad2d;
--color-secondary-60: #9f930d;
--color-secondary-70: #847900;
--color-secondary-80: #695f00;
--color-secondary-90: #4f4700;
--color-secondary-95: #373100;
--color-secondary-99: #201c00;
--color-tertiary-10: #fcfcfc;
--color-tertiary-20: #ffeafe;
--color-tertiary-30: #ffd5ff;
--color-tertiary-40: #faabff;
--color-tertiary-50: #f07eff;
--color-tertiary-60: #d361e7;
--color-tertiary-70: #b545ca;
--color-tertiary-80: #9927af;
--color-tertiary-90: #7b0093;
--color-tertiary-95: #560068;
--color-tertiary-99: #350041;
--color-error-10: #fcfcfc;
--color-error-20: #ffede9;
--color-error-30: #ffdad4;
--color-error-40: #ffb4a9;
--color-error-50: #ff897a;
--color-error-60: #ff5449;
--color-error-70: #dd3730;
--color-error-80: #ba1b1b;
--color-error-90: #930006;
--color-error-95: #680003;
--color-error-99: #410001;
--color-neutral-10: #f7f8f8;
--color-neutral-20: #eff1f1;
--color-neutral-30: #e0e3e3;
--color-neutral-40: #c4c7c7;
--color-neutral-50: #a9acac;
--color-neutral-60: #8e9192;
--color-neutral-70: #747778;
--color-neutral-80: #5c5f60;
--color-neutral-90: #444748;
--color-neutral-95: #2d3132;
--color-neutral-99: #191c1d;
--color-neutral-variant-10: #fffbff;
--color-neutral-variant-20: #f3effa;
--color-neutral-variant-30: #e5e1ec;
--color-neutral-variant-40: #c9c5d0;
--color-neutral-variant-50: #adaab4;
--color-neutral-variant-60: #928f9a;
--color-neutral-variant-70: #78767f;
--color-neutral-variant-80: #5f5d67;
--color-neutral-variant-90: #47464e;
--color-neutral-variant-95: #302f38;
--color-neutral-variant-99: #1b1b22;
--color-success-10: #ebf9eb;
--color-success-20: #bdefbd;
--color-success-30: #9fe79f;
--color-success-40: #83da85;
--color-success-50: #68be6c;
--color-success-60: #4ea254;
--color-success-70: #32873d;
--color-success-80: #116d26;
--color-success-90: #005314;
--color-success-95: #00390b;
--color-success-99: #002106;
--color-alert-10: #fff5eb;
--color-alert-20: #ffeedc;
--color-alert-30: #ffddb5;
--color-alert-40: #ffb95a;
--color-alert-50: #eb9918;
--color-alert-60: #ca8000;
--color-alert-70: #a76900;
--color-alert-80: #865300;
--color-alert-90: #663e00;
--color-alert-95: #472a00;
--color-alert-99: #2b1700;
// color aliases
--color-primary: var(--color-primary-70);
--color-on-primary: var(--color-all-0);
--color-primary-container: var(--color-primary-30);
--color-on-primary-container: var(--color-primary-30);
--color-secondary: var(--color-secondary-70);
--color-on-secondary: var(--color-all-0);
--color-secondary-container: var(--color-secondary-90);
--color-on-secondary-container: var(--color-secondary-30);
--color-tertiary: var(--color-tertiary-70);
--color-on-tertiary: var(--color-all-0);
--color-tertiary-container: var(--color-tertiary-90);
--color-on-tertiary-container: var(--color-tertiary-30);
--color-error: var(--color-error-70);
feat(console): implement tag component (#3853)
2023-05-16 22:30:08 -05:00
--color-error-hover: var(--color-error-60);
--color-error-container: var(--color-error-95);
--color-on-error-container: var(--color-error-70);
style(console): fix demo tag background color (#3503)
2023-03-19 02:27:41 -05:00
--color-alert-container: var(--color-alert-90);
feat(console): implement tag component (#3853)
2023-05-16 22:30:08 -05:00
--color-on-alert-container: var(--color-alert-60);
--color-success-container: var(--color-success-90);
--color-on-success-container: var(--color-success-60);
--color-info-container: var(--color-neutral-variant-90);
--color-on-info-container: var(--color-neutral-variant-70);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
--color-background: var(--color-neutral-99);
--color-on-background: var(--color-neutral-10);
--color-surface: var(--color-neutral-99);
--color-surface-1: #25272b; // Neutral-99 + 2% Neutral-40 + 5% Primary-80
--color-surface-2: #2a2c32; // Neutral-99 + 2% Neutral-40 + 8% Primary-80
--color-surface-3: #2f3039; // Neutral-99 + 2% Neutral-40 + 11% Primary-80
--color-surface-4: #34353f; // Neutral-99 + 2% Neutral-40 + 14% Primary-80
--color-surface-5: #383844; // Neutral-99 + 2% Neutral-40 + 16% Primary-80
--color-on-surface: var(--color-neutral-10);
--color-surface-variant: var(--color-neutral-variant-90);
--color-on-surface-variant: var(--color-neutral-variant-40);
--color-outline: var(--color-neutral-variant-60);
--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-text-link: var(--color-primary-40);
--color-text-secondary: var(--color-neutral-50);
--color-placeholder: var(--color-neutral-70);
--color-border: var(--color-neutral-80);
--color-divider: var(--color-neutral-90);
--color-disabled: var(--color-neutral-80);
--color-base: var(--color-surface);
--color-layer-1: var(--color-surface-2);
--color-layer-2: var(--color-surface-4);
--color-float: var(--color-surface-4);
--color-layer-light: var(--color-surface-4);
--color-inverse-surface: var(--color-neutral-20);
--color-inverse-on-surface: var(--color-neutral-95);
--color-inverse-primary: var(--color-primary-80);
--color-shadow: var(--color-all-100);
--color-white: #fff;
--color-button-icon: var(--color-primary-20);
--color-icon-background: #3a3b59;
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
--color-hover-variant: rgba(202, 190, 255, 8%); // 8% Primary-40
--color-pressed-variant: rgba(202, 190, 255, 12%); // 12% Primary-40
--color-focused-variant: rgba(202, 190, 255, 16%); // 16% Primary-40
feat(console): add tenant list dropdown (#3988)
2023-06-13 03:06:26 -05:00
--color-env-tag-development: rgba(202, 190, 255, 32%);
--color-env-tag-staging: rgba(235, 153, 24, 36%);
--color-env-tag-production: rgba(104, 190, 108, 36%);
feat(console): init organization table
2023-10-23 01:32:17 -05:00
--color-specific-icon-bg: rgba(247, 248, 248, 12%);
style: update mfa-related styles (#4793)
2023-10-31 02:30:51 -05:00
--color-specific-toggle-off-enable: var(--color-neutral-90);
feat(console): add tenant list dropdown (#3988)
2023-06-13 03:06:26 -05:00
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
// Shadows
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
--shadow-2-reversed: 0 -4px 12px rgba(0, 0, 0, 12%);
--shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
// Client specific variables (not available in design system)
refactor(console): checkbox component (#2717)
2022-12-25 12:54:59 -05:00
--color-checkbox-disabled-background: rgba(247, 248, 248, 8%);
--color-checkbox-checked-disabled-background: var(--color-primary-40);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
--color-danger-toast-background: var(--color-error-99);
--color-danger-focused: rgba(255, 180, 169, 16%); // 16% Error-40
--color-tooltip-background: var(--color-surface-4);
--color-tooltip-text: var(--color-neutral-10);
chore(console,phrases,toolkit): polish ui styles and phrases (#4068) * chore(console,phrases,toolkit): polish ui styles and phrases * chore(phrases): use settings key for create tenant modal for ssot * chore(phrases): add i18n for docs and help button text * chore(phrases): merge tenants and tenant_settings phrases file * chore(phrases): use tenant phrases for delete modal content
2023-06-21 02:25:23 -05:00
--color-overlay: rgba(0, 0, 0, 70%); // 70% Neutral-100
refactor(console): support using keyboard to remove option (#4824) * refactor(console): support using keyboard to remove option * refactor(console): update multi-select option focused color
2023-11-08 23:35:35 -05:00
--color-overlay-default-focused: rgba(247, 248, 248, 16%);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
--color-drawer-overlay: rgba(0, 0, 0, 60%);
--color-guide-dropdown-background: var(--color-neutral-variant-80);
--color-guide-dropdown-border: var(--color-neutral-variant-70);
--color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
style(console): add color token for upsell tags (#4266)
2023-07-31 03:27:37 -05:00
--color-specific-tag-upsell: var(--color-primary-70);
style(console): update disable style of switch component (#4667)
2023-10-16 04:17:40 -05:00
--color-specific-toggle-thumb-disabled: #ffffff4d;
feat(console): guide modal v2
2023-08-14 02:05:41 -05:00
// Background
--color-bg-body-base: var(--color-neutral-100);
--color-bg-body: var(--color-surface);
--color-bg-body-overlay: var(--color-surface-2);
--color-bg-layer-1:
linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
#191c1d;
--color-bg-layer-2: var(--color-surface-4);
--color-bg-float-base: var(--color-neutral-100);
--color-bg-float: var(--color-surface-3);
--color-bg-float-overlay: var(--color-surface-4);
--color-bg-mask: rgba(0, 0, 0, 60%); // 60% --color-neutral-100;
--color-bg-toast: var(--color-neutral-80);
--color-bg-state-unselected: var(--color-neutral-90);
--color-bg-state-disabled: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
feat(console): add console UI for private keys rotation (#4632)
2023-10-11 03:11:22 -05:00
--color-bg-info-tag: var(--color-neutral-variant-90);
refactor: bring back toolkit packages
2022-12-14 00:23:59 -05:00
}
Reference in a new issue Copy permalink