feat: theme-aware custom controls

src/styles.css

@@ -33,6 +33,25 @@ input {
 
 .app-shell {
   height: 100%;
+  color: var(--app-text-color, #18181b);
+  --app-island-bg: #ffffff;
+  --app-sidebar-bg: #ffffff;
+  --app-sidebar-border: #e4e4e7;
+  --app-sidebar-shadow: 0 24px 80px rgba(24, 24, 27, 0.22);
+  --app-surface-lowest: #ffffff;
+  --app-surface-low: #f4f4f5;
+  --app-selected-bg: #f4f4f5;
+  --app-text-color: #18181b;
+  --app-selected-text-color: #18181b;
+  --app-disabled-color: #a1a1aa;
+  --app-input-bg: #ffffff;
+  --app-input-border: #d4d4d8;
+  --app-input-color: #18181b;
+  --app-button-border: #d4d4d8;
+  --app-button-hover-bg: #f4f4f5;
+  --app-button-active-bg: #e4e4e7;
+  --app-button-active-border: #5b8def;
+  --app-overlay-bg: rgba(255, 255, 255, 0.88);
 }
 
 .sidebar {
@@ -44,9 +63,9 @@ input {
   height: 100%;
   width: min(340px, calc(100vw - 32px));
   flex-direction: column;
-  border-right: 1px solid #e4e4e7;
-  background: #ffffff;
-  box-shadow: 0 24px 80px rgba(24, 24, 27, 0.22);
+  border-right: 1px solid var(--app-sidebar-border);
+  background: var(--app-sidebar-bg);
+  box-shadow: var(--app-sidebar-shadow);
   transform: translateX(calc(-100% - 24px));
   transition:
     transform 180ms ease,
@@ -62,7 +81,7 @@ input {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid var(--app-sidebar-border);
   padding: 16px;
 }
 
@@ -70,6 +89,7 @@ input {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
+  color: var(--app-text-color);
 }
 
 .sidebar-actions {
@@ -94,13 +114,15 @@ input {
 }
 
 .drawing-item-active {
-  background: #f4f4f5;
+  background: var(--app-selected-bg);
+  color: var(--app-selected-text-color);
 }
 
 .drawing-link {
   min-width: 0;
   border: 0;
   background: transparent;
+  color: inherit;
   padding: 8px;
   text-align: left;
 }
@@ -115,9 +137,10 @@ input {
 }
 
 .title-input {
-  border: 1px solid #d4d4d8;
+  border: 1px solid var(--app-input-border);
   border-radius: 6px;
-  background: #ffffff;
+  background: var(--app-input-bg);
+  color: var(--app-input-color);
   padding: 6px 8px;
 }
 
@@ -142,9 +165,9 @@ input {
   height: 2.25rem;
   padding: 0;
   border: none;
-  box-shadow: 0 0 0 1px #1e1e24;
-  background: #2f2f37;
-  color: #f4f4f5;
+  box-shadow: 0 0 0 1px var(--app-surface-lowest);
+  background: var(--app-surface-low);
+  color: var(--app-text-color);
 }
 
 .app-actions-toggle svg {
@@ -156,16 +179,22 @@ input {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid var(--app-sidebar-border);
   padding: 12px 16px;
 }
 
 .primary-button,
 .secondary-button,
 .icon-button {
-  border: 1px solid #d4d4d8;
+  border: 1px solid var(--app-button-border);
   border-radius: 8px;
-  background: #ffffff;
+  background: var(--app-island-bg);
+  color: var(--app-text-color);
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
 }
 
 .primary-button,
@@ -174,12 +203,29 @@ input {
   padding: 8px 12px;
 }
 
+.primary-button:hover,
+.secondary-button:hover,
+.icon-button:hover {
+  background: var(--app-button-hover-bg);
+}
+
+.primary-button:active,
+.secondary-button:active,
+.icon-button:active {
+  background: var(--app-button-active-bg);
+  border-color: var(--app-button-active-border);
+}
+
 .secondary-button:disabled {
   cursor: not-allowed;
   opacity: 0.6;
+  color: var(--app-disabled-color);
 }
 
 .icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   cursor: pointer;
@@ -189,7 +235,7 @@ input {
   position: fixed;
   inset: 0;
   z-index: 30;
-  background: rgba(24, 24, 27, 0.38);
+  background: color-mix(in srgb, var(--app-overlay-bg) 72%, #000000);
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms ease;
@@ -208,16 +254,16 @@ input {
 .editor-loading {
   display: grid;
   place-items: center;
-  color: #52525b;
+  color: var(--app-text-color);
 }
 
 .app-actions-toggle:hover {
-  background: #3b3b45;
+  background: var(--app-button-hover-bg);
 }
 
 .app-actions-toggle:active {
-  box-shadow: 0 0 0 1px #5b8def;
-  background: #444450;
+  box-shadow: 0 0 0 1px var(--app-button-active-border);
+  background: var(--app-button-active-bg);
 }
 
 .sr-only {