gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update SCSS syntax & remove open-color dep (#10633)

Browse Source
This commit is contained in:
David Luzar
2026-01-10 18:15:14 +01:00
committed by GitHub
parent cc6c29c0b9
commit b9a255407f
78 changed files with 526 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/excalidraw/css/app.scss
-2
View File
@@ -1,5 +1,3 @@
@import "open-color/open-color.scss";
.visually-hidden {
position: absolute !important;
height: 1px;
packages/excalidraw/css/styles.scss
+5 -5
View File
@@ -1,5 +1,5 @@
@import "./variables.module.scss";
@import "./theme";
@use "./variables.module" as *;
@use "./theme";
:root {
--zIndex-canvas: 1;
@@ -210,7 +210,7 @@ body.excalidraw-cursor-resize * {
.divider {
width: 1px;
background-color: $oc-gray-2;
background-color: $color-gray-2;
margin: 1px;
}
@@ -729,8 +729,8 @@ body.excalidraw-cursor-resize * {
justify-content: center;
padding: 40px;
background-color: $oc-red-1;
border: 3px solid $oc-red-9;
background-color: $color-red-1;
border: 3px solid $color-red-9;
}
.ErrorSplash-paragraph {
packages/excalidraw/css/theme.scss
+44 -43
View File
@@ -1,35 +1,36 @@
@import "open-color/open-color.scss";
@import "./variables.module.scss";
@use "sass:color";
@use "./variables.module" as *;
@forward "./variables.module";
.excalidraw {
--theme-filter: none;
--button-destructive-bg-color: #{$oc-red-1};
--button-destructive-color: #{$oc-red-9};
--button-gray-1: #{$oc-gray-2};
--button-gray-2: #{$oc-gray-4};
--button-gray-3: #{$oc-gray-5};
--button-destructive-bg-color: #{$color-red-1};
--button-destructive-color: #{$color-red-9};
--button-gray-1: #{$color-gray-2};
--button-gray-2: #{$color-gray-4};
--button-gray-3: #{$color-gray-5};
--mobile-action-button-bg: rgba(255, 255, 255, 0.35);
--mobile-color-border: var(--default-border-color);
--button-special-active-bg-color: #{$oc-green-0};
--button-special-active-bg-color: #{$color-green-0};
--dialog-border-color: var(--color-gray-20);
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
--focus-highlight-color: #{$oc-blue-2};
--focus-highlight-color: #{$color-blue-2};
--icon-fill-color: var(--color-on-surface);
--icon-green-fill-color: #{$oc-green-9};
--default-bg-color: #{$oc-white};
--input-bg-color: #{$oc-white};
--input-border-color: #{$oc-gray-4};
--input-hover-bg-color: #{$oc-gray-1};
--input-label-color: #{$oc-gray-7};
--icon-green-fill-color: #{$color-green-9};
--default-bg-color: #fff;
--input-bg-color: #fff;
--input-border-color: #{$color-gray-4};
--input-hover-bg-color: #{$color-gray-1};
--input-label-color: #{$color-gray-7};
--island-bg-color: #ffffff;
--keybinding-color: var(--color-gray-40);
--link-color: #{$oc-blue-7};
--overlay-bg-color: #{transparentize($oc-white, 0.12)};
--link-color: #{$color-blue-7};
--overlay-bg-color: #{color.adjust(#fff, $alpha: -0.12)};
--popup-bg-color: var(--island-bg-color);
--popup-secondary-bg-color: #{$oc-gray-1};
--popup-text-color: #{$oc-black};
--popup-text-inverted-color: #{$oc-white};
--select-highlight-color: #{$oc-blue-5};
--popup-secondary-bg-color: #{$color-gray-1};
--popup-text-color: #000;
--popup-text-inverted-color: #fff;
--select-highlight-color: #{$color-blue-5};
--shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
0px 7px 14px 0px rgba(0, 0, 0, 0.05);
@@ -46,17 +47,6 @@
--editor-container-padding: 1rem;
--mobile-action-button-size: 2rem;
@include isMobile {
--editor-container-padding: 0.75rem;
}
@media screen and (min-device-width: 1921px) {
--lg-button-size: 2.5rem;
--lg-icon-size: 1.25rem;
--default-button-size: 2.25rem;
--default-icon-size: 1.25rem;
}
--scrollbar-thumb: var(--button-gray-2);
--scrollbar-thumb-hover: var(--button-gray-3);
@@ -87,7 +77,7 @@
--color-selection: #6965db;
--color-icon-white: #{$oc-white};
--color-icon-white: #fff;
--color-primary: #6965db;
--color-primary-darker: #5b57d1;
@@ -170,6 +160,17 @@
--color-badge: #0b6513;
--background-color-badge: #d3ffd2;
@include isMobile {
--editor-container-padding: 0.75rem;
}
@media screen and (min-device-width: 1921px) {
--lg-button-size: 2.5rem;
--lg-icon-size: 1.25rem;
--default-button-size: 2.25rem;
--default-icon-size: 1.25rem;
}
&.theme--dark {
&.theme--dark-background-none {
background: none;
@@ -179,7 +180,7 @@
&.theme--dark {
--theme-filter: invert(93%) hue-rotate(180deg);
--button-destructive-bg-color: #5a0000;
--button-destructive-color: #{$oc-red-3};
--button-destructive-color: #{$color-red-3};
--button-gray-1: #363636;
--button-gray-2: #272727;
@@ -189,21 +190,21 @@
--button-special-active-bg-color: #204624;
--dialog-border-color: var(--color-gray-80);
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
--focus-highlight-color: #{$oc-blue-6};
--icon-green-fill-color: #{$oc-green-4};
--focus-highlight-color: #{$color-blue-6};
--icon-green-fill-color: #{$color-green-4};
--default-bg-color: #121212;
--input-bg-color: #121212;
--input-border-color: #2e2e2e;
--input-hover-bg-color: #181818;
--input-label-color: #{$oc-gray-2};
--input-label-color: #{$color-gray-2};
--island-bg-color: #232329;
--keybinding-color: var(--color-gray-60);
--link-color: #{$oc-blue-4};
--overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
--link-color: #{$color-blue-4};
--overlay-bg-color: #{color.adjust($color-gray-8, $alpha: -0.88)};
--popup-secondary-bg-color: #222;
--popup-text-color: #{$oc-gray-4};
--popup-text-color: #{$color-gray-4};
--popup-text-inverted-color: #2c2c2c;
--select-highlight-color: #{$oc-blue-4};
--select-highlight-color: #{$color-blue-4};
--shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
0px 7px 14px 0px rgba(0, 0, 0, 0.05);
@@ -216,8 +217,8 @@
0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
--avatar-border-color: var(--color-gray-85);
--scrollbar-thumb: #{$oc-gray-8};
--scrollbar-thumb-hover: #{$oc-gray-7};
--scrollbar-thumb: #{$color-gray-8};
--scrollbar-thumb-hover: #{$color-gray-7};
--color-slider-track: hsl(244, 23%, 39%);
packages/excalidraw/css/variables.module.scss
+28 -2
View File
@@ -1,4 +1,27 @@
@import "open-color/open-color.scss";
$color-red-1: #ffe3e3;
$color-red-3: #ffa8a8;
$color-red-6: #fa5252;
$color-red-7: #f03e3e;
$color-red-8: #e03131;
$color-red-9: #c92a2a;
$color-gray-1: #f1f3f5;
$color-gray-2: #e9ecef;
$color-gray-4: #ced4da;
$color-gray-5: #adb5bd;
$color-gray-6: #868e96;
$color-gray-7: #495057;
$color-gray-8: #343a40;
$color-green-0: #ebfbee;
$color-green-2: #b2f2bb;
$color-green-4: #69db7c;
$color-green-9: #2b8a3e;
$color-blue-1: #d0ebff;
$color-blue-2: #a5d8ff;
$color-blue-4: #4dabf7;
$color-blue-5: #339af0;
$color-blue-6: #228be6;
$color-blue-7: #1c7ed6;
$color-blue-8: #1971c2;
@mixin isMobile() {
@at-root .excalidraw--mobile#{&} {
@@ -137,7 +160,10 @@
@mixin outlineButtonIconStyles {
@include outlineButtonStyles;
padding: 0;
& {
padding: 0;
}
svg {
width: var(--default-icon-size);