3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 14:11:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update basic color palette

Browse source
This commit is contained in:
Eva 2024-01-25 10:27:25 +01:00 • committed by Alonso Torres
parent a85a7c74c3
commit a882d0bf6d
51 changed files with 287 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -8,7 +8,7 @@
$db-primary: #18181a; $db-primary: #18181a;
$db-secondary: #000000; $db-secondary: #000000;
$db-tertiary: #212426; $db-tertiary: #212426;
$db-cuaternary: #2e3434; $db-quaternary: #2e3434;
$df-primary: #ffffff; $df-primary: #ffffff;
$df-secondary: #8f9da3; $df-secondary: #8f9da3;

105
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -8,68 +8,85 @@
:root { :root {
// DARK // DARK
--dark-gray-1: #1d1f20; // Dark background
--dark-gray-2: #000000; --db-primary: #18181a;
--dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)}; --db-secondary: #000000;
--dark-gray-2-80: #{color.change(#000000, $alpha: 0.8)}; --db-secondary-30: #{color.change(#000000, $alpha: 0.3)};
--dark-gray-3: #292c2d; --db-secondary-80: #{color.change(#000000, $alpha: 0.8)};
--dark-gray-4: #34393b; --db-tertiary: #212426;
--white: #fff; --db-quaternary: #2e3434;
--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)};
// NOTIFICATION //Dark foreground
--dark-ok-color: var(--strong-green); --df-primary: #ffffff;
--dark-warning-color: #ff6432; --df-secondary: #8f9da3;
--dark-pending-color: var(--lilac); --df-secondary-40: #{color.change(#8f9da3, $alpha: 0.4)}; // TODO: Check if needed
--dark-error-color: #ff3277;
--default-presence-color: #dee563; //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
--light-gray-1: #fff; // Light background
--light-gray-2: #e8eaee; --lb-primary: #ffffff;
--light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)}; --lb-secondary: #e8eaee;
--light-gray-2-80: #{color.change(#e8eaee, $alpha: 0.8)}; --lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)};
--light-gray-3: #f3f4f6; --lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)};
--light-gray-4: #eef0f2; --lb-tertiary: #f3f4f6;
--black: #000; --lb-quaternary: #eef0f2;
--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)};
// NOTIFICATION WILL CHANGE //Light foreground
--light-ok-color: var(--strong-green); --lf-primary: #000;
--light-warning-color: #ff9b49; --lf-secondary: #495e74;
--light-pending-color: var(--lilac); --lf-secondary-40: #{color.change(#495e74, $alpha: 0.4)};
--light-error-color: #ff4986;
//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 //GENERIC
--color-canvas: #e8e9ea; --color-canvas: #e8e9ea;
// APP COLORS
--app-white: #ffffff;
--app-black: #000;
// SOCIAL LOGIN BUTTONS // SOCIAL LOGIN BUTTONS
--google-login-background: #4285f4; --google-login-background: #4285f4;
--google-login-background-hover: #{color.adjust(#4285f4, $lightness: -15%)}; --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: #4c4c4c;
--github-login-background-hover: #{color.adjust(#4c4c4c, $lightness: -15%)}; --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: #b3b3b3;
--oidc-login-background-hover: #{color.adjust(#b3b3b3, $lightness: -15%)}; --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: #fc6d26;
--gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)}; --gitlab-login-background-hover: #{color.adjust(#fc6d26, $lightness: -15%)};
--gitlab-login-foreground: var(--white); --gitlab-login-foreground: var(--app-white);
} }

4
frontend/resources/styles/common/refactor/common-refactor.scss
View file

@ -23,13 +23,13 @@
$db-primary: var(--color-background-primary); $db-primary: var(--color-background-primary);
$db-secondary: var(--color-background-secondary); $db-secondary: var(--color-background-secondary);
$db-tertiary: var(--color-background-tertiary); $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-subtle: var(--color-background-subtle);
$db-disabled: var(--color-background-disabled); $db-disabled: var(--color-background-disabled);
$df-primary: var(--color-foreground-primary); $df-primary: var(--color-foreground-primary);
$df-secondary: var(--color-foreground-secondary); $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: var(--color-accent-primary);
$da-primary-muted: var(--color-accent-primary-muted); $da-primary-muted: var(--color-accent-primary-muted);
$da-secondary: var(--color-accent-secondary); $da-secondary: var(--color-accent-secondary);

