Feat: Update ui to use new css tokens in docs

jlukic · jlukic · commit 74ea59956daf · 2026-01-12T18:15:57.000-05:00
diff --git a/docs/src/archive/112-components/example/component.css b/docs/src/archive/112-components/example/component.css
@@ -32,7 +32,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: var(--compact-spacing);
+    padding: var(--padding-xs);
 
     .main {
       flex-grow: 1;
@@ -53,7 +53,7 @@
       font-size: 10px;
       flex-wrap: wrap;
       color: var(--standard-40);
-      margin-bottom: var(--compact-spacing);
+      margin-bottom: var(--spacing-xs);
       span {
         border-right: var(--border);
         padding-right: 5px;
@@ -65,11 +65,11 @@
   }
 
   .meta {
-    margin-top: var(--compact-spacing);
-    padding-top: var(--compact-spacing);
+    margin-top: var(--spacing-xs);
+    padding-top: var(--padding-xs);
     border-top: var(--border);
     display: flex;
-    gap: var(--compact-spacing);
+    gap: var(--gap-xs);
 
     & > * {
       color: var(--standard-90);
diff --git a/docs/src/components/CodePlayground/CodePlayground.css b/docs/src/components/CodePlayground/CodePlayground.css
@@ -198,7 +198,7 @@
         display: flex;
         flex-direction: row;
         border-radius: var(--attached-border-radius);
-        padding: var(--compact-padding);
+        padding: var(--padding-xs);
         border: var(--border);
       }
       .menu ui-menu {
diff --git a/docs/src/components/ColorPalette/ColorPalette.css b/docs/src/components/ColorPalette/ColorPalette.css
@@ -66,7 +66,7 @@
   position: relative;
   transition: var(--transition);
   overflow: hidden;
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/docs/src/components/LearnExample/LearnExample.css b/docs/src/components/LearnExample/LearnExample.css
@@ -240,13 +240,13 @@
             display: block;
             font-size: 32px;
             color: var(--primary-text-color);
-            margin-bottom: var(--compact-spacing);
+            margin-bottom: var(--spacing-xs);
           }
           .header {
             font-size: 18px;
             font-weight: var(--bold);
             color: var(--standard-100);
-            margin-bottom: var(--compact-spacing);
+            margin-bottom: var(--spacing-xs);
           }
           .text {
             color: var(--standard-40);
diff --git a/docs/src/components/Sidebar.css b/docs/src/components/Sidebar.css
@@ -143,7 +143,7 @@
   }
 
   sidebar nav-menu {
-    margin-top: var(--compact-spacing);
+    margin-top: var(--spacing-xs);
     flex-grow: 1;
   }
 }
diff --git a/docs/src/css/responsive/mobile.css b/docs/src/css/responsive/mobile.css
@@ -27,7 +27,7 @@
 
     topbar-menu {
       width: 0px;
-      margin: 0rem var(--compact-spacing);
+      margin: 0rem var(--spacing-xs);
     }
     .logo {
       margin-left: var(--spacing);
diff --git a/docs/src/examples/component/advanced-ball-simulation/component.css b/docs/src/examples/component/advanced-ball-simulation/component.css
@@ -12,7 +12,7 @@
   }
   input {
    vertical-align: middle;
-    margin-left: var(--compact-spacing);
+    margin-left: var(--spacing-xs);
   }
 }
 
diff --git a/docs/src/examples/component/async-search/component.css b/docs/src/examples/component/async-search/component.css
@@ -18,7 +18,7 @@
       padding: var(--padding);
       cursor: pointer;
       border-top: var(--border);
-      padding: var(--compact-padding) var(--padding);
+      padding: var(--padding-xs) var(--padding);
 
       &:hover,
       &.active {
@@ -30,7 +30,7 @@
     }
 
     .message {
-      padding: var(--compact-padding);
+      padding: var(--padding-xs);
       color: var(--standard-40);
       b {
         color: var(--primary-text-color);
diff --git a/docs/src/examples/component/card-search/card.css b/docs/src/examples/component/card-search/card.css
@@ -28,7 +28,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: var(--compact-spacing);
+    padding: var(--padding-xs);
 
     .main {
       flex-grow: 1;
@@ -46,16 +46,16 @@
       font-size: 11px;
       flex-wrap: wrap;
       color: var(--standard-40);
-      margin-bottom: var(--compact-spacing);
+      margin-bottom: var(--spacing-xs);
     }
   }
 
   .meta {
-    margin-top: var(--compact-spacing);
-    padding-top: var(--compact-spacing);
+    margin-top: var(--spacing-xs);
+    padding-top: var(--padding-xs);
     border-top: var(--border);
     display: flex;
-    gap: var(--compact-spacing);
+    gap: var(--gap-xs);
 
     & > * {
       color: var(--standard-90);
diff --git a/docs/src/examples/component/checkbox/component.css b/docs/src/examples/component/checkbox/component.css
@@ -39,7 +39,7 @@
     user-select: none;
     font-weight: var(--bold);
     transition: var(--transition);
-    margin-left: var(--compact-spacing);
+    margin-left: var(--spacing-xs);
   }
 
   & input:checked {
diff --git a/docs/src/examples/component/color-palette/component.css b/docs/src/examples/component/color-palette/component.css
@@ -66,7 +66,7 @@
   position: relative;
   transition: var(--transition);
   overflow: hidden;
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   display: flex;
   flex-direction: column;
   justify-content: center;
diff --git a/docs/src/examples/component/context-menu/component.css b/docs/src/examples/component/context-menu/component.css
@@ -60,7 +60,7 @@
   }
   
   .icon {
-    margin-right: var(--compact-spacing);
+    margin-right: var(--spacing-xs);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/docs/src/examples/component/dropdown/page.css b/docs/src/examples/component/dropdown/page.css
@@ -1,6 +1,6 @@
 .example-section {
   padding: var(--padding);
-  margin-bottom: var(--compact-spacing);
+  margin-bottom: var(--spacing-xs);
   border: var(--border);
   border-radius: var(--border-radius);
 }
diff --git a/docs/src/examples/component/form-builder/component.css b/docs/src/examples/component/form-builder/component.css
@@ -12,21 +12,21 @@
   }
 
   .error {
-    margin-top: var(--compact-spacing);
+    margin-top: var(--spacing-xs);
     color: var(--red);
     font-size: var(--small);
   }
 
   .help {
-    margin-top: var(--compact-spacing);
+    margin-top: var(--spacing-xs);
     color: var(--standard-40);
     font-size: var(--small);
   }
 }
 
 label {
   display: block;
-  margin-bottom: var(--compact-spacing);
+  margin-bottom: var(--spacing-xs);
   font-weight: var(--bold);
 
   .required {
@@ -62,6 +62,6 @@ textarea {
 
 .actions {
   display: flex;
-  gap: var(--compact-spacing);
+  gap: var(--gap-xs);
   margin-top: var(--spacing);
 }
diff --git a/docs/src/examples/component/star-rating/component.css b/docs/src/examples/component/star-rating/component.css
@@ -53,7 +53,7 @@
 }
 
 .value {
-  margin-left: var(--compact-spacing);
+  margin-left: var(--spacing-xs);
   font-size: var(--small);
   color: var(--standard-60);
 }
diff --git a/docs/src/examples/framework/keys/advanced-keybinding/component.css b/docs/src/examples/framework/keys/advanced-keybinding/component.css
@@ -13,7 +13,7 @@
 .results {
 
   border: var(--border);
-  padding: var(--compact-padding);
+  padding: var(--padding-xs);
   border-radius: var(--border-radius);
 
   .result {
diff --git a/docs/src/examples/framework/theme-preview/component.css b/docs/src/examples/framework/theme-preview/component.css
@@ -79,7 +79,7 @@
 .color {
   display: flex;
   flex-direction: column;
-  gap: var(--compact-spacing);
+  gap: var(--gap-xs);
 }
 
 .color label {
diff --git a/docs/src/examples/query/components/query-component/component.css b/docs/src/examples/query/components/query-component/component.css
@@ -3,5 +3,5 @@
   border-radius: var(--border-radius);
   background: var(--standard-5);
   margin: var(--vertically-spaced);
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
 }
diff --git a/docs/src/examples/query/components/query-initialize/component.css b/docs/src/examples/query/components/query-initialize/component.css
@@ -2,5 +2,5 @@
   border: var(--border);
   background-color: var(--standard-5);
   margin: var(--vertically-spaced);
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
 }
diff --git a/docs/src/examples/query/components/query-setting/component.css b/docs/src/examples/query/components/query-setting/component.css
@@ -2,5 +2,5 @@
   border: var(--border);
   background: var(--standard-5);
   margin: var(--vertically-spaced);
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
 }
diff --git a/docs/src/examples/query/components/query-settings/component.css b/docs/src/examples/query/components/query-settings/component.css
@@ -2,7 +2,7 @@
   border: var(--border);
   background: var(--standard-5);
   margin: var(--vertically-spaced);
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   font-weight: bold;
 
   &.red b {
diff --git a/docs/src/examples/query/dimensions/query-naturaldisplay/page.css b/docs/src/examples/query/dimensions/query-naturaldisplay/page.css
@@ -6,7 +6,7 @@
 }
 
 .element {
-  margin: var(--compact-padding) 0;
+  margin: var(--spacing-xs) 0;
   padding: var(--padding);
   border-radius: var(--border-radius);
   font-size: var(--medium);
diff --git a/docs/src/examples/query/dom-traversal/query-contains/page.css b/docs/src/examples/query/dom-traversal/query-contains/page.css
@@ -9,14 +9,14 @@
   }
   
   .target {
-    padding: var(--compact-spacing);
+    padding: var(--padding-xs);
     background: var(--standard-5);
     border-radius: var(--border-radius);
   }
 }
 
 .other {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   margin: var(--vertically-spaced);
   
diff --git a/docs/src/examples/query/dom-traversal/query-indexof/page.css b/docs/src/examples/query/dom-traversal/query-indexof/page.css
@@ -1,11 +1,11 @@
 .list {
   display: flex;
-  gap: var(--compact-spacing);
+  gap: var(--gap-xs);
   margin: var(--vertically-spaced);
 }
 
 .item {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   border: var(--border);
   border-radius: var(--border-radius);
diff --git a/docs/src/examples/query/dom-traversal/query-prev/page.css b/docs/src/examples/query/dom-traversal/query-prev/page.css
@@ -1,5 +1,5 @@
 .item {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   border: var(--border);
   margin: var(--vertically-spaced);
diff --git a/docs/src/examples/query/events/query-blur/page.css b/docs/src/examples/query/events/query-blur/page.css
@@ -1,5 +1,5 @@
 .input {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   border: var(--border);
   border-radius: var(--border-radius);
   font-size: inherit;
diff --git a/docs/src/examples/query/events/query-click/page.css b/docs/src/examples/query/events/query-click/page.css
@@ -1,5 +1,5 @@
 .counter {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   border: var(--border);
   border-radius: var(--border-radius);
diff --git a/docs/src/examples/query/introduction/query-chaining/page.css b/docs/src/examples/query/introduction/query-chaining/page.css
@@ -1,5 +1,5 @@
 .item {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   border: var(--border);
   margin: var(--vertically-spaced);
diff --git a/docs/src/examples/query/introduction/query-creating-dom/page.css b/docs/src/examples/query/introduction/query-creating-dom/page.css
@@ -5,15 +5,15 @@
 }
 
 .created {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   border-radius: var(--border-radius);
   margin: var(--margin);
   background-color: var(--green-5);
   border: 1px solid var(--green-10);
 
   .nested {
     margin-top: 5px;
-    padding: var(--compact-spacing);
+    padding: var(--padding-xs);
     border-radius: var(--border-radius);
     background-color: var(--inverted-50);
     border: var(--border);
diff --git a/docs/src/examples/query/introduction/query-dom/page.css b/docs/src/examples/query/introduction/query-dom/page.css
@@ -1,5 +1,5 @@
 .box {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   border: var(--border);
   margin: var(--vertically-spaced);
diff --git a/docs/src/examples/query/logical-operators/query-last/page.css b/docs/src/examples/query/logical-operators/query-last/page.css
@@ -1,5 +1,5 @@
 .item {
-  padding: var(--compact-spacing);
+  padding: var(--padding-xs);
   background: var(--standard-5);
   border: var(--border);
   margin: var(--vertically-spaced);
diff --git a/docs/src/examples/templates/async-advanced/component.css b/docs/src/examples/templates/async-advanced/component.css
diff --git a/docs/src/examples/templates/expressions-boolean-attributes/component.css b/docs/src/examples/templates/expressions-boolean-attributes/component.css
diff --git a/docs/src/examples/templates/helpers-array/component.css b/docs/src/examples/templates/helpers-array/component.css
diff --git a/docs/src/examples/templates/helpers-css/component.css b/docs/src/examples/templates/helpers-css/component.css
diff --git a/docs/src/examples/templates/helpers-date/component.css b/docs/src/examples/templates/helpers-date/component.css
diff --git a/docs/src/examples/templates/helpers-logging/component.css b/docs/src/examples/templates/helpers-logging/component.css
diff --git a/docs/src/examples/templates/helpers-string/component.css b/docs/src/examples/templates/helpers-string/component.css
diff --git a/docs/src/examples/templates/template-event-handlers/component.css b/docs/src/examples/templates/template-event-handlers/component.css
diff --git a/docs/src/examples/templates/template-reactivity/component.css b/docs/src/examples/templates/template-reactivity/component.css
diff --git a/docs/src/examples/utils/browser/utils-copytext/page.css b/docs/src/examples/utils/browser/utils-copytext/page.css
diff --git a/docs/src/examples/utils/browser/utils-getkeyfromevent/page.css b/docs/src/examples/utils/browser/utils-getkeyfromevent/page.css
diff --git a/docs/src/examples/utils/browser/utils-openlink/page.css b/docs/src/examples/utils/browser/utils-openlink/page.css
diff --git a/docs/src/examples/utils/css/utils-scopestyles/styles.css b/docs/src/examples/utils/css/utils-scopestyles/styles.css
diff --git a/docs/src/pages/ui/start/whats-new.mdx b/docs/src/pages/ui/start/whats-new.mdx

Original file line number	Diff line number	Diff line change
`@@ -198,7 +198,7 @@`
`198`	`198`	`display: flex;`
`199`	`199`	`flex-direction: row;`
`200`	`200`	`border-radius: var(--attached-border-radius);`
`201`		`- padding: var(--compact-padding);`
	`201`	`+ padding: var(--padding-xs);`
`202`	`202`	`border: var(--border);`
`203`	`203`	`}`
`204`	`204`	`.menu ui-menu {`
Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,7 @@`
`143`	`143`	`}`
`144`	`144`
`145`	`145`	`sidebar nav-menu {`
`146`		`- margin-top: var(--compact-spacing);`
	`146`	`+ margin-top: var(--spacing-xs);`
`147`	`147`	`flex-grow: 1;`
`148`	`148`	`}`
`149`	`149`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`
`28`	`28`	`topbar-menu {`
`29`	`29`	`width: 0px;`
`30`		`- margin: 0rem var(--compact-spacing);`
	`30`	`+ margin: 0rem var(--spacing-xs);`
`31`	`31`	`}`
`32`	`32`	`.logo {`
`33`	`33`	`margin-left: var(--spacing);`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`}`
`13`	`13`	`input {`
`14`	`14`	`vertical-align: middle;`
`15`		`- margin-left: var(--compact-spacing);`
	`15`	`+ margin-left: var(--spacing-xs);`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`user-select: none;`
`40`	`40`	`font-weight: var(--bold);`
`41`	`41`	`transition: var(--transition);`
`42`		`- margin-left: var(--compact-spacing);`
	`42`	`+ margin-left: var(--spacing-xs);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`& input:checked {`