@ecopages/radiant-themes 0.2.2 → 0.2.3

package/README.md

@@ -62,7 +62,7 @@ default `#6666cc` accent. Menus and the menu bar highlight items in that accent,
 wells with bevelled column headers, tooltips are outlined help balloons, and disclosures use the Platinum triangle. Both
 dark modes keep the same bevel structure on darker faces and fields, since neither system shipped one. macOS follows Sonoma AppKit:
 the SF Pro system font at 13px, 6px push buttons outlined by a hairline shadow, accent-filled default buttons, check
-boxes, and radio buttons, pop-up buttons with an accent arrow well, segmented tabs centered above a group box, white
+boxes, and radio buttons, pop-up buttons with an accent arrow well, segmented tabs centered on a group box's top edge, white
 slider knobs, translucent menus and popovers, and accent row selection with white text. Destructive buttons use red
 text, as AppKit alerts do. Windows 95 also provides a full-size dithered scrollbar with raised arrow buttons and a bevelled thumb;
 Mac OS Classic provides Platinum's grey bevelled track, end-positioned arrow buttons, and striped blue scroll box.

package/dist/compiled/themes/macos/compact.css

@@ -886,7 +886,7 @@
     font-weight: var(--font-weight-semibold);
     color: var(--color-on-surface);
   }
-  :root .rui-tabs__list {
+  :root rui-tabs[variant] .rui-tabs__list {
     width: fit-content;
     max-width: 100%;
     gap: 0px;
@@ -899,7 +899,7 @@
       background-color: color-mix(in srgb, var(--macos-text) 7%, transparent);
     }
   }
-  :root .rui-tabs__tab {
+  :root rui-tabs[variant] .rui-tabs__tab {
     border-radius: var(--radius-control);
     border-style: var(--tw-border-style);
     border-width: 0px;
@@ -909,15 +909,16 @@
     padding-block: 0.125rem;
     padding-inline: 0.75rem;
     font-size: var(--text-control);
+    line-height: 1rem;
   }
-  :root .rui-tabs__tab[aria-selected='true'] {
+  :root rui-tabs[variant] .rui-tabs__tab[aria-selected='true'] {
     --tw-font-weight: var(--font-weight-normal, 400);
     font-weight: var(--font-weight-normal, 400);
     background-color: var(--macos-control);
     color: var(--macos-text);
     box-shadow: var(--macos-control-shadow);
   }
-  :root .rui-tabs__tab:focus-visible {
+  :root rui-tabs[variant] .rui-tabs__tab:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--color-focus-ring);
@@ -940,8 +941,11 @@
     position: relative;
     z-index: 10;
     margin-inline: auto;
-    margin-bottom: 0.5rem;
-    padding-block: 0.125rem;
+    margin-bottom: -0.75rem;
+    box-shadow: inset 0 0 0 1px var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--macos-text) 12%, transparent);
+    }
   }
   :root.dark rui-tabs[variant='boxed'] .rui-tabs__list {
     background-color: #2a2a2a;
@@ -967,6 +971,7 @@
       background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
     }
     padding: var(--rui-tabs-panel-padding);
+    padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
   }
   :root .rui-alert,
 	:root .rui-toast {

package/dist/compiled/themes/macos.css

@@ -886,7 +886,7 @@
     font-weight: var(--font-weight-semibold);
     color: var(--color-on-surface);
   }
-  :root .rui-tabs__list {
+  :root rui-tabs[variant] .rui-tabs__list {
     width: fit-content;
     max-width: 100%;
     gap: 0px;
@@ -899,7 +899,7 @@
       background-color: color-mix(in srgb, var(--macos-text) 7%, transparent);
     }
   }