75
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -9,14 +9,13 @@
.default { .default {
// BASE COLORS // BASE COLORS
--canvas-background-color: var(--color-background-primary); --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); --scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary); --panel-background-color: var(--color-background-primary);
--app-background: var(--color-background-primary); --app-background: var(--color-background-primary);
--loader-background: var(--color-background-primary); --loader-background: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary); --panel-title-background-color: var(--color-background-secondary);
--presence-color: var(--default-presence-color);
// BUTTONS // BUTTONS
--button-foreground-hover: var(--color-accent-primary); --button-foreground-hover: var(--color-accent-primary);
@ -76,8 +75,8 @@
--button-radio-border-color-focus: var(--color-accent-primary); --button-radio-border-color-focus: var(--color-accent-primary);
--button-radio-foreground-color-focus: var(--color-foreground-secondary); --button-radio-foreground-color-focus: var(--color-foreground-secondary);
--button-warning-background-color-rest: var(--warning-color); --button-warning-background-color-rest: var(--status-color-warning-500);
--button-warning-border-color-rest: var(--warning-color); --button-warning-border-color-rest: var(--status-color-warning-500);
--button-warning-foreground-color-rest: var(--color-background-secondary); --button-warning-foreground-color-rest: var(--color-background-secondary);
--button-disabled-background-color-rest: var(--color-background-disabled); --button-disabled-background-color-rest: var(--color-background-disabled);
@ -132,15 +131,16 @@
--palette-button-shadow-final: transparent; --palette-button-shadow-final: transparent;
--palette-handler-background-color: var(--color-background-quaternary); --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: var(--color-background-quaternary);
--color-bullet-border-color-selected: var(--color-accent-primary); --color-bullet-border-color-selected: var(--color-accent-primary);
// ICONS // ICONS
--icon-foreground: var(--color-foreground-secondary); --icon-foreground: var(--color-foreground-secondary);
--main-icon-foreground: var(--color-foreground-primary);
--icon-foreground-hover: var(--color-foreground-primary); --icon-foreground-hover: var(--color-foreground-primary);
--icon-foreground-accept: var(--ok-color); --icon-foreground-accept: var(--status-color-success-500);
--icon-foreground-discard: var(--error-color); --icon-foreground-discard: var(--status-color-error-500);
// INPUTS, SELECTS, DROPDOWNS // INPUTS, SELECTS, DROPDOWNS
@ -164,7 +164,7 @@
--input-background-color-disabled: var(--color-background-primary); --input-background-color-disabled: var(--color-background-primary);
--input-foreground-color-disabled: var(--color-foreground-secondary); --input-foreground-color-disabled: var(--color-foreground-secondary);
--input-border-color-disabled: var(--color-background-quaternary); --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-border-color-success: var(--color-accent-primary);
--input-details-color: var(--color-background-primary); --input-details-color: var(--color-background-primary);
@ -212,16 +212,16 @@
--assets-title-background-color: var(--color-background-primary); --assets-title-background-color: var(--color-background-primary);
--assets-item-background-color: var(--color-background-tertiary); --assets-item-background-color: var(--color-background-tertiary);
--assets-item-background-color-hover: var(--color-background-quaternary); --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: var(--color-foreground-secondary);
--assets-item-name-foreground-color-hover: var(--color-foreground-primary); --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
--assets-item-name-foreground-color-disabled: var(--color-foreground-disabled); --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
--assets-item-border-color: var(--color-accent-primary); --assets-item-border-color: var(--color-accent-primary);
--assets-item-background-color-drag: var(--color-accent-primary-muted); --assets-item-background-color-drag: var(--color-accent-primary-muted);
--assets-item-border-color-drag: var(--color-accent-tertiary); --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( --assets-component-background-color-disabled: var(
--off-white --df-secondary;
); // We don't want this color to change with palette ); // We don't want this color to change with palette
--assets-component-border-color: var(--color-background-tertiary); --assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-accent-tertiary); --assets-component-border-selected: var(--color-accent-tertiary);
@ -236,6 +236,8 @@
--library-content-foreground-color: var(--color-foreground-secondary); --library-content-foreground-color: var(--color-foreground-secondary);
--dropdown-background-color: var(--color-background-tertiary); --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-background-color: var(--color-background-tertiary);
--not-found-foreground-color: var(--color-foreground-secondary); --not-found-foreground-color: var(--color-foreground-secondary);
@ -271,42 +273,53 @@
--comment-bullet-foreground-color-resolved: var(--color-foreground-secondary); --comment-bullet-foreground-color-resolved: var(--color-foreground-secondary);
--comment-bullet-border-color-resolved: var(--color-background-quaternary); --comment-bullet-border-color-resolved: var(--color-background-quaternary);
--comment-modal-background-color: var(--color-background-primary); --comment-modal-background-color: var(--color-background-primary);
--comment-thread-background-color-hover: var(--color-background-primary);
// GRID LAYOUT // GRID LAYOUT
--grid-editor-marker-color: var(--color-foreground-tertiary); --grid-editor-marker-color: var(--color-accent-quaternary);
--grid-editor-marker-text: var(--color-foreground-tertiary); --grid-editor-marker-text: var(--color-accent-quaternary);
--grid-editor-area-background: var(--color-foreground-tertiary); --grid-editor-area-background: var(--color-accent-quaternary);
--grid-editor-area-text: var(--color-foreground-tertiary); --grid-editor-area-text: var(--color-accent-quaternary);
--grid-editor-line-color: var(--color-foreground-tertiary); --grid-editor-line-color: var(--color-accent-quaternary);
--grid-editor-plus-btn-foreground: var(--white); --grid-editor-plus-btn-foreground: var(--app-white);
--grid-editor-plus-btn-background: var(--color-foreground-tertiary); --grid-editor-plus-btn-background: var(--color-accent-quaternary);
// MODALS // MODALS
--modal-background-color: var(--color-background-primary); --modal-background-color: var(--color-background-primary);
--modal-title-foreground-color: var(--color-foreground-primary); --modal-title-foreground-color: var(--color-foreground-primary);
--modal-text-foreground-color: var(--color-foreground-secondary); --modal-text-foreground-color: var(--color-foreground-secondary);
--modal-hint-border-color: var(--color-background-quaternary); --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-button-foreground-color-error: var(--color-foreground-primary);
--modal-link-foreground-color: var(--color-accent-primary); --modal-link-foreground-color: var(--color-accent-primary);
--modal-border-color: var(--color-background-quaternary); --modal-border-color: var(--color-background-quaternary);
// ALERTS & STATUS // ALERTS NOTIFICATION TOAST & STATUS WIDGET
--alert-background-color-ok: var(--ok-color); --alert-background-color-success: var(--status-color-success-500);
--alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme --alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme
--alert-background-color-warning: var(--warning-color); --alert-background-color-warning: var(--status-color-warning-500);
--alert-foreground-color-warning: var(--white); // We don't want this color to change with theme --alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme
--alert-background-color-error: var(--error-color); --alert-background-color-error: var(--status-color-error-500);
--alert-foreground-color-error: var(--white); // We don't want this color to change with theme --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-background-color-neutral: var(--color-background-quaternary);
--alert-foreground-color-neutral: var(--color-foreground-secondary); --alert-foreground-color-neutral: var(--color-foreground-secondary);
--alert-foreground-color-neutral-active: var(--color-foreground-primary); --alert-foreground-color-neutral-active: var(--color-foreground-primary);
--status-ok-background-color: var(--ok-color); --notification-background-color-success: var();
--status-warning-background-color: var(--warning-color); --notification-foreground-color-success: var();
--status-pending-background-color: var(--pending-color); --notification-border-color-success: var();
--status-error-background-color: var(--error-color); --notification-foreground-color-default: var(--color-foreground-secondary);
--status-icon-foreground-color: var(--color-background-primary);
--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 // INTERFACE ELEMENTS
--search-bar-background-color: var(--color-background-primary); --search-bar-background-color: var(--color-background-primary);

41
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -7,32 +7,27 @@
@use "sass:meta"; @use "sass:meta";
:root { :root {
--color-background-primary: var(--dark-gray-1); --color-background-primary: var(--db-primary);
--color-background-secondary: var(--dark-gray-2); --color-background-secondary: var(--db-secondary);
--color-background-tertiary: var(--dark-gray-3); --color-background-tertiary: var(--db-tertiary);
--color-background-quaternary: var(--dark-gray-4); --color-background-quaternary: var(--db-quaternary);
--color-background-subtle: var(--dark-gray-2-30); --color-background-subtle: var(--db-secondary-30);
--color-background-disabled: var(--off-white); --color-background-disabled: var(--df-secondary);
--color-foreground-primary: var(--white); --color-foreground-primary: var(--df-primary);
--color-foreground-secondary: var(--off-white); --color-foreground-secondary: var(--df-secondary);
--color-foreground-tertiary: var(--pink); --color-foreground-disabled: var(--df-secondary-40);
--color-foreground-disabled: var(--off-white-40); --color-accent-primary: var(--da-primary);
--color-accent-primary: var(--green); --color-accent-primary-muted: var(--da-primary-muted);
--color-accent-primary-muted: var(--green-30); --color-accent-secondary: var(--da-secondary);
--color-accent-secondary: var(--lilac); --color-accent-tertiary: var(--da-tertiary);
--color-accent-tertiary: var(--strong-green); --color-accent-tertiary-muted: var(--da-tertiary-10);
--color-accent-tertiary-muted: var(--strong-green-10); --color-accent-quaternary: var(--da-quaternary);
--color-component-highlight: var(--lilac); --color-component-highlight: var(--da-secondary);
--overlay-color: rgba(0, 0, 0, 0.4); --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); --shadow-color: var(--db-secondary-30);
--radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset; --radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset;
@include meta.load-css("hljs-dark-theme"); @include meta.load-css("hljs-dark-theme");
} }

41
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -7,32 +7,27 @@
@use "sass:meta"; @use "sass:meta";
.light { .light {
--color-background-primary: var(--light-gray-1); --color-background-primary: var(--lb-primary);
--color-background-secondary: var(--light-gray-2); --color-background-secondary: var(--lb-secondary);
--color-background-tertiary: var(--light-gray-3); --color-background-tertiary: var(--lb-tertiary);
--color-background-quaternary: var(--light-gray-4); --color-background-quaternary: var(--lb-quaternary);
--color-background-subtle: var(--light-gray-2-30); //Whatch this¡¡ --color-background-subtle: var(--lb-secondary-30); //Whatch this¡¡
--color-background-disabled: var(--light-gray-4); --color-background-disabled: var(--lb-quaternary);
--color-foreground-primary: var(--black); --color-foreground-primary: var(--lf-primary);
--color-foreground-secondary: var(--off-black); --color-foreground-secondary: var(--lf-secondary);
--color-foreground-tertiary: var(--pink); --color-foreground-disabled: var(--lf-secondary-40);
--color-foreground-disabled: var(--off-black-40); --color-accent-primary: var(--la-primary);
--color-accent-primary: var(--purple); --color-accent-primary-muted: var(--la-primary-muted);
--color-accent-primary-muted: var(--purple-30); --color-accent-secondary: var(--la-secondary);
--color-accent-secondary: var(--blue); --color-accent-tertiary: var(--la-tertiary);
--color-accent-tertiary: var(--strong-purple); --color-accent-tertiary-muted: var(--la-tertiary-10);
--color-accent-tertiary-muted: var(--strong-purple-10); --color-accent-quaternary: var(--la-quaternary);
--color-component-highlight: var(--blue); --color-component-highlight: var(--la-secondary);
--overlay-color: rgba(255, 255, 255, 0.4); --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); --shadow-color: var(--lf-secondary-40);
--radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset; --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
@include meta.load-css("hljs-light-theme"); @include meta.load-css("hljs-light-theme");
} }

4
frontend/src/app/main/constants.cljs
View file

@ -19,9 +19,9 @@
"Default data for page metadata." "Default data for page metadata."
{:grid-x-axis grid-x-axis {:grid-x-axis grid-x-axis
:grid-y-axis grid-y-axis :grid-y-axis grid-y-axis
:grid-color "var(--off-white)" :grid-color "var(--df-secondary)"
:grid-alignment true :grid-alignment true
:background "var(--white)"}) :background "var(--app-white)"})
(def size-presets (def size-presets
[{:name "APPLE"} [{:name "APPLE"}

14
frontend/src/app/main/data/workspace/notifications.cljs
View file

@ -124,17 +124,15 @@
;; --- Handle: Presence ;; --- Handle: Presence
(def ^:private presence-palette (def ^:private presence-palette
#{"#82e590" ; green #{"#f49ef7" ; pink
"#7ad7c5" ; blue-green
"#75cafc" ; blue "#75cafc" ; blue
"#a9bdfa" ; blue-purple "#fdcf79" ; gold
"#a9bdfa" ; indigo
"#faa6b7" ; red
"#cbaaff" ; purple "#cbaaff" ; purple
"#f49ef7" ; pink
"#faa6b7" ; salmon
"#f9b489" ; orange "#f9b489" ; orange
"#fdcd79" ; soft-orange
"#dee563" ; yellow -> default presence color "#dee563" ; yellow -> default presence color
"#b1e96f" ; yellow-green "#b1e96f" ; lemon
}) })
(defn handle-presence (defn handle-presence
@ -145,7 +143,7 @@
(remove nil?)) (remove nil?))
used (into #{} xfm presence) used (into #{} xfm presence)
avail (set/difference presence-palette used)] avail (set/difference presence-palette used)]
(or (first avail) "var(--black)"))) (or (first avail) "var(--app-black)")))
(update-color [color presence] (update-color [color presence]
(if (some? color) (if (some? color)

2
frontend/src/app/main/ui/auth.scss
View file

@ -8,7 +8,7 @@
.auth-section { .auth-section {
align-items: center; align-items: center;
background: $db-primary; background: var(--panel-background-color);
display: grid; display: grid;
gap: $s-32; gap: $s-32;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);

6
frontend/src/app/main/ui/auth/common.scss
View file

@ -19,7 +19,7 @@
} }
.separator { .separator {
border-color: $db-cuaternary; border-color: $db-quaternary;
margin: $s-24 0; margin: $s-24 0;
} }
@ -60,7 +60,7 @@
flex-direction: column; flex-direction: column;
gap: $s-12; gap: $s-12;
padding: $s-24 0; padding: $s-24 0;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
span { span {
text-align: center; text-align: center;
@ -111,7 +111,7 @@
} }
&:hover { &:hover {
color: var(--white); color: var(--app-white);
} }
} }

4
frontend/src/app/main/ui/auth/register.scss
View file

@ -20,7 +20,7 @@
} }
.notification-icon { .notification-icon {
fill: $df-primary; fill: var(--main-icon-foreground);
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: $s-32; margin-bottom: $s-32;
@ -33,6 +33,6 @@
.notification-text-email, .notification-text-email,
.notification-text { .notification-text {
font-size: $fs-16; font-size: $fs-16;
color: $df-secondary; color: var(--notification-foreground-color-default);
margin-bottom: $s-16; margin-bottom: $s-16;
} }

2
frontend/src/app/main/ui/comments.scss
View file

@ -14,7 +14,7 @@
padding: $s-8 $s-16; padding: $s-8 $s-16;
&:hover { &:hover {
background: $db-primary; background: var(--comment-thread-background-color-hover);
} }
} }

2
frontend/src/app/main/ui/components/forms.scss
View file

@ -325,7 +325,7 @@
} }
} }
&.invalid { &.invalid {
background-color: var(--status-error-background-color); background-color: var(--status-widget-background-color-error);
.text { .text {
color: var(--alert-foreground-color-error); color: var(--alert-foreground-color-error);
} }

2
frontend/src/app/main/ui/components/select.scss
View file

@ -48,7 +48,7 @@
.separator { .separator {
margin: 0; margin: 0;
height: $s-12; height: $s-12;
border-top: 1px solid $db-primary; border-top: $s-1 solid var(--dropdown-separator-color);
} }
} }
.checked-element { .checked-element {

2
frontend/src/app/main/ui/dashboard.scss
View file

@ -7,7 +7,7 @@
@use "refactor/common-refactor.scss" as *; @use "refactor/common-refactor.scss" as *;
.dashboard { .dashboard {
background-color: $db-primary; background-color: var(--app-background);
display: grid; display: grid;
grid-template-columns: $s-40 $s-256 1fr; grid-template-columns: $s-40 $s-256 1fr;
grid-template-rows: $s-52 1fr; grid-template-rows: $s-52 1fr;

2
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -79,7 +79,7 @@
} }
&:hover { &:hover {
background-color: $db-cuaternary; background-color: $db-quaternary;
svg { svg {
stroke: $da-primary; stroke: $da-primary;

2
frontend/src/app/main/ui/dashboard/files.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;

14
frontend/src/app/main/ui/dashboard/fonts.scss
View file

@ -8,7 +8,7 @@
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
.dashboard-fonts { .dashboard-fonts {
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: $s-120; padding-left: $s-120;
@ -161,7 +161,7 @@
.table-field { .table-field {
color: $df-primary; color: $df-primary;
.variant { .variant {
background-color: $db-cuaternary; background-color: $db-quaternary;
border-radius: $br-8; border-radius: $br-8;
margin-right: $s-4; margin-right: $s-4;
padding-right: $s-4; padding-right: $s-4;
@ -196,7 +196,7 @@
&.failure { &.failure {
margin-right: $s-12; margin-right: $s-12;
svg { svg {
stroke: var(--warning-color); stroke: var(--element-foreground-warning);
} }
} }
@ -262,7 +262,7 @@
background-color: $db-primary; background-color: $db-primary;
border-radius: $br-12; border-radius: $br-12;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
color: $df-primary; color: $df-primary;
font-size: $fs-12; font-size: $fs-12;
@ -289,9 +289,9 @@
} }
} }
&.warning { &.warning {
background-color: $db-cuaternary; background-color: $db-quaternary;
.icon svg { .icon svg {
stroke: var(--warning-color); stroke: var(--element-foreground-warning);
} }
} }
} }
@ -304,7 +304,7 @@
.fonts-placeholder { .fonts-placeholder {
align-items: center; align-items: center;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: $s-160; height: $s-160;

4
frontend/src/app/main/ui/dashboard/grid.scss
View file

@ -280,7 +280,7 @@ $thumbnail-default-height: $s-168; // Default width
} }
:global(svg#loader-pencil) { :global(svg#loader-pencil) {
stroke: $db-cuaternary; stroke: $db-quaternary;
width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25); width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25);
} }
} }
@ -345,7 +345,7 @@ $thumbnail-default-height: $s-168; // Default width
} }
svg { svg {
background-color: var(--canvas-color); background-color: var(--color-canvas);
border-radius: $br-4; border-radius: $br-4;
border: $s-2 solid transparent; border: $s-2 solid transparent;
height: $s-24; height: $s-24;

34
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -39,8 +39,8 @@
width: 100%; width: 100%;
margin-bottom: $s-24; margin-bottom: $s-24;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--alert-background-color-ok); background-color: var(--alert-background-color-success);
color: var(--alert-foreground-color-ok); color: var(--alert-foreground-color-success);
.icon { .icon {
@include flexCenter; @include flexCenter;
@ -48,7 +48,7 @@
width: $s-24; width: $s-24;
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--alert-foreground-color-ok); stroke: var(--alert-foreground-color-success);
} }
} }
.message { .message {
@ -155,7 +155,7 @@
} }
&.error { &.error {
svg { svg {
stroke: var(--status-error-color); stroke: var(--element-foreground-error);
} }
} }
} }
@ -163,46 +163,46 @@
&.loading { &.loading {
.file-name { .file-name {
color: var(--status-pending-color); color: var(--element-foreground-pending);
.file-icon { .file-icon {
:global(#loader-pencil) { :global(#loader-pencil) {
color: var(--status-pending-color); color: var(--element-foreground-pending);
stroke: var(--status-pending-color); stroke: var(--element-foreground-pending);
fill: var(--status-pending-color); fill: var(--element-foreground-pending);
} }
} }
} }
} }
&.warning { &.warning {
.file-name { .file-name {
color: var(--status-warning-color); color: var(--element-foreground-warning);
.file-icon svg { .file-icon svg {
stroke: var(--status-warning-color); stroke: var(--element-foreground-warning);
} }
.file-icon.icon-fill svg { .file-icon.icon-fill svg {
fill: var(--status-warning-color); fill: var(--element-foreground-warning);
} }
} }
} }
&.success { &.success {
.file-name { .file-name {
color: var(--status-success-color); color: var(--element-foreground-success);
.file-icon svg { .file-icon svg {
stroke: var(--status-success-color); stroke: var(--element-foreground-success);
} }
.file-icon.icon-fill svg { .file-icon.icon-fill svg {
fill: var(--status-success-color); fill: var(--element-foreground-success);
} }
} }
} }
&.error { &.error {
.file-name { .file-name {
color: var(--status-error-color); color: var(--element-foreground-error);
.file-icon svg { .file-icon svg {
stroke: var(--status-error-color); stroke: var(--element-foreground-error);
} }
.file-icon.icon-fill svg { .file-icon.icon-fill svg {
fill: var(--status-error-color); fill: var(--element-foreground-error);
} }
} }
} }

4
frontend/src/app/main/ui/dashboard/inline_edition.scss
View file

@ -15,7 +15,7 @@
} }
input.element-title { input.element-title {
background-color: $db-primary; background-color: var(--input-background-color-active);
border-radius: $br-8; border-radius: $br-8;
color: $df-primary; color: $df-primary;
font-size: $fs-16; font-size: $fs-16;
@ -47,7 +47,7 @@ input.element-title {
} }
&:hover { &:hover {
svg { svg {
fill: var(--warning-color); fill: var(--element-foreground-warning);
} }
} }
} }

2
frontend/src/app/main/ui/dashboard/libraries.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;

4
frontend/src/app/main/ui/dashboard/placeholder.scss
View file

@ -34,7 +34,7 @@
85% top; 85% top;
background-repeat: no-repeat; background-repeat: no-repeat;
align-items: center; align-items: center;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
border-radius: $br-4; border-radius: $br-4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -75,7 +75,7 @@
&:hover { &:hover {
border: $s-2 solid $da-tertiary; border: $s-2 solid $da-tertiary;
background-color: $db-cuaternary; background-color: $db-quaternary;
color: $da-primary; color: $da-primary;
svg { svg {

2
frontend/src/app/main/ui/dashboard/projects.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;

4
frontend/src/app/main/ui/dashboard/search.scss
View file

@ -13,7 +13,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;
@ -35,7 +35,7 @@
flex-direction: column; flex-direction: column;
height: $s-200; height: $s-200;
background: transparent; background: transparent;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
border-radius: $br-8; border-radius: $br-8;
.text { .text {

25
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

@ -11,8 +11,8 @@
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 2; grid-column: 1 / span 2;
background-color: $db-primary; background-color: var(--panel-background-color);
border-right: $s-1 solid $db-cuaternary; border-right: $s-1 solid $db-quaternary;
margin: 0 $s-16 0 0; margin: 0 $s-16 0 0;
padding: $s-16 0 0 0; padding: $s-16 0 0 0;
@ -141,7 +141,7 @@
position: absolute; position: absolute;
z-index: $z-index-4; z-index: $z-index-4;
background-color: $db-tertiary; background-color: $db-tertiary;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
border-radius: $br-8; border-radius: $br-8;
.separator { .separator {
@ -161,11 +161,11 @@
padding: $s-6 $s-16; padding: $s-6 $s-16;
.warning { .warning {
color: var(--dark-warning-color); color: var(--element-foreground-warning);
} }
&:hover { &:hover {
background-color: $db-cuaternary; background-color: $db-quaternary;
} }
svg { svg {
height: $s-12; height: $s-12;
@ -182,7 +182,7 @@
li { li {
color: $df-primary; color: $df-primary;
&.warning { &.warning {
color: var(--dark-warning-color); color: var(--element-foreground-warning);
} }
} }
} }
@ -191,7 +191,7 @@
.teams-dropdown { .teams-dropdown {
background-color: $db-tertiary; background-color: $db-tertiary;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
min-width: $s-248; min-width: $s-248;
left: 0; left: 0;
@ -212,7 +212,7 @@
} }
&:hover { &:hover {
background-color: $db-cuaternary; background-color: $db-quaternary;
.team-icon { .team-icon {
&.new-team { &.new-team {
background-color: $da-primary; background-color: $da-primary;
@ -233,7 +233,7 @@
} }
.new-team { .new-team {
background-color: $db-cuaternary; background-color: $db-quaternary;
} }
&.action { &.action {
@ -425,7 +425,7 @@
} }
&.current { &.current {
background-color: $db-cuaternary; background-color: $db-quaternary;
.element-title { .element-title {
color: $da-primary; color: $da-primary;
} }
@ -441,7 +441,7 @@
position: relative; position: relative;
background-color: $db-tertiary; background-color: $db-tertiary;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
.profile { .profile {
align-items: center; align-items: center;
@ -474,8 +474,7 @@
.dropdown { .dropdown {
left: $s-16; left: $s-16;
bottom: $s-44; bottom: $s-44;
background-color: var(--profile-drowpdown-background-color);
background-color: $db-primary;
border: $s-1 solid $db-tertiary; border: $s-1 solid $db-tertiary;
border-radius: $br-8; border-radius: $br-8;
min-width: $s-252; min-width: $s-252;

18
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -12,7 +12,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;
@ -41,7 +41,7 @@
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
color: $df-secondary; color: $df-secondary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -110,7 +110,7 @@
.dropdown { .dropdown {
background-color: $db-tertiary; background-color: $db-tertiary;
border-radius: $br-8; 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); box-shadow: 0 $s-2 $s-8 rgba(0, 0, 0, 0.25);
left: calc(-1 * $s-144); left: calc(-1 * $s-144);
max-height: $s-480; max-height: $s-480;
@ -138,7 +138,7 @@
color: $df-primary; color: $df-primary;
&:hover { &:hover {
background-color: $db-cuaternary; background-color: $db-quaternary;
} }
&.title { &.title {
@ -156,7 +156,7 @@
li { li {
color: $df-primary; color: $df-primary;
&.warning { &.warning {
color: var(--warning-color); color: var(--element-foreground-warning);
} }
} }
} }
@ -237,7 +237,7 @@
align-items: center; align-items: center;
padding: $s-4 $s-8; padding: $s-4 $s-8;
font-size: $fs-14; font-size: $fs-14;
background-color: $db-cuaternary; background-color: $db-quaternary;
border-color: transparent; border-color: transparent;
border-radius: $br-8; border-radius: $br-8;
} }
@ -271,7 +271,7 @@
text-transform: uppercase; text-transform: uppercase;
&.pending { &.pending {
background-color: var(--warning-color); background-color: var(--status-color-warning-500);
} }
&.expired { &.expired {
@ -303,7 +303,7 @@
height: $s-16; height: $s-16;
} }
.failure svg { .failure svg {
fill: var(--warning-color); fill: var(--element-foreground-warning);
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
} }
@ -422,7 +422,7 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-top: $s-16; margin-top: $s-16;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
border-radius: $br-8; border-radius: $br-8;
color: $df-secondary; color: $df-secondary;
} }

4
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -41,7 +41,7 @@
margin-right: $s-32; margin-right: $s-32;
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: $db-cuaternary; background-color: $db-quaternary;
span { span {
display: inline-block; display: inline-block;
@ -107,7 +107,7 @@
margin-left: $s-6; margin-left: $s-6;
position: absolute; position: absolute;
border-top-left-radius: $s-8; border-top-left-radius: $s-8;
background-color: $db-cuaternary; background-color: $db-quaternary;
.card-container { .card-container {
width: $s-276; width: $s-276;

2
frontend/src/app/main/ui/debug/components_preview.cljs
View file

@ -42,7 +42,7 @@
colors ["var(--color-background-primary)" colors ["var(--color-background-primary)"
"var(--color-background-secondary)" "var(--color-background-secondary)"
"var(--color-background-tertiary)" "var(--color-background-tertiary)"
"var(--color-background-cuaternary)" "var(--color-background-quaternary)"
"var(--color-foreground-primary)" "var(--color-foreground-primary)"
"var(--color-foreground-secondary)" "var(--color-foreground-secondary)"
"var(--color-accent-primary)" "var(--color-accent-primary)"

19
frontend/src/app/main/ui/export.scss
View file

@ -202,7 +202,7 @@
height: 100%; height: 100%;
min-height: $s-32; min-height: $s-32;
min-width: $s-32; min-width: $s-32;
background-color: var(--white); background-color: var(--app-white);
border-radius: $br-6; border-radius: $br-6;
margin: auto 0; margin: auto 0;
img, img,
@ -276,28 +276,27 @@
} }
&.loading { &.loading {
.file-name { .file-name {
color: var(--pending-color); color: var(--element-foreground-pending);
.file-icon svg:global(#loader-pencil) { .file-icon svg:global(#loader-pencil) {
color: var(--pending-color); color: var(--element-foreground-pending);
stroke: var(--pending-color); stroke: var(--element-foreground-pending);
fill: var(--pending-color); fill: var(--element-foreground-pending);
} }
} }
} }
&.error { &.error {
.file-name { .file-name {
color: var(--error-color); color: var(--element-foreground-error);
.file-icon svg { .file-icon svg {
stroke: var(--error-color); stroke: var(--element-foreground-error);
} }
} }
} }
&.success { &.success {
.file-name { .file-name {
color: var(--ok-color); color: var(--element-foreground-success);
.file-icon svg { .file-icon svg {
stroke: var(--ok-color); stroke: var(--element-foreground-success);
} }
} }
} }

6
frontend/src/app/main/ui/flex_controls/common.cljs
View file

@ -8,9 +8,9 @@
;; ------------------------------------------------ ;; ------------------------------------------------
(def font-size 11) (def font-size 11)
(def distance-color "var(--color-distance)") (def distance-color "var(--da-quaternary)")
(def distance-text-color "var(--color-white)") (def distance-text-color "var(--app-white)")
(def warning-color "var(--color-warning)") (def warning-color "var(--status-color-warning-500)")
(def flex-display-pill-width 40) (def flex-display-pill-width 40)
(def flex-display-pill-height 20) (def flex-display-pill-height 20)
(def flex-display-pill-border-radius 4) (def flex-display-pill-border-radius 4)

10
frontend/src/app/main/ui/measurements.cljs
View file

@ -27,17 +27,17 @@
(def select-guide-width 1) (def select-guide-width 1)
(def select-guide-dasharray 5) (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-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-min 50)
(def size-display-width-max 75) (def size-display-width-max 75)
(def size-display-height 16) (def size-display-height 16)
(def distance-color "var(--color-foreground-tertiary)") (def distance-color "var(--color-accent-quaternary)")
(def distance-text-color "var(--white)") (def distance-text-color "var(--app-white)")
(def distance-border-radius 2) (def distance-border-radius 2)
(def distance-pill-width 50) (def distance-pill-width 50)
(def distance-pill-height 16) (def distance-pill-height 16)

4
frontend/src/app/main/ui/messages.scss
View file

@ -23,8 +23,8 @@
} }
.success { .success {
--bg-color: var(--alert-background-color-ok); --bg-color: var(--alert-background-color-success);
--fg-color: var(--alert-foreground-color-ok); --fg-color: var(--alert-foreground-color-success);
} }
.info { .info {

10
frontend/src/app/main/ui/settings.scss
View file

@ -8,7 +8,7 @@
@use "common/refactor/common-dashboard"; @use "common/refactor/common-dashboard";
.dashboard { .dashboard {
background-color: $db-primary; background-color: var(--app-background);
display: grid; display: grid;
grid-template-rows: $s-48 1fr; grid-template-rows: $s-48 1fr;
grid-template-columns: $s-40 $s-256 1fr; grid-template-columns: $s-40 $s-256 1fr;
@ -28,7 +28,7 @@
margin-right: $s-16; margin-right: $s-16;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
border-top: $s-1 solid $db-cuaternary; border-top: $s-1 solid $db-quaternary;
&.dashboard-projects { &.dashboard-projects {
user-select: none; user-select: none;
@ -107,8 +107,8 @@
} }
&.disabled { &.disabled {
input { input {
background-color: $db-primary; background-color: var(--input-background-color-disabled);
border-color: $db-cuaternary; border-color: $db-quaternary;
color: $df-secondary; color: $df-secondary;
} }
} }
@ -161,7 +161,7 @@
color: $df-primary; color: $df-primary;
&:hover { &:hover {
color: $da-primary; color: $da-primary;
background-color: $db-cuaternary; background-color: $db-quaternary;
} }
} }
hr { hr {

4
frontend/src/app/main/ui/settings/access_tokens.scss
View file

@ -85,7 +85,7 @@
.content { .content {
padding: $s-2 $s-6; padding: $s-2 $s-6;
&.expired { &.expired {
background-color: var(--warning-color); background-color: var(--status-color-warning-500);
border-radius: $br-4; border-radius: $br-4;
color: $db-secondary; color: $db-secondary;
} }
@ -149,7 +149,7 @@
.access-tokens-empty { .access-tokens-empty {
align-items: center; align-items: center;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid $db-cuaternary; border: $s-1 solid $db-quaternary;
color: $df-secondary; color: $df-secondary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

6
frontend/src/app/main/ui/settings/profile.scss
View file

@ -39,7 +39,7 @@
color: $df-primary; color: $df-primary;
&:hover { &:hover {
color: $da-primary; color: $da-primary;
background-color: $db-cuaternary; background-color: $db-quaternary;
} }
} }
hr { hr {
@ -110,8 +110,8 @@
} }
&.disabled { &.disabled {
input { input {
background-color: $db-primary; background-color: var(--input-background-color-disabled);
border-color: $db-cuaternary; border-color: $db-quaternary;
color: $df-secondary; color: $df-secondary;
} }
} }

8
frontend/src/app/main/ui/settings/sidebar.scss
View file

@ -7,8 +7,8 @@
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
.dashboard-sidebar { .dashboard-sidebar {
background-color: $db-primary; background-color: var(--panel-background-color);
border-right: $s-1 solid $db-cuaternary; border-right: $s-1 solid $db-quaternary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
grid-column: 1 / span 2; grid-column: 1 / span 2;
@ -112,14 +112,14 @@
} }
&:hover { &:hover {
background-color: $db-cuaternary; background-color: $db-quaternary;
&::before { &::before {
background-color: $df-primary; background-color: $df-primary;
} }
} }
&.current { &.current {
background-color: $db-cuaternary; background-color: $db-quaternary;
color: $da-primary; color: $da-primary;
a { a {

6
frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs
View file

@ -38,11 +38,11 @@
:y area-y :y area-y
:width area-width :width area-width
:height area-height :height area-height
:style {:fill "var(--color-foreground-tertiary)" :style {:fill "var(--color-accent-quaternary)"
:fill-opacity 0.3}}] :fill-opacity 0.3}}]
[:text {:x area-text-x [:text {:x area-text-x
:y area-text-y :y area-text-y
:style {:fill "var(--color-foreground-tertiary)" :style {:fill "var(--color-accent-quaternary)"
:font-family "worksans" :font-family "worksans"
:font-weight 600 :font-weight 600
:font-size 14 :font-size 14
@ -71,7 +71,7 @@
:y (:y cell-origin) :y (:y cell-origin)
:width cell-width :width cell-width
:height cell-height :height cell-height
:style {:stroke "var(--color-foreground-tertiary)" :style {:stroke "var(--color-accent-quaternary)"
:stroke-width 1.5 :stroke-width 1.5
:fill "none"}}] :fill "none"}}]

2
frontend/src/app/main/ui/viewer/inspect/left_sidebar.scss
View file

@ -7,7 +7,7 @@
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
.settings-bar-left { .settings-bar-left {
background-color: $db-primary; background-color: var(--panel-background-color);
height: 100%; height: 100%;
width: $s-256; width: $s-256;
} }

2
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -190,7 +190,7 @@
} }
& svg { & svg {
background-color: var(--canvas-color); background-color: var(--color-canvas);
border-radius: $br-4; border-radius: $br-4;
border: $s-2 solid transparent; border: $s-2 solid transparent;
height: $s-24; height: $s-24;

10
frontend/src/app/main/ui/workspace/right_header.scss
View file

@ -188,16 +188,16 @@
@extend .button-icon; @extend .button-icon;
height: $s-12; height: $s-12;
width: $s-12; width: $s-12;
stroke: var(--status-icon-foreground-color); stroke: var(--status-widget-icon-foreground-color);
} }
} }
.pending-status { .pending-status {
background-color: var(--status-warning-background-color); background-color: var(--status-widget-background-color-warning);
} }
.saving-status { .saving-status {
background-color: var(--status-pending-background-color); background-color: var(--status-widget-background-color-pending);
svg { svg {
animation: spin-animation 1s infinite; animation: spin-animation 1s infinite;
animation-timing-function: linear; animation-timing-function: linear;
@ -205,11 +205,11 @@
} }
.saved-status { .saved-status {
background-color: var(--status-ok-background-color); background-color: var(--status-widget-background-color-success);
} }
.error-status { .error-status {
background-color: var(--status-error-background-color); background-color: var(--status-widget-background-color-error);
} }
.viewer-btn { .viewer-btn {

8
frontend/src/app/main/ui/workspace/shapes/path/common.cljs
View file

@ -14,10 +14,10 @@
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def primary-color "var(--color-accent-tertiary)") (def primary-color "var(--color-accent-tertiary)")
(def secondary-color "var(--color-foreground-tertiary)") (def secondary-color "var(--color-accent-quaternary)")
(def black-color "var(--black)") (def black-color "var(--app-black)")
(def white-color "var(--white)") (def white-color "var(--app-white)")
(def gray-color "var(--off-white)") (def gray-color "var(--df-secondary)")
(def current-edit-path-ref (def current-edit-path-ref
(l/derived (l/derived

2
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
View file

@ -53,7 +53,7 @@
.shape-title { .shape-title {
font-size: $fs-14; font-size: $fs-14;
padding-bottom: $s-4; padding-bottom: $s-4;
background: $db-cuaternary; background: $db-quaternary;
color: $df-primary; color: $df-primary;
padding: $s-8; padding: $s-8;
border-radius: $s-8; border-radius: $s-8;

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -359,7 +359,7 @@
border-radius: $br-6; border-radius: $br-6;
&:hover { &:hover {
background: $db-cuaternary; background: $db-quaternary;
} }
} }
} }

8
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -22,13 +22,13 @@
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def gradient-line-stroke-width 2) (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-width 15)
(def gradient-square-radius 2) (def gradient-square-radius 2)
(def gradient-square-stroke-width 2) (def gradient-square-stroke-width 2)
(def gradient-width-handler-radius 5) (def gradient-width-handler-radius 5)
(def gradient-width-handler-color "var(--white)") (def gradient-width-handler-color "var(--app-white)")
(def gradient-square-stroke-color "var(--white)") (def gradient-square-stroke-color "var(--app-white)")
(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)") (def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
(mf/defc shadow [{:keys [id x y width height offset]}] (mf/defc shadow [{:keys [id x y width height offset]}]
@ -109,7 +109,7 @@
:rx (/ gradient-square-radius zoom) :rx (/ gradient-square-radius zoom)
:width (/ gradient-square-width zoom) :width (/ gradient-square-width zoom)
:height (/ 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) :stroke-width (/ gradient-square-stroke-width zoom)
:fill (:value color) :fill (:value color)
:fill-opacity (:opacity color) :fill-opacity (:opacity color)

2
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
View file

@ -11,7 +11,7 @@
fill: var(--grid-editor-marker-color); fill: var(--grid-editor-marker-color);
} }
.marker-text { .marker-text {
fill: var(--white); fill: var(--app-white);
font-size: calc($s-12 / var(--zoom)); font-size: calc($s-12 / var(--zoom));
font-family: worksans; font-family: worksans;
} }

8
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -131,7 +131,7 @@
(when icon-pdata (when icon-pdata
[:path {:fill stroke [:path {:fill stroke
:stroke-width 2 :stroke-width 2
:stroke "var(--white)" :stroke "var(--app-white)"
:d icon-pdata :d icon-pdata
:transform (str :transform (str
"scale(" inv-zoom ", " inv-zoom ") " "scale(" inv-zoom ", " inv-zoom ") "
@ -164,7 +164,7 @@
(if-not selected? (if-not selected?
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)} [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--off-white)" [:path {:stroke "var(--df-secondary)"
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
@ -173,7 +173,7 @@
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x dest-x :x dest-x
:y dest-y :y dest-y
:stroke "var(--off-white)" :stroke "var(--df-secondary)"
:action-type action-type :action-type action-type
:arrow-dir arrow-dir :arrow-dir arrow-dir
:zoom zoom}])] :zoom zoom}])]
@ -257,7 +257,7 @@
[:& (mf/provider embed/context) {:value false} [:& (mf/provider embed/context) {:value false}
[:& shape-wrapper {:shape dest-shape}]]]] [:& shape-wrapper {:shape dest-shape}]]]]
[:path {:stroke "var(--color-accent-tertiary)" [:path {:stroke "var(--color-accent-tertiary)"
:fill "var(--black)" :fill "var(--app-black)"
:fill-opacity 0.5 :fill-opacity 0.5
:stroke-width 1 :stroke-width 1
:d (dm/str "M" marker-x " " marker-y " " :d (dm/str "M" marker-x " " marker-y " "

4
frontend/src/app/main/ui/workspace/viewport/presence.cljs
View file

@ -25,8 +25,8 @@
[{:keys [session profile] :as props}] [{:keys [session profile] :as props}]
(let [zoom (mf/deref refs/selected-zoom) (let [zoom (mf/deref refs/selected-zoom)
point (:point session) point (:point session)
background-color (:color session "var(--black)") background-color (:color session "var(--app-black)")
text-color (:text-color session "var(--white)") text-color (:text-color session "var(--app-white)")
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom)) transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
shown-name (if (> (count (:fullname profile)) 16) shown-name (if (> (count (:fullname profile)) 16)
(str (str/slice (:fullname profile) 0 12) "...") (str (str/slice (:fullname profile) 0 12) "...")

4
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -213,7 +213,7 @@
:style {:fillOpacity "1" :style {:fillOpacity "1"
:strokeWidth "1px" :strokeWidth "1px"
:vectorEffect "non-scaling-stroke"} :vectorEffect "non-scaling-stroke"}
:fill "var(--white)" :fill "var(--app-white)"
:stroke color :stroke color
:cx cx' :cx cx'
:cy cy'}] :cy cy'}]
@ -279,7 +279,7 @@
:style {:fillOpacity 1 :style {:fillOpacity 1
:stroke color :stroke color
:strokeWidth "1px" :strokeWidth "1px"
:fill "var(--white)" :fill "var(--app-white)"
:vectorEffect "non-scaling-stroke"} :vectorEffect "non-scaling-stroke"}
:data-position (name position) :data-position (name position)
:cx (+ x (/ length 2)) :cx (+ x (/ length 2))

4
frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
View file

@ -21,7 +21,7 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [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 2)
(def ^:private segment-gap-side 5) (def ^:private segment-gap-side 5)
@ -85,7 +85,7 @@
[:text {:x (if (= coord :x) x (+ x (/ width 2))) [:text {:x (if (= coord :x) x (+ x (/ width 2)))
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0)) :y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
:font-size (/ pill-text-font-size zoom) :font-size (/ pill-text-font-size zoom)
:fill "var(--white)" :fill "var(--app-white)"
:text-anchor "middle"} :text-anchor "middle"}
(fmt/format-number distance)]]) (fmt/format-number distance)]])

2
frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
View file

@ -16,7 +16,7 @@
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[rumext.v2 :as mf])) [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-opacity 0.6)
(def ^:private line-width 1) (def ^:private line-width 1)