mirror of
https://github.com/logto-io/logto.git
synced 2025-02-24 22:05:56 -05:00
refactor(console): improve dark theme styles
This commit is contained in:
Charles Zhao
parent
542d878231
commit
1b88de4922
16 changed files with 131 additions and 107 deletions
|
|
@ -11,7 +11,7 @@
|
|||
&.contained,
|
||||
&.border {
|
||||
padding: _.unit(2) _.unit(3);
|
||||
background: var(--color-inverse-on-surface);
|
||||
background: var(--color-layer-2);
|
||||
}
|
||||
|
||||
&.border {
|
||||
|
|
@ -27,11 +27,7 @@
|
|||
> svg {
|
||||
margin-left: _.unit(3);
|
||||
cursor: pointer;
|
||||
fill: var(--color-caption);
|
||||
|
||||
&:hover {
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
fill: var(--color-icon);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.item {
|
||||
padding: 6px _.unit(2);
|
||||
padding: _.unit(2);
|
||||
border-radius: _.unit(2);
|
||||
list-style: none;
|
||||
font: var(--font-body-medium);
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-neutral-95);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: var(--color-error-40);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.content {
|
||||
background: var(--color-layer-1);
|
||||
box-shadow: var(--shadow-2);
|
||||
border-radius: _.unit(2);
|
||||
position: absolute;
|
||||
|
||||
&.onTop {
|
||||
|
|
@ -15,10 +13,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropdownContainer {
|
||||
background: var(--color-float);
|
||||
border: 1px solid var(--color-divider);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: _.unit(4) _.unit(3) 0 _.unit(3);
|
||||
font: var(--font-subhead-cap-small);
|
||||
padding: _.unit(3);
|
||||
font: var(--font-subhead-cap);
|
||||
color: var(--color-caption);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const Dropdown = ({
|
|||
onRequestClose={onClose}
|
||||
onAfterOpen={mutate}
|
||||
>
|
||||
<div ref={overlayRef}>
|
||||
<div ref={overlayRef} className={styles.dropdownContainer}>
|
||||
{title && <div className={classNames(styles.title, titleClassName)}>{title}</div>}
|
||||
<ul className={classNames(styles.list, className)} onClick={onClose}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
color: var(--color-primary);
|
||||
background: var(--color-surface-5);
|
||||
color: var(--color-text-link);
|
||||
background: var(--color-focused-variant);
|
||||
font: var(--font-title-medium);
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
min-width: dim.$modal-layout-width-small;
|
||||
padding: _.unit(6);
|
||||
margin: 0 _.unit(6);
|
||||
border: 1px solid var(--color-divider);
|
||||
box-shadow: var(--shadow-3);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -8,87 +8,91 @@
|
|||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card {
|
||||
.card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 _.unit(-8) _.unit(-8) 0;
|
||||
|
||||
> .radio {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
max-width: 230px;
|
||||
padding: _.unit(5);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 _.unit(-8) _.unit(-8) 0;
|
||||
flex-direction: column;
|
||||
border-radius: _.unit(4);
|
||||
border: 1px solid transparent;
|
||||
outline: 1px solid var(--color-neutral-90);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin: 0 _.unit(8) _.unit(8) 0;
|
||||
|
||||
> .radio {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
max-width: 220px;
|
||||
padding: _.unit(5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: _.unit(4);
|
||||
border: 1px solid transparent;
|
||||
outline: 1px solid var(--color-neutral-90);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin: 0 _.unit(8) _.unit(8) 0;
|
||||
&:focus {
|
||||
outline: 1px solid var(--color-primary);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: 1px solid var(--color-primary);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-layer-2);
|
||||
}
|
||||
|
||||
svg {
|
||||
opacity: 0%;
|
||||
position: absolute;
|
||||
right: _.unit(5);
|
||||
top: _.unit(5);
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-color: var(--color-primary);
|
||||
outline: 1px solid var(--color-primary);
|
||||
|
||||
svg {
|
||||
opacity: 0%;
|
||||
position: absolute;
|
||||
right: _.unit(5);
|
||||
top: _.unit(5);
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-color: var(--color-primary);
|
||||
outline: 1px solid var(--color-primary);
|
||||
|
||||
svg {
|
||||
opacity: 100%;
|
||||
}
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.plain {
|
||||
font: var(--font-body-medium);
|
||||
.plain {
|
||||
font: var(--font-body-medium);
|
||||
|
||||
> .radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
> .radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: _.unit(2);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: _.unit(2);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
.indicator {
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-neutral-60);
|
||||
display: inline-block;
|
||||
margin-right: _.unit(2);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--color-layer-1);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-neutral-60);
|
||||
display: inline-block;
|
||||
margin-right: _.unit(2);
|
||||
border: 2px solid var(--color-layer-1);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.indicator {
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
background: var(--color-layer-1);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-layer-1);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.indicator {
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&::before {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
border-color: var(--color-error);
|
||||
|
||||
&.open {
|
||||
outline-color: var(--color-error-80);
|
||||
outline-color: var(--color-danger-focused);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,19 +13,11 @@
|
|||
fill: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-primary-95);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-30);
|
||||
|
||||
svg {
|
||||
fill: var(--color-primary-30);
|
||||
}
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color-primary-80);
|
||||
outline: 2px solid var(--color-focused-variant);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
border-color: var(--color-error);
|
||||
|
||||
&:focus-within {
|
||||
outline-color: var(--color-error-80);
|
||||
outline-color: var(--color-danger-focused);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
.tooltip {
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
background: var(--color-on-background);
|
||||
color: var(--color-background);
|
||||
background: var(--color-tooltip-background);
|
||||
color: var(--color-tooltip-text);
|
||||
box-shadow: var(--shadow-1);
|
||||
padding: _.unit(2) _.unit(3);
|
||||
font: var(--font-body-medium);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.radioGroup {
|
||||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.error {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-error);
|
||||
|
|
|
|||
|
|
@ -98,7 +98,14 @@ const CreateForm = ({ onClose }: Props) => {
|
|||
>
|
||||
<form>
|
||||
<FormField title="admin_console.applications.select_application_type">
|
||||
<RadioGroup ref={ref} name={name} value={value} type="card" onChange={onChange}>
|
||||
<RadioGroup
|
||||
ref={ref}
|
||||
className={styles.radioGroup}
|
||||
name={name}
|
||||
value={value}
|
||||
type="card"
|
||||
onChange={onChange}
|
||||
>
|
||||
{Object.values(ApplicationType).map((value) => (
|
||||
<Radio key={value} value={value}>
|
||||
<TypeDescription
|
||||
|
|
|
|||
|
|
@ -41,11 +41,16 @@
|
|||
width: 20px;
|
||||
height: 20px;
|
||||
font: var(--font-subhead-cap);
|
||||
|
||||
> svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownItem {
|
||||
height: 44px;
|
||||
padding: 0 _.unit(5) 0 _.unit(4);
|
||||
border-top: 1px solid var(--color-neutral-95);
|
||||
border-top: 1px solid var(--color-hover);
|
||||
border-radius: unset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@
|
|||
--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-inverse-surface: var(--color-neutral-20);
|
||||
--color-inverse-on-surface: var(--color-neutral-95);
|
||||
--color-inverse-primary: var(--color-primary-80);
|
||||
|
|
@ -146,13 +147,16 @@
|
|||
--color-focused-variant: rgba(93, 52, 242, 16%); // 16% Primary-40
|
||||
|
||||
// Shadows
|
||||
--shadow-1: 0 4px 8px rgba(66, 41, 159, 8%);
|
||||
--shadow-2: 0 4px 12px rgba(66, 41, 159, 12%);
|
||||
--shadow-2-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
|
||||
--shadow-3: 0 4px 16px rgba(66, 41, 159, 16%);
|
||||
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
|
||||
--shadow-2: 0 2px 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)
|
||||
--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%);
|
||||
--color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
|
||||
}
|
||||
|
||||
|
|
@ -291,7 +295,8 @@
|
|||
--color-disabled: var(--color-neutral-80);
|
||||
--color-base: var(--color-surface);
|
||||
--color-layer-1: var(--color-surface-2);
|
||||
--color-layer-2: var(--color-surface-3);
|
||||
--color-layer-2: var(--color-surface-4);
|
||||
--color-float: 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);
|
||||
|
|
@ -304,12 +309,15 @@
|
|||
--color-focused-variant: rgba(202, 190, 255, 16%); // 16% Primary-40
|
||||
|
||||
// Shadows
|
||||
--shadow-1: 0 4px 8px rgba(66, 41, 159, 8%);
|
||||
--shadow-2: 0 4px 12px rgba(66, 41, 159, 12%);
|
||||
--shadow-2-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
|
||||
--shadow-3: 0 4px 16px rgba(66, 41, 159, 16%);
|
||||
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
|
||||
--shadow-2: 0 2px 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)
|
||||
--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);
|
||||
--color-overlay: rgba(0, 0, 0, 30%);
|
||||
--color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, 40%);
|
||||
background: var(--color-overlay);
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
padding: _.unit(12) 0;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue