mirror of
https://github.com/logto-io/logto.git
synced 2025-02-17 22:04:19 -05:00
refactor(console): css color variables and theme mixins
This commit is contained in:
Charles Zhao
parent
3767229389
commit
8ee4391b8f
31 changed files with 331 additions and 123 deletions
|
|
@ -4,7 +4,7 @@
|
|||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--color-component-border);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: _.unit(2);
|
||||
padding: _.unit(3) _.unit(4);
|
||||
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
|
||||
.title {
|
||||
font: var(--font-title-small);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
align-items: center;
|
||||
margin: _.unit(1) _.unit(6) _.unit(1) _.unit(4);
|
||||
padding: _.unit(2);
|
||||
color: var(--color-on-surface-variant);
|
||||
color: var(--color-neutral-variant-30);
|
||||
border-radius: _.unit(2);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
|
@ -26,11 +26,11 @@
|
|||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
background: var(--color-neutral-variant-90);
|
||||
background: var(--color-hover-variant);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--color-primary-90);
|
||||
background: var(--color-surface-5);
|
||||
color: var(--color-primary);
|
||||
|
||||
.icon svg {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: #adaab4;
|
||||
font: var(--font-subhead-cap-small);
|
||||
color: var(--color-neutral-variant-70);
|
||||
padding: _.unit(2) _.unit(6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,7 @@ import React from 'react';
|
|||
const Contact = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.8346 3.33594H4.16797C3.50493 3.33594 2.86904 3.59933 2.4002 4.06817C1.93136 4.53701 1.66797 5.1729 1.66797 5.83594V14.1693C1.66797 14.8323 1.93136 15.4682 2.4002 15.937C2.86904 16.4059 3.50493 16.6693 4.16797 16.6693H15.8346C16.4977 16.6693 17.1336 16.4059 17.6024 15.937C18.0712 15.4682 18.3346 14.8323 18.3346 14.1693V5.83594C18.3346 5.1729 18.0712 4.53701 17.6024 4.06817C17.1336 3.59933 16.4977 3.33594 15.8346 3.33594ZM15.493 5.0026L10.593 9.9026C10.5155 9.98071 10.4233 10.0427 10.3218 10.085C10.2202 10.1273 10.1113 10.1491 10.0013 10.1491C9.89129 10.1491 9.78237 10.1273 9.68082 10.085C9.57927 10.0427 9.4871 9.98071 9.40964 9.9026L4.50964 5.0026H15.493ZM16.668 14.1693C16.668 14.3903 16.5802 14.6022 16.4239 14.7585C16.2676 14.9148 16.0556 15.0026 15.8346 15.0026H4.16797C3.94696 15.0026 3.73499 14.9148 3.57871 14.7585C3.42243 14.6022 3.33464 14.3903 3.33464 14.1693V6.1776L8.23464 11.0776C8.70339 11.5458 9.3388 11.8087 10.0013 11.8087C10.6638 11.8087 11.2992 11.5458 11.768 11.0776L16.668 6.1776V14.1693Z"
|
||||
fill="#78767F"
|
||||
/>
|
||||
<path d="M15.8346 3.33594H4.16797C3.50493 3.33594 2.86904 3.59933 2.4002 4.06817C1.93136 4.53701 1.66797 5.1729 1.66797 5.83594V14.1693C1.66797 14.8323 1.93136 15.4682 2.4002 15.937C2.86904 16.4059 3.50493 16.6693 4.16797 16.6693H15.8346C16.4977 16.6693 17.1336 16.4059 17.6024 15.937C18.0712 15.4682 18.3346 14.8323 18.3346 14.1693V5.83594C18.3346 5.1729 18.0712 4.53701 17.6024 4.06817C17.1336 3.59933 16.4977 3.33594 15.8346 3.33594ZM15.493 5.0026L10.593 9.9026C10.5155 9.98071 10.4233 10.0427 10.3218 10.085C10.2202 10.1273 10.1113 10.1491 10.0013 10.1491C9.89129 10.1491 9.78237 10.1273 9.68082 10.085C9.57927 10.0427 9.4871 9.98071 9.40964 9.9026L4.50964 5.0026H15.493ZM16.668 14.1693C16.668 14.3903 16.5802 14.6022 16.4239 14.7585C16.2676 14.9148 16.0556 15.0026 15.8346 15.0026H4.16797C3.94696 15.0026 3.73499 14.9148 3.57871 14.7585C3.42243 14.6022 3.33464 14.3903 3.33464 14.1693V6.1776L8.23464 11.0776C8.70339 11.5458 9.3388 11.8087 10.0013 11.8087C10.6638 11.8087 11.2992 11.5458 11.768 11.0776L16.668 6.1776V14.1693Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@
|
|||
|
||||
.text {
|
||||
font: var(--font-title-medium);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
|
|
@ -55,23 +59,27 @@
|
|||
}
|
||||
|
||||
&.default {
|
||||
background: var(--color-on-primary);
|
||||
color: var(--color-component-text);
|
||||
border-color: var(--color-component-border);
|
||||
background: var(--color-layer-1);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-outline);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
&:disabled {
|
||||
background: var(--color-neutral-95);
|
||||
border-color: var(--color-neutral-95);
|
||||
background: var(--color-neutral-70);
|
||||
border-color: var(--color-neutral-70);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-neutral-90);
|
||||
outline: 3px solid var(--color-focused);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-pressed);
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--color-neutral-95);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,12 +93,15 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--color-primary-40);
|
||||
outline: 3px solid var(--color-primary-80);
|
||||
outline: 3px solid var(--color-focused-variant);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-pressed_primary);
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--color-primary-30);
|
||||
background: var(--color-hover-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -104,17 +115,16 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--color-error-40);
|
||||
outline: 3px solid var(--color-error-90);
|
||||
outline: 3px solid var(--color-focused-error);
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--color-error-30);
|
||||
background: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
&.outline {
|
||||
background: var(--color-on-primary);
|
||||
background: var(--color-layer-1);
|
||||
border-color: var(--color-primary);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
|
@ -126,18 +136,15 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
outline: 3px solid var(--color-primary-80);
|
||||
outline: 3px solid var(--color-focused-variant);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-primary-30);
|
||||
color: var(--color-primary-30);
|
||||
background: var(--color-pressed-variant);
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
border-color: var(--color-primary-30);
|
||||
color: var(--color-primary-30);
|
||||
background: var(--color-surface-3);
|
||||
background: var(--color-hover-variant);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,20 +155,19 @@
|
|||
color: var(--color-primary);
|
||||
|
||||
&:disabled {
|
||||
color: var(--color-neutral-80);
|
||||
color: var(--color-disabled);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color-primary-80);
|
||||
outline: 2px solid var(--color-focused-variant);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary-30);
|
||||
background: var(--color-pressed-variant);
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
color: var(--color-primary-30);
|
||||
background: var(--color-primary-95);
|
||||
background: var(--color-hover-variant);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.card {
|
||||
background: var(--color-on-primary);
|
||||
background: var(--color-layer-1);
|
||||
border-radius: _.unit(4);
|
||||
padding: _.unit(6);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
@include _.text-ellipsis;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: _.unit(1);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
@include _.text-ellipsis;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
> svg {
|
||||
margin-left: _.unit(3);
|
||||
cursor: pointer;
|
||||
fill: var(--color-component-caption);
|
||||
fill: var(--color-caption);
|
||||
|
||||
&:hover {
|
||||
fill: var(--color-primary);
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
|
||||
.title {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.required {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
align-items: center;
|
||||
|
||||
> svg {
|
||||
fill: var(--color-component-caption);
|
||||
fill: var(--color-caption);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-overlay-12);
|
||||
background: var(--color-pressed);
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--color-overlay-8);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
&.small {
|
||||
|
|
|
|||
|
|
@ -13,15 +13,20 @@
|
|||
margin-left: _.unit(1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-focused-variant);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: var(--color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary-30);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-primary-80);
|
||||
> svg {
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
.title {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: _.unit(2);
|
||||
background: var(--color-code-comment);
|
||||
background: var(--color-success-70);
|
||||
}
|
||||
|
||||
.status.offline .icon {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
padding-bottom: _.unit(1);
|
||||
|
||||
a {
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
.container {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-component-border);
|
||||
outline: 2px solid transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
outline: 3px solid transparent;
|
||||
transition-property: outline, border;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.2s;
|
||||
|
|
@ -23,25 +23,26 @@
|
|||
|
||||
&:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
outline-color: var(--color-primary-80);
|
||||
outline-color: var(--color-focused-variant);
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
color: var(--color-component-text);
|
||||
background: var(--color-layer-1);
|
||||
color: var(--color-text);
|
||||
font: var(--font-body-medium);
|
||||
padding: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-disabled);
|
||||
border-color: var(--color-disabled);
|
||||
background: var(--color-inverse-on-surface);
|
||||
color: var(--color-caption);
|
||||
border-color: var(--color-border);
|
||||
|
||||
input {
|
||||
background: none;
|
||||
|
|
@ -49,9 +50,9 @@
|
|||
}
|
||||
|
||||
&.readOnly {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-readonly);
|
||||
border-color: var(--color-disabled);
|
||||
background: var(--color-inverse-on-surface);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
|
||||
input {
|
||||
background: none;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
div.toast {
|
||||
padding: _.unit(3) _.unit(4);
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
box-shadow: var(--light-shadow-s1);
|
||||
border-radius: _.unit(2);
|
||||
max-width: none;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
.name {
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
.name {
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.details {
|
||||
|
|
@ -63,7 +63,8 @@
|
|||
}
|
||||
|
||||
.type {
|
||||
background-color: var(--color-neutral-90);
|
||||
background-color: var(--color-surface-variant);
|
||||
color: var(--color-text);
|
||||
padding: _.unit(0.5) _.unit(2);
|
||||
border-radius: 10px;
|
||||
font: var(--font-label-medium);
|
||||
|
|
@ -71,7 +72,7 @@
|
|||
|
||||
.text {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
|
||||
.verticalBar {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.subtitle {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
margin-top: _.unit(3);
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
border-radius: _.unit(2);
|
||||
padding: 0 _.unit(4);
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
|
||||
img {
|
||||
margin-right: _.unit(3);
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
.subtitle {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
.description {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
|
||||
div.successTooltip {
|
||||
|
|
|
|||
|
|
@ -47,12 +47,12 @@
|
|||
|
||||
.name {
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.id {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-main-background);
|
||||
background-color: var(--color-surface-1);
|
||||
height: 100vh;
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-main-background);
|
||||
background-color: var(--color-surface-1);
|
||||
height: 100vh;
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.name {
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-component-text);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.username {
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
.text {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
|
||||
.verticalBar {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// tonal palettes
|
||||
:root {
|
||||
@mixin light-theme {
|
||||
// tonal palettes
|
||||
--color-all-0: #000;
|
||||
--color-all-100: #fff;
|
||||
--color-primary-10: #190064;
|
||||
|
|
@ -24,6 +24,17 @@
|
|||
--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;
|
||||
|
|
@ -57,44 +68,230 @@
|
|||
--color-neutral-variant-90: #e5e1ec;
|
||||
--color-neutral-variant-95: #f3effa;
|
||||
--color-neutral-variant-99: #fffbff;
|
||||
--color-overlay-8: rgba(25, 28, 29, 8%);
|
||||
--color-overlay-12: rgba(25, 28, 29, 12%);
|
||||
}
|
||||
--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;
|
||||
|
||||
@mixin light-theme {
|
||||
--color-main-background: #f2f0f6;
|
||||
--color-surface: var(--color-neutral-99);
|
||||
--color-on-surface: var(--color-neutral-10);
|
||||
--color-on-surface-variant: var(--color-neutral-variant-30);
|
||||
// color aliases
|
||||
--color-primary: var(--color-primary-40);
|
||||
--color-on-primary: var(--color-all-100);
|
||||
--color-error: var(--color-error-40);
|
||||
--color-inverse-on-surface: var(--color-neutral-95);
|
||||
--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-component-border: var(--color-neutral-80);
|
||||
--color-component-caption: var(--color-neutral-50);
|
||||
--color-component-text: var(--color-neutral-10);
|
||||
--color-outline: var(--color-neutral-variant-50);
|
||||
--color-disabled: var(--color-neutral-80);
|
||||
--color-readonly: var(--color-neutral-50);
|
||||
--color-icon: var(--color-neutral-50);
|
||||
--color-border: var(--color-neutral-80);
|
||||
--color-table-row-selected: rgba(25, 28, 29, 4%);
|
||||
--color-code-comment: #66bb6a;
|
||||
--color-surface-3: #e3dff5;
|
||||
--color-surface-5: #dfd9f5;
|
||||
--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);
|
||||
--color-on-error: var(--color-all-100);
|
||||
--color-error-container: var(--color-error-90);
|
||||
--color-on-error-container: var(--color-error-10);
|
||||
--color-background: var(--color-neutral-99);
|
||||
--color-on-background: var(--color-neutral-10);
|
||||
--color-surface: var(--color-neutral-99);
|
||||
--color-surface-1: #ecebf6; // N99 + 2% NV50 + 5% P40
|
||||
--color-surface-2: #e8e6f6; // N99 + 2% NV50 + 8% P40
|
||||
--color-surface-3: #e3e0f6; // N99 + 2% NV50 + 11% P40
|
||||
--color-surface-4: #e2def6; // N99 + 2% NV50 + 12% P40
|
||||
--color-surface-5: #dcd6f5; // N99 + 2% NV50 + 16% P40
|
||||
--color-on-surface: var(--color-neutral-10);
|
||||
--color-surface-variant: var(--color-neutral-variant-90);
|
||||
--shadow-light-s1: 0 2px 8px rgba(0, 0, 0, 8%);
|
||||
--shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
|
||||
--color-on-surface-variant: var(--color-neutral-variant-30);
|
||||
--color-outline: var(--color-neutral-variant-50);
|
||||
--color-text: var(--color-neutral-10);
|
||||
--color-icon: var(--color-neutral-50);
|
||||
--color-caption: var(--color-neutral-50);
|
||||
--color-border: var(--color-neutral-80);
|
||||
--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-inverse-on-surface: var(--color-neutral-95);
|
||||
--color-hover: rgba(25, 28, 29, 8%); // 8% N10
|
||||
--color-pressed: rgba(25, 28, 29, 12%); // 12% N10
|
||||
--color-focused: rgba(25, 28, 29, 16%); // 16% N10
|
||||
--color-hover-variant: rgba(93, 52, 242, 8%); // 8% P40
|
||||
--color-pressed-variant: rgba(93, 52, 242, 12%); // 12% P40
|
||||
--color-focused-variant: rgba(93, 52, 242, 16%); // 16% P40
|
||||
--shadow-light-s1: 0 4px 8px rgba(66, 41, 159, 8%);
|
||||
--shadow-light-s2: 0 4px 12px rgba(66, 41, 159, 12%);
|
||||
--shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
|
||||
|
||||
// Client specific variables
|
||||
--color-hover-primary: #5832e1; // P40 + 8% N10
|
||||
--color-pressed_primary: #5531d8; // P40 + 12% N10
|
||||
--color-hover-danger: #ad1b1b; // ER40 + 8% N10
|
||||
--color-pressed_danger: #a71b1b; // ER40 + 12% N10
|
||||
--color-focused-danger: rgba(186, 27, 27, 16%); // 16% ER40
|
||||
}
|
||||
|
||||
@mixin dark-theme {
|
||||
--color-surface: var(--color-neutral-10);
|
||||
--color-on-surface: var(--color-neutral-80);
|
||||
--color-on-surface-variant: var(--color-neutral-variant-80);
|
||||
--color-primary: var(--color-primary-80);
|
||||
--color-on-primary: var(--color-primary-20);
|
||||
--color-error: var(--color-error-80);
|
||||
--color-on-secondary-container: var(--color-secondary-90);
|
||||
// to-do: add more dark theme colors
|
||||
// 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-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);
|
||||
--color-on-error: var(--color-all-100);
|
||||
--color-error-container: var(--color-error-90);
|
||||
--color-on-error-container: var(--color-error-10);
|
||||
--color-background: var(--color-neutral-99);
|
||||
--color-on-background: var(--color-neutral-10);
|
||||
--color-surface: var(--color-neutral-99);
|
||||
--color-surface-1: #25272b; // N99 + 2% NV50 + 5% P40
|
||||
--color-surface-2: #2a2c32; // N99 + 2% NV50 + 8% P40
|
||||
--color-surface-3: #2f3039; // N99 + 2% NV50 + 11% P40
|
||||
--color-surface-4: #31323b; // N99 + 2% NV50 + 12% P40
|
||||
--color-surface-5: #383844; // N99 + 2% NV50 + 16% P40
|
||||
--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-text: var(--color-neutral-10);
|
||||
--color-icon: var(--color-neutral-50);
|
||||
--color-caption: var(--color-neutral-50);
|
||||
--color-border: var(--color-neutral-80);
|
||||
--color-disabled: var(--color-neutral-80);
|
||||
--color-base: #1e2124; // N99 + 3% P40
|
||||
--color-layer-1: var(--color-surface-2);
|
||||
--color-layer-2: var(--color-surface-3);
|
||||
--color-inverse-on-surface: var(--color-neutral-95);
|
||||
--color-hover: rgba(247, 248, 248, 8%); // 8% N10
|
||||
--color-pressed: rgba(247, 248, 248, 12%); // 12% N10
|
||||
--color-focused: rgba(247, 248, 248, 16%); // 16% N10
|
||||
--color-hover-variant: rgba(202, 190, 255, 8%); // 8% P40
|
||||
--color-pressed-variant: rgba(202, 190, 255, 12%); // 12% P40
|
||||
--color-focused-variant: rgba(202, 190, 255, 16%); // 16% P40
|
||||
--shadow-light-s1: 0 4px 8px rgba(66, 41, 159, 8%);
|
||||
--shadow-light-s2: 0 4px 12px rgba(66, 41, 159, 12%);
|
||||
--shadow-light-s3: 0 4px 16px rgba(66, 41, 159, 16%);
|
||||
|
||||
// Client specific variables
|
||||
--color-hover-primary: #cec3fe; // P40 + 8% N10
|
||||
--color-pressed_primary: #cfc5fe; // P40 + 12% N10
|
||||
--color-hover-danger: #feb9af; // ER40 + 8% N10
|
||||
--color-pressed_danger: #febcb2; // ER40 + 12% N10
|
||||
--color-focused-danger: rgba(255, 180, 169, 16%); // 16% ER40
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,5 +25,7 @@ $font-family:
|
|||
--font-body-small: 400 12px/16px #{$font-family};
|
||||
--font-subhead-1: 500 16px/24px #{$font-family};
|
||||
--font-subhead-2: 500 14px/20px #{$font-family};
|
||||
--font-subhead-cap: 700 12px/16px #{$font-family};
|
||||
--font-subhead-cap-small: 700 10px/16px #{$font-family};
|
||||
--font-button: 500 14px/20px #{$font-family};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
text-align: right;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: var(--color-on-primary);
|
||||
background: var(--color-layer-1);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
background: var(--color-main-background);
|
||||
background: var(--color-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ table {
|
|||
thead {
|
||||
th {
|
||||
font: var(--font-subhead-2);
|
||||
color: var(--color-component-caption);
|
||||
color: var(--color-caption);
|
||||
padding: _.unit(2);
|
||||
border-bottom: 1px solid var(--color-neutral-90);
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ tr.clickable {
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-table-row-selected);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue