forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
245 lines
6.6 KiB
SCSS
245 lines
6.6 KiB
SCSS
:root {
|
|
// Colors
|
|
--gin-color-title: #222330;
|
|
--gin-color-text: #222330;
|
|
--gin-color-text-light: #545560;
|
|
|
|
--gin-color-focus: rgba(0, 125, 250, .6); // #059fad; //#00a590; //#0ba77d; //#2297c7;
|
|
--gin-color-focus-border: rgba(0, 0, 0, .2); //rgb(0, 125, 250);
|
|
--gin-color-focus-neutral-rgb: rgba(0, 0, 0, .4);
|
|
|
|
--gin-color-disabled: #8d8d8d;
|
|
--gin-color-disabled-bg: #eaeaea;
|
|
--gin-color-disabled-border: #c2c2c2;
|
|
|
|
--gin-color-warning: #d8b234;
|
|
--gin-color-warning-light: #efcf64;
|
|
--gin-bg-warning: #{mix(black, #efcf64, 60%)};
|
|
--gin-bg-warning-light: rgba(226, 151, 0, .08);
|
|
--gin-color-danger: #cc3d3d;
|
|
--gin-color-danger-lightest: #fdd9d9;
|
|
--gin-color-danger-light: #f39b9d;
|
|
--gin-bg-danger: #{mix(black, #dc7f7f, 60%)};
|
|
--gin-bg-danger-light: rgba(222, 117, 96, .1);
|
|
--gin-color-green: #058260;
|
|
--gin-color-green-light: #32cea4;
|
|
--gin-color-green-lightest: #{mix(white, #32cea4, 60%)};
|
|
--gin-bg-green: #{mix(black, #32cea4, 60%)};
|
|
--gin-bg-green-light: rgba(72, 171, 123, .1);
|
|
--gin-color-info: #082538;
|
|
--gin-color-info-light: #589ac5;
|
|
--gin-bg-info: #{mix(black, #2d6c96, 60%)};
|
|
|
|
--gin-color-contextual: var(--gin-color-text);
|
|
--gin-color-contextual-text: #eee;
|
|
|
|
// Background
|
|
--gin-bg-input: #fff;
|
|
--gin-bg-layer: #fff;
|
|
--gin-bg-layer2: #edeff5;
|
|
--gin-bg-layer3: #fff;
|
|
--gin-bg-layer4: #e2e5ec;
|
|
--gin-bg-secondary: var(--gin-bg-layer);
|
|
--gin-bg-header: #eeeff3; //#e6e8ef;
|
|
|
|
// Color pattern
|
|
--gin-pattern: var(--gin-border-color);
|
|
--gin-pattern-fallback: var(--gin-bg-layer2);
|
|
--gin-pattern-square: .5rem;
|
|
|
|
// Font
|
|
--gin-font: Ginter, Inter, 'Helvetica Neue', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
|
|
|
|
// Font sizes
|
|
--gin-font-size-xxs: .75rem;
|
|
--gin-font-size-xs: small;
|
|
--gin-font-size-s: .875rem;
|
|
--gin-font-size: 1rem;
|
|
--gin-font-size-m: var(--gin-font-size);
|
|
--gin-font-size-l: 1.125rem;
|
|
--gin-font-size-xl: 1.25rem;
|
|
--gin-font-size-h3: 1.5rem;
|
|
--gin-font-size-h2: 1.75rem;
|
|
--gin-font-size-h1: 1.6rem;
|
|
--gin-font-size-quote: 1.1em;
|
|
|
|
// Font weights
|
|
--gin-font-weight-normal: 400;
|
|
--gin-font-weight-semibold: 525;
|
|
--gin-font-weight-bold: 575;
|
|
--gin-font-weight-heavy: 625;
|
|
|
|
@include mq(medium) {
|
|
--gin-font-size-h1: 1.8125rem;
|
|
--gin-font-size-quote: 1.2em;
|
|
}
|
|
|
|
@include mq(ultra) {
|
|
--gin-font-size-h1: 2.125rem;
|
|
}
|
|
|
|
// Spacings
|
|
@each $name, $size in $ginSpacings {
|
|
--gin-spacing-#{$name}: #{rem($size)};
|
|
}
|
|
|
|
// Icons
|
|
--gin-icon-color: #414247;
|
|
--gin-icon-size-close: 20px;
|
|
--gin-icon-size-toolbar-secondary: 17px;
|
|
--gin-icon-size-toolbar: 17px;
|
|
--gin-icon-size-sidebar-toggle: 21px;
|
|
|
|
@include mq(medium) {
|
|
--gin-icon-size-toolbar: 20px;
|
|
}
|
|
|
|
// Border
|
|
--gin-border-xxs: #{rem(2px)};
|
|
--gin-border-xs: #{rem(4px)};
|
|
--gin-border-s: #{rem(6px)};
|
|
--gin-border-m: #{rem(8px)};
|
|
--gin-border-l: #{rem(12px)};
|
|
--gin-border-xl: #{rem(16px)};
|
|
|
|
--gin-border-color: #d4d4d8;
|
|
--gin-border-color-secondary: rgba(0, 0, 0, .08);
|
|
--gin-border-color-layer: rgba(0, 0, 0, .08);
|
|
--gin-border-color-layer2: #d4d4d8;
|
|
--gin-border-color-table: rgba(0, 0, 0, .1);
|
|
--gin-border-color-table-header: rgba(0, 0, 0, .2);
|
|
--gin-border-color-form-element: #8E929C;
|
|
|
|
// Transitions / Animations
|
|
--gin-easing: cubic-bezier(.19, 1, .22, 1);
|
|
--gin-transition: .15s var(--gin-easing);
|
|
--gin-transition-fast: .3s var(--gin-easing);
|
|
|
|
// Shadows
|
|
--gin-shadow-l1: 0 1px 2px rgb(20 45 82 / 2%),
|
|
0 3px 4px rgb(20 45 82 / 3%),
|
|
0 5px 8px rgb(20 45 82 / 4%);
|
|
--gin-shadow-l2: 0 1px 2px rgb(20 45 82 / 2%),
|
|
0 3px 4px rgb(20 45 82 / 3%),
|
|
0 5px 8px rgb(20 45 82 / 4%),
|
|
0 20px 24px rgb(20 45 82 / 12%);
|
|
|
|
// Sticky bar
|
|
--gin-height-sticky: 72px;
|
|
|
|
// Toolbar
|
|
--gin-toolbar-width-collapsed: 66px;
|
|
--gin-toolbar-width: 256px;
|
|
--gin-toolbar-bg-level2: #edeff5;
|
|
--gin-toolbar-bg-level3: #{rgba(#2c2d2f, .05)};
|
|
|
|
// Sidebar
|
|
--gin-sidebar-width: 320px;
|
|
--gin-sidebar-offset: var(--gin-sidebar-width);
|
|
@include mq(wide) {
|
|
--gin-sidebar-width: 360px;
|
|
}
|
|
|
|
// Switch
|
|
--gin-switch: #26a769; //#0e9888;
|
|
|
|
// Buttons
|
|
--gin-shadow-button: #00000033;
|
|
--gin-color-button-text: #fff;
|
|
}
|
|
|
|
// Density spacings
|
|
@each $name, $density in $ginLayoutDensity {
|
|
@if $name == 'default' {
|
|
:root {
|
|
@each $name, $size in $ginSpacings {
|
|
--gin-spacing-density-#{$name}: #{rem($size * $density)};
|
|
}
|
|
}
|
|
} @else {
|
|
[data-gin-layout-density=#{$name}] {
|
|
@each $name, $size in $ginSpacings {
|
|
--gin-spacing-density-#{$name}: #{rem($size * $density)};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gin--dark-mode {
|
|
// Text
|
|
--gin-color-title: #fff;
|
|
--gin-color-text: #d2d3d3;
|
|
--gin-color-text-light: #9e9fa0;
|
|
|
|
// Buttons
|
|
--gin-shadow-button: rgba(#111, .9);
|
|
--gin-color-button-text: #111;
|
|
|
|
// Focus
|
|
--gin-color-focus: rgb(81, 168, 255);
|
|
--gin-color-focus-border: rgba(0, 0, 0, .8);
|
|
--gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);
|
|
|
|
// Disabled
|
|
--gin-color-disabled: #646464;
|
|
--gin-color-disabled-border: #646464;
|
|
--gin-color-disabled-bg: #47474c;
|
|
|
|
// Messages
|
|
--gin-color-warning: #dec15f;
|
|
--gin-bg-warning-light: rgba(222, 193, 95, .1);
|
|
--gin-color-danger: #ce6060;
|
|
--gin-color-danger-lightest: #483439;
|
|
--gin-color-green: #32cea4;
|
|
--gin-color-info: #559bca;
|
|
|
|
// Input
|
|
--gin-bg-input: var(--gin-bg-layer2);
|
|
|
|
// Layers
|
|
--gin-bg-app: #{$colorDarkAppBackground};
|
|
--gin-bg-layer: #2A2A2D;
|
|
--gin-bg-layer2: #3B3B3F;
|
|
--gin-bg-layer3: #47474c;
|
|
--gin-bg-layer4: #19191b;
|
|
--gin-bg-secondary: var(--gin-bg-app);
|
|
|
|
// Context
|
|
--gin-color-contextual: var(--gin-bg-layer3);
|
|
|
|
// Borders
|
|
--gin-border-color: #43454a;
|
|
--gin-border-color-secondary: rgba(255, 255, 255, .075);
|
|
--gin-border-color-layer: rgba(0, 0, 0, .05);
|
|
--gin-border-color-layer2: #76777B;
|
|
--gin-border-color-table: #43454a;
|
|
|
|
// Tabs
|
|
--gin-border-color-table-header: rgba(255, 255, 255, .12);
|
|
|
|
// Form element
|
|
--gin-border-color-form-element: var(--gin-border-color-layer2);
|
|
|
|
// Table
|
|
--gin-bg-header: #{$colorDarkAppBackground};
|
|
|
|
// Toggle
|
|
--gin-switch: var(--gin-color-primary);
|
|
|
|
// Shadows
|
|
--gin-shadow-l1: 0 1px 2px rgb(0 0 0 / 2%),
|
|
0 3px 4px rgb(0 0 0 / 3%),
|
|
0 5px 8px rgb(0 0 0 / 4%);
|
|
--gin-shadow-l2: 0 1px 2px rgb(0 0 0 / 2%),
|
|
0 3px 4px rgb(0 0 0 / 3%),
|
|
0 5px 8px rgb(0 0 0 / 4%),
|
|
0 20px 24px rgb(0 0 0 / 12%);
|
|
|
|
// Icons
|
|
--gin-icon-color: #888;
|
|
|
|
// Color pattern
|
|
--gin-pattern-fallback: var(--gin-bg-layer2);
|
|
--gin-pattern: var(--gin-border-color);
|
|
}
|