@amulet-laboratories/hex 0.3.0 → 0.5.0

package/src/shared/components/lists.css

@@ -1,13 +1,10 @@
-/* Hex — Shared Lists Components
- * Theme styles for Rig's lists package: List, TreeView, Table, DataGrid.
+/* Hex — Shared Lists Components (skin only)
+ * Colors, backgrounds, borders (colors), shadows, font-family, transitions.
+ * Structural layout lives in Rig/src/styles/lists.css.
  */
 
 /* ───────── Table ───────── */
 
-[data-rig-table] {
-  font-size: 13px;
-}
-
 [data-rig-table-head] {
   background: var(--color-background);
 }
@@ -15,9 +12,6 @@
 [data-rig-table-header] {
   color: var(--rig-description-fg);
   font-family: var(--font-mono);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   transition: color 0.15s ease;
 }
 
@@ -26,7 +20,7 @@
 }
 
 [data-rig-table-body] [data-rig-table-row] {
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--color-border) 50%, transparent);
   transition: background-color 0.15s ease;
 }
 
@@ -34,31 +28,14 @@
   background: var(--rig-list-hover-bg);
 }
 
-[data-rig-table-cell] {
-  font-size: 13px;
-}
-
 [data-rig-table-empty] {
   color: var(--rig-description-fg);
-  font-size: 13px;
 }
 
 /* ───────── List ───────── */
 
-[data-rig-list] {
-  font-size: 13px;
-}
-
 [data-rig-list-item] {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 2px 8px;
-  min-height: 22px;
-  font-size: 13px;
   color: var(--color-foreground);
-  cursor: default;
-  text-align: left;
   transition: background-color 0.15s ease;
 }
 
@@ -77,8 +54,7 @@
 }
 
 [data-rig-list-item]:focus {
-  outline: 1px solid var(--color-ring);
-  outline-offset: -1px;
+  outline-color: var(--color-ring);
 }
 
 [data-rig-list-item][data-selected]:focus-within {
@@ -88,37 +64,18 @@
 
 [data-rig-list-item][data-disabled] {
   opacity: 0.4;
-  pointer-events: none;
 }
 
 [data-rig-list-item-label] {
   color: var(--color-foreground);
-  font-size: 13px;
 }
 
 [data-rig-list-item-description] {
   color: var(--rig-description-fg);
-  font-size: 12px;
 }
 
 /* ───────── Tree ───────── */
 
-[data-rig-tree] {
-  font-size: 13px;
-  outline: none;
-}
-
-[data-rig-tree-node] {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  height: 22px;
-  padding: 0 8px;
-  min-width: 100%;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
 [data-rig-tree-node]:hover {
   background: var(--rig-list-hover-bg);
 }
@@ -130,7 +87,6 @@
 [data-rig-tree-node]:focus {
   background: var(--rig-list-active-bg);
   color: var(--rig-list-active-fg);
-  outline: none;
 }
 
 [data-rig-tree-node][data-selected]:focus-within {
@@ -142,18 +98,9 @@
   opacity: 0.6;
 }
 
-/* Indent container */
-[data-rig-tree-indent] {
-  display: inline-flex;
-  align-items: stretch;
-}
-
 /* Indent guides — always visible at low opacity, brighter on hover/focus */
 [data-rig-tree-indent-guide] {
-  width: 8px;
-  flex-shrink: 0;
-  border-left: 1px solid var(--color-border);
-  align-self: stretch;
+  border-left-color: var(--color-border);
   opacity: 0.4;
 }
 
@@ -165,69 +112,27 @@
 
 /* Toggle chevron */
 [data-rig-tree-toggle] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
   color: var(--rig-description-fg);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-}
-
-/* Leaf spacer — maintains alignment when no toggle */
-[data-rig-tree-node][data-leaf] {
-  padding-left: calc(8px + 16px);
-}
-
-/* Node icon */
-[data-rig-tree-node-icon] {
-  flex-shrink: 0;
-  margin-right: 2px;
-}
-
-[data-rig-tree-toggle]::before {
-  content: '';
-  display: block;
-  width: 6px;
-  height: 8px;
-  background: currentColor;
-  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
-  transition: transform 0.15s ease;
-}
-
-[data-rig-tree-toggle][data-state='open']::before {
-  transform: rotate(90deg);
 }
 
 [data-rig-tree-node-label] {
   color: var(--color-foreground);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 /* ───────── DataGrid ───────── */
 
 [data-rig-data-grid] {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
-  font-size: 13px;
+  border-color: var(--color-border);
 }
 
 [data-rig-data-grid-header] {
   background: var(--color-card);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-data-grid-header-cell] {
   color: var(--rig-description-fg);
-  font-size: 12px;
-  font-weight: 500;
-  border-right: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-right-color: color-mix(in srgb, var(--color-border) 50%, transparent);
 }
 
 [data-rig-data-grid-header-cell][data-sortable]:hover {
@@ -236,7 +141,6 @@
 }
 
 [data-rig-data-grid-header-cell]:focus-visible {
-  outline: none;
   box-shadow: inset 0 0 0 1px var(--color-ring);
 }
 
@@ -244,12 +148,8 @@
   color: var(--rig-description-fg);
 }
 
-[data-rig-data-grid-body] {
-  display: contents;
-}
-
 [data-rig-data-grid-row] {
-  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-bottom-color: color-mix(in srgb, var(--color-border) 50%, transparent);
   transition: background-color 0.15s ease;
 }
 
@@ -258,7 +158,6 @@
 }
 
 [data-rig-data-grid-row]:focus-visible {
-  outline: none;
   box-shadow: inset 0 0 0 1px var(--color-ring);
 }
 
