@povio/ui 5.0.0-rc.10 → 5.0.0-rc.11

package/dist/styles/configurator.css

@@ -2,7 +2,7 @@
 .studio-overlay {
   font-family: "Inter Variable", Inter, sans-serif;
   color: #242424;
-  font-size: 11px;
+  font-size: 10px;
   line-height: 1.5;
 }
 .studio {
@@ -69,9 +69,9 @@
   background: #393939 !important;
   color: white !important;
   border: 1px solid #393939 !important;
-  padding: 10px 15px;
-  border-radius: 7px;
-  font-size: 11px;
+  padding: 6px 10px;
+  border-radius: 5px;
+  font-size: 10px;
   font-weight: 550;
 }
 /* Keep the application visible around the movable configurator window. */
@@ -94,6 +94,13 @@
   background: #fff;
   overflow: hidden;
 }
+/* With the components shown by the host (the App Canvas), the window is only the editor: narrow and one column. */
+.studio-modal[data-components-hosted] {
+  width: min(360px, calc(100vw - 48px));
+}
+.studio-modal[data-components-hosted] .studio-dialog {
+  grid-template-columns: minmax(0, 1fr);
+}
 /*
  * The editor column stacks the top bar, the editor and the footer; the preview fills the second column from top to
  * bottom, like a design tool's canvas.
@@ -107,7 +114,7 @@
 }
 .studio-title h2 {
   margin: 0;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 650;
   letter-spacing: -0.3px;
 }
@@ -118,8 +125,8 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px 16px;
-  padding: 10px 16px;
+  gap: 4px 12px;
+  padding: 8px 12px 4px;
   background: #fbfbfb;
   border-bottom: 1px solid #eaeaea;
   min-width: 0;
@@ -146,15 +153,78 @@
   margin-left: auto;
   min-width: 0;
 }
+/* Search rests as a magnifier beside the window controls and expands over the title row while in use. */
 .studio-topbar .studio-search {
+  position: relative;
+  flex: 0 0 auto;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   margin: 0;
-  flex: 1 1 90px;
-  max-width: 190px;
-  padding: 7px 9px;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: #707070;
+  cursor: pointer;
+}
+.studio-topbar .studio-search:hover {
+  background: #f0f0f0;
+}
+.studio-topbar .studio-search input {
+  position: absolute;
+  width: 1px;
+  opacity: 0;
+}
+.studio-topbar .studio-search:is(:focus-within, :has(input:not(:placeholder-shown))) {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  width: auto;
+  padding: 0 4px 0 8px;
+  border-color: #d9d9d9;
   background: #fff;
+  cursor: text;
+}
+.studio-topbar .studio-search:is(:focus-within, :has(input:not(:placeholder-shown))) input {
+  position: static;
+  flex: 1;
+  width: auto;
+  opacity: 1;
+}
+.studio-topbar:has(.studio-search:is(:focus-within, :has(input:not(:placeholder-shown)))) .studio-title {
+  display: none;
 }
 .studio-topbar .studio-search:has(input:disabled) {
-  opacity: 0.5;
+  opacity: 0.4;
+  cursor: default;
+}
+.studio-search-clear {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #8e8e8e;
+}
+.studio-search-clear:hover {
+  background: #f0f0f0;
+}
+/* The header is the window's drag handle wherever it has no control of its own. */
+.studio-modal:not(.studio-modal-popout) .studio-topbar {
+  cursor: grab;
+  user-select: none;
+}
+.studio-modal:not(.studio-modal-popout) .studio-topbar:active {
+  cursor: grabbing;
+}
+.studio-topbar :is(button, input, label) {
+  cursor: pointer;
+}
+.studio-topbar input {
+  cursor: text;
 }
 @container (max-width: 800px) {
   .studio-topbar-controls {
@@ -162,10 +232,7 @@
     margin-left: 0;
     flex-shrink: 1;
   }
-  .studio-topbar .studio-search {
-    width: auto;
-    flex: 1 1 100%;
-  }
+
   .studio-topbar .studio-title {
     flex: 1;
   }
@@ -242,22 +309,22 @@
 .studio-nav-divider {
   flex-shrink: 0;
   width: 1px;
-  height: 18px;
-  margin: 0 8px;
+  height: 14px;
+  margin: 0 4px;
   background: #e5e5e5;
 }
 .studio-nav button {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 7px;
+  gap: 6px;
   white-space: nowrap;
-  padding: 7px 10px;
+  padding: 4px 8px;
   color: #707070;
   background: transparent;
   border: 0;
-  border-radius: 6px;
-  font-size: 11px;
+  border-radius: 5px;
+  font-size: 10px;
 }
 .studio-nav button[aria-current] {
   background: #eeeeee;
@@ -265,9 +332,9 @@
   font-weight: 600;
 }
 .studio-editor {
-  --studio-editor-pad: 20px;
+  --studio-editor-pad: 12px;
   padding: var(--studio-editor-pad);
-  padding-top: 12px;
+  padding-top: 8px;
   overflow: auto;
   min-width: 0;
 }
@@ -275,7 +342,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
   border-bottom: 1px solid #eaeaea;
 }
 .studio-subtabs-bar .studio-toggle-all {
@@ -285,7 +352,7 @@
 .studio-subtabs {
   display: flex;
   flex: 1;
-  gap: 18px;
+  gap: 12px;
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
@@ -295,13 +362,13 @@
   flex-shrink: 0;
   align-items: center;
   gap: 6px;
-  padding: 0 0 9px;
+  padding: 0 0 6px;
   margin-bottom: -1px;
   border: 0;
   border-bottom: 2px solid transparent;
   background: transparent;
   color: #707070;
-  font-size: 11px;
+  font-size: 10px;
   white-space: nowrap;
 }
 .studio-subtabs button[aria-selected="true"] {
@@ -320,7 +387,7 @@
   margin-bottom: 10px;
 }
 .studio-editor-heading h2 {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 550;
   letter-spacing: -0.6px;
   margin: 0;
@@ -330,8 +397,8 @@
   border: 1px solid #e5e5e5;
   background: #f7f7f7;
   border-radius: 6px;
-  padding: 3px;
-  gap: 3px;
+  padding: 2px;
+  gap: 2px;
 }
 .studio-mode button {
   display: flex;
@@ -340,8 +407,8 @@
   gap: 6px;
   border: 0;
   border-radius: 4px;
-  padding: 5px 11px;
-  font-size: 11px;
+  padding: 3px 8px;
+  font-size: 10px;
   background: transparent;
   color: #8e8e8e;
   text-transform: capitalize;
@@ -355,10 +422,10 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 9px 11px;
+  padding: 4px 8px;
   border: 1px solid #e5e5e5;
   border-radius: 6px;
-  margin: 20px 0 12px;
+  margin: 12px 0 8px;
   color: #9f9f9f;
 }
 .studio-search input {
@@ -367,7 +434,7 @@
   border: 0;
   background: transparent;
   color: #414141;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-token {
   padding: 4px 0;
@@ -379,7 +446,7 @@
 }
 .studio-token label > span {
   display: block;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 550;
   text-transform: capitalize;
 }
@@ -400,7 +467,7 @@
   line-height: 18px;
   font-family: inherit;
   font-variant-numeric: tabular-nums;
-  font-size: 11px;
+  font-size: 10px;
   color: #6a6a6a;
   min-width: 0;
   width: 100%;
@@ -445,7 +512,7 @@
   background: transparent;
   color: #414141;
   font: inherit;
-  font-size: 11px;
+  font-size: 10px;
   text-align: left;
   text-transform: capitalize;
   cursor: pointer;
@@ -472,7 +539,7 @@
   background: #fff;
   box-shadow: 0 12px 40px #21212126;
   font-family: "Inter Variable", Inter, sans-serif;
-  font-size: 11px;
+  font-size: 10px;
   color: #242424;
 }
 /* The list scrolls itself so opening it can bring the selected color into view. */
@@ -550,12 +617,12 @@
   color: #b8362c;
   display: block;
   margin-top: 4px;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-preview {
   background: #f7f7f7;
   border-left: 1px solid #eaeaea;
-  padding: 20px;
+  padding: 12px;
   overflow: auto;
   min-width: 0;
 }
@@ -573,7 +640,7 @@
   gap: 8px;
 }
 .studio-preview-heading > span {
-  font-size: 9px;
+  font-size: 10px;
   font-weight: 600;
   letter-spacing: 1.1px;
   color: #8d8d8d;
@@ -601,7 +668,7 @@
 .studio-preview-note {
   text-align: center;
   color: #a7a7a7;
-  font-size: 11px;
+  font-size: 10px;
   line-height: 1.7;
   margin-top: 20px;
 }
@@ -617,8 +684,8 @@
   grid-row: 3;
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 20px;
+  gap: 4px;
+  padding: 6px 8px;
   border-top: 1px solid #eaeaea;
   flex-shrink: 0;
 }
@@ -631,14 +698,35 @@
   color: #717171;
   border: 1px solid #e7e7e7;
   border-radius: 6px;
-  padding: 9px 12px;
+  padding: 6px 10px;
   background: white;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-footer > span {
   flex: 1;
+  min-width: 0;
+  padding-inline: 4px;
+  overflow: hidden;
   color: #929292;
-  font-size: 11px;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.studio-footer > button {
+  height: 24px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.studio-footer > .studio-primary {
+  gap: 4px;
+  padding: 0 10px;
+}
+.studio-footer > button:not(.studio-primary) {
+  padding: 0 8px;
+}
+.studio-footer > button.studio-footer-reset {
+  width: 24px;
+  padding: 0;
 }
 /* Confirmation dialogs sit above the full-page configurator. */
 .studio-overlay.studio-confirm-overlay {
@@ -655,18 +743,18 @@
   box-shadow: 0 25px 90px #21212140;
 }
 .studio-confirm-dialog {
-  padding: 22px;
+  padding: 16px;
   outline: none;
 }
 .studio-confirm-dialog h2 {
   margin: 0 0 8px;
-  font-size: 14px;
+  font-size: 10px;
   font-weight: 650;
 }
 .studio-confirm-dialog p {
   margin: 0;
   color: #717171;
-  font-size: 12px;
+  font-size: 10px;
 }
 .studio-confirm-actions {
   display: flex;
@@ -675,26 +763,26 @@
   margin-top: 20px;
 }
 .studio-confirm-actions > button:not(.studio-danger) {
-  padding: 9px 12px;
+  padding: 6px 10px;
   border: 1px solid #e7e7e7;
   border-radius: 6px;
   background: #fff;
   color: #717171;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-confirm-actions > button.studio-danger {
   display: flex;
   align-items: center;
   gap: 7px;
-  padding: 9px 12px;
+  padding: 6px 10px;
   border: 1px solid #b8362c;
   border-radius: 6px;
   background: #b8362c;
   color: #fff;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-settings h3 {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 650;
   margin: 18px 0 6px;
 }
@@ -703,15 +791,15 @@
   justify-content: space-between;
   align-items: center;
   gap: 10px;
-  padding: 10px 0;
+  padding: 6px 0;
   border-bottom: 1px solid #efefef;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-setting select {
   background: white;
   border: 1px solid #e2e2e2;
   border-radius: 5px;
-  padding: 7px;
+  padding: 4px 6px;
   color: #676767;
 }
 .studio-setting input {
@@ -720,13 +808,13 @@
 .studio-setting small {
   display: block;
   color: #9e9e9e;
-  font-size: 11px;
+  font-size: 10px;
   margin-top: 4px;
 }
 .studio-help,
 .studio-export > p {
   color: #929292;
-  font-size: 11px;
+  font-size: 10px;
   line-height: 1.7;
   margin-top: 20px;
 }
@@ -734,7 +822,7 @@
   background: #f8f8f8;
   border: 1px solid #e5e5e5;
   border-radius: 7px;
-  font-size: 11px;
+  font-size: 10px;
   font-family: monospace;
   padding: 15px;
   width: 100%;
@@ -748,10 +836,10 @@
     grid-template-columns: var(--studio-editor-track, minmax(260px, 0.8fr)) minmax(280px, 1.25fr);
   }
   .studio-editor {
-    --studio-editor-pad: 18px;
+    --studio-editor-pad: 12px;
   }
   .studio-preview {
-    padding: 18px;
+    padding: 12px;
   }
   .studio-sample {
     padding: 8px;
@@ -768,6 +856,8 @@
     position: sticky;
     bottom: 0;
     z-index: 3;
+    /* Short tabs leave the footer at the window's bottom edge instead of under their last row. */
+    margin-top: auto;
     background: #fff;
   }
   .studio-resize-handle {
@@ -781,14 +871,6 @@
   .studio-preview {
     border-top: 1px solid #eaeaea;
   }
-  .studio-footer {
-    flex-wrap: wrap;
-    padding: 12px;
-    gap: 8px;
-  }
-  .studio-footer > span {
-    flex-basis: 60%;
-  }
 }
 
 .studio-token-group {
@@ -800,7 +882,7 @@
 }
 .studio-token-group legend {
   padding: 0 6px;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 600;
   text-transform: capitalize;
   color: #434343;
@@ -832,7 +914,7 @@
   flex: 1;
   align-self: stretch;
   min-width: 0;
-  padding: 7px 0 7px var(--studio-editor-pad);
+  padding: 6px 0 6px var(--studio-editor-pad);
   text-align: left;
 }
 :is(.studio-token-list-rows, .studio-token-list-inline) .studio-token-group:first-child legend {
@@ -859,7 +941,7 @@
   border: 0;
 }
 .studio-type-fields .studio-token label > span {
-  font-size: 11px;
+  font-size: 10px;
   white-space: nowrap;
   text-transform: none;
   margin-bottom: 0;
@@ -887,7 +969,7 @@
   }
   .studio-type-fields .studio-token-value input:not([type="color"]) {
     padding-left: 6px;
-    font-size: 11px;
+    font-size: 10px;
   }
 }
 
@@ -924,6 +1006,24 @@
     gap: 6px 10px;
   }
 }
+/*
+ * Inside a group the rows share one label column sized to its longest name, so short names such as palette steps
+ * leave the width to the values; long names keep one line while the values keep the 168px their controls need.
+ */
+.studio-token-list-inline .studio-token-group > div {
+  display: grid;
+  grid-template-columns: fit-content(calc(100% - 168px)) minmax(168px, 1fr);
+}
+.studio-token-list-inline .studio-token-group > div > * {
+  grid-column: 1 / -1;
+}
+.studio-token-list-inline .studio-token-group > div > .studio-token {
+  grid-template-columns: subgrid;
+  column-gap: 0;
+}
+.studio-token-list-inline .studio-token-group > div > .studio-token label {
+  padding-right: 16px;
+}
 
 /* A compact select that shows only a chevron; its text is hidden so the placeholder never shows. */
 .studio-size-presets {
@@ -938,7 +1038,7 @@
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a6a' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
     center / 12px no-repeat;
   color: transparent;
-  font-size: 11px;
+  font-size: 10px;
   cursor: pointer;
 }
 .studio-size-presets:hover {
@@ -971,7 +1071,7 @@
   top: 50%;
   transform: translateY(-50%);
   color: #939393;
-  font-size: 11px;
+  font-size: 10px;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
 }
@@ -1035,7 +1135,7 @@
   border-radius: 4px;
   background: transparent;
   color: #6a6a6a;
-  font-size: 11px;
+  font-size: 10px;
   line-height: 1;
   cursor: pointer;
 }
@@ -1065,7 +1165,7 @@
   gap: 0;
   padding-block: 0;
   padding-right: 0;
-  min-height: 32px;
+  min-height: 28px;
   border-bottom-color: var(--studio-cell-line);
 }
 .studio-token-list-inline .studio-token-group .studio-token:hover {
@@ -1077,7 +1177,7 @@
 .studio-token-list-inline .studio-token-group .studio-token label {
   display: flex;
   align-items: center;
-  padding: 6px 12px 6px 0;
+  padding: 4px 8px 4px 0;
 }
 .studio-token-list-inline .studio-token-group .studio-token-value {
   gap: 0;
@@ -1089,7 +1189,7 @@
 }
 .studio-token-list-inline .studio-token-group .studio-token-value input:not([type="color"]) {
   height: 100%;
-  min-height: 32px;
+  min-height: 28px;
   padding: 0 8px;
   border: 0;
   border-radius: 0;
@@ -1101,8 +1201,8 @@
 }
 .studio-token-list-inline .studio-token-group .studio-token-value input[type="color"] {
   align-self: center;
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   padding: 8px;
   border: 0;
   border-radius: 0;
@@ -1125,10 +1225,10 @@
   margin: 0 7px;
 }
 .studio-token-list-inline .studio-token-group .studio-palette-trigger {
-  min-height: 32px;
+  min-height: 28px;
 }
 .studio-token-list-inline .studio-token-group .studio-size-presets {
-  width: 28px;
+  width: 24px;
   height: auto;
   border: 0;
   border-radius: 0;
@@ -1139,7 +1239,7 @@
   border-left: 1px solid var(--studio-cell-line);
 }
 .studio-token-list-inline .studio-token-group .studio-token-value > button {
-  width: 32px;
+  width: 28px;
   height: auto;
   border-radius: 0;
 }
@@ -1160,7 +1260,7 @@
   margin: 0;
   padding: 24px;
   color: #8d8d8d;
-  font-size: 11px;
+  font-size: 10px;
   text-align: center;
 }
 .studio-gallery {
@@ -1170,7 +1270,7 @@
 .studio-gallery-group h3 {
   margin: 0 0 8px;
   font:
-    600 9px "Inter Variable",
+    600 10px "Inter Variable",
     Inter,
     sans-serif;
   letter-spacing: 1.1px;
@@ -1211,7 +1311,7 @@
 }
 .studio-gallery-card-title {
   font:
-    500 11px "Inter Variable",
+    500 10px "Inter Variable",
     Inter,
     sans-serif;
   color: rgb(var(--surface-default-foreground-base));
@@ -1241,7 +1341,7 @@
   align-items: center;
   gap: 10px;
   font:
-    600 11px "Inter Variable",
+    600 10px "Inter Variable",
     Inter,
     sans-serif;
   color: rgb(var(--surface-default-card-foreground-base));
@@ -1250,13 +1350,13 @@
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  padding: 5px 9px;
+  padding: 3px 8px;
   border: 1px solid #e5e5e5;
   border-radius: 6px;
   background: #fff;
   color: #6a6a6a;
   font:
-    400 11px "Inter Variable",
+    400 10px "Inter Variable",
     Inter,
     sans-serif;
   cursor: pointer;
@@ -1322,7 +1422,7 @@
   background: #272727;
   color: #fff;
   font:
-    400 11px "Inter Variable",
+    400 10px "Inter Variable",
     Inter,
     sans-serif;
   white-space: nowrap;
@@ -1347,25 +1447,30 @@
   margin: 14px 0 0;
   color: #8d8d8d;
   font:
-    400 11px "Inter Variable",
+    400 10px "Inter Variable",
     Inter,
     sans-serif;
   text-align: center;
 }
 
 /* Token picked in the inspector */
-.studio-token.is-highlighted {
-  background: #f1f1f1;
-  box-shadow: inset 3px 0 0 #797979;
+/* The row an inspector link opened: the same purple as the inspector's token chips. */
+.studio-token.is-highlighted,
+.studio-font-role.is-highlighted {
+  background: #f3effb;
+  box-shadow: inset 3px 0 0 #7655d7;
   animation: studio-token-flash 1.2s ease-out;
 }
 .studio-token-list-inline .studio-token-group .studio-token.is-highlighted:hover {
-  background: #ececec;
+  background: #ebe4f8;
+}
+.studio-token.is-highlighted label > span {
+  color: #6a46a8;
 }
 @keyframes studio-token-flash {
   0%,
   30% {
-    background: #dfdfdf;
+    background: #e2d8f6;
   }
 }
 .studio-gallery-card.is-wide {
@@ -1383,28 +1488,28 @@
   margin: 8px 0;
 }
 .studio-cva-field > span {
-  font-size: 11px;
+  font-size: 10px;
   color: #6a6a6a;
   overflow-wrap: anywhere;
 }
 .studio-cva-field input {
   width: 100%;
   min-width: 0;
-  height: 26px;
+  height: 24px;
   padding: 3px 7px;
   border: 1px solid #e6e6e6;
   border-radius: 5px;
   background: white;
   color: #414141;
-  font: 11px monospace;
+  font: 10px monospace;
 }
 .studio-cva-reset {
-  padding: 5px 9px;
+  padding: 3px 8px;
   border: 1px solid #e6e6e6;
   border-radius: 5px;
   background: white;
   color: #414141;
-  font-size: 12px;
+  font-size: 10px;
 }
 
 .studio-context-preview {
@@ -1416,7 +1521,7 @@
 }
 .studio-context-preview > h3,
 .studio-context-preview [data-testid="cva-preview"] > h3 {
-  font: 600 14px sans-serif;
+  font: 600 10px sans-serif;
   text-transform: capitalize;
   margin: 0 0 14px;
 }
@@ -1432,12 +1537,12 @@
   justify-content: space-between;
   gap: 5px;
   min-width: 0;
-  font: 11px sans-serif;
+  font: 10px sans-serif;
 }
 .studio-preview-controls select {
   min-width: 0;
   max-width: 110px;
-  height: 26px;
+  height: 24px;
   border: 1px solid #e1e1e1;
   border-radius: 4px;
   background: white;
@@ -1472,7 +1577,7 @@
 .studio-token-sample > span {
   display: block;
   margin-bottom: 4px;
-  font: 11px sans-serif;
+  font: 10px sans-serif;
   text-transform: capitalize;
 }
 .studio-token-specimen {
@@ -1512,7 +1617,7 @@
   flex-direction: column;
   gap: 12px;
   margin: 0 10px 10px;
-  padding: 10px;
+  padding: 8px;
   border: 1px solid #e3e3e3;
   border-radius: 8px;
   background: #fbfbfb;
@@ -1523,7 +1628,7 @@
   gap: 8px;
 }
 .studio-shades-input label {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 550;
   white-space: nowrap;
 }
@@ -1571,7 +1676,7 @@
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
-  padding: 10px;
+  padding: 8px;
   border: 1px solid #e3e3e3;
   border-radius: 8px;
   background: #fbfbfb;
@@ -1621,7 +1726,7 @@
   min-width: 0;
 }
 .studio-rounding-text strong {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 550;
 }
 .studio-rounding-text span {
@@ -1640,8 +1745,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: 0;
   background: none;
@@ -1653,7 +1758,7 @@
 }
 .studio-rounding-stepper output {
   min-width: 56px;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 550;
   text-align: center;
   font-variant-numeric: tabular-nums;
@@ -1702,7 +1807,7 @@
   outline: none;
   background: transparent;
   font: inherit;
-  font-size: 11px;
+  font-size: 10px;
   text-transform: uppercase;
 }
 .studio-alpha-opacity {
@@ -1721,7 +1826,7 @@
   outline: none;
   background: transparent;
   font: inherit;
-  font-size: 11px;
+  font-size: 10px;
   text-align: right;
 }
 .studio-alpha-opacity:focus-within,
@@ -1765,7 +1870,7 @@
   background: #fafafa;
   color: #393939;
   font:
-    600 11px "Inter Variable",
+    600 10px "Inter Variable",
     Inter,
     sans-serif;
 }
@@ -2090,6 +2195,123 @@
   gap: 8px;
 }
 
+/* Text styles: one table with a row per style under a shared header, divided like the token tables. */
+.studio-type-row {
+  display: grid;
+  grid-template-columns: minmax(56px, 0.7fr) repeat(3, minmax(0, 1fr));
+  margin: 0 calc(-1 * var(--studio-editor-pad));
+  border-bottom: 1px solid var(--studio-cell-line);
+}
+.studio-type-row > * {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 28px;
+}
+.studio-type-row > * + * {
+  border-left: 1px solid var(--studio-cell-line);
+}
+.studio-type-row > :first-child {
+  padding: 0 8px 0 var(--studio-editor-pad);
+}
+.studio-type-row:not(.studio-type-head):hover {
+  background: #fbfbfb;
+}
+.studio-type-head {
+  background: #f7f7f7;
+  border-top: 1px solid var(--studio-cell-line);
+  color: #707070;
+  font-weight: 550;
+}
+.studio-type-head > * {
+  min-height: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.studio-type-head > * + * {
+  padding-inline: 8px;
+}
+.studio-type-name {
+  gap: 4px;
+  color: #434343;
+  font-weight: 550;
+  text-transform: capitalize;
+  overflow-wrap: anywhere;
+}
+.studio-type-cell .studio-token {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  align-self: stretch;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+}
+.studio-type-cell .studio-token:focus-within {
+  box-shadow: inset 0 0 0 1px #8e8e8e;
+}
+/* Each input keeps its accessible name; the column header carries the visible label. */
+.studio-type-cell .studio-token > label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.studio-type-cell .studio-token-value {
+  display: flex;
+  flex: 1;
+  align-items: stretch;
+  gap: 0;
+  min-width: 0;
+}
+.studio-type-cell .studio-token-value input:not([type="color"]) {
+  width: 100%;
+  height: 100%;
+  min-height: 28px;
+  padding: 0 20px 0 8px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-variant-numeric: tabular-nums;
+}
+.studio-type-cell .studio-token-value input[aria-invalid="true"] {
+  background: #fdf1ef;
+}
+.studio-type-cell .studio-token-unit {
+  right: 4px;
+}
+.studio-type-cell .studio-size-presets {
+  align-self: stretch;
+  width: 16px;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+}
+.studio-type-cell .studio-token-value > button {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #8e8e8e;
+}
+/* Reset appears once a value differs from the theme, so unchanged rows spend their width on the values. */
+.studio-type-cell .studio-token-value > button:disabled {
+  display: none;
+}
+.studio-type-cell .studio-error {
+  flex-basis: 100%;
+  margin: 0;
+  padding: 4px 8px;
+}
+
 .studio-token-list-rows .studio-type-fields {
   padding: 12px var(--studio-editor-pad) 14px;
   border-bottom: 1px solid var(--studio-cell-line);
@@ -2136,7 +2358,7 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 14px;
+  padding: 8px 10px;
   border: 1px solid #e5e5e5;
   border-radius: 10px;
   background: #fff;
@@ -2163,7 +2385,7 @@
 .studio-font-role-text strong {
   overflow: hidden;
   color: #2f2f2f;
-  font-size: 13px;
+  font-size: 10px;
   font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2226,14 +2448,14 @@
 .studio-presets-intro {
   margin: 0 0 4px;
   color: #8e8e8e;
-  font-size: 11px;
+  font-size: 10px;
   line-height: 1.5;
 }
 .studio-preset {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 14px;
+  padding: 8px 10px;
   border: 1px solid #e5e5e5;
   border-radius: 10px;
   background: #fff;
@@ -2262,7 +2484,7 @@
 }
 .studio-preset-text strong {
   color: #2f2f2f;
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 600;
 }
 .studio-preset-text span {
@@ -2277,7 +2499,7 @@
   border-radius: 6px;
   background: #fff;
   color: #707070;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-preset button:disabled {
   cursor: default;
@@ -2383,10 +2605,14 @@
   gap: 8px;
 }
 
+/*
+ * The header drags the window, so the grip is only a keyboard control: hidden until it has focus, then shown left
+ * of the pop-out button, where arrow keys move the window.
+ */
 .studio-window-grip {
   position: absolute;
   top: 20px;
-  right: 18px;
+  right: 82px;
   z-index: 5;
   display: grid;
   place-items: center;
@@ -2398,6 +2624,13 @@
   flex-shrink: 0;
   border-radius: 5px;
 }
+.studio-window-grip:not(:focus-visible) {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
 .studio-overlay .studio-window-grip {
   cursor: grab;
 }
@@ -2480,10 +2713,6 @@
   }
 }
 
-/* The grip belongs to the window, so scrolling or hiding the preview cannot hide it. */
-.studio-preview-actions {
-  padding-right: 36px;
-}
 @container (max-width: 1050px) {
   .studio-window-grip {
     top: 18px;
@@ -2492,13 +2721,7 @@
 @container (max-width: 800px) {
   .studio-window-grip {
     top: 10px;
-    right: 12px;
-  }
-  .studio-topbar {
-    padding-right: 48px;
-  }
-  .studio-preview-actions {
-    padding-right: 0;
+    right: 76px;
   }
 }
 
@@ -2554,8 +2777,8 @@
   z-index: 5;
   display: grid;
   place-items: center;
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   border: 0;
   border-radius: 5px;
   color: #858585;
@@ -2565,6 +2788,7 @@
   outline: 2px solid #555;
   outline-offset: -2px;
 }
+/* Pop-out and minimize share the top-right corner (minimize outermost); the preview heading leaves them room. */
 .studio-preview-actions {
   padding-right: 68px;
 }
@@ -2594,31 +2818,15 @@
   border-radius: 0;
   box-shadow: none;
 }
-.studio-modal-popout .studio-window-popout {
-  right: 18px;
-}
-.studio-modal-popout .studio-preview-actions {
-  padding-right: 36px;
-}
-@container (max-width: 800px) {
-  .studio-modal-popout .studio-topbar {
-    padding-right: 48px;
-  }
-  .studio-modal-popout .studio-preview-actions {
-    padding-right: 0;
-  }
-}
 
 @container (max-width: 800px) {
   .studio-topbar,
   .studio-modal-popout .studio-topbar {
     padding-right: 16px;
   }
+  /* Leaves the window controls' corner free with the same 8px gap they keep between themselves. */
   .studio-topbar-controls {
-    margin-right: 64px;
-  }
-  .studio-modal-popout .studio-topbar-controls {
-    margin-right: 32px;
+    margin-right: 54px;
   }
 }
 .studio-palette-native {
@@ -2641,12 +2849,12 @@
 .studio-window-minimize {
   position: absolute;
   top: 20px;
-  right: 82px;
+  right: 18px;
   z-index: 5;
   display: grid;
   place-items: center;
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: 0;
   border-radius: 5px;
@@ -2657,15 +2865,6 @@
   outline: 2px solid #555;
   outline-offset: -2px;
 }
-.studio-preview-actions {
-  padding-right: 100px;
-}
-.studio-modal-popout .studio-window-minimize {
-  right: 50px;
-}
-.studio-modal-popout .studio-preview-actions {
-  padding-right: 68px;
-}
 @container (max-width: 1050px) {
   .studio-window-minimize {
     top: 18px;
@@ -2674,16 +2873,9 @@
 @container (max-width: 800px) {
   .studio-window-minimize {
     top: 10px;
-    right: 76px;
-  }
-  .studio-topbar-controls {
-    margin-right: 96px;
-  }
-  .studio-modal-popout .studio-topbar-controls {
-    margin-right: 64px;
+    right: 12px;
   }
-  .studio-preview-actions,
-  .studio-modal-popout .studio-preview-actions {
+  .studio-preview-actions {
     padding-right: 0;
   }
 }
@@ -2693,14 +2885,14 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 12px 16px;
+  padding: 6px 10px;
   border: 1px solid #555;
   border-radius: 999px;
   background: #292929;
   color: #fff;
   box-shadow: 0 4px 16px #0003;
   font:
-    600 13px/1.4 "Inter Variable",
+    600 10px/1.4 "Inter Variable",
     Inter,
     sans-serif;
   cursor: grab;
@@ -2807,7 +2999,7 @@
   background: #fff;
   color: #292730;
   font:
-    11px/1.5 "Inter Variable",
+    10px/1.5 "Inter Variable",
     Inter,
     sans-serif;
   overscroll-behavior: contain;
@@ -2819,13 +3011,13 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 9px 12px;
+  padding: 6px 12px;
   border-bottom: 1px solid #efedf3;
   background: #fff;
 }
 .studio-inspector-panel > header > strong {
   flex: 1;
-  font-size: 11px;
+  font-size: 10px;
 }
 .studio-inspector-panel button {
   border: 0;
@@ -2849,11 +3041,11 @@
 }
 .studio-inspector-panel section {
   border-top: 1px solid #efedf3;
-  padding: 10px 12px;
+  padding: 8px 12px;
 }
 .studio-inspector-panel h3 {
   margin: 0 0 7px;
-  font-size: 9px;
+  font-size: 10px;
   font-weight: 600;
   color: #928a9d;
   text-transform: uppercase;
@@ -2880,37 +3072,68 @@
 }
 .studio-inspector-panel dl > div {
   display: grid;
-  grid-template-columns: 85px minmax(0, 1fr);
-  gap: 6px;
-  padding: 3px 0;
+  grid-template-columns: 56px minmax(0, 1fr);
+  align-items: center;
+  gap: 4px;
+  padding: 1px 0;
 }
 .studio-inspector-panel dt {
   color: #817b8b;
 }
 .studio-inspector-panel dd {
   display: flex;
-  flex-wrap: wrap;
+  margin: 0;
+  min-width: 0;
+}
+/* A single-line chip: swatch, variable name (shortened first), then the value (shortened last). */
+.studio-inspector-panel .studio-inspector-chip {
+  display: flex;
   align-items: center;
   gap: 4px;
-  margin: 0;
+  width: 100%;
   min-width: 0;
-  overflow-wrap: anywhere;
+  height: 22px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 4px;
+  background: #f5f5f6;
+  color: #3e3c42;
+  font-size: 10px;
+  text-align: left;
+  white-space: nowrap;
+}
+.studio-inspector-panel button.studio-inspector-chip {
+  background: #f3effb;
+  color: #6a46a8;
 }
-.studio-inspector-panel dd > i {
+.studio-inspector-panel button.studio-inspector-chip:hover {
+  background: #ebe4f8;
+}
+.studio-inspector-chip > i {
   width: 12px;
   height: 12px;
   border: 1px solid #0002;
   border-radius: 3px;
   flex-shrink: 0;
 }
-.studio-inspector-panel dd > button {
-  max-width: 100%;
-  padding: 2px 5px;
-  background: #f3effb;
-  color: #7752ae;
-  font-size: 9px;
-  text-align: left;
-  overflow-wrap: anywhere;
+.studio-inspector-chip > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.studio-inspector-chip-name {
+  flex: 0 3 auto;
+}
+.studio-inspector-chip-value {
+  flex: 0 1 auto;
+  font-variant-numeric: tabular-nums;
+}
+/* Beside a variable the value never truncates; the variable name gives way, and its full name is in the tooltip. */
+.studio-inspector-chip-name + .studio-inspector-chip-value {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: 4px;
+  color: #8a8492;
 }
 .studio-inspector-empty {
   margin: 0;
@@ -2928,7 +3151,7 @@
   margin-top: 6px;
   text-align: center;
   color: #8b8b8b;
-  font-size: 9px;
+  font-size: 10px;
 }
 .studio-box-layer {
   position: relative;
@@ -2958,7 +3181,7 @@
   padding: 0 3px;
   background: #fafafa;
   color: #747474;
-  font-size: 9px;
+  font-size: 10px;
 }
 .studio-box-layer.is-padding > .studio-box-name {
   background: #e9e9e9;
@@ -3004,7 +3227,7 @@
   border-radius: 3px;
   background: #f5f5f5;
   color: #777;
-  font-size: 8px;
+  font-size: 10px;
   line-height: 1;
 }
 .studio-box-radius.is-topLeft {
@@ -3026,7 +3249,7 @@
 .studio-inspector-panel .studio-box-radius {
   padding: 1px;
   color: #777;
-  font-size: 8px;
+  font-size: 10px;
   line-height: 1;
 }
 .studio-inspector-panel button.studio-box-radius[data-token] {
@@ -3046,7 +3269,7 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 2px;
-  font-size: 9px;
+  font-size: 10px;
 }
 .studio-box-gaps {
   display: flex;
@@ -3247,7 +3470,7 @@
 .studio-inspector-panel .studio-box-dimension-value {
   padding: 0;
   font: inherit;
-  font-size: 9px;
+  font-size: 10px;
   line-height: 1.3;
   color: inherit;
 }
@@ -3278,3 +3501,35 @@
     0 16px 64px #17102030,
     0 0 0 1px #17102018;
 }
+
+/* Chrome icons follow the 10px type: 12px beside a label, 14px in icon-only controls. Specimens keep their own sizes. */
+.studio-overlay
+  svg.lucide:not(
+    :is(
+        .studio-inspector-canvas,
+        .studio-cva-stage,
+        .studio-context-preview,
+        .studio-layout-fullscreen-stage,
+        .studio-gallery-zoom-stage,
+        .studio-sample
+      )
+      *
+  ) {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.studio-overlay
+  :is(
+    .studio-window-grip,
+    .studio-window-minimize,
+    .studio-window-popout,
+    .studio-palette-reset,
+    .studio-token-value > button,
+    .studio-inspector-panel > header button,
+    .studio-floating-launcher
+  )
+  svg.lucide {
+  width: 14px;
+  height: 14px;
+}