CesiumGS · ggetz · Aug 27, 2025 · Jun 6, 2025 · Jul 16, 2025 · Aug 1, 2025
diff --git a/packages/sandcastle/gallery/viewerless/index.html b/packages/sandcastle/gallery/viewerless/index.html
@@ -1,6 +1,38 @@
 <style>
   @import url(../templates/bucket.css);
+  h2 {
+    font-weight: bold;
+    font-size: 1.5em;
+  }
 </style>
 <div id="cesiumContainer" class="fullSize"></div>
 <div id="loadingOverlay"><h1>Loading...</h1></div>
-<div id="toolbar"></div>
+<div id="toolbar">
+  <h2>Semantic elements</h2>
+  <div>Button: <button>New Button</button></div>
+  <div class="checkbox">
+    Checkbox: <input type="checkbox" name="check" id="check" /><label
+      for="check"
+      >label</label
+    >
+  </div>
+  <div class="radio">
+    Radio: <input type="radio" name="test" id="rad1" /><label for="rad1"
+      >label</label
+    ><input type="radio" name="test" id="rad2" /><label for="rad2"
+      >label2</label
+    >
+  </div>
+  <div>Range: <input type="range" /></div>
+  <div>
+    Select:
+    <select name="fruit" id="fruit">
+      <option value="apple">Apple</option>
+      <option value="orange">Orange</option>
+      <option value="banana">Banana</option>
+    </select>
+  </div>
+  <div>Input: <input type="text" /></div>
+  <div>Number: <input type="number" /></div>
+  <h2>Genearated elements</h2>
+</div>
diff --git a/packages/sandcastle/gallery/viewerless/main.js b/packages/sandcastle/gallery/viewerless/main.js
@@ -1,8 +1,28 @@
 //import * as Cesium from "cesium";
+import Sandcastle from "Sandcastle";
 
 //const viewer = new Cesium.Viewer("cesiumContainer");
 
 console.log("Sandcastle loaded");
 document.body.style.background = `
   no-repeat center/30% url(../images/cesium-logomark.svg),
   linear-gradient(to bottom, lightskyblue, lightgreen)`;
+
+Sandcastle.addToolbarButton("New Button", function () {
+  // your code here
+});
+
+let toggleValue1 = true;
+Sandcastle.addToggleButton("Toggle", toggleValue1, function (checked) {
+  toggleValue1 = checked;
+});
+
+const options1 = [
+  {
+    text: "Option 1",
+    onselect: function () {
+      // your code here, the first option is always run at load
+    },
+  },
+];
+Sandcastle.addToolbarMenu(options1);
diff --git a/packages/sandcastle/index.html b/packages/sandcastle/index.html
@@ -23,6 +23,7 @@
         src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
       }
     </style>
+    <link rel="stylesheet" href="/styles/stratakit-ext-tokens.css" />
   </head>
   <body>
     <div id="app-container"></div>

diff --git a/packages/sandcastle/package.json b/packages/sandcastle/package.json
@@ -16,10 +16,10 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@stratakit/bricks": "^0.3.1",
-    "@stratakit/foundations": "^0.2.0",
-    "@stratakit/icons": "^0.1.2",
-    "@stratakit/structures": "^0.2.3",
+    "@stratakit/bricks": "^0.3.4",
+    "@stratakit/foundations": "^0.2.4",
+    "@stratakit/icons": "^0.1.3",
+    "@stratakit/structures": "^0.3.2",
     "allotment": "^1.20.4",
     "classnames": "^2.5.1",
     "monaco-editor": "^0.52.2",

diff --git a/packages/sandcastle/public/styles/stratakit-ext-tokens.css b/packages/sandcastle/public/styles/stratakit-ext-tokens.css
@@ -0,0 +1,28 @@
+/*
+ * This file is just to define some extra stratakit tokens not in the library yet.
+ * Names are meant to match the expected values later but with the extra prefix
+ * --stratakit-ext for "stratakit extensions"
+ */
+
+body {
+  /* Radius values */
+  /* For sharp corners and precise edges */
+  --stratakit-ext-radius-none: 0px;
+  /* For subtle softening */
+  --stratakit-ext-radius-xs: 2px;
+  --stratakit-ext-radius-sm: 4px;
+  /* For standard component styling */
+  --stratakit-ext-radius-md: 8px;
+  --stratakit-ext-radius-lg: 12px;
+  /* For prominent or featured elements */
+  --stratakit-ext-radius-xl: 16px;
+  --stratakit-ext-radius-xxl: 24px;
+  /* For fully circular or pill shaped */
+  --stratakit-ext-radius-full: 9999px;
+
+  /* Border thicknesses */
+  --stratakit-ext-border-highlight: 0.5px;
+  --stratakit-ext-border-border: 1px;
+  --stratakit-ext-border-focus-ring: 2px;
+  --stratakit-ext-border-emphasis: 4px;
+}
diff --git a/packages/sandcastle/public/styles/stratakit-mimic/adjustments.css b/packages/sandcastle/public/styles/stratakit-mimic/adjustments.css
@@ -0,0 +1,131 @@
+/*
+ * A few extra adjustments to the stratakit mimic components to make them display
+ * nicely when used for sandcastle examples with minimal extra layout styling
+ */
+
+.stratakit-mimic-button {
+  margin: var(--stratakit-space-x1);
+}
+
+.stratakit-mimic-field {
+  margin: var(--stratakit-space-x1);
+}
+.stratakit-mimic-field:has(.stratakit-mimic-switch) {
+  /* We disable pointer-events on these for an easier click handler, re-enable cursor */
+  cursor: pointer;
+}
+
+.stratakit-mimic-switch {
+  /* These styles are susceptible to weird sizing if padding is set like some sandcastle already do */
+  padding: 0 !important;
+}
+
+/*
+ * Undo the reset for select elements to allow using less classes/styles in sandcastles
+ * revert-layer only undoes this layer not all styles allowing
+ * other custom styles to still affect these
+ */
+@layer reset {
+  table,
+  thead,
+  tbody,
+  tr,
+  td,
+  th {
+    all: revert-layer;
+  }
+
+  input[type="range"] {
+    margin: revert-layer;
+  }
+  input[type="checkbox"] {
+    margin: revert-layer;
+  }
+  input[type="radio"] {
+    margin: revert-layer;
+  }
+}
+
+/*
+ * Semantic element "bridge" to bring closer to stratakit elements
+ * The values for these styles were extracted from the matching stratakit components
+ */
+
+select:not(.stratakit-mimic-button) {
+  background: var(--stratakit-color-bg-neutral-base);
+  padding: var(--stratakit-space-x1);
+  border-radius: var(--stratakit-ext-radius-sm);
+  cursor: pointer;
+  border-color: var(--stratakit-color-border-shadow-base);
+  margin: var(--stratakit-space-x1);
+
+  &:hover {
+    border-color: color-mix(
+      in oklch,
+      var(--stratakit-color-border-shadow-base) 100%,
+      var(--stratakit-color-glow-hue)
+        var(--stratakit-color-border-glow-base-hover-\%)
+    );
+    background: color-mix(
+      in oklch,
+      var(--stratakit-color-bg-neutral-base) 100%,
+      var(--stratakit-color-glow-hue)
+        var(--stratakit-color-bg-glow-base-hover-\%)
+    );
+  }
+}
+
+button:not(.stratakit-mimic-button) {
+  /* Missing shadows and pressed, active and disabled states but "good enough" for now */
+  background: var(--stratakit-color-bg-neutral-base);
+  padding: var(--stratakit-space-x1) var(--stratakit-space-x3);
+  border-radius: var(--stratakit-ext-radius-sm);
+  border: var(--stratakit-ext-border-border) solid;
+  border-color: var(--stratakit-color-border-shadow-base);
+  line-height: 1.2;
+  margin: var(--stratakit-space-x1);
+
+  &:hover {
+    border-color: color-mix(
+      in oklch,
+      var(--stratakit-color-border-shadow-base) 100%,
+      var(--stratakit-color-glow-hue)
+        var(--stratakit-color-border-glow-base-hover-\%)
+    );
+    background: color-mix(
+      in oklch,
+      var(--stratakit-color-bg-neutral-base) 100%,
+      var(--stratakit-color-glow-hue)
+        var(--stratakit-color-bg-glow-base-hover-\%)
+    );
+  }
+}
+
+input[type="text"],
+input[type="number"] {
+  background: var(--stratakit-color-bg-page-base);
+  border-radius: var(--stratakit-ext-radius-sm);
+  border: var(--stratakit-ext-border-border) solid;
+  border-color: var(--stratakit-color-border-neutral-base);
+  padding-inline: var(--stratakit-space-x2);
+  color: var(--stratakit-color-text-neutral-primary);
+
+  &[type="number"] {
+    padding-right: 0;
+  }
+
+  &:hover {
+    background-color: color-mix(
+      in oklch,
+      var(--stratakit-color-bg-page-base) 100%,
+      var(--stratakit-color-glow-hue)
+        var(--stratakit-color-bg-glow-base-hover-\%)
+    );
+    border-color: color-mix(
+      in oklch,
+      var(--stratakit-color-border-neutral-base) 100%,
+      var(--stratakit-color-glow-hue)
+        var(--stratakit-color-border-glow-base-hover-\%)
+    );
+  }
+}