@fluixi-ui/skin-soft 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluixi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @fluixi-ui/skin-soft
+
+A soft, corporate dashboard skin for Fluixi UI. Restyles the components to a
+clean "Soft Elevated" look — generous consistent rounding, gentle two-layer
+elevation used with intent, a single restrained accent, comfortable density, and
+system typography. No gradients, no glass, no decorative shadow.
+
+It touches only shape, elevation, density and motion, so colour stays
+theme-driven: `data-theme` (light/dark/high-contrast) and `data-accent` keep
+working unchanged.
+
+## Usage
+
+Import the stylesheet after the tokens + preset, then activate with
+`data-ui="soft"` on a root (or any subtree):
+
+```ts
+import '@fluixi-ui/tokens/preset.css';
+import '@fluixi-ui/skin-soft/styles.css';
+
+document.documentElement.dataset.ui = 'soft';
+```
+
+Because it targets `data-ui="soft"`, you can scope it to a subtree — mix skins on
+one page by setting the attribute on a container instead of the root.
+
+## What it changes
+
+- **Buttons** — pill shape; filled primary rests on a soft shadow and lifts a
+  touch on hover.
+- **Fields** — 10px radius, comfortable height, soft single-halo focus ring.
+- **Surfaces** — cards and overlays get larger radius and gentle elevation.
+- **Menus / listboxes** — rounded, inset row highlights instead of full-bleed
+  bars.
+- **Selection controls** — rounder checkbox, larger switch, calmer focus.
+
+Layered in `flx.skin` (above `flx.components`), so it overrides the default look
+while your own unlayered CSS still wins.

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@fluixi-ui/skin-soft",
+  "version": "0.1.0-alpha.1",
+  "description": "Soft corporate skin for Fluixi UI — clean, gently elevated dashboard look; activate with data-ui=\"soft\"",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fluixi/ui.git",
+    "directory": "packages/skin-soft"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "soft.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./soft.css"
+  },
+  "scripts": {
+    "build": "true"
+  }
+}

package/soft.css

@@ -0,0 +1,201 @@
+/**
+ * @fluixi-ui/skin-soft — a soft, corporate dashboard skin for Fluixi UI.
+ *
+ * Activate by setting `data-ui="soft"` on a root (or any subtree). All rules live
+ * in the `flx.skin` cascade layer, above `flx.components`, so they override the
+ * default fluixi look wherever they match; consumer CSS stays unlayered and still
+ * wins. Import after the tokens + preset.
+ *
+ * Design language ("Soft Elevated", à la modern SaaS dashboards): generous but
+ * consistent rounding, gentle two-layer elevation used with intent (surfaces and
+ * overlays lift, flat controls carry only a hairline), a single accent spent on
+ * primary action / selection, comfortable density, system typography. No
+ * gradients, no glass, no decorative shadow — structure comes from spacing,
+ * rounding and one restrained accent.
+ *
+ * Colour stays theme-driven: this skin only touches shape, elevation, density and
+ * motion, so it inherits `data-theme` (light/dark/hc) and `data-accent` untouched.
+ */
+@layer flx.tokens, flx.components, flx.skin;
+
+@layer flx.skin {
+  /* ---- Global soft tokens --------------------------------------------------
+     Re-scoping the token scale is the main lever: radius, elevation, motion and
+     type flow into every component automatically. */
+  [data-ui='soft'] {
+    --flx-ui-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+      'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+    --flx-ui-radius-sm: 8px;
+    --flx-ui-radius-md: 10px;
+    --flx-ui-radius-lg: 14px;
+    --flx-ui-radius-xl: 20px;
+
+    --flx-ui-font-size-md: 15px;
+    --flx-ui-line-height-normal: 1.5;
+
+    --flx-ui-duration-fast: 130ms;
+    --flx-ui-duration-normal: 200ms;
+    --flx-ui-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --flx-ui-ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+
+    /* Soft two-layer elevation — low-alpha, cool-tinted, spread over distance
+       rather than a single hard drop. */
+    --flx-ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
+    --flx-ui-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
+    --flx-ui-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.1), 0 2px 8px rgba(16, 24, 40, 0.06);
+    --flx-ui-shadow-xl: 0 16px 40px rgba(16, 24, 40, 0.14), 0 4px 12px rgba(16, 24, 40, 0.08);
+
+    /* A softer, single-halo focus ring (no surface gap) reads calmer than the
+       default two-step ring against rounded controls. */
+    --flx-ui-ctl-ring: 0 0 0 3px var(--flx-ui-color-primary-subtle);
+
+    /* Uniform hairline: soft controls carry the same low-contrast border as
+       surfaces (no darker "strong" control border). */
+    --flx-ui-color-border-strong: var(--flx-ui-gray-6);
+
+    font-family: var(--flx-ui-font-family-sans);
+  }
+
+  /* ---- Button: pill, flat by default, one accent, soft lift on primary ------ */
+  [data-ui='soft'] :where([data-variant]) {
+    border-radius: 9999px;
+    height: 40px;
+    padding: 0 18px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    box-shadow: none;
+    transition:
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      box-shadow var(--flx-ui-duration-normal) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  /* 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']) {
+    box-shadow: var(--flx-ui-shadow-sm);
+  }
+  [data-ui='soft'] :where([data-variant='solid']: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])) {
+    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']) {
+    padding: 0 12px;
+  }
+  [data-ui='soft'] :where([data-variant]: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;
+  }
+
+  /* ---- Text fields: clean, comfortable, soft focus ------------------------- */
+  [data-ui='soft'] :where([data-input], button[role='combobox'], [data-combobox-control]) {
+    min-height: 40px;
+    border-radius: var(--flx-ui-radius-md);
+    border-color: var(--flx-ui-color-border);
+    background: var(--flx-ui-color-bg);
+    transition:
+      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) {
+    border-color: var(--flx-ui-gray-7);
+  }
+  [data-ui='soft'] :where([data-input]:focus-visible,
+    button[role='combobox']:focus-visible) {
+    outline: none;
+    border-color: var(--flx-ui-color-primary);
+    box-shadow: var(--flx-ui-ctl-ring);
+  }
+
+  /* ---- Selection controls: rounder box, calm focus ------------------------- */
+  [data-ui='soft'] :where([role='checkbox']) {
+    border-radius: 6px;
+  }
+  [data-ui='soft'] :where([role='switch']) {
+    width: 44px;
+    height: 26px;
+  }
+  [data-ui='soft'] :where([role='switch'])::after {
+    width: 22px;
+    height: 22px;
+  }
+  [data-ui='soft'] :where([role='switch'][data-state='checked'])::after {
+    transform: translateX(18px);
+  }
+
+  /* ---- Surfaces: cards lift gently, larger radius -------------------------- */
+  [data-ui='soft'] :where([data-card]) {
+    border-radius: var(--flx-ui-radius-lg);
+    border: 1px solid var(--flx-ui-color-border);
+    box-shadow: var(--flx-ui-shadow-sm);
+  }
+
+  /* ---- Overlays: rounded, softly raised ------------------------------------ */
+  [data-ui='soft'] :where([role='dialog'], [role='menu'], [role='listbox'],
+    [data-hovercard-content], [data-popover-content]) {
+    border-radius: var(--flx-ui-radius-lg);
+    box-shadow: var(--flx-ui-shadow-lg);
+  }
+  [data-ui='soft'] :where([role='tooltip']) {
+    border-radius: var(--flx-ui-radius-sm);
+  }
+  /* Menu / listbox rows: rounded highlight instead of a full-bleed bar. */
+  [data-ui='soft'] :where([role='menuitem'], [role='option']) {
+    border-radius: var(--flx-ui-radius-sm);
+    margin: 0 6px;
+  }
+  [data-ui='soft'] :where([role='menu'], [role='listbox']) {
+    padding: 6px;
+  }
+
+  /* ---- Sidenav: rounded, soft active pill --------------------------------- */
+  [data-ui='soft'] :where([data-sidenav-link]) {
+    border-radius: var(--flx-ui-radius-md);
+    font-weight: 500;
+  }
+
+  /* ---- Tabs: enclosed segmented control (not an underline) ----------------- */
+  [data-ui='soft'] :where([role='tablist']) {
+    gap: 3px;
+    padding: 4px;
+    background: var(--flx-ui-color-bg-muted);
+    border: none;
+    border-radius: var(--flx-ui-radius-md);
+  }
+  [data-ui='soft'] :where([role='tab']) {
+    border: none;
+    border-radius: calc(var(--flx-ui-radius-md) - 3px);
+    margin: 0;
+    padding: 6px 14px;
+    font-weight: 550;
+    color: var(--flx-ui-color-fg-muted);
+    transition:
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      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([role='tab']:hover:not([data-state='active'])) {
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='soft'] :where([role='tab'][data-state='active']) {
+    background: var(--flx-ui-color-bg);
+    color: var(--flx-ui-color-fg);
+    box-shadow: var(--flx-ui-shadow-sm);
+  }
+}