mirror of
https://github.com/penpot/penpot.git
synced 2025-06-07 21:11:38 +02:00
♻️ Update basic color palette
This commit is contained in:
Eva
Alonso Torres
parent
a85a7c74c3
commit
a882d0bf6d
51 changed files with 287 additions and 271 deletions
|
|
@ -8,7 +8,7 @@
|
|||
$db-primary: #18181a;
|
||||
$db-secondary: #000000;
|
||||
$db-tertiary: #212426;
|
||||
$db-cuaternary: #2e3434;
|
||||
$db-quaternary: #2e3434;
|
||||
|
||||
$df-primary: #ffffff;
|
||||
$df-secondary: #8f9da3;
|
||||
|
|
|
|||
|
|
@ -8,68 +8,85 @@
|
|||
|
||||
:root {
|
||||
// DARK
|
||||
--dark-gray-1: #1d1f20;
|
||||
--dark-gray-2: #000000;
|
||||
--dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)};
|
||||
--dark-gray-2-80: #{color.change(#000000, $alpha: 0.8)};
|
||||
--dark-gray-3: #292c2d;
|
||||
--dark-gray-4: #34393b;
|
||||
--white: #fff;
|
||||
--off-white: #aab5ba;
|
||||
--off-white-40: #{color.change(#aab5ba, $alpha: 0.4)};
|
||||
--green: #91fadb;
|
||||
--green-30: rgba(145, 250, 219, 0.3);
|
||||
--lilac: #bb97d8;
|
||||
--pink: #ff6fe0;
|
||||
--strong-green: #00d1b8;
|
||||
--strong-green-10: #{color.change(#00d1b8, $alpha: 0.1)};
|
||||
// Dark background
|
||||
--db-primary: #18181a;
|
||||
--db-secondary: #000000;
|
||||
--db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
|
||||
--db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
|
||||
--db-tertiary: #212426;
|
||||
--db-quaternary: #2e3434;
|
||||
|
||||
// NOTIFICATION
|
||||
--dark-ok-color: var(--strong-green);
|
||||
--dark-warning-color: #ff6432;
|
||||
--dark-pending-color: var(--lilac);
|
||||
--dark-error-color: #ff3277;
|
||||
--default-presence-color: #dee563;
|
||||
//Dark foreground
|
||||
--df-primary: #ffffff;
|
||||
--df-secondary: #8f9da3;
|
||||
--df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // TODO: Check if needed
|
||||
|
||||
//Dark accent
|
||||
--da-primary: #7efff5;
|
||||
--da-primary-muted: #426158;
|
||||
--da-secondary: #bb97d8;
|
||||
--da-tertiary: #00d1b8;
|
||||
--da-tertiary-10: #{color.change(#00d1b8, $alpha: 0.1)};
|
||||
--da-quaternary: #ff6fe0;
|
||||
|
||||
// LIGHT
|
||||
--light-gray-1: #fff;
|
||||
--light-gray-2: #e8eaee;
|
||||
--light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)};
|
||||
--light-gray-2-80: #{color.change(#e8eaee, $alpha: 0.8)};
|
||||
--light-gray-3: #f3f4f6;
|
||||
--light-gray-4: #eef0f2;
|
||||
--black: #000;
|
||||
--off-black: #495e74;
|
||||
--off-black-40: #{color.change(#495e74, $alpha: 0.4)};
|
||||
--purple: #6911d4;
|
||||
--purple-30: rgba(105, 17, 212, 0.2);
|
||||
--blue: #1345aa;
|
||||
--strong-purple: #8c33eb;
|
||||
--strong-purple-10: #{color.change(#8c33eb, $alpha: 0.1)};
|
||||
// Light background
|
||||
--lb-primary: #ffffff;
|
||||
--lb-secondary: #e8eaee;
|
||||
--lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
|
||||
--lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};
|
||||
--lb-tertiary: #f3f4f6;
|
||||
--lb-quaternary: #eef0f2;
|
||||
|
||||
// NOTIFICATION WILL CHANGE
|
||||
--light-ok-color: var(--strong-green);
|
||||
--light-warning-color: #ff9b49;
|
||||
--light-pending-color: var(--lilac);
|
||||
--light-error-color: #ff4986;
|
||||
//Light foreground
|
||||
--lf-primary: #000;
|
||||
--lf-secondary: #495e74;
|
||||
--lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
|
||||
|
||||
//Light accent
|
||||
--la-primary: #6911d4;
|
||||
--la-primary-muted: #e1d2f5;
|
||||
--la-secondary: #1345aa;
|
||||
--la-tertiary: #8c33eb;
|
||||
--la-tertiary-10: #{color.change(#8c33eb, $alpha: 0.1)};
|
||||
--la-quaternary: #ff6fe0;
|
||||
|
||||
// STATUS COLOR
|
||||
--status-color-success-50: #f0f8ff;
|
||||
--status-color-success-500: #2d9f8f;
|
||||
--status-color-success-950: #0a2927;
|
||||
--status-color-warning-50: #fff4ed;
|
||||
--status-color-warning-500: #fe4811;
|
||||
--status-color-warning-950: #440806;
|
||||
--status-color-error-50: #fff0f3;
|
||||
--status-color-error-500: #ff3277;
|
||||
--status-color-error-950: #500124;
|
||||
--status-color-info-50: #f0f8ff;
|
||||
--status-color-info-500: #0e9be9;
|
||||
--status-color-info-950: #082c49;
|
||||
// Status color default will change with theme and will be defined on theme files
|
||||
|
||||
//GENERIC
|
||||
--color-canvas: #e8e9ea;
|
||||
|
||||
// APP COLORS
|
||||
--app-white: #ffffff;
|
||||
--app-black: #000;
|
||||
|
||||
// SOCIAL LOGIN BUTTONS
|
||||
--google-login-background: #4285f4;
|
||||
--google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)};
|
||||
--google-login-foreground: var(--white);
|
||||
--google-login-foreground: var(--df-primary);
|
||||
|
||||
--github-login-background: #4c4c4c;
|
||||
--github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)};
|
||||
--github-login-foreground: var(--white);
|
||||
--github-login-foreground: var(--app-white);
|
||||
|
||||
--oidc-login-background: #b3b3b3;
|
||||
--oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)};
|
||||
--oidc-login-foreground: var(--white);
|
||||
--oidc-login-foreground: var(--app-white);
|
||||
|
||||
--gitlab-login-background: #fc6d26;
|
||||
--gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
|
||||
--gitlab-login-foreground: var(--white);
|
||||
--gitlab-login-foreground: var(--app-white);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@
|
|||
$db-primary: var(--color-background-primary);
|
||||
$db-secondary: var(--color-background-secondary);
|
||||
$db-tertiary: var(--color-background-tertiary);
|
||||
$db-cuaternary: var(--color-background-quaternary);
|
||||
$db-quaternary: var(--color-background-quaternary);
|
||||
$db-subtle: var(--color-background-subtle);
|
||||
$db-disabled: var(--color-background-disabled);
|
||||
|
||||
$df-primary: var(--color-foreground-primary);
|
||||
$df-secondary: var(--color-foreground-secondary);
|
||||
$df-tertiary: var(--color-foreground-tertiary);
|
||||
$df-tertiary: var(--color-accent-quaternary);
|
||||
$da-primary: var(--color-accent-primary);
|
||||
$da-primary-muted: var(--color-accent-primary-muted);
|
||||
$da-secondary: var(--color-accent-secondary);
|
||||
|
|
|
|||
|
|
@ -9,14 +9,13 @@
|
|||
.default {
|
||||
// BASE COLORS
|
||||
--canvas-background-color: var(--color-background-primary);
|
||||
--canvas-fill-color: var(--canvas-color);
|
||||
--canvas-fill-color: var(--color-canvas);
|
||||
|
||||
--scrollbar-background-color: var(--color-foreground-secondary);
|
||||
--panel-background-color: var(--color-background-primary);
|
||||
--app-background: var(--color-background-primary);
|
||||
--loader-background: var(--color-background-primary);
|
||||
--panel-title-background-color: var(--color-background-secondary);
|
||||
--presence-color: var(--default-presence-color);
|
||||
|
||||
// BUTTONS
|
||||
--button-foreground-hover: var(--color-accent-primary);
|
||||
|
|
@ -76,8 +75,8 @@
|
|||
--button-radio-border-color-focus: var(--color-accent-primary);
|
||||
--button-radio-foreground-color-focus: var(--color-foreground-secondary);
|
||||
|
||||
--button-warning-background-color-rest: var(--warning-color);
|
||||
--button-warning-border-color-rest: var(--warning-color);
|
||||
--button-warning-background-color-rest: var(--status-color-warning-500);
|
||||
--button-warning-border-color-rest: var(--status-color-warning-500);
|
||||
--button-warning-foreground-color-rest: var(--color-background-secondary);
|
||||
|
||||
--button-disabled-background-color-rest: var(--color-background-disabled);
|
||||
|
|
@ -132,15 +131,16 @@
|
|||
--palette-button-shadow-final: transparent;
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
|
||||
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
|
||||
--color-bullet-background-color: var(--app-white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--color-bullet-border-color-selected: var(--color-accent-primary);
|
||||
|
||||
// ICONS
|
||||
--icon-foreground: var(--color-foreground-secondary);
|
||||
--main-icon-foreground: var(--color-foreground-primary);
|
||||
--icon-foreground-hover: var(--color-foreground-primary);
|
||||
--icon-foreground-accept: var(--ok-color);
|
||||
--icon-foreground-discard: var(--error-color);
|
||||
--icon-foreground-accept: var(--status-color-success-500);
|
||||
--icon-foreground-discard: var(--status-color-error-500);
|
||||
|
||||
// INPUTS, SELECTS, DROPDOWNS
|
||||
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
--input-background-color-disabled: var(--color-background-primary);
|
||||
--input-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--input-border-color-disabled: var(--color-background-quaternary);
|
||||
--input-border-color-error: var(--error-color);
|
||||
--input-border-color-error: var(--status-color-error-500);
|
||||
--input-border-color-success: var(--color-accent-primary);
|
||||
--input-details-color: var(--color-background-primary);
|
||||
|
||||
|
|
@ -212,16 +212,16 @@
|
|||
--assets-title-background-color: var(--color-background-primary);
|
||||
--assets-item-background-color: var(--color-background-tertiary);
|
||||
--assets-item-background-color-hover: var(--color-background-quaternary);
|
||||
--assets-item-name-background-color: var(--dark-gray-2-80); // TODO: penpot file has a non-existing token
|
||||
--assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
|
||||
--assets-item-name-foreground-color: var(--color-foreground-secondary);
|
||||
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
|
||||
--assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
|
||||
--assets-item-border-color: var(--color-accent-primary);
|
||||
--assets-item-background-color-drag: var(--color-accent-primary-muted);
|
||||
--assets-item-border-color-drag: var(--color-accent-tertiary);
|
||||
--assets-component-background-color: var(--white); // We don't want this color to change with palette
|
||||
--assets-component-background-color: var(--app-white); // We don't want this color to change with palette
|
||||
--assets-component-background-color-disabled: var(
|
||||
--off-white
|
||||
--df-secondary;
|
||||
); // We don't want this color to change with palette
|
||||
--assets-component-border-color: var(--color-background-tertiary);
|
||||
--assets-component-border-selected: var(--color-accent-tertiary);
|
||||
|
|
@ -236,6 +236,8 @@
|
|||
--library-content-foreground-color: var(--color-foreground-secondary);
|
||||
|
||||
--dropdown-background-color: var(--color-background-tertiary);
|
||||
--dropdown-separator-color: var(--color-background-primary);
|
||||
--profile-drowpdown-background-color: var(--color-background-primary);
|
||||
|
||||
--not-found-background-color: var(--color-background-tertiary);
|
||||
--not-found-foreground-color: var(--color-foreground-secondary);
|
||||
|
|
@ -271,42 +273,53 @@
|
|||
--comment-bullet-foreground-color-resolved: var(--color-foreground-secondary);
|
||||
--comment-bullet-border-color-resolved: var(--color-background-quaternary);
|
||||
--comment-modal-background-color: var(--color-background-primary);
|
||||
--comment-thread-background-color-hover: var(--color-background-primary);
|
||||
|
||||
// GRID LAYOUT
|
||||
--grid-editor-marker-color: var(--color-foreground-tertiary);
|
||||
--grid-editor-marker-text: var(--color-foreground-tertiary);
|
||||
--grid-editor-area-background: var(--color-foreground-tertiary);
|
||||
--grid-editor-area-text: var(--color-foreground-tertiary);
|
||||
--grid-editor-line-color: var(--color-foreground-tertiary);
|
||||
--grid-editor-plus-btn-foreground: var(--white);
|
||||
--grid-editor-plus-btn-background: var(--color-foreground-tertiary);
|
||||
--grid-editor-marker-color: var(--color-accent-quaternary);
|
||||
--grid-editor-marker-text: var(--color-accent-quaternary);
|
||||
--grid-editor-area-background: var(--color-accent-quaternary);
|
||||
--grid-editor-area-text: var(--color-accent-quaternary);
|
||||
--grid-editor-line-color: var(--color-accent-quaternary);
|
||||
--grid-editor-plus-btn-foreground: var(--app-white);
|
||||
--grid-editor-plus-btn-background: var(--color-accent-quaternary);
|
||||
|
||||
// MODALS
|
||||
--modal-background-color: var(--color-background-primary);
|
||||
--modal-title-foreground-color: var(--color-foreground-primary);
|
||||
--modal-text-foreground-color: var(--color-foreground-secondary);
|
||||
--modal-hint-border-color: var(--color-background-quaternary);
|
||||
--modal-button-background-color-error: var(--error-color);
|
||||
--modal-button-background-color-error: var(--status-color-error-500);
|
||||
--modal-button-foreground-color-error: var(--color-foreground-primary);
|
||||
--modal-link-foreground-color: var(--color-accent-primary);
|
||||
--modal-border-color: var(--color-background-quaternary);
|
||||
|
||||
// ALERTS & STATUS
|
||||
--alert-background-color-ok: var(--ok-color);
|
||||
--alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme
|
||||
--alert-background-color-warning: var(--warning-color);
|
||||
--alert-foreground-color-warning: var(--white); // We don't want this color to change with theme
|
||||
--alert-background-color-error: var(--error-color);
|
||||
--alert-foreground-color-error: var(--white); // We don't want this color to change with theme
|
||||
// ALERTS NOTIFICATION TOAST & STATUS WIDGET
|
||||
--alert-background-color-success: var(--status-color-success-500);
|
||||
--alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme
|
||||
--alert-background-color-warning: var(--status-color-warning-500);
|
||||
--alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme
|
||||
--alert-background-color-error: var(--status-color-error-500);
|
||||
--alert-foreground-color-error: var(--app-white); // We don't want this color to change with theme
|
||||
--alert-background-color-neutral: var(--color-background-quaternary);
|
||||
--alert-foreground-color-neutral: var(--color-foreground-secondary);
|
||||
--alert-foreground-color-neutral-active: var(--color-foreground-primary);
|
||||
|
||||
--status-ok-background-color: var(--ok-color);
|
||||
--status-warning-background-color: var(--warning-color);
|
||||
--status-pending-background-color: var(--pending-color);
|
||||
--status-error-background-color: var(--error-color);
|
||||
--status-icon-foreground-color: var(--color-background-primary);
|
||||
--notification-background-color-success: var();
|
||||
--notification-foreground-color-success: var();
|
||||
--notification-border-color-success: var();
|
||||
--notification-foreground-color-default: var(--color-foreground-secondary);
|
||||
|
||||
--status-widget-background-color-success: var(--status-color-success-500);
|
||||
--status-widget-background-color-warning: var(--status-color-warning-500);
|
||||
--status-widget-background-color-pending: var(--status-color-pending-500);
|
||||
--status-widget-background-color-error: var(--status-color-error-500);
|
||||
--status-widget-icon-foreground-color: var(--color-background-primary); // TODO review
|
||||
|
||||
--element-foreground-success: var(--status-color-success-500);
|
||||
--element-foreground-warning: var(--status-color-warning-500);
|
||||
--element-foreground-pending: var(--status-color-info-500);
|
||||
--element-foreground-error: var(--status-color-error-500);
|
||||
|
||||
// INTERFACE ELEMENTS
|
||||
--search-bar-background-color: var(--color-background-primary);
|
||||
|
|
|
|||
|
|
@ -7,32 +7,27 @@
|
|||
@use "sass:meta";
|
||||
|
||||
:root {
|
||||
--color-background-primary: var(--dark-gray-1);
|
||||
--color-background-secondary: var(--dark-gray-2);
|
||||
--color-background-tertiary: var(--dark-gray-3);
|
||||
--color-background-quaternary: var(--dark-gray-4);
|
||||
--color-background-subtle: var(--dark-gray-2-30);
|
||||
--color-background-disabled: var(--off-white);
|
||||
--color-foreground-primary: var(--white);
|
||||
--color-foreground-secondary: var(--off-white);
|
||||
--color-foreground-tertiary: var(--pink);
|
||||
--color-foreground-disabled: var(--off-white-40);
|
||||
--color-accent-primary: var(--green);
|
||||
--color-accent-primary-muted: var(--green-30);
|
||||
--color-accent-secondary: var(--lilac);
|
||||
--color-accent-tertiary: var(--strong-green);
|
||||
--color-accent-tertiary-muted: var(--strong-green-10);
|
||||
--color-component-highlight: var(--lilac);
|
||||
--color-background-primary: var(--db-primary);
|
||||
--color-background-secondary: var(--db-secondary);
|
||||
--color-background-tertiary: var(--db-tertiary);
|
||||
--color-background-quaternary: var(--db-quaternary);
|
||||
--color-background-subtle: var(--db-secondary-30);
|
||||
--color-background-disabled: var(--df-secondary);
|
||||
--color-foreground-primary: var(--df-primary);
|
||||
--color-foreground-secondary: var(--df-secondary);
|
||||
--color-foreground-disabled: var(--df-secondary-40);
|
||||
--color-accent-primary: var(--da-primary);
|
||||
--color-accent-primary-muted: var(--da-primary-muted);
|
||||
--color-accent-secondary: var(--da-secondary);
|
||||
--color-accent-tertiary: var(--da-tertiary);
|
||||
--color-accent-tertiary-muted: var(--da-tertiary-10);
|
||||
--color-accent-quaternary: var(--da-quaternary);
|
||||
--color-component-highlight: var(--da-secondary);
|
||||
|
||||
--overlay-color: rgba(0, 0, 0, 0.4);
|
||||
--ok-color: var(--dark-ok-color);
|
||||
--warning-color: var(--dark-warning-color);
|
||||
--pending-color: var(--dark-pending-color);
|
||||
--error-color: var(--dark-error-color);
|
||||
--canvas-color: var(--color-canvas);
|
||||
|
||||
--shadow-color: var(--dark-gray-2-30);
|
||||
--radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset;
|
||||
--shadow-color: var(--db-secondary-30);
|
||||
--radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;
|
||||
|
||||
@include meta.load-css("hljs-dark-theme");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,32 +7,27 @@
|
|||
@use "sass:meta";
|
||||
|
||||
.light {
|
||||
--color-background-primary: var(--light-gray-1);
|
||||
--color-background-secondary: var(--light-gray-2);
|
||||
--color-background-tertiary: var(--light-gray-3);
|
||||
--color-background-quaternary: var(--light-gray-4);
|
||||
--color-background-subtle: var(--light-gray-2-30); //Whatch this¡¡
|
||||
--color-background-disabled: var(--light-gray-4);
|
||||
--color-foreground-primary: var(--black);
|
||||
--color-foreground-secondary: var(--off-black);
|
||||
--color-foreground-tertiary: var(--pink);
|
||||
--color-foreground-disabled: var(--off-black-40);
|
||||
--color-accent-primary: var(--purple);
|
||||
--color-accent-primary-muted: var(--purple-30);
|
||||
--color-accent-secondary: var(--blue);
|
||||
--color-accent-tertiary: var(--strong-purple);
|
||||
--color-accent-tertiary-muted: var(--strong-purple-10);
|
||||
--color-component-highlight: var(--blue);
|
||||
--color-background-primary: var(--lb-primary);
|
||||
--color-background-secondary: var(--lb-secondary);
|
||||
--color-background-tertiary: var(--lb-tertiary);
|
||||
--color-background-quaternary: var(--lb-quaternary);
|
||||
--color-background-subtle: var(--lb-secondary-30); //Whatch this¡¡
|
||||
--color-background-disabled: var(--lb-quaternary);
|
||||
--color-foreground-primary: var(--lf-primary);
|
||||
--color-foreground-secondary: var(--lf-secondary);
|
||||
--color-foreground-disabled: var(--lf-secondary-40);
|
||||
--color-accent-primary: var(--la-primary);
|
||||
--color-accent-primary-muted: var(--la-primary-muted);
|
||||
--color-accent-secondary: var(--la-secondary);
|
||||
--color-accent-tertiary: var(--la-tertiary);
|
||||
--color-accent-tertiary-muted: var(--la-tertiary-10);
|
||||
--color-accent-quaternary: var(--la-quaternary);
|
||||
--color-component-highlight: var(--la-secondary);
|
||||
|
||||
--overlay-color: rgba(255, 255, 255, 0.4);
|
||||
--ok-color: var(--light-ok-color);
|
||||
--warning-color: var(--light-warning-color);
|
||||
--pending-color: var(--light-pending-color);
|
||||
--error-color: var(--light-error-color);
|
||||
--canvas-color: var(--color-canvas);
|
||||
|
||||
--shadow-color: var(--off-black-40);
|
||||
--radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
|
||||
--shadow-color: var(--lf-secondary-40);
|
||||
--radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
|
||||
|
||||
@include meta.load-css("hljs-light-theme");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
"Default data for page metadata."
|
||||
{:grid-x-axis grid-x-axis
|
||||
:grid-y-axis grid-y-axis
|
||||
:grid-color "var(--off-white)"
|
||||
:grid-color "var(--df-secondary)"
|
||||
:grid-alignment true
|
||||
:background "var(--white)"})
|
||||
:background "var(--app-white)"})
|
||||
|
||||
(def size-presets
|
||||
[{:name "APPLE"}
|
||||
|
|
|
|||
|
|
@ -124,17 +124,15 @@
|
|||
;; --- Handle: Presence
|
||||
|
||||
(def ^:private presence-palette
|
||||
#{"#82e590" ; green
|
||||
"#7ad7c5" ; blue-green
|
||||
#{"#f49ef7" ; pink
|
||||
"#75cafc" ; blue
|
||||
"#a9bdfa" ; blue-purple
|
||||
"#fdcf79" ; gold
|
||||
"#a9bdfa" ; indigo
|
||||
"#faa6b7" ; red
|
||||
"#cbaaff" ; purple
|
||||
"#f49ef7" ; pink
|
||||
"#faa6b7" ; salmon
|
||||
"#f9b489" ; orange
|
||||
"#fdcd79" ; soft-orange
|
||||
"#dee563" ; yellow -> default presence color
|
||||
"#b1e96f" ; yellow-green
|
||||
"#b1e96f" ; lemon
|
||||
})
|
||||
|
||||
(defn handle-presence
|
||||
|
|
@ -145,7 +143,7 @@
|
|||
(remove nil?))
|
||||
used (into #{} xfm presence)
|
||||
avail (set/difference presence-palette used)]
|
||||
(or (first avail) "var(--black)")))
|
||||
(or (first avail) "var(--app-black)")))
|
||||
|
||||
(update-color [color presence]
|
||||
(if (some? color)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.auth-section {
|
||||
align-items: center;
|
||||
background: $db-primary;
|
||||
background: var(--panel-background-color);
|
||||
display: grid;
|
||||
gap: $s-32;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.separator {
|
||||
border-color: $db-cuaternary;
|
||||
border-color: $db-quaternary;
|
||||
margin: $s-24 0;
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
flex-direction: column;
|
||||
gap: $s-12;
|
||||
padding: $s-24 0;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--white);
|
||||
color: var(--app-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.notification-icon {
|
||||
fill: $df-primary;
|
||||
fill: var(--main-icon-foreground);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $s-32;
|
||||
|
|
@ -33,6 +33,6 @@
|
|||
.notification-text-email,
|
||||
.notification-text {
|
||||
font-size: $fs-16;
|
||||
color: $df-secondary;
|
||||
color: var(--notification-foreground-color-default);
|
||||
margin-bottom: $s-16;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
padding: $s-8 $s-16;
|
||||
|
||||
&:hover {
|
||||
background: $db-primary;
|
||||
background: var(--comment-thread-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@
|
|||
}
|
||||
}
|
||||
&.invalid {
|
||||
background-color: var(--status-error-background-color);
|
||||
background-color: var(--status-widget-background-color-error);
|
||||
.text {
|
||||
color: var(--alert-foreground-color-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
.separator {
|
||||
margin: 0;
|
||||
height: $s-12;
|
||||
border-top: 1px solid $db-primary;
|
||||
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
}
|
||||
.checked-element {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@use "refactor/common-refactor.scss" as *;
|
||||
|
||||
.dashboard {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
grid-template-rows: $s-52 1fr;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
svg {
|
||||
stroke: $da-primary;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard-fonts {
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: $s-120;
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
.table-field {
|
||||
color: $df-primary;
|
||||
.variant {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
margin-right: $s-4;
|
||||
padding-right: $s-4;
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
&.failure {
|
||||
margin-right: $s-12;
|
||||
svg {
|
||||
stroke: var(--warning-color);
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
|
||||
background-color: $db-primary;
|
||||
border-radius: $br-12;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-primary;
|
||||
font-size: $fs-12;
|
||||
|
||||
|
|
@ -289,9 +289,9 @@
|
|||
}
|
||||
}
|
||||
&.warning {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
.icon svg {
|
||||
stroke: var(--warning-color);
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
.fonts-placeholder {
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: $s-160;
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
}
|
||||
|
||||
:global(svg#loader-pencil) {
|
||||
stroke: $db-cuaternary;
|
||||
stroke: $db-quaternary;
|
||||
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
@ -345,7 +345,7 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
}
|
||||
|
||||
svg {
|
||||
background-color: var(--canvas-color);
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid transparent;
|
||||
height: $s-24;
|
||||
|
|
|
|||
34
frontend/src/app/main/ui/dashboard/import.scss
vendored
34
frontend/src/app/main/ui/dashboard/import.scss
vendored
|
|
@ -39,8 +39,8 @@
|
|||
width: 100%;
|
||||
margin-bottom: $s-24;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--alert-background-color-ok);
|
||||
color: var(--alert-foreground-color-ok);
|
||||
background-color: var(--alert-background-color-success);
|
||||
color: var(--alert-foreground-color-success);
|
||||
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
width: $s-24;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--alert-foreground-color-ok);
|
||||
stroke: var(--alert-foreground-color-success);
|
||||
}
|
||||
}
|
||||
.message {
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
&.error {
|
||||
svg {
|
||||
stroke: var(--status-error-color);
|
||||
stroke: var(--element-foreground-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -163,46 +163,46 @@
|
|||
|
||||
&.loading {
|
||||
.file-name {
|
||||
color: var(--status-pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
.file-icon {
|
||||
:global(#loader-pencil) {
|
||||
color: var(--status-pending-color);
|
||||
stroke: var(--status-pending-color);
|
||||
fill: var(--status-pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
stroke: var(--element-foreground-pending);
|
||||
fill: var(--element-foreground-pending);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
.file-name {
|
||||
color: var(--status-warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
.file-icon svg {
|
||||
stroke: var(--status-warning-color);
|
||||
stroke: var(--element-foreground-warning);
|
||||
}
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--status-warning-color);
|
||||
fill: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--status-success-color);
|
||||
color: var(--element-foreground-success);
|
||||
.file-icon svg {
|
||||
stroke: var(--status-success-color);
|
||||
stroke: var(--element-foreground-success);
|
||||
}
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--status-success-color);
|
||||
fill: var(--element-foreground-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--status-error-color);
|
||||
color: var(--element-foreground-error);
|
||||
.file-icon svg {
|
||||
stroke: var(--status-error-color);
|
||||
stroke: var(--element-foreground-error);
|
||||
}
|
||||
.file-icon.icon-fill svg {
|
||||
fill: var(--status-error-color);
|
||||
fill: var(--element-foreground-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
input.element-title {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--input-background-color-active);
|
||||
border-radius: $br-8;
|
||||
color: $df-primary;
|
||||
font-size: $fs-16;
|
||||
|
|
@ -47,7 +47,7 @@ input.element-title {
|
|||
}
|
||||
&:hover {
|
||||
svg {
|
||||
fill: var(--warning-color);
|
||||
fill: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
85% top;
|
||||
background-repeat: no-repeat;
|
||||
align-items: center;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
&:hover {
|
||||
border: $s-2 solid $da-tertiary;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
color: $da-primary;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
flex-direction: column;
|
||||
height: $s-200;
|
||||
background: transparent;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
|
||||
.text {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
|
||||
background-color: $db-primary;
|
||||
border-right: $s-1 solid $db-cuaternary;
|
||||
background-color: var(--panel-background-color);
|
||||
border-right: $s-1 solid $db-quaternary;
|
||||
margin: 0 $s-16 0 0;
|
||||
padding: $s-16 0 0 0;
|
||||
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
position: absolute;
|
||||
z-index: $z-index-4;
|
||||
background-color: $db-tertiary;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
|
||||
.separator {
|
||||
|
|
@ -161,11 +161,11 @@
|
|||
padding: $s-6 $s-16;
|
||||
|
||||
.warning {
|
||||
color: var(--dark-warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
svg {
|
||||
height: $s-12;
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
li {
|
||||
color: $df-primary;
|
||||
&.warning {
|
||||
color: var(--dark-warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
.teams-dropdown {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
min-width: $s-248;
|
||||
|
||||
left: 0;
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
.team-icon {
|
||||
&.new-team {
|
||||
background-color: $da-primary;
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
}
|
||||
|
||||
.new-team {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
|
||||
&.action {
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
}
|
||||
|
||||
&.current {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
.element-title {
|
||||
color: $da-primary;
|
||||
}
|
||||
|
|
@ -441,7 +441,7 @@
|
|||
position: relative;
|
||||
|
||||
background-color: $db-tertiary;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
.profile {
|
||||
align-items: center;
|
||||
|
|
@ -474,8 +474,7 @@
|
|||
.dropdown {
|
||||
left: $s-16;
|
||||
bottom: $s-44;
|
||||
|
||||
background-color: $db-primary;
|
||||
background-color: var(--profile-drowpdown-background-color);
|
||||
border: $s-1 solid $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
min-width: $s-252;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
align-items: center;
|
||||
background-color: transparent;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-secondary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
.dropdown {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
box-shadow: 0 $s-2 $s-8 rgba(0, 0, 0, 0.25);
|
||||
left: calc(-1 * $s-144);
|
||||
max-height: $s-480;
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
color: $df-primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
|
||||
&.title {
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
li {
|
||||
color: $df-primary;
|
||||
&.warning {
|
||||
color: var(--warning-color);
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
align-items: center;
|
||||
padding: $s-4 $s-8;
|
||||
font-size: $fs-14;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
border-color: transparent;
|
||||
border-radius: $br-8;
|
||||
}
|
||||
|
|
@ -271,7 +271,7 @@
|
|||
text-transform: uppercase;
|
||||
|
||||
&.pending {
|
||||
background-color: var(--warning-color);
|
||||
background-color: var(--status-color-warning-500);
|
||||
}
|
||||
|
||||
&.expired {
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
height: $s-16;
|
||||
}
|
||||
.failure svg {
|
||||
fill: var(--warning-color);
|
||||
fill: var(--element-foreground-warning);
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
}
|
||||
|
|
@ -422,7 +422,7 @@
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: $s-16;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
border-radius: $br-8;
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
margin-right: $s-32;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
margin-left: $s-6;
|
||||
position: absolute;
|
||||
border-top-left-radius: $s-8;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
|
||||
.card-container {
|
||||
width: $s-276;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
colors ["var(--color-background-primary)"
|
||||
"var(--color-background-secondary)"
|
||||
"var(--color-background-tertiary)"
|
||||
"var(--color-background-cuaternary)"
|
||||
"var(--color-background-quaternary)"
|
||||
"var(--color-foreground-primary)"
|
||||
"var(--color-foreground-secondary)"
|
||||
"var(--color-accent-primary)"
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@
|
|||
height: 100%;
|
||||
min-height: $s-32;
|
||||
min-width: $s-32;
|
||||
background-color: var(--white);
|
||||
background-color: var(--app-white);
|
||||
border-radius: $br-6;
|
||||
margin: auto 0;
|
||||
img,
|
||||
|
|
@ -276,28 +276,27 @@
|
|||
}
|
||||
&.loading {
|
||||
.file-name {
|
||||
color: var(--pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
.file-icon svg:global(#loader-pencil) {
|
||||
color: var(--pending-color);
|
||||
stroke: var(--pending-color);
|
||||
fill: var(--pending-color);
|
||||
color: var(--element-foreground-pending);
|
||||
stroke: var(--element-foreground-pending);
|
||||
fill: var(--element-foreground-pending);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
.file-name {
|
||||
color: var(--error-color);
|
||||
color: var(--element-foreground-error);
|
||||
.file-icon svg {
|
||||
stroke: var(--error-color);
|
||||
stroke: var(--element-foreground-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.file-name {
|
||||
color: var(--ok-color);
|
||||
color: var(--element-foreground-success);
|
||||
.file-icon svg {
|
||||
stroke: var(--ok-color);
|
||||
stroke: var(--element-foreground-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
;; ------------------------------------------------
|
||||
|
||||
(def font-size 11)
|
||||
(def distance-color "var(--color-distance)")
|
||||
(def distance-text-color "var(--color-white)")
|
||||
(def warning-color "var(--color-warning)")
|
||||
(def distance-color "var(--da-quaternary)")
|
||||
(def distance-text-color "var(--app-white)")
|
||||
(def warning-color "var(--status-color-warning-500)")
|
||||
(def flex-display-pill-width 40)
|
||||
(def flex-display-pill-height 20)
|
||||
(def flex-display-pill-border-radius 4)
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@
|
|||
(def select-guide-width 1)
|
||||
(def select-guide-dasharray 5)
|
||||
|
||||
(def hover-color "var(--color-foreground-tertiary)")
|
||||
(def hover-color "var(--color-accent-quaternary)")
|
||||
|
||||
(def size-display-color "var(--white)")
|
||||
(def size-display-color "var(--app-white)")
|
||||
(def size-display-opacity 0.7)
|
||||
(def size-display-text-color "var(--black)")
|
||||
(def size-display-text-color "var(--app-black)")
|
||||
(def size-display-width-min 50)
|
||||
(def size-display-width-max 75)
|
||||
(def size-display-height 16)
|
||||
|
||||
(def distance-color "var(--color-foreground-tertiary)")
|
||||
(def distance-text-color "var(--white)")
|
||||
(def distance-color "var(--color-accent-quaternary)")
|
||||
(def distance-text-color "var(--app-white)")
|
||||
(def distance-border-radius 2)
|
||||
(def distance-pill-width 50)
|
||||
(def distance-pill-height 16)
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
}
|
||||
|
||||
.success {
|
||||
--bg-color: var(--alert-background-color-ok);
|
||||
--fg-color: var(--alert-foreground-color-ok);
|
||||
--bg-color: var(--alert-background-color-success);
|
||||
--fg-color: var(--alert-foreground-color-success);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@use "common/refactor/common-dashboard";
|
||||
|
||||
.dashboard {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--app-background);
|
||||
display: grid;
|
||||
grid-template-rows: $s-48 1fr;
|
||||
grid-template-columns: $s-40 $s-256 1fr;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
margin-right: $s-16;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border-top: $s-1 solid $db-cuaternary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
&.dashboard-projects {
|
||||
user-select: none;
|
||||
|
|
@ -107,8 +107,8 @@
|
|||
}
|
||||
&.disabled {
|
||||
input {
|
||||
background-color: $db-primary;
|
||||
border-color: $db-cuaternary;
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border-color: $db-quaternary;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
.content {
|
||||
padding: $s-2 $s-6;
|
||||
&.expired {
|
||||
background-color: var(--warning-color);
|
||||
background-color: var(--status-color-warning-500);
|
||||
border-radius: $br-4;
|
||||
color: $db-secondary;
|
||||
}
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
.access-tokens-empty {
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-cuaternary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
color: $df-secondary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
}
|
||||
&.disabled {
|
||||
input {
|
||||
background-color: $db-primary;
|
||||
border-color: $db-cuaternary;
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border-color: $db-quaternary;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.dashboard-sidebar {
|
||||
background-color: $db-primary;
|
||||
border-right: $s-1 solid $db-cuaternary;
|
||||
background-color: var(--panel-background-color);
|
||||
border-right: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1 / span 2;
|
||||
|
|
@ -112,14 +112,14 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
&::before {
|
||||
background-color: $df-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $db-cuaternary;
|
||||
background-color: $db-quaternary;
|
||||
color: $da-primary;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@
|
|||
:y area-y
|
||||
:width area-width
|
||||
:height area-height
|
||||
:style {:fill "var(--color-foreground-tertiary)"
|
||||
:style {:fill "var(--color-accent-quaternary)"
|
||||
:fill-opacity 0.3}}]
|
||||
[:text {:x area-text-x
|
||||
:y area-text-y
|
||||
:style {:fill "var(--color-foreground-tertiary)"
|
||||
:style {:fill "var(--color-accent-quaternary)"
|
||||
:font-family "worksans"
|
||||
:font-weight 600
|
||||
:font-size 14
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
:y (:y cell-origin)
|
||||
:width cell-width
|
||||
:height cell-height
|
||||
:style {:stroke "var(--color-foreground-tertiary)"
|
||||
:style {:stroke "var(--color-accent-quaternary)"
|
||||
:stroke-width 1.5
|
||||
:fill "none"}}]
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.settings-bar-left {
|
||||
background-color: $db-primary;
|
||||
background-color: var(--panel-background-color);
|
||||
height: 100%;
|
||||
width: $s-256;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
}
|
||||
|
||||
& svg {
|
||||
background-color: var(--canvas-color);
|
||||
background-color: var(--color-canvas);
|
||||
border-radius: $br-4;
|
||||
border: $s-2 solid transparent;
|
||||
height: $s-24;
|
||||
|
|
|
|||
|
|
@ -188,16 +188,16 @@
|
|||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
stroke: var(--status-icon-foreground-color);
|
||||
stroke: var(--status-widget-icon-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.pending-status {
|
||||
background-color: var(--status-warning-background-color);
|
||||
background-color: var(--status-widget-background-color-warning);
|
||||
}
|
||||
|
||||
.saving-status {
|
||||
background-color: var(--status-pending-background-color);
|
||||
background-color: var(--status-widget-background-color-pending);
|
||||
svg {
|
||||
animation: spin-animation 1s infinite;
|
||||
animation-timing-function: linear;
|
||||
|
|
@ -205,11 +205,11 @@
|
|||
}
|
||||
|
||||
.saved-status {
|
||||
background-color: var(--status-ok-background-color);
|
||||
background-color: var(--status-widget-background-color-success);
|
||||
}
|
||||
|
||||
.error-status {
|
||||
background-color: var(--status-error-background-color);
|
||||
background-color: var(--status-widget-background-color-error);
|
||||
}
|
||||
|
||||
.viewer-btn {
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(def primary-color "var(--color-accent-tertiary)")
|
||||
(def secondary-color "var(--color-foreground-tertiary)")
|
||||
(def black-color "var(--black)")
|
||||
(def white-color "var(--white)")
|
||||
(def gray-color "var(--off-white)")
|
||||
(def secondary-color "var(--color-accent-quaternary)")
|
||||
(def black-color "var(--app-black)")
|
||||
(def white-color "var(--app-white)")
|
||||
(def gray-color "var(--df-secondary)")
|
||||
|
||||
(def current-edit-path-ref
|
||||
(l/derived
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
.shape-title {
|
||||
font-size: $fs-14;
|
||||
padding-bottom: $s-4;
|
||||
background: $db-cuaternary;
|
||||
background: $db-quaternary;
|
||||
color: $df-primary;
|
||||
padding: $s-8;
|
||||
border-radius: $s-8;
|
||||
|
|
|
|||
|
|
@ -359,7 +359,7 @@
|
|||
border-radius: $br-6;
|
||||
|
||||
&:hover {
|
||||
background: $db-cuaternary;
|
||||
background: $db-quaternary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(def gradient-line-stroke-width 2)
|
||||
(def gradient-line-stroke-color "var(--white)")
|
||||
(def gradient-line-stroke-color "var(--app-white)")
|
||||
(def gradient-square-width 15)
|
||||
(def gradient-square-radius 2)
|
||||
(def gradient-square-stroke-width 2)
|
||||
(def gradient-width-handler-radius 5)
|
||||
(def gradient-width-handler-color "var(--white)")
|
||||
(def gradient-square-stroke-color "var(--white)")
|
||||
(def gradient-width-handler-color "var(--app-white)")
|
||||
(def gradient-square-stroke-color "var(--app-white)")
|
||||
(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
|
||||
|
||||
(mf/defc shadow [{:keys [id x y width height offset]}]
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
:rx (/ gradient-square-radius zoom)
|
||||
:width (/ gradient-square-width zoom)
|
||||
:height (/ gradient-square-width zoom)
|
||||
:stroke (if selected "var(--color-accent-tertiary)" "var(--white)")
|
||||
:stroke (if selected "var(--color-accent-tertiary)" "var(--app-white)")
|
||||
:stroke-width (/ gradient-square-stroke-width zoom)
|
||||
:fill (:value color)
|
||||
:fill-opacity (:opacity color)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
fill: var(--grid-editor-marker-color);
|
||||
}
|
||||
.marker-text {
|
||||
fill: var(--white);
|
||||
fill: var(--app-white);
|
||||
font-size: calc($s-12 / var(--zoom));
|
||||
font-family: worksans;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@
|
|||
(when icon-pdata
|
||||
[:path {:fill stroke
|
||||
:stroke-width 2
|
||||
:stroke "var(--white)"
|
||||
:stroke "var(--app-white)"
|
||||
:d icon-pdata
|
||||
:transform (str
|
||||
"scale(" inv-zoom ", " inv-zoom ") "
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
(if-not selected?
|
||||
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
|
||||
[:path {:stroke "var(--off-white)"
|
||||
[:path {:stroke "var(--df-secondary)"
|
||||
:fill "none"
|
||||
:pointer-events "visible"
|
||||
:stroke-width (/ 2 zoom)
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
[:& interaction-marker {:index index
|
||||
:x dest-x
|
||||
:y dest-y
|
||||
:stroke "var(--off-white)"
|
||||
:stroke "var(--df-secondary)"
|
||||
:action-type action-type
|
||||
:arrow-dir arrow-dir
|
||||
:zoom zoom}])]
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
[:& (mf/provider embed/context) {:value false}
|
||||
[:& shape-wrapper {:shape dest-shape}]]]]
|
||||
[:path {:stroke "var(--color-accent-tertiary)"
|
||||
:fill "var(--black)"
|
||||
:fill "var(--app-black)"
|
||||
:fill-opacity 0.5
|
||||
:stroke-width 1
|
||||
:d (dm/str "M" marker-x " " marker-y " "
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
[{:keys [session profile] :as props}]
|
||||
(let [zoom (mf/deref refs/selected-zoom)
|
||||
point (:point session)
|
||||
background-color (:color session "var(--black)")
|
||||
text-color (:text-color session "var(--white)")
|
||||
background-color (:color session "var(--app-black)")
|
||||
text-color (:text-color session "var(--app-white)")
|
||||
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
|
||||
shown-name (if (> (count (:fullname profile)) 16)
|
||||
(str (str/slice (:fullname profile) 0 12) "...")
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@
|
|||
:style {:fillOpacity "1"
|
||||
:strokeWidth "1px"
|
||||
:vectorEffect "non-scaling-stroke"}
|
||||
:fill "var(--white)"
|
||||
:fill "var(--app-white)"
|
||||
:stroke color
|
||||
:cx cx'
|
||||
:cy cy'}]
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
:style {:fillOpacity 1
|
||||
:stroke color
|
||||
:strokeWidth "1px"
|
||||
:fill "var(--white)"
|
||||
:fill "var(--app-white)"
|
||||
:vectorEffect "non-scaling-stroke"}
|
||||
:data-position (name position)
|
||||
:cx (+ x (/ length 2))
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private line-color "var(--color-foreground-tertiary)")
|
||||
(def ^:private line-color "var(--color-accent-quaternary)")
|
||||
(def ^:private segment-gap 2)
|
||||
(def ^:private segment-gap-side 5)
|
||||
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
[:text {:x (if (= coord :x) x (+ x (/ width 2)))
|
||||
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
|
||||
:font-size (/ pill-text-font-size zoom)
|
||||
:fill "var(--white)"
|
||||
:fill "var(--app-white)"
|
||||
:text-anchor "middle"}
|
||||
(fmt/format-number distance)]])
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
[beicon.v2.core :as rx]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private line-color "var(--color-foreground-tertiary)")
|
||||
(def ^:private line-color "var(--color-accent-quaternary)")
|
||||
(def ^:private line-opacity 0.6)
|
||||
(def ^:private line-width 1)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue