@arcanewizards/sigil 0.1.0

package/dist/frontend/styles/theme.css

@@ -0,0 +1,625 @@
+:root {
+  /* Raw palette values for app-specific color helpers. */
+  --sigil-palette-purple-hue: 258;
+  --sigil-palette-purple-c900: #311b92;
+  --sigil-palette-purple-normal: #512da8;
+  --sigil-palette-purple-c600: #5e35b1;
+  --sigil-palette-purple-c500: #673ab7;
+  --sigil-palette-purple-light: #7e57c2;
+  --sigil-palette-purple-c300: #9575cd;
+  --sigil-palette-purple-extra-light: #b39ddb;
+  --sigil-palette-purple-text-override: rgba(255, 255, 255, 0.8);
+  --sigil-palette-purple-foreground-dark-override: #673ab7;
+
+  --sigil-palette-blue-hue: 210;
+  --sigil-palette-blue-c900: #0d47a1;
+  --sigil-palette-blue-normal: #1976d2;
+  --sigil-palette-blue-c600: #1e88e5;
+  --sigil-palette-blue-c500: #2196f3;
+  --sigil-palette-blue-light: #42a5f5;
+  --sigil-palette-blue-c300: #64b5f6;
+  --sigil-palette-blue-extra-light: #90caf9;
+
+  --sigil-palette-teal-hue: 173;
+  --sigil-palette-teal-c900: #004d40;
+  --sigil-palette-teal-normal: #00796b;
+  --sigil-palette-teal-c600: #00897b;
+  --sigil-palette-teal-c500: #009688;
+  --sigil-palette-teal-light: #26a69a;
+  --sigil-palette-teal-c300: #4db6ac;
+  --sigil-palette-teal-extra-light: #80cbc4;
+
+  --sigil-palette-red-hue: 359;
+  --sigil-palette-red-c900: #b71c1c;
+  --sigil-palette-red-normal: #d32f2f;
+  --sigil-palette-red-c600: #e53935;
+  --sigil-palette-red-c500: #f44336;
+  --sigil-palette-red-light: #e67575;
+  --sigil-palette-red-c300: #e67575;
+  --sigil-palette-red-extra-light: #ef9a9a;
+
+  --sigil-palette-yellow-hue: 44;
+  --sigil-palette-yellow-c900: #f57f17;
+  --sigil-palette-yellow-normal: #fbc02d;
+  --sigil-palette-yellow-c600: #fdd835;
+  --sigil-palette-yellow-c500: #ffeb3b;
+  --sigil-palette-yellow-light: #ffee58;
+  --sigil-palette-yellow-c300: #fff176;
+  --sigil-palette-yellow-extra-light: #fff59d;
+  --sigil-palette-yellow-text-override: rgba(0, 0, 0, 0.8);
+  --sigil-palette-yellow-foreground-light-override: #f9a825;
+
+  --sigil-palette-orange-hue: 24;
+  --sigil-palette-orange-c900: #e65100;
+  --sigil-palette-orange-normal: #f57c00;
+  --sigil-palette-orange-c600: #f57c00;
+  --sigil-palette-orange-c500: #ff9800;
+  --sigil-palette-orange-light: #ffa726;
+  --sigil-palette-orange-c300: #ffb74d;
+  --sigil-palette-orange-extra-light: #ffcc80;
+  --sigil-palette-orange-text-override: rgba(0, 0, 0, 0.8);
+
+  --sigil-palette-brown-hue: 20;
+  --sigil-palette-brown-c900: #3e2723;
+  --sigil-palette-brown-normal: #5d4037;
+  --sigil-palette-brown-c600: #6d4c41;
+  --sigil-palette-brown-c500: #795548;
+  --sigil-palette-brown-light: #a1887f;
+  --sigil-palette-brown-c300: #bcaaa4;
+  --sigil-palette-brown-extra-light: #d7ccc8;
+  --sigil-palette-brown-foreground-dark-override: #795548;
+
+  --sigil-palette-green-hue: 123;
+  --sigil-palette-green-c900: #1b5e20;
+  --sigil-palette-green-normal: #388e3c;
+  --sigil-palette-green-c600: #43a047;
+  --sigil-palette-green-c500: #4caf50;
+  --sigil-palette-green-light: #66bb6a;
+  --sigil-palette-green-c300: #81c784;
+  --sigil-palette-green-extra-light: #a5d6a7;
+
+  --sigil-palette-gray-hue: 0;
+  --sigil-palette-gray-c900: #212121;
+  --sigil-palette-gray-normal: #616161;
+  --sigil-palette-gray-c600: #757575;
+  --sigil-palette-gray-c500: #9e9e9e;
+  --sigil-palette-gray-light: #bdbdbd;
+  --sigil-palette-gray-c300: #e0e0e0;
+  --sigil-palette-gray-extra-light: #eeeeee;
+
+  --sigil-palette-unknown-hue: var(--sigil-palette-gray-hue);
+  --sigil-palette-unknown-c900: var(--sigil-palette-gray-c900);
+  --sigil-palette-unknown-normal: var(--sigil-palette-gray-normal);
+  --sigil-palette-unknown-c600: var(--sigil-palette-gray-c600);
+  --sigil-palette-unknown-c500: var(--sigil-palette-gray-c500);
+  --sigil-palette-unknown-light: var(--sigil-palette-gray-light);
+  --sigil-palette-unknown-c300: var(--sigil-palette-gray-c300);
+  --sigil-palette-unknown-extra-light: var(--sigil-palette-gray-extra-light);
+}
+
+.arcane-theme-root {
+  --sigil-bg-dark-1: #e9ecef;
+  --sigil-toolbar-spacing-px: 7.5px;
+  --sigil-bg-light-2: #e0e0e0;
+  --sigil-bg-dark: #f8f8f8;
+  --sigil-bg-light: #ffffff;
+  --sigil-bg-button-hover: #e5e5e5;
+  --sigil-border: #e5e5e5;
+  --sigil-border-lighterer: #f6f8fa;
+  --sigil-foreground: #616161;
+  --sigil-foreground-highlight: #1f1f1f;
+  --sigil-foreground-muted: #a0a0a0;
+  --sigil-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 9px;
+  --sigil-shadow-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
+  --sigil-text-shadow: 0 1px rgba(255, 255, 255, 0.7);
+  --sigil-colored-bg-text: rgba(0, 0, 0, 0.6);
+  --sigil-hint-foreground: #ffffff;
+  --sigil-success-foreground: #388e3c;
+  --sigil-error-foreground: #d32f2f;
+  --sigil-warning-foreground: #f57c00;
+  --sigil-ghost-bg: rgba(0, 0, 0, 0.3);
+  --sigil-ghost-border: rgba(0, 0, 0, 0.5);
+  --sigil-color-red: #d73a49;
+  --sigil-color-amber: #b08800;
+
+  /**
+   * Initialize hint colors for when useRootHintVariables() is not used.
+   */
+  --sigil-usage-hint-text: var(
+    --sigil-palette-blue-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-hint-foreground: var(
+    --sigil-palette-blue-foreground-light-override,
+    var(--sigil-palette-blue-c500)
+  );
+  --sigil-usage-hint-background: var(--sigil-palette-blue-light);
+  --sigil-usage-hint-border: var(--sigil-palette-blue-normal);
+  --sigil-usage-hint-drag-border: var(--sigil-palette-blue-c900);
+  --sigil-usage-hint-selected-background: var(--sigil-palette-blue-normal);
+  --sigil-usage-hint-selected-border: var(--sigil-palette-blue-c900);
+  --sigil-usage-hint-selected-text: var(
+    --sigil-palette-blue-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-hint-dimmed-background: var(--sigil-palette-blue-extra-light);
+  --sigil-usage-hint-dimmed-border: var(--sigil-palette-blue-light);
+  --sigil-usage-hint-gradient-light: var(--sigil-palette-blue-light);
+  --sigil-usage-hint-gradient-dark: var(--sigil-palette-blue-normal);
+
+  --sigil-usage-purple-text: var(
+    --sigil-palette-purple-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-purple-foreground: var(
+    --sigil-palette-purple-foreground-light-override,
+    var(--sigil-palette-purple-c500)
+  );
+  --sigil-usage-purple-background: var(--sigil-palette-purple-light);
+  --sigil-usage-purple-border: var(--sigil-palette-purple-normal);
+  --sigil-usage-purple-drag-border: var(--sigil-palette-purple-c900);
+  --sigil-usage-purple-selected-background: var(--sigil-palette-purple-normal);
+  --sigil-usage-purple-selected-border: var(--sigil-palette-purple-c900);
+  --sigil-usage-purple-selected-text: var(
+    --sigil-palette-purple-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-purple-dimmed-background: var(
+    --sigil-palette-purple-extra-light
+  );
+  --sigil-usage-purple-dimmed-border: var(--sigil-palette-purple-light);
+  --sigil-usage-purple-gradient-light: #ff1ff4;
+  --sigil-usage-purple-gradient-dark: #6d1fff;
+
+  --sigil-usage-blue-text: var(
+    --sigil-palette-blue-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-blue-foreground: var(
+    --sigil-palette-blue-foreground-light-override,
+    var(--sigil-palette-blue-c500)
+  );
+  --sigil-usage-blue-background: var(--sigil-palette-blue-light);
+  --sigil-usage-blue-border: var(--sigil-palette-blue-normal);
+  --sigil-usage-blue-drag-border: var(--sigil-palette-blue-c900);
+  --sigil-usage-blue-selected-background: var(--sigil-palette-blue-normal);
+  --sigil-usage-blue-selected-border: var(--sigil-palette-blue-c900);
+  --sigil-usage-blue-selected-text: var(
+    --sigil-palette-blue-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-blue-dimmed-background: var(--sigil-palette-blue-extra-light);
+  --sigil-usage-blue-dimmed-border: var(--sigil-palette-blue-light);
+  --sigil-usage-blue-gradient-light: var(--sigil-palette-blue-light);
+  --sigil-usage-blue-gradient-dark: var(--sigil-palette-blue-normal);
+
+  --sigil-usage-teal-text: var(
+    --sigil-palette-teal-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-teal-foreground: var(
+    --sigil-palette-teal-foreground-light-override,
+    var(--sigil-palette-teal-c500)
+  );
+  --sigil-usage-teal-background: var(--sigil-palette-teal-light);
+  --sigil-usage-teal-border: var(--sigil-palette-teal-normal);
+  --sigil-usage-teal-drag-border: var(--sigil-palette-teal-c900);
+  --sigil-usage-teal-selected-background: var(--sigil-palette-teal-normal);
+  --sigil-usage-teal-selected-border: var(--sigil-palette-teal-c900);
+  --sigil-usage-teal-selected-text: var(
+    --sigil-palette-teal-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-teal-dimmed-background: var(--sigil-palette-teal-extra-light);
+  --sigil-usage-teal-dimmed-border: var(--sigil-palette-teal-light);
+  --sigil-usage-teal-gradient-light: var(--sigil-palette-teal-light);
+  --sigil-usage-teal-gradient-dark: var(--sigil-palette-teal-normal);
+
+  --sigil-usage-green-text: var(
+    --sigil-palette-green-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-green-foreground: var(
+    --sigil-palette-green-foreground-light-override,
+    var(--sigil-palette-green-c500)
+  );
+  --sigil-usage-green-background: var(--sigil-palette-green-light);
+  --sigil-usage-green-border: var(--sigil-palette-green-normal);
+  --sigil-usage-green-drag-border: var(--sigil-palette-green-c900);
+  --sigil-usage-green-selected-background: var(--sigil-palette-green-normal);
+  --sigil-usage-green-selected-border: var(--sigil-palette-green-c900);
+  --sigil-usage-green-selected-text: var(
+    --sigil-palette-green-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-green-dimmed-background: var(--sigil-palette-green-extra-light);
+  --sigil-usage-green-dimmed-border: var(--sigil-palette-green-light);
+  --sigil-usage-green-gradient-light: var(--sigil-palette-green-light);
+  --sigil-usage-green-gradient-dark: var(--sigil-palette-green-normal);
+
+  --sigil-usage-yellow-text: var(
+    --sigil-palette-yellow-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-yellow-foreground: var(
+    --sigil-palette-yellow-foreground-light-override,
+    var(--sigil-palette-yellow-c500)
+  );
+  --sigil-usage-yellow-background: var(--sigil-palette-yellow-light);
+  --sigil-usage-yellow-border: var(--sigil-palette-yellow-normal);
+  --sigil-usage-yellow-drag-border: var(--sigil-palette-yellow-c900);
+  --sigil-usage-yellow-selected-background: var(--sigil-palette-yellow-normal);
+  --sigil-usage-yellow-selected-border: var(--sigil-palette-yellow-c900);
+  --sigil-usage-yellow-selected-text: var(
+    --sigil-palette-yellow-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-yellow-dimmed-background: var(
+    --sigil-palette-yellow-extra-light
+  );
+  --sigil-usage-yellow-dimmed-border: var(--sigil-palette-yellow-light);
+  --sigil-usage-yellow-gradient-light: var(--sigil-palette-yellow-light);
+  --sigil-usage-yellow-gradient-dark: var(--sigil-palette-yellow-normal);
+
+  --sigil-usage-orange-text: var(
+    --sigil-palette-orange-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-orange-foreground: var(
+    --sigil-palette-orange-foreground-light-override,
+    var(--sigil-palette-orange-c500)
+  );
+  --sigil-usage-orange-background: var(--sigil-palette-orange-light);
+  --sigil-usage-orange-border: var(--sigil-palette-orange-normal);
+  --sigil-usage-orange-drag-border: var(--sigil-palette-orange-c900);
+  --sigil-usage-orange-selected-background: var(--sigil-palette-orange-normal);
+  --sigil-usage-orange-selected-border: var(--sigil-palette-orange-c900);
+  --sigil-usage-orange-selected-text: var(
+    --sigil-palette-orange-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-orange-dimmed-background: var(
+    --sigil-palette-orange-extra-light
+  );
+  --sigil-usage-orange-dimmed-border: var(--sigil-palette-orange-light);
+  --sigil-usage-orange-gradient-light: #ffc029;
+  --sigil-usage-orange-gradient-dark: #cc3900;
+
+  --sigil-usage-brown-text: var(
+    --sigil-palette-brown-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-brown-foreground: var(
+    --sigil-palette-brown-foreground-light-override,
+    var(--sigil-palette-brown-c500)
+  );
+  --sigil-usage-brown-background: var(--sigil-palette-brown-light);
+  --sigil-usage-brown-border: var(--sigil-palette-brown-normal);
+  --sigil-usage-brown-drag-border: var(--sigil-palette-brown-c900);
+  --sigil-usage-brown-selected-background: var(--sigil-palette-brown-normal);
+  --sigil-usage-brown-selected-border: var(--sigil-palette-brown-c900);
+  --sigil-usage-brown-selected-text: var(
+    --sigil-palette-brown-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-brown-dimmed-background: var(--sigil-palette-brown-extra-light);
+  --sigil-usage-brown-dimmed-border: var(--sigil-palette-brown-light);
+  --sigil-usage-brown-gradient-light: var(--sigil-palette-brown-light);
+  --sigil-usage-brown-gradient-dark: var(--sigil-palette-brown-normal);
+
+  --sigil-usage-red-text: var(
+    --sigil-palette-red-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-red-foreground: var(
+    --sigil-palette-red-foreground-light-override,
+    var(--sigil-palette-red-c500)
+  );
+  --sigil-usage-red-background: var(--sigil-palette-red-light);
+  --sigil-usage-red-border: var(--sigil-palette-red-normal);
+  --sigil-usage-red-drag-border: var(--sigil-palette-red-c900);
+  --sigil-usage-red-selected-background: var(--sigil-palette-red-normal);
+  --sigil-usage-red-selected-border: var(--sigil-palette-red-c900);
+  --sigil-usage-red-selected-text: var(
+    --sigil-palette-red-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-red-dimmed-background: var(--sigil-palette-red-extra-light);
+  --sigil-usage-red-dimmed-border: var(--sigil-palette-red-light);
+  --sigil-usage-red-gradient-light: var(--sigil-palette-red-light);
+  --sigil-usage-red-gradient-dark: var(--sigil-palette-red-normal);
+
+  --sigil-usage-gray-text: var(
+    --sigil-palette-gray-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-gray-foreground: var(
+    --sigil-palette-gray-foreground-light-override,
+    var(--sigil-palette-gray-c500)
+  );
+  --sigil-usage-gray-background: var(--sigil-palette-gray-light);
+  --sigil-usage-gray-border: var(--sigil-palette-gray-normal);
+  --sigil-usage-gray-drag-border: var(--sigil-palette-gray-c900);
+  --sigil-usage-gray-selected-background: var(--sigil-palette-gray-normal);
+  --sigil-usage-gray-selected-border: var(--sigil-palette-gray-c900);
+  --sigil-usage-gray-selected-text: var(
+    --sigil-palette-gray-text-override,
+    rgba(255, 255, 255, 0.8)
+  );
+  --sigil-usage-gray-dimmed-background: var(--sigil-palette-gray-extra-light);
+  --sigil-usage-gray-dimmed-border: var(--sigil-palette-gray-light);
+  --sigil-usage-gray-gradient-light: var(--sigil-palette-gray-light);
+  --sigil-usage-gray-gradient-dark: var(--sigil-palette-gray-normal);
+
+  --sigil-usage-unknown-text: var(--sigil-usage-gray-text);
+  --sigil-usage-unknown-foreground: var(--sigil-usage-gray-foreground);
+  --sigil-usage-unknown-background: var(--sigil-usage-gray-background);
+  --sigil-usage-unknown-border: var(--sigil-usage-gray-border);
+  --sigil-usage-unknown-drag-border: var(--sigil-usage-gray-drag-border);
+  --sigil-usage-unknown-selected-background: var(
+    --sigil-usage-gray-selected-background
+  );
+  --sigil-usage-unknown-selected-border: var(
+    --sigil-usage-gray-selected-border
+  );
+  --sigil-usage-unknown-selected-text: var(--sigil-usage-gray-selected-text);
+  --sigil-usage-unknown-dimmed-background: var(
+    --sigil-usage-gray-dimmed-background
+  );
+  --sigil-usage-unknown-dimmed-border: var(--sigil-usage-gray-dimmed-border);
+  --sigil-usage-unknown-gradient-light: var(--sigil-palette-gray-light);
+  --sigil-usage-unknown-gradient-dark: var(--sigil-palette-gray-normal);
+}
+
+@utility arcane-server-theme-dark {
+  --sigil-bg-dark-1: #252524;
+  --sigil-bg-light-2: #3b3d3f;
+  --sigil-bg-dark: #181818;
+  --sigil-bg-light: #1f1f1f;
+  --sigil-bg-button-hover: #1f1f1f;
+  --sigil-border: #2b2b2b;
+  --sigil-border-lighterer: #6b6b67;
+  --sigil-foreground: #868686;
+  --sigil-foreground-highlight: #d7d7d7;
+  --sigil-foreground-muted: #616161;
+  --sigil-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 9px;
+  --sigil-shadow-inset: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
+  --sigil-text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
+  --sigil-colored-bg-text: rgba(255, 255, 255, 0.8);
+  --sigil-success-foreground: #81c784;
+  --sigil-error-foreground: #e67575;
+  --sigil-warning-foreground: #ffb74d;
+  --sigil-ghost-bg: rgba(255, 255, 255, 0.5);
+  --sigil-ghost-border: #ffffff;
+  --sigil-color-red: #e06c75;
+  --sigil-color-amber: #d19a66;
+
+  --sigil-usage-hint-text: var(
+    --sigil-palette-blue-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-hint-foreground: var(
+    --sigil-palette-blue-foreground-dark-override,
+    var(--sigil-palette-blue-normal)
+  );
+  --sigil-usage-hint-background: var(--sigil-palette-blue-normal);
+  --sigil-usage-hint-border: var(--sigil-palette-blue-light);
+  --sigil-usage-hint-drag-border: var(--sigil-palette-blue-extra-light);
+  --sigil-usage-hint-selected-background: var(--sigil-palette-blue-light);
+  --sigil-usage-hint-selected-border: var(--sigil-palette-blue-extra-light);
+  --sigil-usage-hint-selected-text: var(
+    --sigil-palette-blue-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-hint-dimmed-background: var(--sigil-palette-blue-c900);
+  --sigil-usage-hint-dimmed-border: var(--sigil-palette-blue-normal);
+
+  --sigil-usage-purple-text: var(
+    --sigil-palette-purple-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-purple-foreground: var(
+    --sigil-palette-purple-foreground-dark-override,
+    var(--sigil-palette-purple-normal)
+  );
+  --sigil-usage-purple-background: var(--sigil-palette-purple-normal);
+  --sigil-usage-purple-border: var(--sigil-palette-purple-light);
+  --sigil-usage-purple-drag-border: var(--sigil-palette-purple-extra-light);
+  --sigil-usage-purple-selected-background: var(--sigil-palette-purple-light);
+  --sigil-usage-purple-selected-border: var(--sigil-palette-purple-extra-light);
+  --sigil-usage-purple-selected-text: var(
+    --sigil-palette-purple-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-purple-dimmed-background: var(--sigil-palette-purple-c900);
+  --sigil-usage-purple-dimmed-border: var(--sigil-palette-purple-normal);
+
+  --sigil-usage-blue-text: var(
+    --sigil-palette-blue-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-blue-foreground: var(
+    --sigil-palette-blue-foreground-dark-override,
+    var(--sigil-palette-blue-normal)
+  );
+  --sigil-usage-blue-background: var(--sigil-palette-blue-normal);
+  --sigil-usage-blue-border: var(--sigil-palette-blue-light);
+  --sigil-usage-blue-drag-border: var(--sigil-palette-blue-extra-light);
+  --sigil-usage-blue-selected-background: var(--sigil-palette-blue-light);
+  --sigil-usage-blue-selected-border: var(--sigil-palette-blue-extra-light);
+  --sigil-usage-blue-selected-text: var(
+    --sigil-palette-blue-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-blue-dimmed-background: var(--sigil-palette-blue-c900);
+  --sigil-usage-blue-dimmed-border: var(--sigil-palette-blue-normal);
+
+  --sigil-usage-teal-text: var(
+    --sigil-palette-teal-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-teal-foreground: var(
+    --sigil-palette-teal-foreground-dark-override,
+    var(--sigil-palette-teal-normal)
+  );
+  --sigil-usage-teal-background: var(--sigil-palette-teal-normal);
+  --sigil-usage-teal-border: var(--sigil-palette-teal-light);
+  --sigil-usage-teal-drag-border: var(--sigil-palette-teal-extra-light);
+  --sigil-usage-teal-selected-background: var(--sigil-palette-teal-light);
+  --sigil-usage-teal-selected-border: var(--sigil-palette-teal-extra-light);
+  --sigil-usage-teal-selected-text: var(
+    --sigil-palette-teal-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-teal-dimmed-background: var(--sigil-palette-teal-c900);
+  --sigil-usage-teal-dimmed-border: var(--sigil-palette-teal-normal);
+
+  --sigil-usage-green-text: var(
+    --sigil-palette-green-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-green-foreground: var(
+    --sigil-palette-green-foreground-dark-override,
+    var(--sigil-palette-green-normal)
+  );
+  --sigil-usage-green-background: var(--sigil-palette-green-normal);
+  --sigil-usage-green-border: var(--sigil-palette-green-light);
+  --sigil-usage-green-drag-border: var(--sigil-palette-green-extra-light);
+  --sigil-usage-green-selected-background: var(--sigil-palette-green-light);
+  --sigil-usage-green-selected-border: var(--sigil-palette-green-extra-light);
+  --sigil-usage-green-selected-text: var(
+    --sigil-palette-green-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-green-dimmed-background: var(--sigil-palette-green-c900);
+  --sigil-usage-green-dimmed-border: var(--sigil-palette-green-normal);
+
+  --sigil-usage-yellow-text: var(
+    --sigil-palette-yellow-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-yellow-foreground: var(
+    --sigil-palette-yellow-foreground-dark-override,
+    var(--sigil-palette-yellow-normal)
+  );
+  --sigil-usage-yellow-background: var(--sigil-palette-yellow-normal);
+  --sigil-usage-yellow-border: var(--sigil-palette-yellow-light);
+  --sigil-usage-yellow-drag-border: var(--sigil-palette-yellow-extra-light);
+  --sigil-usage-yellow-selected-background: var(--sigil-palette-yellow-light);
+  --sigil-usage-yellow-selected-border: var(--sigil-palette-yellow-extra-light);
+  --sigil-usage-yellow-selected-text: var(
+    --sigil-palette-yellow-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-yellow-dimmed-background: var(--sigil-palette-yellow-c900);
+  --sigil-usage-yellow-dimmed-border: var(--sigil-palette-yellow-normal);
+  --sigil-usage-yellow-gradient-light: var(--sigil-palette-yellow-normal);
+  --sigil-usage-yellow-gradient-dark: var(--sigil-palette-orange-normal);
+
+  --sigil-usage-orange-text: var(
+    --sigil-palette-orange-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-orange-foreground: var(
+    --sigil-palette-orange-foreground-dark-override,
+    var(--sigil-palette-orange-normal)
+  );
+  --sigil-usage-orange-background: var(--sigil-palette-orange-normal);
+  --sigil-usage-orange-border: var(--sigil-palette-orange-light);
+  --sigil-usage-orange-drag-border: var(--sigil-palette-orange-extra-light);
+  --sigil-usage-orange-selected-background: var(--sigil-palette-orange-light);
+  --sigil-usage-orange-selected-border: var(--sigil-palette-orange-extra-light);
+  --sigil-usage-orange-selected-text: var(
+    --sigil-palette-orange-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-orange-dimmed-background: var(--sigil-palette-orange-c900);
+  --sigil-usage-orange-dimmed-border: var(--sigil-palette-orange-normal);
+
+  --sigil-usage-brown-text: var(
+    --sigil-palette-brown-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-brown-foreground: var(
+    --sigil-palette-brown-foreground-dark-override,
+    var(--sigil-palette-brown-normal)
+  );
+  --sigil-usage-brown-background: var(--sigil-palette-brown-normal);
+  --sigil-usage-brown-border: var(--sigil-palette-brown-light);
+  --sigil-usage-brown-drag-border: var(--sigil-palette-brown-extra-light);
+  --sigil-usage-brown-selected-background: var(--sigil-palette-brown-light);
+  --sigil-usage-brown-selected-border: var(--sigil-palette-brown-extra-light);
+  --sigil-usage-brown-selected-text: var(
+    --sigil-palette-brown-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-brown-dimmed-background: var(--sigil-palette-brown-c900);
+  --sigil-usage-brown-dimmed-border: var(--sigil-palette-brown-normal);
+
+  --sigil-usage-red-text: var(
+    --sigil-palette-red-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-red-foreground: var(
+    --sigil-palette-red-foreground-dark-override,
+    var(--sigil-palette-red-normal)
+  );
+  --sigil-usage-red-background: var(--sigil-palette-red-normal);
+  --sigil-usage-red-border: var(--sigil-palette-red-light);
+  --sigil-usage-red-drag-border: var(--sigil-palette-red-extra-light);
+  --sigil-usage-red-selected-background: var(--sigil-palette-red-light);
+  --sigil-usage-red-selected-border: var(--sigil-palette-red-extra-light);
+  --sigil-usage-red-selected-text: var(
+    --sigil-palette-red-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-red-dimmed-background: var(--sigil-palette-red-c900);
+  --sigil-usage-red-dimmed-border: var(--sigil-palette-red-normal);
+
+  --sigil-usage-gray-text: var(
+    --sigil-palette-gray-text-override,
+    var(--sigil-colored-bg-text)
+  );
+  --sigil-usage-gray-foreground: var(
+    --sigil-palette-gray-foreground-dark-override,
+    var(--sigil-palette-gray-normal)
+  );
+  --sigil-usage-gray-background: var(--sigil-palette-gray-normal);
+  --sigil-usage-gray-border: var(--sigil-palette-gray-light);
+  --sigil-usage-gray-drag-border: var(--sigil-palette-gray-extra-light);
+  --sigil-usage-gray-selected-background: var(--sigil-palette-gray-light);
+  --sigil-usage-gray-selected-border: var(--sigil-palette-gray-extra-light);
+  --sigil-usage-gray-selected-text: var(
+    --sigil-palette-gray-text-override,
+    rgba(0, 0, 0, 0.6)
+  );
+  --sigil-usage-gray-dimmed-background: var(--sigil-palette-gray-c900);
+  --sigil-usage-gray-dimmed-border: var(--sigil-palette-gray-normal);
+
+  --sigil-usage-unknown-text: var(--sigil-usage-gray-text);
+  --sigil-usage-unknown-foreground: var(--sigil-usage-gray-foreground);
+  --sigil-usage-unknown-background: var(--sigil-usage-gray-background);
+  --sigil-usage-unknown-border: var(--sigil-usage-gray-border);
+  --sigil-usage-unknown-drag-border: var(--sigil-usage-gray-drag-border);
+  --sigil-usage-unknown-selected-background: var(
+    --sigil-usage-gray-selected-background
+  );
+  --sigil-usage-unknown-selected-border: var(
+    --sigil-usage-gray-selected-border
+  );
+  --sigil-usage-unknown-selected-text: var(--sigil-usage-gray-selected-text);
+  --sigil-usage-unknown-dimmed-background: var(
+    --sigil-usage-gray-dimmed-background
+  );
+  --sigil-usage-unknown-dimmed-border: var(--sigil-usage-gray-dimmed-border);
+}
+
+.arcane-theme-root.theme-dark {
+  @apply arcane-server-theme-dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  .arcane-theme-root.theme-auto {
+    @apply arcane-server-theme-dark;
+  }
+}

package/dist/frontend/styling.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+var _chunk5DRI7C4Ucjs = require('../chunk-5DRI7C4U.cjs');
+
+
+
+
+
+
+
+
+exports.SIGIL_COLOR = _chunk5DRI7C4Ucjs.SIGIL_COLOR; exports.cnd = _chunk5DRI7C4Ucjs.cnd; exports.cssHintColorVariables = _chunk5DRI7C4Ucjs.cssHintColorVariables; exports.cssSigilColorUsageVariables = _chunk5DRI7C4Ucjs.cssSigilColorUsageVariables; exports.cssVariables = _chunk5DRI7C4Ucjs.cssVariables; exports.sigilColorUsage = _chunk5DRI7C4Ucjs.sigilColorUsage; exports.useRootHintVariables = _chunk5DRI7C4Ucjs.useRootHintVariables;

package/dist/frontend/styling.d.cts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+import { z } from 'zod';
+
+declare const SIGIL_COLOR: z.ZodEnum<["purple", "blue", "teal", "red", "green", "yellow", "brown", "orange", "gray"]>;
+type SigilColor = z.infer<typeof SIGIL_COLOR>;
+type SigilUsageColor = SigilColor | 'unknown';
+type SigilUsageColorUsage = {
+    text: string;
+    foreground: string;
+    background: string;
+    border: string;
+    dragBorder: string;
+    selectedBackground: string;
+    selectedBorder: string;
+    selectedText: string;
+    dimmedBackground: string;
+    dimmedBorder: string;
+    gradientLight: string;
+    gradientDark: string;
+};
+declare const sigilColorUsage: (color: SigilUsageColor) => SigilUsageColorUsage;
+declare const cssSigilColorUsageVariables: (prefix: string, usage: SigilUsageColorUsage) => CSSProperties;
+declare const cssHintColorVariables: (color: SigilColor) => CSSProperties;
+/**
+ * Hook that will adjust the root hint color based on the given color.
+ */
+declare const useRootHintVariables: (color: SigilColor) => void;
+declare const cssVariables: (variables: Partial<Record<`--${string}`, string | number>>) => CSSProperties;
+declare function cnd<T extends string>(condition: unknown, truthyClassName: T): T | undefined;
+declare function cnd<T extends string, F extends string>(condition: unknown, truthyClassName: T, falseyClassName: F): T | F;
+
+export { SIGIL_COLOR, type SigilColor, type SigilUsageColor, type SigilUsageColorUsage, cnd, cssHintColorVariables, cssSigilColorUsageVariables, cssVariables, sigilColorUsage, useRootHintVariables };