@plexui/styles 0.1.0 → 0.1.2

package/dist/es/components/Checkbox/Checkbox.module.css

@@ -157,8 +157,8 @@ background-color: var(--gray-800);
     }
 
   /* Ghost variant — checkmark uses text color instead of white */
-    [data-variant="ghost"] .CheckMark::before,
-    [data-variant="ghost"] .CheckMark::after {
+    .Checkbox[data-variant="ghost"] .CheckMark::before,
+    .Checkbox[data-variant="ghost"] .CheckMark::after {
       background: var(--gray-900);
     }
 

package/dist/es/components/Dialog/Dialog.module.css

@@ -33,7 +33,8 @@
   --dialog-panel-width: var(--dialog-width, 480px);
   --dialog-panel-height: auto;
   --dialog-panel-max-height: calc(100dvh - 2rem);
-  --dialog-panel-radius: var(--radius-xl);
+  --dialog-panel-corner: var(--radius-xl);
+  --dialog-panel-radius: var(--dialog-panel-corner);
   --dialog-panel-padding-bottom: 1.25rem;
   --dialog-panel-hidden-transform: scale(0.95) translateY(8px);
 
@@ -52,7 +53,9 @@
 
   .Content:focus {
     outline: none;
-  }.Panel {
+  }.Content[data-pill] {
+  --dialog-panel-corner: var(--dialog-radius-pill, 24px);
+}.Panel {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -107,7 +110,7 @@
   --dialog-content-align: flex-end;
   --dialog-content-padding: 0;
   --dialog-panel-width: 100%;
-  --dialog-panel-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  --dialog-panel-radius: var(--dialog-panel-corner) var(--dialog-panel-corner) 0 0;
   --dialog-panel-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
   --dialog-panel-hidden-transform: translateY(100%);
 }.Content:where([data-placement="start"], [data-placement="end"]) {
@@ -143,7 +146,7 @@
     --dialog-panel-width: var(--dialog-width, 480px);
     --dialog-panel-height: auto;
     --dialog-panel-max-height: calc(100dvh - 2rem);
-    --dialog-panel-radius: var(--radius-xl);
+    --dialog-panel-radius: var(--dialog-panel-corner);
     --dialog-panel-padding-bottom: 1.25rem;
     --dialog-panel-hidden-transform: scale(0.95) translateY(8px);
   }
@@ -155,7 +158,7 @@
     --dialog-panel-width: 100%;
     --dialog-panel-height: auto;
     --dialog-panel-max-height: calc(100dvh - 2rem);
-    --dialog-panel-radius: var(--radius-xl) var(--radius-xl) 0 0;
+    --dialog-panel-radius: var(--dialog-panel-corner) var(--dialog-panel-corner) 0 0;
     --dialog-panel-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
     --dialog-panel-hidden-transform: translateY(100%);
   }
