mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
Merge pull request #2240 from logto-io/simeng-log-4332
refactor(ui): refactor ui style system
This commit is contained in:
simeng-li
GitHub
commit
8caabd9c8c
44 changed files with 321 additions and 561 deletions
|
|
@ -1,9 +0,0 @@
|
|||
.preview {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
main {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,12 @@ $logo-height: 60px;
|
|||
@include _.image-align-center;
|
||||
}
|
||||
|
||||
.headline {
|
||||
text-align: center;
|
||||
color: var(--color-type-primary);
|
||||
@include _.multi-line-ellipsis(2);
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.container {
|
||||
height: 15vh;
|
||||
|
|
@ -25,8 +31,7 @@ $logo-height: 60px;
|
|||
}
|
||||
|
||||
.headline {
|
||||
font: var(--font-body);
|
||||
color: var(--color-text);
|
||||
font: var(--font-title-1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,9 +45,6 @@ $logo-height: 60px;
|
|||
}
|
||||
|
||||
.headline {
|
||||
font: var(--font-title-small);
|
||||
color: var(--color-text);
|
||||
text-align: center;
|
||||
@include _.multi-line-ellipsis(2);
|
||||
font: var(--font-title-2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
cursor: pointer;
|
||||
|
||||
> svg {
|
||||
color: var(--color-icon);
|
||||
color: var(--color-type-secondary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-overlay-neutral-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:global(body.desktop) {
|
||||
.iconButton {
|
||||
&:active {
|
||||
background: var(--color-pressed);
|
||||
}
|
||||
|
||||
&:hover:not(:active) {
|
||||
background: var(--color-hover);
|
||||
background: var(--color-overlay-neutral-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.socialButton {
|
||||
border-radius: 50%;
|
||||
@include _.flex-column;
|
||||
background: var(--color-layer);
|
||||
background: var(--color-bg-layer-2);
|
||||
border: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.inverse {
|
||||
background: var(--color-inverse-social-bg);
|
||||
background: var(--color-type-primary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -20,25 +20,3 @@
|
|||
height: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
.socialButton {
|
||||
&:not(.inverse):active {
|
||||
background: var(--color-pressed);
|
||||
}
|
||||
|
||||
&:not(.inverse):hover:not(:active) {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.inverse {
|
||||
&:active {
|
||||
background: var(--color-inverse-social-pressed);
|
||||
}
|
||||
|
||||
&:hover:not(:active) {
|
||||
background: var(--color-inverse-social-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
height: 44px;
|
||||
padding: 0 _.unit(4);
|
||||
border-radius: var(--radius);
|
||||
font: var(--font-body-bold);
|
||||
cursor: pointer;
|
||||
font: var(--font-label-1);
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.2s ease-in-out;
|
||||
|
|
@ -20,89 +20,85 @@
|
|||
}
|
||||
|
||||
.small {
|
||||
min-width: 50px;
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
border: none;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-button-text);
|
||||
background: var(--color-brand-default);
|
||||
color: var(--color-static-white);
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background: var(--color-bg-state-disabled);
|
||||
color: var(--color-type-disable);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-brand-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
border: _.border(var(--color-border));
|
||||
border: _.border(var(--color-line-border));
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
color: var(--color-type-primary);
|
||||
|
||||
&.disabled {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-disabled);
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
border-color: var(--color-type-disable);
|
||||
color: var(--color-type-disable);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-overlay-neutral-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
.outline {
|
||||
border: _.border(var(--color-primary));
|
||||
border: _.border(var(--color-brand-default));
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
color: var(--color-type-link);
|
||||
|
||||
&.disabled {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-focused-variant);
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
border-color: var(--color-type-disable);
|
||||
color: var(--color-type-disable);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-pressed-variant);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(:active):hover {
|
||||
background: var(--color-hover-variant);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.primary {
|
||||
&.disabled {
|
||||
background: var(--color-layer);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
background: var(--color-overlay-brand-pressed);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
.primary {
|
||||
&.disabled {
|
||||
background: var(--color-inverse-on-surface);
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-focused-variant);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-primary-pressed);
|
||||
outline: 3px solid var(--color-overlay-brand-focused);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(:active):hover {
|
||||
background: var(--color-primary-hover);
|
||||
background: var(--color-brand-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-focused);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-pressed);
|
||||
outline: 3px solid var(--color-overlay-neutral-focused);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(:active):hover {
|
||||
background: var(--color-hover);
|
||||
background: var(--color-overlay-neutral-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.outline {
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-overlay-brand-focused);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(:active):hover {
|
||||
background: var(--color-overlay-brand-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
display: none;
|
||||
|
||||
&:nth-child(1) {
|
||||
color: var(--color-icon);
|
||||
color: var(--color-type-secondary);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-brand-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,14 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
background: var(--color-dialogue);
|
||||
border: _.border(var(--color-divider));
|
||||
background: var(--color-bg-float-overlay);
|
||||
border-radius: 16px;
|
||||
padding: _.unit(6);
|
||||
}
|
||||
|
||||
.header {
|
||||
font: var(--font-header);
|
||||
color: var(--color-text);
|
||||
font: var(--font-title-1);
|
||||
color: var(--color-type-primary);
|
||||
@include _.flex-row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: _.unit(4);
|
||||
|
|
@ -34,8 +33,8 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
font: var(--font-body);
|
||||
color: var(--color-text);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-type-primary);
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
|
||||
.container {
|
||||
padding: _.unit(5);
|
||||
background: var(--color-dialogue);
|
||||
background: var(--color-bg-body-overlay);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
font: var(--font-body);
|
||||
color: var(--color-text);
|
||||
font: var(--font-body-1);
|
||||
color: var(--color-type-primary);
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
.footer {
|
||||
margin-top: 0;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
border-top: 1px solid var(--color-line-divider);
|
||||
padding: _.unit(5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
|
||||
.divider {
|
||||
@include _.flex-row;
|
||||
font: var(--font-body);
|
||||
color: var(--color-caption);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-type-secondary);
|
||||
|
||||
.line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--color-divider);
|
||||
background: var(--color-line-divider);
|
||||
|
||||
&:first-child {
|
||||
margin-right: _.unit(4);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
padding: _.unit(5) _.unit(5) 0;
|
||||
background: var(--color-dialogue);
|
||||
background: var(--color-bg-body-overlay);
|
||||
max-height: 411px;
|
||||
@include _.flex-column(stretch, normal);
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
margin-bottom: _.unit(4);
|
||||
|
||||
svg {
|
||||
color: var(--color-icon);
|
||||
color: var(--color-type-secondary);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
padding: _.unit(1.5) _.unit(2);
|
||||
border-radius: var(--radius);
|
||||
list-style: none;
|
||||
font: var(--font-body);
|
||||
color: var(--color-text);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-type-primary);
|
||||
cursor: pointer;
|
||||
@include _.flex-row;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover);
|
||||
background: var(--color-overlay-neutral-hover);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.content {
|
||||
background: var(--color-dialogue);
|
||||
box-shadow: var(--shadow-2);
|
||||
background: var(--color-bg-float-overlay);
|
||||
box-shadow: var(--color-shadow);
|
||||
border-radius: var(--radius);
|
||||
border: _.border(var(--color-divider));
|
||||
border: _.border(var(--color-line-divider));
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.error {
|
||||
font: var(--font-caption);
|
||||
color: var(--color-error);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-danger-default);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@
|
|||
.wrapper {
|
||||
position: relative;
|
||||
@include _.flex-row;
|
||||
border: _.border();
|
||||
border: _.border(var(--color-line-border));
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-layer);
|
||||
// fix in safari input field line-height issue
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
|
|
@ -19,7 +18,7 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
color: var(--color-icon);
|
||||
color: var(--color-type-secondary);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -28,25 +27,25 @@
|
|||
padding: 0 _.unit(4);
|
||||
flex: 1;
|
||||
background: none;
|
||||
caret-color: var(--color-primary);
|
||||
font: var(--font-body-bold);
|
||||
color: var(--color-text);
|
||||
caret-color: var(--color-brand-default);
|
||||
font: var(--font-body-1);
|
||||
color: var(--color-type-primary);
|
||||
align-self: stretch;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-caption);
|
||||
color: var(--color-type-secondary);
|
||||
}
|
||||
|
||||
// Overwrite webkit auto-fill style
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0 30px var(--color-layer) inset;
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
box-shadow: 0 0 0 30px var(--color-bg-body) inset;
|
||||
-webkit-text-fill-color: var(--color-type-primary);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border: _.border(var(--color-primary));
|
||||
border: _.border(var(--color-brand-default));
|
||||
|
||||
.actionButton {
|
||||
display: block;
|
||||
|
|
@ -59,7 +58,7 @@
|
|||
}
|
||||
|
||||
&.error {
|
||||
border: _.border(var(--color-error));
|
||||
border: _.border(var(--color-danger-default));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,19 +68,11 @@
|
|||
|
||||
:global(body.desktop) {
|
||||
.wrapper {
|
||||
border: _.border(var(--color-border));
|
||||
border-radius: 6px;
|
||||
outline: 3px solid transparent;
|
||||
background: var(--color-surface);
|
||||
|
||||
input {
|
||||
font: var(--font-body);
|
||||
|
||||
// Overwrite webkit auto-fill style
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0 30px var(--color-surface) inset;
|
||||
-webkit-text-fill-color: var(--color-text);
|
||||
}
|
||||
font: var(--font-body-2);
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
|
|
@ -90,12 +81,12 @@
|
|||
}
|
||||
|
||||
&.error {
|
||||
border: _.border(var(--color-error));
|
||||
border: _.border(var(--color-danger-default));
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
outline-color: var(--color-focused-variant);
|
||||
border: _.border(var(--color-brand-default));
|
||||
outline-color: var(--color-overlay-brand-focused);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.countryCodeSelector {
|
||||
color: var(--color-text);
|
||||
font: var(--font-body);
|
||||
color: var(--color-type-primary);
|
||||
border: none;
|
||||
background: none;
|
||||
width: auto;
|
||||
|
|
@ -20,10 +19,6 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
|
||||
option {
|
||||
font: var(--font-body);
|
||||
}
|
||||
}
|
||||
|
||||
+ input {
|
||||
|
|
@ -33,8 +28,14 @@
|
|||
|
||||
:global(body.mobile) {
|
||||
.countryCodeSelector {
|
||||
font: var(--font-label-1);
|
||||
|
||||
> select option {
|
||||
font: var(--font-label-1);
|
||||
}
|
||||
|
||||
> svg {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-brand-default);
|
||||
margin-left: _.unit(1);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -44,8 +45,14 @@
|
|||
|
||||
:global(body.desktop) {
|
||||
.countryCodeSelector {
|
||||
font: var(--font-body-2);
|
||||
|
||||
> select option {
|
||||
font: var(--font-body-2);
|
||||
}
|
||||
|
||||
> svg {
|
||||
color: var(--color-icon);
|
||||
color: var(--color-type-secondary);
|
||||
margin-left: _.unit(2);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--color-overlay);
|
||||
background-color: var(--color-bg-mask);
|
||||
@include _.flex-column;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.loadingIcon {
|
||||
color: var(--color-loading-icon);
|
||||
color: var(--color-type-primary);
|
||||
animation: rotating 1s steps(12, end) infinite;
|
||||
}
|
||||
|
||||
|
|
@ -20,11 +20,11 @@
|
|||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color-toast);
|
||||
background-color: var(--color-bg-toast);
|
||||
@include _.flex-column;
|
||||
|
||||
.loadingIcon {
|
||||
color: var(--color-loading-icon-light);
|
||||
color: var(--color-static-dark-type-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,9 +37,3 @@
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
.container {
|
||||
border: _.border(var(--color-toast-border));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,14 @@
|
|||
justify-content: center;
|
||||
padding: _.unit(3) _.unit(10);
|
||||
position: relative;
|
||||
color: var(--color-type-primary);
|
||||
|
||||
> svg {
|
||||
fill: current-color;
|
||||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-body-bold);
|
||||
font: var(--font-title-3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -22,8 +23,7 @@
|
|||
left: _.unit(-2);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: --color-text;
|
||||
font: var(--font-body-bold);
|
||||
font: var(--font-label-2);
|
||||
@include _.flex-row;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -36,8 +36,6 @@
|
|||
|
||||
:global(body.desktop) {
|
||||
.backButton {
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,10 @@
|
|||
|
||||
.notification {
|
||||
padding: _.unit(3) _.unit(4);
|
||||
font: var(--font-body);
|
||||
color: var(--color-text);
|
||||
background: var(--color-surface-variant);
|
||||
border: _.border(var(--color-border-variant));
|
||||
border-radius: var(--radius);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-type-primary);
|
||||
background: var(--color-alert-99);
|
||||
margin: 0 auto _.unit(2);
|
||||
box-shadow: var(--shadow-1);
|
||||
@include _.flex_row;
|
||||
|
||||
&:focus-visible {
|
||||
|
|
@ -17,7 +14,7 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
color: var(--color-outline);
|
||||
color: var(--color-alert-70);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: _.unit(3);
|
||||
|
|
@ -35,9 +32,13 @@
|
|||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
.notification {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.link {
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-brand-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,19 +8,20 @@
|
|||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: _.unit(2);
|
||||
border: _.border();
|
||||
border: _.border(var(--color-line-border));
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font: var(--font-body);
|
||||
color: var(--color-text);
|
||||
caret-color: var(--color-primary);
|
||||
font: var(--font-label-1);
|
||||
color: var(--color-type-primary);
|
||||
caret-color: var(--color-brand-default);
|
||||
|
||||
&:focus {
|
||||
border: _.border(var(--color-primary));
|
||||
border: _.border(var(--color-brand-default));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-caption);
|
||||
color: var(--color-type-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29,24 +30,15 @@
|
|||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.passcode {
|
||||
input {
|
||||
background: var(--color-layer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
.passcode {
|
||||
input {
|
||||
border: _.border(var(--color-border));
|
||||
font: var(--font-body-2);
|
||||
outline: 3px solid transparent;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
border: _.border(var(--color-primary));
|
||||
outline-color: var(--color-focused-variant);
|
||||
border: _.border(var(--color-brand-default));
|
||||
outline-color: var(--color-overlay-brand-focused);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.checkBox {
|
||||
margin-right: _.unit(2);
|
||||
fill: var(--color-icon);
|
||||
fill: var(--color-type-secondary);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -6,32 +6,26 @@
|
|||
|
||||
|
||||
&.primary {
|
||||
color: var(--color-primary);
|
||||
font: var(--font-body-bold);
|
||||
color: var(--color-brand-default);
|
||||
text-decoration: none;
|
||||
font: var(--font-label-2);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: var(--color-caption);
|
||||
font: var(--font-body);
|
||||
color: var(--color-type-secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:global(body.desktop) {
|
||||
.link {
|
||||
&.primary {
|
||||
font: var(--font-body);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.primary:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&.secondary:hover {
|
||||
color: var(--color-brand-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,11 +15,10 @@
|
|||
margin: 0 auto;
|
||||
padding: _.unit(2) _.unit(4);
|
||||
max-width: 295px;
|
||||
font: var(--font-body);
|
||||
color: var(--color-primary-button-text);
|
||||
font: var(--font-body-1);
|
||||
color: var(--color-static-white);
|
||||
border-radius: var(--radius);
|
||||
background: var(--color-toast);
|
||||
box-shadow: var(--shadow-2);
|
||||
background: var(--color-bg-toast);
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
pointer-events: auto;
|
||||
|
|
@ -44,7 +43,7 @@
|
|||
|
||||
:global(body.desktop) {
|
||||
.toast {
|
||||
border: _.border(var(--color-toast-border));
|
||||
padding: _.unit(3) _.unit(4);
|
||||
box-shadow: var(--color-shadow);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,90 +1,88 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
@use '@/scss/mobile' as mobile;
|
||||
@use '@/scss/desktop' as desktop;
|
||||
@use '@/scss/colors' as colors;
|
||||
@use '@/scss/fonts' as fonts;
|
||||
|
||||
:root {
|
||||
--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;
|
||||
/* Preview Settings */
|
||||
.preview {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
--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;
|
||||
main {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Foundation */
|
||||
body {
|
||||
background-color: var(--color-base);
|
||||
--radius: 8px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
word-break: break-word;
|
||||
@include colors.static;
|
||||
|
||||
&.light {
|
||||
@include colors.light;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
@include colors.dark;
|
||||
}
|
||||
|
||||
@include fonts.fonts;
|
||||
}
|
||||
|
||||
/* Main Layout */
|
||||
.container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-base);
|
||||
color: var(--color-text);
|
||||
font: var(--font-body);
|
||||
color: var(--color-type-primary);
|
||||
overflow: auto;
|
||||
@include _.flex_column(center, normal);
|
||||
}
|
||||
|
||||
.content {
|
||||
.main {
|
||||
@include _.flex_column;
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.placeHolder {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Foundation */
|
||||
:global(body.mobile) {
|
||||
&.light {
|
||||
@include mobile.colors-light-theme;
|
||||
--max-width: 360px;
|
||||
background: var(--color-bg-body);
|
||||
|
||||
.container {
|
||||
background: var(--color-bg-body);
|
||||
font: var(--font-body-1);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
@include mobile.colors-dark-theme;
|
||||
}
|
||||
|
||||
@include mobile.colors-universal;
|
||||
@include mobile.fonts;
|
||||
@include mobile.layout;
|
||||
|
||||
.content {
|
||||
.main {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
padding: _.unit(4) _.unit(5);
|
||||
position: relative;
|
||||
background: var(--color-bg-body);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
&.light {
|
||||
@include desktop.colors-light-theme;
|
||||
--max-width: 400px;
|
||||
background: var(--color-bg-float-base);
|
||||
|
||||
.container {
|
||||
background: var(--color-bg-float-base);
|
||||
font: var(--font-body-2);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
@include desktop.colors-dark-theme;
|
||||
}
|
||||
|
||||
@include desktop.colors-universal;
|
||||
@include desktop.fonts;
|
||||
@include desktop.layout;
|
||||
|
||||
.content {
|
||||
.main {
|
||||
width: 640px;
|
||||
min-height: 640px;
|
||||
position: relative;
|
||||
padding: _.unit(6);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-1);
|
||||
background: var(--color-bg-float);
|
||||
box-shadow: var(--color-shadow);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const AppContent = ({ children }: Props) => {
|
|||
}, [setToast]);
|
||||
|
||||
// Set Primary Color
|
||||
useColorTheme(experienceSettings?.color.primaryColor, experienceSettings?.color.darkPrimaryColor);
|
||||
useColorTheme();
|
||||
|
||||
// Set Theme Mode
|
||||
useEffect(() => {
|
||||
|
|
@ -42,7 +42,7 @@ const AppContent = ({ children }: Props) => {
|
|||
<ConfirmModalProvider>
|
||||
<div className={styles.container}>
|
||||
{platform === 'web' && <div className={styles.placeHolder} />}
|
||||
<main className={styles.content}>{children}</main>
|
||||
<main className={styles.main}>{children}</main>
|
||||
{platform === 'web' && <div className={styles.placeHolder} />}
|
||||
<Toast message={toast} callback={hideToast} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,27 +15,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
font: var(--font-caption);
|
||||
}
|
||||
|
||||
.message {
|
||||
font: var(--font-caption);
|
||||
font: var(--font-body-2);
|
||||
|
||||
> span {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-brand-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.message {
|
||||
color: var(--color-text);
|
||||
color: var(--color-type-primary);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.desktop) {
|
||||
.message {
|
||||
color: var(--color-caption);
|
||||
color: var(--color-type-secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,11 +117,7 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
|
|||
</Trans>
|
||||
</div>
|
||||
) : (
|
||||
<TextLink
|
||||
className={styles.link}
|
||||
text="description.resend_passcode"
|
||||
onClick={resendPasscodeHandler}
|
||||
/>
|
||||
<TextLink text="description.resend_passcode" onClick={resendPasscodeHandler} />
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--color-primary);
|
||||
background-color: var(--color-brand-default);
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,5 @@
|
|||
|
||||
.message {
|
||||
text-align: center;
|
||||
font: var(--font-caption);
|
||||
color: var(--color-caption);
|
||||
@include _.text-hint;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-layer);
|
||||
background: var(--color-bg-layer-2);
|
||||
|
||||
> svg {
|
||||
width: 24px;
|
||||
|
|
|
|||
|
|
@ -1,54 +1,59 @@
|
|||
import { absoluteDarken, absoluteLighten } from '@logto/core-kit';
|
||||
import color from 'color';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useContext } from 'react';
|
||||
|
||||
import { PageContext } from '@/hooks/use-page-context';
|
||||
|
||||
const generateLightColorLibrary = (primaryColor: color) => ({
|
||||
[`--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(),
|
||||
[`--color-brand-default`]: primaryColor.hex(),
|
||||
[`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
|
||||
[`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
|
||||
[`--color-overlay-brand-focused`]: primaryColor.alpha(0.16).string(),
|
||||
[`--color-overlay-brand-hover`]: primaryColor.alpha(0.08).string(),
|
||||
[`--color-overlay-brand-pressed`]: primaryColor.alpha(0.12).string(),
|
||||
});
|
||||
|
||||
const generateDarkColorLibrary = (primaryColor: color) => ({
|
||||
[`--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(),
|
||||
[`--color-brand-default`]: primaryColor.hex(),
|
||||
[`--color-brand-hover`]: absoluteLighten(primaryColor, 10).string(),
|
||||
[`--color-brand-pressed`]: absoluteDarken(primaryColor, 10).string(),
|
||||
[`--color-overlay-brand-focused`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.16).string(),
|
||||
[`--color-overlay-brand-hover`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.08).string(),
|
||||
[`--color-overlay-brand-pressed`]: absoluteLighten(primaryColor, 30).rgb().alpha(0.12).string(),
|
||||
});
|
||||
|
||||
const useColorTheme = (primaryColor?: string, darkPrimaryColor?: string) => {
|
||||
const useColorTheme = () => {
|
||||
const { theme, experienceSettings } = useContext(PageContext);
|
||||
const primaryColor = experienceSettings?.color.primaryColor;
|
||||
const darkPrimaryColor = experienceSettings?.color.darkPrimaryColor;
|
||||
|
||||
useEffect(() => {
|
||||
if (!primaryColor) {
|
||||
return;
|
||||
}
|
||||
|
||||
const lightPrimary = color(primaryColor);
|
||||
const darkPrimary = color(darkPrimaryColor);
|
||||
|
||||
const lightColorLibrary = generateLightColorLibrary(lightPrimary);
|
||||
if (theme === 'light') {
|
||||
const lightColorLibrary = generateLightColorLibrary(lightPrimary);
|
||||
|
||||
for (const [key, value] of Object.entries(lightColorLibrary)) {
|
||||
document.body.style.setProperty(key, value);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const darkPrimary = darkPrimaryColor
|
||||
? color(darkPrimaryColor)
|
||||
: absoluteLighten(lightPrimary, 10);
|
||||
|
||||
const darkColorLibrary = generateDarkColorLibrary(darkPrimary);
|
||||
|
||||
for (const [key, value] of Object.entries(lightColorLibrary)) {
|
||||
document.documentElement.style.setProperty(key, value);
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(darkColorLibrary)) {
|
||||
document.documentElement.style.setProperty(key, value);
|
||||
document.body.style.setProperty(key, value);
|
||||
}
|
||||
}, [darkPrimaryColor, primaryColor]);
|
||||
}, [darkPrimaryColor, primaryColor, theme]);
|
||||
};
|
||||
|
||||
export default useColorTheme;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { ConnectorPlatform } from '@logto/schemas';
|
|||
import { conditionalString } from '@silverhand/essentials';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import * as styles from '@/App.module.scss';
|
||||
import * as styles from '@/containers/AppContent/index.module.scss';
|
||||
import type { Context } from '@/hooks/use-page-context';
|
||||
import initI18n from '@/i18n/init';
|
||||
import { changeLanguage } from '@/i18n/utils';
|
||||
|
|
|
|||
|
|
@ -35,8 +35,7 @@
|
|||
|
||||
:global(body.desktop) {
|
||||
.title {
|
||||
@include _.title;
|
||||
font: var(--font-title-medium);
|
||||
@include _.title-desktop;
|
||||
margin-bottom: _.unit(2);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,13 +9,9 @@
|
|||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: _.unit(6);
|
||||
color: var(--color-caption);
|
||||
@include _.text-hint;
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
|
|
@ -24,6 +20,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
}
|
||||
|
|
@ -34,11 +31,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-medium);
|
||||
@include _.title_desktop;
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: var(--font-caption);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,12 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
margin-bottom: _.unit(1);
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin-bottom: _.unit(6);
|
||||
color: var(--color-caption);
|
||||
@include _.text-hint;
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
|
|
@ -24,8 +23,8 @@
|
|||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.detail {
|
||||
font: var(--font-body);
|
||||
.title {
|
||||
@include _.title;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,10 +34,6 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-medium);
|
||||
}
|
||||
|
||||
.detail {
|
||||
font: var(--font-caption);
|
||||
@include _.title-desktop;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,17 +9,13 @@
|
|||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.container {
|
||||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +26,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-medium);
|
||||
@include _.title-desktop;
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,6 @@
|
|||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.container {
|
||||
|
|
@ -19,6 +16,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
}
|
||||
|
|
@ -29,11 +27,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-medium);
|
||||
@include _.title-desktop;
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: var(--font-caption);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,16 +9,13 @@
|
|||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
}
|
||||
|
||||
:global(body.mobile) {
|
||||
.container {
|
||||
margin-top: _.unit(2);
|
||||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
}
|
||||
|
|
@ -29,7 +26,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-medium);
|
||||
@include _.title-desktop;
|
||||
margin-bottom: _.unit(4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
@include _.title;
|
||||
font: var(--font-title-medium);
|
||||
@include _.title-desktop;
|
||||
margin-bottom: _.unit(8);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
@mixin static {
|
||||
--color-static-white: #fff;
|
||||
--color-static-black: #000;
|
||||
--color-static-dark-type-primary: #f7f8f8; // For loading icon use
|
||||
--color-shadow: 0 4px 8px rgba(0, 0, 0, 2%);
|
||||
}
|
||||
|
||||
@mixin light {
|
||||
|
|
@ -33,27 +35,32 @@
|
|||
--color-brand-40: #5d34f2;
|
||||
--color-brand-50: #7958ff;
|
||||
|
||||
--color-alert-70: #eb9918;
|
||||
--color-alert-99: #fff5eb;
|
||||
|
||||
/* Text & Icon */
|
||||
--color-type-primary: var(--color-neutral-10);
|
||||
--color-type-secondary: var(--color-neutral-50);
|
||||
--color-type-disable: scale-color(var(--color-neutral-10), $alpha: -65%);
|
||||
--color-type-disable: rgba(25, 28, 29, 35%); // 35% --color-neutral-10
|
||||
--color-type-link: var(--color-brand-default);
|
||||
|
||||
/* Line */
|
||||
--color-line-divider: scale-color(var(--color-neutral-10), $alpha: -88%);
|
||||
--color-line-divider: rgba(25, 28, 29, 12%); // 12% --color-neutral-10
|
||||
--color-line-border: var(--color-neutral-80);
|
||||
--color-line-border-transparent: scale-color(var(--color-neutral-10), $alpha: -75%);
|
||||
--color-line-border-transparent: rgba(25, 28, 29, 25%); // 25% --color-neutral-10
|
||||
|
||||
/* Background */
|
||||
--color-bg-base: var(--color-neutral-95);
|
||||
--color-bg-layer-1: var(--color-neutral-100);
|
||||
--color-bg-body-base: var(--color-neutral-95);
|
||||
--color-bg-body: var(--color-neutral-100);
|
||||
--color-bg-layer-2: var(--color-neutral-95);
|
||||
--color-bg-body-overlay: var(--color-neutral-100);
|
||||
--color-bg-float-base: var(--color-neutral-variant-80);
|
||||
--color-bg-float: var(--color-neutral-100);
|
||||
--color-bg-mask: scale-color(var(--color-neutral-0), $alpha: -60%);
|
||||
--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: scale-color(var(--color-neutral-10), -92%);
|
||||
--color-bg-desktop: var(--color-neutral-variant-80);
|
||||
--color-bg-state-disabled: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
|
||||
|
||||
/* Brand */
|
||||
// Note: System brand color. May be overwritten dynamically by js
|
||||
|
|
@ -73,25 +80,25 @@
|
|||
--color-success-disable: var(--color-success-90);
|
||||
|
||||
/* Overlay */
|
||||
--color-overlay-neutral-hover: scale-color(var(--color-neutral-10), -92%);
|
||||
--color-overlay-neutral-pressed: scale-color(var(--color-neutral-10), -88%);
|
||||
--color-overlay-neutral-focused: scale-color(var(--color-neutral-10), -84%);
|
||||
--color-overlay-danger-hover: scale-color(var(--color-danger-40), -92%);
|
||||
--color-overlay-danger-pressed: scale-color(var(--color-danger-40), -88%);
|
||||
--color-overlay-danger-focused: scale-color(var(--color-danger-40), -84%);
|
||||
--color-overlay-neutral-hover: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
|
||||
--color-overlay-neutral-pressed: rgba(25, 28, 29, 12%); // 12% --color-neutral-10
|
||||
--color-overlay-neutral-focused: rgba(25, 28, 29, 16%); // 16% --color-neutral-10
|
||||
--color-overlay-danger-hover: rgba(186, 27, 27, 8%); // 8% --color-danger-40
|
||||
--color-overlay-danger-pressed: rgba(186, 27, 27, 12%); // 12% --color-danger-40
|
||||
--color-overlay-danger-focused: rgba(186, 27, 27, 16%); // 16% --color-danger-40
|
||||
// Note: System brand color. May be overwritten dynamically by js
|
||||
--color-overlay-brand-hover: scale-color(var(--color-brand-40), -92%);
|
||||
--color-overlay-brand-pressed: scale-color(var(--color-brand-40), -88%);
|
||||
--color-overlay-brand-focused: scale-color(var(--color-brand-40), -84%);
|
||||
--color-overlay-brand-hover: rgba(93, 52, 242, 8%); // 8% --color-brand-default
|
||||
--color-overlay-brand-pressed: rgba(93, 52, 242, 12%); // 12% --color-brand-default
|
||||
--color-overlay-brand-focused: rgba(93, 52, 242, 16%); // 16% --color-brand-default
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
/* Color Platte */
|
||||
--color-neutral-0: #fff;
|
||||
--color-neutral-10: #f7f8f8;
|
||||
--color-neutral-20: #f7f8f8;
|
||||
--color-neutral-20: #eff1f1;
|
||||
--color-neutral-50: #a9acac;
|
||||
--color-neutral-80: #a9acac;
|
||||
--color-neutral-80: #5c5f60;
|
||||
--color-neutral-90: #444748;
|
||||
--color-neutral-95: #2d3132;
|
||||
--color-neutral-99: #191c1d;
|
||||
|
|
@ -105,7 +112,7 @@
|
|||
--color-danger-50: #ff897a;
|
||||
--color-danger-60: #ff5449;
|
||||
--color-danger-70: #dd3730;
|
||||
--color-danger-50: #ba1b1b;
|
||||
--color-danger-80: #ba1b1b;
|
||||
|
||||
--color-success-60: #4ea254;
|
||||
--color-success-70: #32873d;
|
||||
|
|
@ -117,6 +124,7 @@
|
|||
--color-brand-50: #af9eff;
|
||||
--color-brand-70: #7958ff;
|
||||
|
||||
--color-surface: var(--color-neutral-99);
|
||||
--color-surface-2:
|
||||
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%)),
|
||||
|
|
@ -126,27 +134,33 @@
|
|||
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
|
||||
#191c1d;
|
||||
|
||||
--color-alert-70: #a76900;
|
||||
--color-alert-99: #2b1700;
|
||||
|
||||
/* Text & Icon */
|
||||
--color-type-primary: var(--color-neutral-10);
|
||||
--color-type-secondary: var(--color-neutral-50);
|
||||
--color-type-disable: scale-color(var(--color-neutral-10), $alpha: -65%);
|
||||
--color-type-disable: rgba(247, 248, 248, 35%); // 35% --color-neutral-10;
|
||||
--color-type-link: var(--color-brand-default);
|
||||
|
||||
/* Line */
|
||||
--color-line-divider: scale-color(var(--color-neutral-10), $alpha: -86%);
|
||||
--color-line-divider: rgba(247, 248, 248, 14%); // 14% --color-neutral-10
|
||||
--color-line-border: var(--color-neutral-80);
|
||||
--color-line-border-transparent: scale-color(var(--color-neutral-10), $alpha: -80%);
|
||||
--color-line-border-transparent: rgba(247, 248, 248, 20%); // 20% --color-neutral-10
|
||||
|
||||
/* Background */
|
||||
--color-bg-base: var(--color-neutral-99);
|
||||
--color-bg-layer-1: var(--color-surface-2);
|
||||
--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-2: var(--color-surface-4);
|
||||
--color-bg-float: var(--color-surface-4);
|
||||
--color-bg-mask: scale-color(var(--color-neutral-0), $alpha: -40%);
|
||||
--color-bg-float-base: var(--color-neutral-100);
|
||||
--color-bg-float: var(--color-surface-2);
|
||||
--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: scale-color(var(--color-neutral-10), -92%);
|
||||
--color-bg-desktop: var(--color-neutral-variant-90);
|
||||
--color-bg-state-disabled: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
|
||||
|
||||
|
||||
/* Brand */
|
||||
// Note: System brand color. May be overwritten dynamically by js
|
||||
|
|
@ -166,14 +180,14 @@
|
|||
--color-success-disable: var(--color-success-90);
|
||||
|
||||
/* Overlay */
|
||||
--color-overlay-neutral-hover: scale-color(var(--color-neutral-10), -92%);
|
||||
--color-overlay-neutral-pressed: scale-color(var(--color-neutral-10), -88%);
|
||||
--color-overlay-neutral-focused: scale-color(var(--color-neutral-10), -84%);
|
||||
--color-overlay-danger-hover: scale-color(var(--color-danger-40), -92%);
|
||||
--color-overlay-danger-pressed: scale-color(var(--color-danger-40), -88%);
|
||||
--color-overlay-danger-focused: scale-color(var(--color-danger-40), -84%);
|
||||
--color-overlay-neutral-hover: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
|
||||
--color-overlay-neutral-pressed: rgba(247, 248, 248, 12%); // 12% --color-neutral-10
|
||||
--color-overlay-neutral-focused: rgba(247, 248, 248, 16%); // 16% --color-neutral-10
|
||||
--color-overlay-danger-hover: rgba(221, 55, 48, 8%); // 8% --color-danger-40
|
||||
--color-overlay-danger-pressed: rgba(221, 55, 48, 12%); // 12% --color-danger-40
|
||||
--color-overlay-danger-focused: rgba(221, 55, 48, 16%); // 16% --color-danger-40
|
||||
// Note: System brand color. May be overwritten dynamically by js
|
||||
--color-overlay-brand-hover: scale-color(var(--color-brand-40), -92%);
|
||||
--color-overlay-brand-pressed: scale-color(var(--color-brand-40), -88%);
|
||||
--color-overlay-brand-focused: scale-color(var(--color-brand-40), -84%);
|
||||
--color-overlay-brand-hover: rgba(202, 190, 255, 8%); // 8% --color-brand-40
|
||||
--color-overlay-brand-pressed: rgba(202, 190, 255, 12%); // 12% --color-brand-40
|
||||
--color-overlay-brand-focused: rgba(202, 190, 255, 16%); // 16% --color-brand-40
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
/* Foundation */
|
||||
$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
|
||||
'Helvetica', 'Arial', sans-serif;
|
||||
|
||||
@mixin colors-light-theme {
|
||||
--color-base: #e5e1ec;
|
||||
--color-surface: #fff;
|
||||
--color-surface-variant: #e5e1ec;
|
||||
--color-text: #191c1d; // Neutral-10
|
||||
--color-text-disabled: #c4c7c7;
|
||||
--color-border: #c4c7c7;
|
||||
--color-border-variant: #c9c5d0;
|
||||
--color-caption: #747778;
|
||||
--color-icon: #747778;
|
||||
--color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
|
||||
--color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
|
||||
--color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
|
||||
|
||||
--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;
|
||||
--color-layer: #eff1f1;
|
||||
--color-dialogue: #fff;
|
||||
--color-divider: #e0e3e3;
|
||||
--color-error: #ba1b1b;
|
||||
--color-loading-icon: #191c1d;
|
||||
|
||||
--color-inverse-social-bg: #000;
|
||||
--color-inverse-social-hover: rgba(0, 0, 0, 92%);
|
||||
--color-inverse-social-pressed: rgba(0, 0, 0, 88%);
|
||||
}
|
||||
|
||||
@mixin colors-dark-theme {
|
||||
--color-base: #2a2c32;
|
||||
--color-surface: #191c1d;
|
||||
--color-surface-variant: #47464e;
|
||||
--color-text: #f7f8f8; // Neutral-10
|
||||
--color-text-disabled: #5c5f60;
|
||||
--color-border: #5c5f60;
|
||||
--color-border-variant: #5f5d67;
|
||||
--color-caption: #a9acac;
|
||||
--color-icon: #a9acac;
|
||||
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
|
||||
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
|
||||
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
|
||||
|
||||
--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;
|
||||
--color-layer: #2a2c32;
|
||||
--color-dialogue:
|
||||
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-divider: #444748;
|
||||
--color-error: #dd3730;
|
||||
--color-loading-icon: #f7f8f8;
|
||||
|
||||
--color-inverse-social-bg: #fff;
|
||||
--color-inverse-social-hover: rgba(255, 255, 255, 92%);
|
||||
--color-inverse-social-pressed: rgba(255, 255, 255, 88%);
|
||||
}
|
||||
|
||||
@mixin colors-universal {
|
||||
--color-primary-button-text: #fff;
|
||||
--color-toast: #34353f;
|
||||
--color-toast-border: #444748;
|
||||
--color-overlay: rgba(0, 0, 0, 30%);
|
||||
--color-loading-icon-light: #f7f8f8;
|
||||
// shadows
|
||||
--shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
|
||||
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
|
||||
}
|
||||
|
||||
@mixin fonts {
|
||||
--font-title: 600 32px/40px #{$font-family};
|
||||
--font-title-medium: 600 28px/36px #{$font-family};
|
||||
--font-title-small: 600 16px/24px #{$font-family};
|
||||
--font-header: 600 20px/28px #{$font-family};
|
||||
--font-body-bold: 500 14px/20px #{$font-family};
|
||||
--font-body: 400 14px/20px #{$font-family};
|
||||
--font-caption: 400 14px/20px #{$font-family};
|
||||
}
|
||||
|
||||
@mixin layout {
|
||||
--radius: 8px;
|
||||
--max-width: 400px;
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/* Foundation */
|
||||
$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
|
||||
'Helvetica', 'Arial', sans-serif;
|
||||
|
||||
@mixin colors-light-theme {
|
||||
--color-base: #fff;
|
||||
--color-surface: #fff;
|
||||
--color-surface-variant: #e5e1ec;
|
||||
--color-text: #191c1d;
|
||||
--color-icon: #747778;
|
||||
--color-caption: #747778;
|
||||
--color-outline: #78767f;
|
||||
--color-divider: #e0e3e3;
|
||||
--color-text-disabled: #c4c7c7;
|
||||
--color-border: #c4c7c7;
|
||||
--color-primary: var(--color-light-brand);
|
||||
--color-layer: #eff1f1;
|
||||
--color-error: #ba1b1b;
|
||||
--color-dialogue: #fff;
|
||||
--color-loading-icon: #191c1d;
|
||||
|
||||
--color-inverse-social-bg: #000;
|
||||
}
|
||||
|
||||
@mixin colors-dark-theme {
|
||||
--color-base: #191c1d;
|
||||
--color-surface: #191c1d;
|
||||
--color-surface-variant: #47464e;
|
||||
--color-text: #f7f8f8;
|
||||
--color-icon: #a9acac;
|
||||
--color-caption: #a9acac;
|
||||
--color-outline: #928f9a;
|
||||
--color-divider: #444748;
|
||||
--color-text-disabled: #5c5f60;
|
||||
--color-border: #5c5f60;
|
||||
--color-primary: var(--color-dark-brand);
|
||||
--color-layer: #2a2c32;
|
||||
--color-error: #dd3730;
|
||||
--color-dialogue:
|
||||
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-loading-icon: #f7f8f8;
|
||||
|
||||
--color-inverse-social-bg: #fff;
|
||||
}
|
||||
|
||||
@mixin colors-universal {
|
||||
--color-primary-button-text: #fff;
|
||||
--color-toast: #34353f;
|
||||
--color-toast-border: #444748;
|
||||
--color-overlay: rgba(0, 0, 0, 30%);
|
||||
--color-loading-icon-light: #f7f8f8;
|
||||
// shadows
|
||||
--shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
|
||||
}
|
||||
|
||||
@mixin fonts {
|
||||
--font-title: 600 32px/40px #{$font-family};
|
||||
--font-body-bold: 500 16px/20px #{$font-family};
|
||||
--font-body: 400 16px/20px #{$font-family};
|
||||
--font-caption: 400 14px/18px #{$font-family};
|
||||
}
|
||||
|
||||
@mixin layout {
|
||||
--radius: 8px;
|
||||
--max-width: 360px;
|
||||
}
|
||||
|
|
@ -20,13 +20,18 @@
|
|||
}
|
||||
|
||||
@mixin text-hint {
|
||||
font: var(--font-caption);
|
||||
color: var(--color-caption);
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-type-secondary);
|
||||
}
|
||||
|
||||
@mixin title {
|
||||
font: var(--font-title);
|
||||
color: var(--color-text);
|
||||
font: var(--font-headline-1);
|
||||
color: var(--color-type-primary);
|
||||
}
|
||||
|
||||
@mixin title-desktop {
|
||||
font: var(--font-headline-2);
|
||||
color: var(--color-type-primary);
|
||||
}
|
||||
|
||||
@mixin full-page {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.overlay {
|
||||
position: fixed;
|
||||
background: var(--color-overlay);
|
||||
background: var(--color-bg-mask);
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,5 +29,5 @@ input[type='number'] {
|
|||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: solid 1px var(--color-primary);
|
||||
outline: solid 1px var(--color-brand-default);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue