@almadar/ui 6.53.1 → 6.55.0

package/themes/retro.css

@@ -32,6 +32,21 @@
     --color-info: #0e7490;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #ff4fa3;
+    --color-series-2: #3ac9d8;
+    --color-series-3: #f5f44c;
+    --color-series-4: #b388ff;
+    --color-series-5: #9be564;
+    --color-series-6: #f77d4d;
+    --color-series-7: #5aa0ff;
+    --color-series-8: #ff7aef;
+    --color-diagram-ink: #efe3ff;
+    --color-diagram-label: #cdb8f5;
+    --color-diagram-guide: #9d86d6;
+    --color-diagram-axis: #efe3ff;
+    --color-diagram-grid: #3a2160;
+    --color-diagram-highlight: #ffd23f;
+    --color-diagram-fill: #3a2160;
     --radius-none: 0px;
     --radius-sm: 10px;
     --radius-md: 18px;
@@ -179,6 +194,33 @@
     --border-style-interactive: solid;
     --surface-page-image: repeating-conic-gradient(from 0deg at 50% 100%, rgba(209,35,104,0.08) 0deg 9deg, transparent 9deg 18deg);
     --surface-page-image-size: 100% 100%;
+    --surface-diagram: #1a0b2e;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 4px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 8 4;
+    --diagram-dot: 2 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.25;
+    --diagram-roughness: 0;
+    --diagram-glow: 3;
+    --diagram-shadow: 3px 3px 0 #d12368;
+    --diagram-marker: triangle;
+    --diagram-label-font: mono;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 6px;
+    --material-roughness: 0.35;
+    --material-metalness: 0.4;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.45;
+    --light-key: 1.1;
+    --light-key-color: #ff9ad0;
+    --scene-fog: 0.25;
 }
 
 [data-theme="retro-dark"] {
@@ -209,6 +251,21 @@
     --color-info: #3ac9d8;
     --color-info-foreground: #00252b;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #ff4fa3;
+    --color-series-2: #3ac9d8;
+    --color-series-3: #b8c534;
+    --color-series-4: #e291ff;
+    --color-series-5: #bef66a;
+    --color-series-6: #ff8a4a;
+    --color-series-7: #5aa0ff;
+    --color-series-8: #d552c7;
+    --color-diagram-ink: #efe3ff;
+    --color-diagram-label: #cdb8f5;
+    --color-diagram-guide: #9d86d6;
+    --color-diagram-axis: #efe3ff;
+    --color-diagram-grid: #3a2160;
+    --color-diagram-highlight: #f5d642;
+    --color-diagram-fill: #4a2a7a;
     --radius-none: 0px;
     --radius-sm: 10px;
     --radius-md: 18px;
@@ -356,4 +413,30 @@
     --border-style-interactive: solid;
     --surface-page-image: repeating-conic-gradient(from 0deg at 50% 100%, rgba(224,76,138,0.12) 0deg 9deg, transparent 9deg 18deg);
     --surface-page-image-size: 100% 100%;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 4px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 8 4;
+    --diagram-dot: 2 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.25;
+    --diagram-roughness: 0;
+    --diagram-glow: 3;
+    --diagram-shadow: 3px 3px 0 #d12368;
+    --diagram-marker: triangle;
+    --diagram-label-font: mono;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 6px;
+    --material-roughness: 0.35;
+    --material-metalness: 0.4;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.45;
+    --light-key: 1.1;
+    --light-key-color: #ff9ad0;
+    --scene-fog: 0.25;
 }

package/themes/risograph.css

@@ -38,6 +38,21 @@
     --color-info: #0078bf;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #f62d69;
+    --color-series-2: #0078bf;
+    --color-series-3: #00838a;
+    --color-series-4: #c26a00;
+    --color-series-5: #6b3fa0;
+    --color-series-6: #477c2a;
+    --color-series-7: #8a5a2b;
+    --color-series-8: #a07800;
+    --color-diagram-ink: #1a1630;
+    --color-diagram-label: #4a4560;
+    --color-diagram-guide: #8a859e;
+    --color-diagram-axis: #1a1630;
+    --color-diagram-grid: #e6dfc8;
+    --color-diagram-highlight: #e0258f;
+    --color-diagram-fill: #ffe800;
     --radius-none: 0px;
     --radius-sm: 2px;
     --radius-md: 3px;
@@ -185,6 +200,32 @@
     --border-style-interactive: solid;
     --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
     --surface-page-image-size: 160px 160px;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: butt;
+    --diagram-line-join: round;
+    --diagram-dash: 5 3;
+    --diagram-dot: 1 3;
+    --diagram-fill-style: hatch;
+    --diagram-fill-opacity: 0.3;
+    --diagram-roughness: 0.5;
+    --diagram-glow: 0;
+    --diagram-shadow: 2px 2px 0 #0078bf;
+    --diagram-marker: line;
+    --diagram-label-font: mono;
+    --diagram-label-size: xs;
+    --diagram-label-weight: 700;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 2px;
+    --material-roughness: 0.9;
+    --material-metalness: 0;
+    --material-flat: 1;
+    --material-outline: 1;
+    --light-ambient: 0.65;
+    --light-key: 0.8;
+    --light-key-color: #fff4d0;
+    --scene-fog: 0;
 }
 
 [data-theme="risograph-dark"] {
@@ -221,6 +262,21 @@
     --color-info: #6fbfff;
     --color-info-foreground: #071b3d;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #ff5cb8;
+    --color-series-2: #39a9ee;
+    --color-series-3: #3ed6c8;
+    --color-series-4: #ff9a3d;
+    --color-series-5: #b79cf0;
+    --color-series-6: #98cf6a;
+    --color-series-7: #dba17e;
+    --color-series-8: #49a918;
+    --color-diagram-ink: #f3eedd;
+    --color-diagram-label: #c4bfdc;
+    --color-diagram-guide: #8a86b0;
+    --color-diagram-axis: #f3eedd;
+    --color-diagram-grid: #2e2a5a;
+    --color-diagram-highlight: #cbed3d;
+    --color-diagram-fill: #2e2a5a;
     --radius-none: 0px;
     --radius-sm: 2px;
     --radius-md: 3px;
@@ -368,4 +424,30 @@
     --border-style-interactive: solid;
     --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
     --surface-page-image-size: 160px 160px;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: butt;
+    --diagram-line-join: round;
+    --diagram-dash: 5 3;
+    --diagram-dot: 1 3;
+    --diagram-fill-style: hatch;
+    --diagram-fill-opacity: 0.3;
+    --diagram-roughness: 0.5;
+    --diagram-glow: 0;
+    --diagram-shadow: 2px 2px 0 #0078bf;
+    --diagram-marker: line;
+    --diagram-label-font: mono;
+    --diagram-label-size: xs;
+    --diagram-label-weight: 700;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 2px;
+    --material-roughness: 0.9;
+    --material-metalness: 0;
+    --material-flat: 1;
+    --material-outline: 1;
+    --light-ambient: 0.65;
+    --light-key: 0.8;
+    --light-key-color: #fff4d0;
+    --scene-fog: 0;
 }

package/themes/scandi.css

@@ -38,6 +38,21 @@
     --color-info: #1f5fbf;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #315c66;
+    --color-series-2: #a8743a;
+    --color-series-3: #4f6b58;
+    --color-series-4: #8a4f5e;
+    --color-series-5: #6b6f9a;
+    --color-series-6: #7a7a2a;
+    --color-series-7: #be5d45;
+    --color-series-8: #2f7a7a;
+    --color-diagram-ink: #23272a;
+    --color-diagram-label: #5a5f63;
+    --color-diagram-guide: #a8a69e;
+    --color-diagram-axis: #3f4448;
+    --color-diagram-grid: #e2e0da;
+    --color-diagram-highlight: #13638f;
+    --color-diagram-fill: #e3d3b8;
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 6px;
@@ -188,6 +203,32 @@
     --surface-card-image: none;
     --surface-page-image: repeating-linear-gradient(0deg, rgba(60,50,30,0.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(60,50,30,0.025) 0 1px, transparent 1px 3px);
     --surface-page-image-size: auto;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.15;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: open;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 400;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.85;
+    --material-metalness: 0;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.65;
+    --light-key: 0.85;
+    --light-key-color: #fff6e6;
+    --scene-fog: 0.1;
 }
 
 [data-theme="scandi-dark"] {
@@ -224,6 +265,21 @@
     --color-info: #8ab4ff;
     --color-info-foreground: #071b3d;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #91a6c4;
+    --color-series-2: #dda46d;
+    --color-series-3: #8fb99b;
+    --color-series-4: #d49aa8;
+    --color-series-5: #b9b1db;
+    --color-series-6: #c9c76a;
+    --color-series-7: #e17a50;
+    --color-series-8: #6fc4c4;
+    --color-diagram-ink: #ecebe6;
+    --color-diagram-label: #b3b6b8;
+    --color-diagram-guide: #6e7376;
+    --color-diagram-axis: #cfcec8;
+    --color-diagram-grid: #383d40;
+    --color-diagram-highlight: #67b9e2;
+    --color-diagram-fill: #3a4144;
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 6px;
@@ -374,4 +430,30 @@
     --surface-card-image: none;
     --surface-page-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
     --surface-page-image-size: auto;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.15;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: open;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 400;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.85;
+    --material-metalness: 0;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.65;
+    --light-key: 0.85;
+    --light-key-color: #fff6e6;
+    --scene-fog: 0.1;
 }