@@ -196,7 +199,9 @@
   .CloseButton:focus-visible {
     outline: 2px solid var(--color-text);
     outline-offset: 2px;
-  }.CloseIcon {
+  }.Content[data-pill] .CloseButton {
+  border-radius: var(--radius-full);
+}.CloseIcon {
   display: block;
 }.Header {
   display: flex;

package/dist/es/components/Menu/Menu.module.css

@@ -1,5 +1,7 @@
 @layer components {.Menu {
   /* Top-level selector needs to exist */
+}.MenuList[data-pill] {
+  --menu-radius: var(--menu-radius-pill, 22px);
 }.MenuList {
   z-index: 50;
   overflow: auto;
@@ -93,7 +95,7 @@
     position: absolute;
     inset: 0;
     display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
     background: var(--menu-item-background-color);
     content: "";
     opacity: 0;
@@ -168,12 +170,12 @@
   margin: var(--menu-separator-gutter);
   background: var(--menu-separator-background-color);
 }.MenuLabel {
-  padding: var(--menu-item-padding);
-  padding-bottom: calc(var(--spacing) * 0.5);
+  padding: var(--menu-label-padding, var(--menu-item-padding));
+  padding-bottom: var(--menu-label-padding-bottom, calc(var(--spacing) * 0.5));
   color: var(--color-text-tertiary);
-  font-size: var(--font-text-xs-size);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-text-xs-line-height);
+  font-size: var(--menu-label-font-size, var(--font-text-xs-size));
+  font-weight: var(--menu-label-font-weight, var(--font-weight-semibold));
+  line-height: var(--menu-label-line-height, var(--font-text-xs-line-height));
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;

package/dist/es/components/Select/Select.module.css

@@ -2,6 +2,8 @@
   Custom Select
 ============================================= */.Menu {
   /* Top-level selector needs to exist */
+}.MenuList[data-pill] {
+  --menu-radius: var(--menu-radius-pill, 22px);
 }.MenuList {
   z-index: 50;
   /* Default to the width of the trigger */
@@ -84,7 +86,7 @@
     position: absolute;
     inset: 0;
     display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
     background: var(--menu-item-background-color);
     content: "";
     opacity: 0;
@@ -211,7 +213,7 @@
 ============================================= */.Action {
   position: relative;
   padding: var(--menu-item-padding);
-  border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+  border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
   cursor: pointer;
   transition: background-color 0.15s ease;
 }
@@ -221,7 +223,7 @@
     position: absolute;
     inset: 0;
     display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
     content: "";
     opacity: 0;
     transform: scale(var(--scale, 0.98));
@@ -242,7 +244,7 @@ background: var(--gray-25);
     position: absolute;
     inset: 0;
     display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
     content: "";
     pointer-events: none;
     transition-duration: 0.15s;

package/dist/es/components/Sidebar/Sidebar.module.css

@@ -328,14 +328,14 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 8px 12px;
+  padding: var(--sidebar-menu-sub-item-padding-y, 8px) 12px;
   margin: var(--sidebar-menu-item-margin);
   border: none;
   border-radius: 0;
   background: transparent;
   color: var(--sidebar-menu-text);
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--sidebar-menu-sub-item-font-size, 14px);
+  line-height: var(--sidebar-menu-sub-item-line-height, 20px);
   text-decoration: none;
   cursor: pointer;
   -webkit-user-select: none;

package/dist/es/components/Slider/Slider.module.css

@@ -8,6 +8,14 @@
         opacity 250ms ease;
       visibility: visible;
     }
+  }
+
+  /* Without hover the reset could never appear */
+  @media (hover: none) {
+    .SliderWrap .Reset[data-hide="false"] {
+      opacity: 1;
+      visibility: visible;
+    }
   }.Slider {
   position: relative;
   display: flex;

package/dist/es/styles/touch.css

@@ -0,0 +1,88 @@
+/*
+ * Optional touch sizes for phones, from Apple's iOS and iPadOS 26 design
+ * resources. Below 768px every control takes one height, 44px, with text at
+ * 17px; menus and the mobile sidebar follow the iOS measures. Nothing changes
+ * unless this file is imported, after the main stylesheet:
+ *
+ *   @import "@plexui/styles/styles/touch.css";
+ *
+ * Tokens only, so a size prop still picks the same token as on desktop. `3xl`
+ * stays large at 50px for the main action of a sign-in or checkout screen.
+ */
+@media (max-width: 767px) {
+  html:root {
+    --control-size-sm: 44px;
+    --control-size-md: 44px;
+    --control-size-lg: 44px;
+    --control-size-xl: 44px;
+    --control-size-3xl: 50px;
+    --control-gutter-sm: 14px;
+    --control-gutter-md: 14px;
+    --control-gutter-lg: 14px;
+    --control-gutter-xl: 20px;
+    --control-gutter-pill-scaling: 1;
+    --control-font-size-md: 17px;
+    --control-font-size-lg: 17px;
+    --button-gap-lg: 4px;
+
+    --segmented-control-gutter: 4px;
+
+    --menu-gutter: 10px;
+    --menu-radius: 32px;
+    --menu-radius-pill: 32px;
+    --menu-font-size: 17px;
+    --menu-line-height: 20px;
+    --menu-item-padding: 10px 14px 10px 12px;
+    --menu-item-gap: 6px;
+    --menu-separator-gutter: 10px 14px;
+    --menu-checkbox-indicator-size: 24px;
+    --menu-label-padding: 4px 14px 10px;
+    --menu-label-padding-bottom: 10px;
+    --menu-label-font-size: 13px;
+    --menu-label-font-weight: var(--font-weight-medium);
+    --menu-label-line-height: 15px;
+
+    --sidebar-menu-item-height: 44px;
+    --sidebar-menu-item-font-size: 17px;
+    --sidebar-menu-item-line-height: 22px;
+    --sidebar-menu-item-margin: 0;
+    --sidebar-menu-sub-item-padding-y: 11px;
+    --sidebar-menu-sub-item-font-size: 17px;
+    --sidebar-menu-sub-item-line-height: 22px;
+    --sidebar-icon-size: 20px;
+
+    --table-cell-font-size: 15px;
+    --table-cell-line-height: 20px;
+
+    --switch-track-width: 64px;
+    --switch-track-height: 28px;
+    --switch-thumb-offset: 2px;
+  }
+
+  html [data-mobile-placement="bottom"] {
+    --dialog-panel-radius: 38px 38px 0 0;
+    --dialog-panel-max-height: calc(100dvh - 10px);
+  }
+
+  html [data-mobile-placement="center"] {
+    --dialog-panel-width: 300px;
+    --dialog-panel-radius: 34px;
+  }
+
+  html [role="radiogroup"] {
+    --segmented-control-font-size: 15px;
+  }
+
+  html [data-slot="input"] {
+    --input-font-size: 17px;
+    --input-gutter: 14px;
+  }
+
+  html [data-slot="input"][data-has-start-adornment] {
+    --input-gutter: 11px;
+  }
+
+  html [role="menu"] {
+    --menu-min-width: 238px !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/styles",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Framework-agnostic CSS for Plex UI: design tokens, globals and component styles",
   "type": "module",
   "license": "MIT",