@@ -268,11 +167,9 @@
 
 [data-rig-data-grid-cell] {
   color: var(--color-foreground);
-  border-right: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent);
+  border-right-color: color-mix(in srgb, var(--color-border) 30%, transparent);
 }
 
 [data-rig-data-grid-empty] {
   color: var(--rig-description-fg);
-  text-align: center;
-  padding: 24px 0;
 }

package/src/shared/components/menus.css

@@ -1,47 +1,30 @@
-/* Hex — Shared Menus Components
- * Theme styles for Rig's menus package: CommandPalette, ContextMenu,
- * ActionBar, KeyboardHint, DropdownMenu, Menubar.
+/* Hex — Shared Menus Components (skin only)
+ * Colors, backgrounds, borders (colors), shadows, font-family, transitions.
+ * Structural layout lives in Rig/src/styles/menus.css.
  */
 
 /* ───────── Command Palette ───────── */
 
 [data-rig-command-palette-overlay] {
-  position: fixed;
-  inset: 0;
-  z-index: var(--rig-command-palette-z, 9999);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 20vh;
   background: rgb(0 0 0 / 50%);
 }
 
 [data-rig-command-palette] {
   background: var(--vsc-quickinput-bg);
-  border: 1px solid var(--vsc-widget-border);
+  border-color: var(--vsc-widget-border);
   box-shadow: 0 8px 30px rgb(0 0 0 / 50%);
-  border-radius: 8px;
-  overflow: hidden;
-  max-width: 600px;
 }
 
 [data-rig-command-palette-input] {
   background: var(--vsc-input-bg);
   color: var(--color-foreground);
-  border-bottom: 1px solid var(--color-border);
-  font-size: 13px;
-  outline: none;
+  border-bottom-color: var(--color-border);
 }
 
 [data-rig-command-palette-input]::placeholder {
   color: var(--vsc-input-placeholder);
 }
 
-[data-rig-command-palette-results] {
-  overflow-y: auto;
-  max-height: 300px;
-}
-
 [data-rig-command-palette-item] {
   transition: background-color 0.1s ease;
 }
@@ -57,54 +40,31 @@
 
 [data-rig-command-palette-item][data-disabled] {
   opacity: 0.4;
-  pointer-events: none;
 }
 
 [data-rig-command-palette-item-label] {
   color: var(--color-foreground);
-  font-size: 13px;
 }
 
 [data-rig-command-palette-item-description] {
   color: var(--vsc-description-fg);
-  font-size: 12px;
   font-family: var(--font-mono);
 }
 
 [data-rig-command-palette-empty] {
   color: var(--vsc-description-fg);
-  font-size: 13px;
 }
 
 /* ───────── Context Menu ───────── */
 
 [data-rig-context-menu] {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0;
   background: var(--vsc-menu-bg);
-  border: 1px solid var(--vsc-widget-border);
+  border-color: var(--vsc-widget-border);
   box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
-  border-radius: 5px;
-  overflow: hidden;
-  min-width: 220px;
 }
 
 [data-rig-context-menu-item] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  width: 100%;
-  height: 26px;
-  padding: 0 12px;
-  border: none;
-  background: none;
   color: var(--color-foreground);
-  font-size: 13px;
-  white-space: nowrap;
-  cursor: default;
-  text-align: left;
   transition: background-color 0.1s ease;
 }
 
@@ -124,40 +84,21 @@
 
 [data-rig-context-menu-label] {
   color: var(--color-foreground);
-  font-size: 13px;
 }
 
 [data-rig-context-menu-separator] {
-  height: 1px;
-  border: none;
-  margin: 4px 0;
   background: var(--color-border);
-  pointer-events: none;
 }
 
 [data-rig-context-menu-keybinding] {
   color: var(--vsc-description-fg);
   font-family: var(--font-mono);
-  font-size: 12px;
 }
 
 /* ───────── Menubar ───────── */
 
-[data-rig-menubar] {
-  display: flex;
-  align-items: center;
-}
-
-[data-rig-menubar-entry] {
-  position: relative;
-  user-select: none;
-}
-
 [data-rig-menubar-trigger] {
   color: var(--color-foreground);
-  font-size: 13px;
-  border-radius: 5px;
-  padding: 2px 8px;
   transition: background-color 0.15s ease;
 }
 
@@ -171,20 +112,10 @@
 }
 
 [data-rig-menubar-content] {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  min-width: 220px;
-  padding: 4px 0;
   background: var(--vsc-menu-bg);
-  border: 1px solid var(--vsc-widget-border);
-  border-radius: 5px;
+  border-color: var(--vsc-widget-border);
   box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
   animation: menubar-in 0.1s ease;
-  overflow: hidden;
 }
 
 @keyframes menubar-in {
@@ -199,28 +130,11 @@
 }
 
 [data-rig-menubar-separator] {
-  height: 1px;
-  border: none;
-  margin: 4px 0;
   background: var(--color-border);
-  pointer-events: none;
 }
 
 [data-rig-menubar-item] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  width: 100%;
-  height: 26px;
-  padding: 0 12px;
-  border: none;
-  background: none;
   color: var(--color-foreground);
-  font-size: 13px;
-  white-space: nowrap;
-  cursor: default;
-  text-align: left;
   transition: background-color 0.1s ease;
 }
 
@@ -240,54 +154,24 @@
 
 [data-rig-menubar-item-label] {
   color: var(--color-foreground);
-  font-size: 13px;
 }
 
 [data-rig-menubar-item-keybinding] {
   color: var(--vsc-description-fg);
   font-family: var(--font-mono);
-  font-size: 12px;
 }
 
 /* ───────── DropdownMenu ───────── */
 
-[data-rig-dropdown] {
-  position: relative;
-  display: inline-flex;
-}
-
-[data-rig-dropdown-trigger] {
-  cursor: pointer;
-}
-
 [data-rig-dropdown-menu] {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0;
-  min-width: 220px;
   background: var(--vsc-menu-bg);
-  border: 1px solid var(--vsc-widget-border);
-  border-radius: 5px;
+  border-color: var(--vsc-widget-border);
   box-shadow: 0 8px 24px rgb(0 0 0 / 50%);
   animation: menubar-in 0.1s ease;
-  overflow: hidden;
 }
 
 [data-rig-dropdown-item] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  width: 100%;
-  height: 26px;
-  padding: 0 12px;
-  border: none;
-  background: none;
   color: var(--color-foreground);
-  font-size: 13px;
-  white-space: nowrap;
-  cursor: default;
-  text-align: left;
   transition: background-color 0.1s ease;
 }
 
@@ -307,26 +191,17 @@
 
 [data-rig-dropdown-item-label] {
   color: var(--color-foreground);
-  font-size: 13px;
 }
 
 [data-rig-dropdown-item-keybinding] {
   color: var(--vsc-description-fg);
   font-family: var(--font-mono);
-  font-size: 12px;
 }
 
 /* ───────── ActionBar ───────── */
 
-[data-rig-action-bar] {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
 [data-rig-action-bar-item] {
   color: var(--vsc-description-fg);
-  border-radius: 5px;
   transition:
     color 0.15s ease,
     background-color 0.15s ease;
@@ -338,8 +213,7 @@
 }
 
 [data-rig-action-bar-item]:focus-visible {
-  outline: 1px solid var(--color-ring);
-  outline-offset: -1px;
+  outline-color: var(--color-ring);
 }
 
 [data-rig-action-bar-item][data-disabled] {
@@ -348,7 +222,6 @@
 
 [data-rig-action-bar-overflow] {
   color: var(--vsc-description-fg);
-  border-radius: 5px;
   transition:
     color 0.15s ease,
     background-color 0.15s ease;
@@ -361,17 +234,8 @@
 
 /* ───────── Keyboard Hint ───────── */
 
-[data-rig-keyboard-hint] {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
 [data-rig-keyboard-hint-key] {
   color: var(--vsc-keybinding-fg);
   font-family: var(--font-mono);
-  font-size: 11px;
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
-  padding: 2px 4px;
+  border-color: var(--color-border);
 }