package/themes/sketch.css

@@ -38,6 +38,21 @@
     --color-info: #1a56b0;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #110000;
+    --color-series-2: #c84a00;
+    --color-series-3: #2c6fbb;
+    --color-series-4: #b87a00;
+    --color-series-5: #169173;
+    --color-series-6: #7b4aa0;
+    --color-series-7: #c2548a;
+    --color-series-8: #6b4a2a;
+    --color-diagram-ink: #2b2b2b;
+    --color-diagram-label: #555555;
+    --color-diagram-guide: #8a8a80;
+    --color-diagram-axis: #2b2b2b;
+    --color-diagram-grid: #d6d8e8;
+    --color-diagram-highlight: #e25443;
+    --color-diagram-fill: #ffe14d;
     --radius-none: 0px;
     --radius-sm: 4px 8px 5px 9px / 8px 4px 9px 5px;
     --radius-md: 15px 225px 15px 255px / 255px 15px 225px 15px;
@@ -186,6 +201,32 @@
     --border-style-interactive: solid;
     --surface-page-image: linear-gradient(90deg, transparent 56px, rgba(217, 48, 37, 0.35) 56px, rgba(217, 48, 37, 0.35) 58px, transparent 58px), repeating-linear-gradient(transparent 0, transparent 27px, rgba(70, 110, 190, 0.22) 27px, rgba(70, 110, 190, 0.22) 28px);
     --surface-page-image-size: auto;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 7 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: hatch;
+    --diagram-fill-opacity: 0.25;
+    --diagram-roughness: 1.4;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: open;
+    --diagram-label-font: body;
+    --diagram-label-size: base;
+    --diagram-label-weight: 400;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 1;
+    --material-metalness: 0;
+    --material-flat: 1;
+    --material-outline: 2;
+    --light-ambient: 0.75;
+    --light-key: 0.6;
+    --light-key-color: #ffffff;
+    --scene-fog: 0;
 }
 
 [data-theme="sketch-dark"] {
@@ -222,6 +263,21 @@
     --color-info: #7fb2ff;
     --color-info-foreground: #25262b;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #f4ecbf;
+    --color-series-2: #ee6240;
+    --color-series-3: #7ab6ff;
+    --color-series-4: #f2bc57;
+    --color-series-5: #6fdcc0;
+    --color-series-6: #c9a0f0;
+    --color-series-7: #ff9ac8;
+    --color-series-8: #d7a67b;
+    --color-diagram-ink: #faf8f1;
+    --color-diagram-label: #c4c3bb;
+    --color-diagram-guide: #8a8a82;
+    --color-diagram-axis: #ecebe4;
+    --color-diagram-grid: #44464f;
+    --color-diagram-highlight: #c0d11f;
+    --color-diagram-fill: #4a4b52;
     --radius-none: 0px;
     --radius-sm: 4px 8px 5px 9px / 8px 4px 9px 5px;
     --radius-md: 15px 225px 15px 255px / 255px 15px 225px 15px;
@@ -370,4 +426,30 @@
     --border-style-interactive: solid;
     --surface-page-image: linear-gradient(90deg, transparent 56px, rgba(255, 130, 120, 0.35) 56px, rgba(255, 130, 120, 0.35) 58px, transparent 58px), repeating-linear-gradient(transparent 0, transparent 27px, rgba(200, 210, 235, 0.22) 27px, rgba(200, 210, 235, 0.22) 28px);
     --surface-page-image-size: auto;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 7 5;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: hatch;
+    --diagram-fill-opacity: 0.25;
+    --diagram-roughness: 1.4;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: open;
+    --diagram-label-font: body;
+    --diagram-label-size: base;
+    --diagram-label-weight: 400;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 1;
+    --material-metalness: 0;
+    --material-flat: 1;
+    --material-outline: 2;
+    --light-ambient: 0.75;
+    --light-key: 0.6;
+    --light-key-color: #ffffff;
+    --scene-fog: 0;
 }

package/themes/solarpunk.css

@@ -38,6 +38,21 @@
     --color-info: #1f5fbf;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #558d51;
+    --color-series-2: #c3760a;
+    --color-series-3: #1f7aa8;
+    --color-series-4: #7f7110;
+    --color-series-5: #7a5aa8;
+    --color-series-6: #b0446a;
+    --color-series-7: #587804;
+    --color-series-8: #c45a2a;
+    --color-diagram-ink: #1f3a2a;
+    --color-diagram-label: #4d5a3c;
+    --color-diagram-guide: #7fb08a;
+    --color-diagram-axis: #2d5a3c;
+    --color-diagram-grid: #cfe3c4;
+    --color-diagram-highlight: #8a5d00;
+    --color-diagram-fill: #a8d8f0;
     --radius-none: 0px;
     --radius-sm: 10px;
     --radius-md: 16px;
@@ -188,6 +203,32 @@
     --surface-card-image: none;
     --surface-page-image: conic-gradient(from 200deg at 100% 0%, rgba(242,193,78,0.16), transparent 22%, rgba(242,193,78,0.10) 34%, transparent 48%), radial-gradient(ellipse at 0% 100%, rgba(46,125,79,0.14), transparent 55%);
     --surface-page-image-size: 100% 100%, 100% 100%;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 2 6;
+    --diagram-dot: 0.5 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.25;
+    --diagram-roughness: 0.3;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 3px 8px rgba(46, 125, 79, 0.2);
+    --diagram-marker: open;
+    --diagram-label-font: display;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 12px;
+    --material-roughness: 0.7;
+    --material-metalness: 0.05;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.65;
+    --light-key: 1.05;
+    --light-key-color: #fff0c0;
+    --scene-fog: 0.12;
 }
 
 [data-theme="solarpunk-dark"] {
@@ -224,6 +265,21 @@
     --color-info: #8ab4ff;
     --color-info-foreground: #071b3d;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #8dc06d;
+    --color-series-2: #ede069;
+    --color-series-3: #5bb4e0;
+    --color-series-4: #eca565;
+    --color-series-5: #c4a8f0;
+    --color-series-6: #f08ab0;
+    --color-series-7: #b1e24e;
+    --color-series-8: #e07e4e;
+    --color-diagram-ink: #f2ecd0;
+    --color-diagram-label: #b9cdb2;
+    --color-diagram-guide: #5f8f6e;
+    --color-diagram-axis: #d8e6c8;
+    --color-diagram-grid: #2a4f38;
+    --color-diagram-highlight: #c5ac2c;
+    --color-diagram-fill: #245a3c;
     --radius-none: 0px;
     --radius-sm: 10px;
     --radius-md: 16px;
@@ -374,4 +430,30 @@
     --surface-card-image: none;
     --surface-page-image: conic-gradient(from 200deg at 100% 0%, rgba(242,193,78,0.10), transparent 22%, rgba(242,193,78,0.06) 34%, transparent 48%), radial-gradient(ellipse at 0% 100%, rgba(127,217,154,0.10), transparent 55%);
     --surface-page-image-size: 100% 100%, 100% 100%;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 2 6;
+    --diagram-dot: 0.5 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.25;
+    --diagram-roughness: 0.3;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 3px 8px rgba(46, 125, 79, 0.2);
+    --diagram-marker: open;
+    --diagram-label-font: display;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 12px;
+    --material-roughness: 0.7;
+    --material-metalness: 0.05;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.65;
+    --light-key: 1.05;
+    --light-key-color: #fff0c0;
+    --scene-fog: 0.12;
 }