-  :root .rui-tabs__tab {
+  :root rui-tabs[variant] .rui-tabs__tab {
     border-radius: var(--radius-control);
     border-style: var(--tw-border-style);
     border-width: 0px;
@@ -909,15 +909,16 @@
     padding-block: 0.125rem;
     padding-inline: 0.75rem;
     font-size: var(--text-control);
+    line-height: 1rem;
   }
-  :root .rui-tabs__tab[aria-selected='true'] {
+  :root rui-tabs[variant] .rui-tabs__tab[aria-selected='true'] {
     --tw-font-weight: var(--font-weight-normal, 400);
     font-weight: var(--font-weight-normal, 400);
     background-color: var(--macos-control);
     color: var(--macos-text);
     box-shadow: var(--macos-control-shadow);
   }
-  :root .rui-tabs__tab:focus-visible {
+  :root rui-tabs[variant] .rui-tabs__tab:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --tw-ring-color: var(--color-focus-ring);
@@ -940,8 +941,11 @@
     position: relative;
     z-index: 10;
     margin-inline: auto;
-    margin-bottom: 0.5rem;
-    padding-block: 0.125rem;
+    margin-bottom: -0.75rem;
+    box-shadow: inset 0 0 0 1px var(--macos-text);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--macos-text) 12%, transparent);
+    }
   }
   :root.dark rui-tabs[variant='boxed'] .rui-tabs__list {
     background-color: #2a2a2a;
@@ -967,6 +971,7 @@
       background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
     }
     padding: var(--rui-tabs-panel-padding);
+    padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
   }
   :root .rui-alert,
 	:root .rui-toast {

package/dist/tokens/components/macos.css

@@ -453,31 +453,35 @@
 	}
 
 	/**
-	 * Tabs are a segmented control: a recessed track with the selected segment raised as a push-button face. Boxed tabs
-	 * center that control above the group box, as `NSTabView` does, but clear of its edge so it never clips content.
+	 * Tabs are a 24px segmented control: a recessed track with the selected segment raised as a push-button face. Boxed
+	 * tabs center that control on the group box's top edge, as `NSTabView` does, and pad the panel by the overlap.
+	 *
+	 * @remarks Selectors carry `rui-tabs[variant]` to outrank the catalog's per-variant padding, font size, and list
+	 * border; the element always reflects its variant.
 	 */
-	:root .rui-tabs__list {
+	:root rui-tabs[variant] .rui-tabs__list {
 		@apply w-fit max-w-full gap-0 border-0 p-0.5;
 		border-radius: calc(var(--radius-control) + 1px);
 		background-color: color-mix(in srgb, var(--macos-text) 7%, transparent);
 	}
 
-	:root .rui-tabs__tab {
+	:root rui-tabs[variant] .rui-tabs__tab {
 		@apply rounded-control border-0 font-normal;
 		color: var(--macos-text);
 		padding-block: 0.125rem;
 		padding-inline: 0.75rem;
 		font-size: var(--text-control);
+		line-height: 1rem;
 	}
 
-	:root .rui-tabs__tab[aria-selected='true'] {
+	:root rui-tabs[variant] .rui-tabs__tab[aria-selected='true'] {
 		@apply font-normal;
 		background-color: var(--macos-control);
 		color: var(--macos-text);
 		box-shadow: var(--macos-control-shadow);
 	}
 
-	:root .rui-tabs__tab:focus-visible {
+	:root rui-tabs[variant] .rui-tabs__tab:focus-visible {
 		@apply ring-[3px] ring-focus-ring/60 ring-offset-0;
 	}
 
@@ -487,8 +491,8 @@
 
 	:root rui-tabs[variant='boxed'] .rui-tabs__list {
 		@apply relative z-10 mx-auto;
-		margin-bottom: 0.5rem;
-		padding-block: 0.125rem;
+		margin-bottom: -0.75rem;
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--macos-text) 12%, transparent);
 	}
 
 	:root.dark rui-tabs[variant='boxed'] .rui-tabs__list {
@@ -511,6 +515,7 @@
 		border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
 		background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
 		padding: var(--rui-tabs-panel-padding);
+		padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
 	}
 
 	:root .rui-alert,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/radiant-themes",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Composable color themes and variants for @ecopages/radiant-ui",
   "repository": {
     "type": "git",
@@ -19,14 +19,14 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@ecopages/radiant-ui": ">=0.2.2"
+    "@ecopages/radiant-ui": ">=0.2.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",
     "playwright": "^1.62.1",
     "postcss": "^8.5.24",
     "tailwindcss": "^4.3.0",
-    "@ecopages/radiant-ui": "0.2.2"
+    "@ecopages/radiant-ui": "0.2.3"
   },
   "exports": {
     "./package.json": "./package.json",