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

refactor(console): improve dark theme styles

Browse source
This commit is contained in:
Charles Zhao 2022-05-18 22:32:08 +08:00
parent 542d878231
commit 1b88de4922
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
16 changed files with 131 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/console/src/components/CopyToClipboard/index.module.scss
View file

@ -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);
}
}

6
packages/console/src/components/Dropdown/DropdownItem.module.scss
View file

@ -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 {

14
packages/console/src/components/Dropdown/index.module.scss
View file

@ -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 {

2
packages/console/src/components/Dropdown/index.tsx
View file

@ -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}

4
packages/console/src/components/Index/index.module.scss
View file

@ -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 {

2
packages/console/src/components/ModalLayout/index.module.scss
View file

@ -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;

134
packages/console/src/components/RadioGroup/index.module.scss
View file

@ -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);
}
}
}

2
packages/console/src/components/Select/index.module.scss
View file

@ -32,7 +32,7 @@
border-color: var(--color-error);
&.open {
outline-color: var(--color-error-80);
outline-color: var(--color-danger-focused);
}
}

12
packages/console/src/components/TextButton/index.module.scss
View file

@ -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);
}
}

2
packages/console/src/components/TextInput/index.module.scss
View file

@ -76,7 +76,7 @@
border-color: var(--color-error);
&:focus-within {
outline-color: var(--color-error-80);
outline-color: var(--color-danger-focused);
}
}
}

4
packages/console/src/components/Tooltip/index.module.scss
View file

@ -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);

4
packages/console/src/pages/Applications/components/CreateForm/index.module.scss
View file

@ -1,5 +1,9 @@
@use '@/scss/underscore' as _;
.radioGroup {
margin-top: _.unit(2);
}
.error {
font: var(--font-body-medium);
color: var(--color-error);

9
packages/console/src/pages/Applications/components/CreateForm/index.tsx
View file

@ -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

7
packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss
View file

@ -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;
}

26
packages/console/src/scss/_colors.scss
View file

@ -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
packages/console/src/scss/modal.module.scss
View file

@ -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;