@fluixi-ui/skin-soft 0.1.0-alpha.4 → 0.1.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/skin-soft",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "description": "Soft corporate skin for Fluixi UI — clean, gently elevated dashboard look; activate with data-ui=\"soft\"",
   "license": "MIT",
   "private": false,

package/soft.css

@@ -58,7 +58,7 @@
   }
 
   /* ---- Button: pill, flat by default, one accent, soft lift on primary ------ */
-  [data-ui='soft'] :where([data-variant]) {
+  [data-ui='soft'] :where([data-variant]:not([data-badge])) {
     border-radius: 9999px;
     height: 40px;
     padding: 0 18px;
@@ -73,37 +73,53 @@
   }
   /* Filled primary: rests on a soft shadow, lifts a touch on hover, settles on
      press. Depth comes from elevation, not a colour sheen. */
-  [data-ui='soft'] :where([data-variant='solid']) {
+  [data-ui='soft'] :where([data-variant='solid']:not([data-badge])) {
     box-shadow: var(--flx-ui-shadow-sm);
   }
-  [data-ui='soft'] :where([data-variant='solid']:hover:not([data-disabled])) {
+  [data-ui='soft'] :where([data-variant='solid']:not([data-badge]):hover:not([data-disabled])) {
     box-shadow: var(--flx-ui-shadow-md);
     transform: translateY(-1px);
   }
-  [data-ui='soft'] :where([data-variant='solid']:active:not([data-disabled])) {
+  [data-ui='soft'] :where([data-variant='solid']:not([data-badge]):active:not([data-disabled])) {
     box-shadow: var(--flx-ui-shadow-sm);
     transform: translateY(0);
   }
   /* Soft/outline/ghost stay flat; ghost is tighter. */
-  [data-ui='soft'] :where([data-variant='ghost']) {
+  [data-ui='soft'] :where([data-variant='ghost']:not([data-badge])) {
     padding: 0 12px;
   }
-  [data-ui='soft'] :where([data-variant]:focus-visible) {
+  [data-ui='soft'] :where([data-variant]:not([data-badge]):focus-visible) {
     outline: none;
     box-shadow: var(--flx-ui-ctl-ring);
   }
 
-  /* Badges also carry [data-variant] — keep them as chips, not buttons. */
-  [data-ui='soft'] :where(.flx-ui-badge[data-variant]) {
-    height: auto;
-    padding: 2px 10px;
-    box-shadow: none;
-    transform: none;
-    font-weight: 600;
+  /* Badges carry [data-variant] too, but every button rule above excludes
+     [data-badge], so a badge is never treated as a button — no guard needed. */
+
+  /* Icon button + FAB carry [data-variant], so re-assert their square / circular
+     geometry over the fixed-40px pill the button rule above imposes. */
+  [data-ui='soft'] :where([data-icon-button]) {
+    padding: 0;
+    width: var(--flx-ui-size-md);
+    height: var(--flx-ui-size-md);
   }
+  [data-ui='soft'] :where([data-icon-button][data-size='sm']) { width: var(--flx-ui-size-sm); height: var(--flx-ui-size-sm); }
+  [data-ui='soft'] :where([data-icon-button][data-size='lg']) { width: var(--flx-ui-size-lg); height: var(--flx-ui-size-lg); }
+  [data-ui='soft'] :where([data-fab]) {
+    width: 56px;
+    height: 56px;
+    padding: 0;
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='soft'] :where([data-fab][data-fab-size='sm']) { width: 40px; height: 40px; }
+  [data-ui='soft'] :where([data-fab][data-fab-size='lg']) { width: 64px; height: 64px; }
+  [data-ui='soft'] :where([data-fab][data-fab-extended]) { width: auto; height: 56px; padding: 0 20px; }
 
-  /* ---- Text fields: clean, comfortable, soft focus ------------------------- */
-  [data-ui='soft'] :where([data-input], button[role='combobox'], [data-combobox-control]) {
+  /* ---- Text fields: clean, comfortable, soft focus. Baseline only; the
+     outlined / filled variants are handled below. --------------------------- */
+  [data-ui='soft'] :where([data-input]:not([data-field-variant]),
+    button[role='combobox']:not([data-field-variant]),
+    [data-combobox-control]:not([data-field-variant])) {
     min-height: 40px;
     border-radius: var(--flx-ui-radius-md);
     border-color: var(--flx-ui-color-border);
@@ -112,17 +128,42 @@
       border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
       box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
   }
-  [data-ui='soft'] :where([data-input]:hover:not(:focus):not([data-invalid]),
-    button[role='combobox']:hover) {
+  [data-ui='soft'] :where([data-input]:not([data-field-variant]):hover:not(:focus):not([data-invalid]),
+    button[role='combobox']:not([data-field-variant]):hover) {
     border-color: var(--flx-ui-gray-7);
   }
-  [data-ui='soft'] :where([data-input]:focus-visible,
-    button[role='combobox']:focus-visible) {
+  [data-ui='soft'] :where([data-input]:not([data-field-variant]):focus-visible,
+    button[role='combobox']:not([data-field-variant]):focus-visible) {
     outline: none;
     border-color: var(--flx-ui-color-primary);
     box-shadow: var(--flx-ui-ctl-ring);
   }
 
+  /* Field variants — comfortable height + soft rounding, calm focus. */
+  [data-ui='soft'] :where([data-field-variant]) {
+    min-height: 40px;
+  }
+  [data-ui='soft'] :where([data-field-variant='outlined']) {
+    border-radius: var(--flx-ui-radius-md);
+    border-color: var(--flx-ui-color-border);
+  }
+  [data-ui='soft'] :where([data-field-variant='outlined']:focus, [data-field-variant='outlined']:focus-within) {
+    border-color: var(--flx-ui-color-primary);
+    box-shadow: var(--flx-ui-ctl-ring);
+  }
+  /* Filled: tinted fill, only a bottom rule (kill the side/top borders soft's
+     baseline would otherwise draw). */
+  [data-ui='soft'] :where([data-field-variant='filled']) {
+    border: var(--flx-ui-border-width-thin) solid transparent;
+    border-bottom-color: var(--flx-ui-color-border-strong);
+    border-radius: var(--flx-ui-radius-md) var(--flx-ui-radius-md) 0 0;
+  }
+  [data-ui='soft'] :where([data-field-variant='filled']:focus, [data-field-variant='filled']:focus-within) {
+    border-bottom-color: var(--flx-ui-color-primary);
+    border-bottom-width: 2px;
+    box-shadow: none;
+  }
+
   /* ---- Selection controls: rounder box, calm focus ------------------------- */
   [data-ui='soft'] :where([role='checkbox']) {
     border-radius: 6px;
@@ -217,4 +258,36 @@
     color: var(--flx-ui-color-fg);
     box-shadow: var(--flx-ui-shadow-sm);
   }
+
+  /* ---- Table: soft elevated surface — gentle shadow, rounded frame, airy
+     density, faint dividers, rounded-feeling selection --------------------- */
+  [data-ui='soft'] :where([data-table]) {
+    border: var(--flx-ui-border-width-thin) solid
+      color-mix(in oklab, var(--flx-ui-color-border) 60%, transparent);
+    border-radius: var(--flx-ui-radius-lg);
+    box-shadow: var(--flx-ui-shadow-sm);
+    overflow: hidden;
+  }
+  [data-ui='soft'] :where([data-table-head]) {
+    background: var(--flx-ui-color-bg-subtle);
+    padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
+  }
+  [data-ui='soft'] :where([data-table-cell]) {
+    padding: var(--flx-ui-space-3) var(--flx-ui-space-4);
+  }
+  [data-ui='soft'] :where([data-table-body] > [data-table-row]) {
+    border-top-color: color-mix(in oklab, var(--flx-ui-color-border) 55%, transparent);
+  }
+  [data-ui='soft'] :where([data-table-body] > [data-table-row]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-fg) 3%, transparent);
+  }
+  [data-ui='soft'] :where([data-table-row][data-selected]),
+  [data-ui='soft'] :where([data-table-row][data-selected]:hover) {
+    background: var(--flx-ui-color-primary-subtle);
+  }
+  /* Compact density under Soft. */
+  [data-ui='soft'] :where([data-table][data-density='compact'] [data-table-head]),
+  [data-ui='soft'] :where([data-table][data-density='compact'] [data-table-cell]) {
+    padding: var(--flx-ui-space-1) var(--flx-ui-space-2);
+  }
 }