package/themes/steampunk.css

@@ -38,6 +38,21 @@
     --color-info: #275c80;
     --color-info-foreground: #ffffff;
     --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #651012;
+    --color-series-2: #875c17;
+    --color-series-3: #2f5f5a;
+    --color-series-4: #c35946;
+    --color-series-5: #4a3a6a;
+    --color-series-6: #616818;
+    --color-series-7: #b96208;
+    --color-series-8: #7a2a52;
+    --color-diagram-ink: #2b1a0e;
+    --color-diagram-label: #5a4325;
+    --color-diagram-guide: #8a6a3a;
+    --color-diagram-axis: #4a2e14;
+    --color-diagram-grid: #d9c79f;
+    --color-diagram-highlight: #9a4a24;
+    --color-diagram-fill: #d8b56a;
     --radius-none: 0px;
     --radius-sm: 2px;
     --radius-md: 4px;
@@ -184,6 +199,32 @@
     --border-style: ridge;
     --border-style-interactive: ridge;
     --surface-card-image: repeating-linear-gradient(90deg, rgba(120, 80, 20, 0.07) 0, rgba(120, 80, 20, 0.07) 1px, transparent 1px, transparent 3px);
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 4px;
+    --diagram-line-cap: butt;
+    --diagram-line-join: bevel;
+    --diagram-dash: 10 3 2 3;
+    --diagram-dot: 1 3;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.3;
+    --diagram-roughness: 0.2;
+    --diagram-glow: 0;
+    --diagram-shadow: 2px 3px 0 rgba(43, 26, 14, 0.5);
+    --diagram-marker: triangle;
+    --diagram-label-font: display;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 700;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 3px;
+    --material-roughness: 0.3;
+    --material-metalness: 0.9;
+    --material-flat: 0;
+    --material-outline: 1;
+    --light-ambient: 0.4;
+    --light-key: 1.2;
+    --light-key-color: #ffd9a0;
+    --scene-fog: 0.2;
 }
 
 [data-theme="steampunk-dark"] {
@@ -220,6 +261,21 @@
     --color-info: #7fb6dc;
     --color-info-foreground: #1e130b;
     --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #cb6858;
+    --color-series-2: #a48e27;
+    --color-series-3: #6fc0b4;
+    --color-series-4: #e68a5c;
+    --color-series-5: #a898d8;
+    --color-series-6: #b4c860;
+    --color-series-7: #faba90;
+    --color-series-8: #d98ab4;
+    --color-diagram-ink: #f6eac7;
+    --color-diagram-label: #cdb88f;
+    --color-diagram-guide: #8a6a3a;
+    --color-diagram-axis: #d9c79f;
+    --color-diagram-grid: #4a3320;
+    --color-diagram-highlight: #bb812d;
+    --color-diagram-fill: #4a3018;
     --radius-none: 0px;
     --radius-sm: 2px;
     --radius-md: 4px;
@@ -366,4 +422,30 @@
     --border-style: ridge;
     --border-style-interactive: ridge;
     --surface-card-image: repeating-linear-gradient(90deg, rgba(255, 235, 180, 0.07) 0, rgba(255, 235, 180, 0.07) 1px, transparent 1px, transparent 3px);
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 4px;
+    --diagram-line-cap: butt;
+    --diagram-line-join: bevel;
+    --diagram-dash: 10 3 2 3;
+    --diagram-dot: 1 3;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.3;
+    --diagram-roughness: 0.2;
+    --diagram-glow: 0;
+    --diagram-shadow: 2px 3px 0 rgba(43, 26, 14, 0.5);
+    --diagram-marker: triangle;
+    --diagram-label-font: display;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 700;
+    --diagram-label-case: uppercase;
+    --diagram-corner: 3px;
+    --material-roughness: 0.3;
+    --material-metalness: 0.9;
+    --material-flat: 0;
+    --material-outline: 1;
+    --light-ambient: 0.4;
+    --light-key: 1.2;
+    --light-key-color: #ffd9a0;
+    --scene-fog: 0.2;
 }