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

package/README.md

@@ -1,38 +1,64 @@
 # @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.
+A calm, content-first skin for Fluixi UI: a grey canvas with white sheets that sit on it, 8px
+controls, one blue for actions and selection, and quick motion that never overshoots.
 
 ## 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/styles/all.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.
+The attribute can sit on any subtree to scope the skin there.
+
+## Switching skins
+
+`softSkin` from `@fluixi-ui/skin-soft/skin` describes the skin to `AppearanceProvider` from
+`@fluixi-ui/theme`, which loads the stylesheet the first time the skin is chosen.
+
+```tsx
+import { AppearanceProvider, fluixiSkin } from '@fluixi-ui/theme';
+import { softSkin } from '@fluixi-ui/skin-soft/skin';
+
+<AppearanceProvider skins={[fluixiSkin, softSkin]}>
+  <App />
+</AppearanceProvider>
+```
+
+## Colour
+
+The skin brings its own palette, light and dark, mapped onto the gray and accent scales, so
+every component follows it. `data-theme="dark"` switches it, and so does the system setting
+when no theme is set.
+
+`data-accent` set to anything but `blue` replaces the skin's blue with that accent; `blue`, like
+no accent, means the skin's own. `data-theme="high-contrast"` keeps the token palette.
+
+## Interaction
+
+Buttons show hover and press as a wash of their own text colour over the fill, so every
+variant and tone behaves the same, and settle to 0.96 when pressed. Nothing lifts on hover
+except a card that is a link or a button. Checkboxes, radios, slider thumbs and switch thumbs
+show a soft ring around them.
+
+| Control | Look |
+| --- | --- |
+| buttons | 36px, 8px corners; `soft` is a blue tint, `outline` sits on the grey wash, `ghost` reads as a link |
+| icon buttons | a grey circle, blue only when the variant is `solid` or `soft` |
+| fields | the grey wash with a hairline; `filled` is a borderless grey bar, `outlined` is white; focus turns white with a blue edge |
+| tabs | the chosen tab in a grey pill, no underline |
+| menus | 12px panels, rows with a grey hover |
+| glow | a still ring in a light tint of the colour, brighter on hover |
 
-## What it changes
+## Customising
 
-- **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.
+Most of the look is token values: the global scales (`--flx-ui-radius-*`, `--flx-ui-size-*`,
+type, shadow, motion) and the component tokens the base reads (`--flx-ui-control-*`,
+`--flx-ui-field-*`, `--flx-ui-card-*`, `--flx-ui-floating-*` and the rest). Set them on your own
+root to adjust the skin without writing selectors. The full list is in the theming docs, under
+"Writing a skin".
 
-Layered in `flx.skin` (above `flx.components`), so it overrides the default look
-while your own unlayered CSS still wins.
+Rules live in the `flx.skin` layer, above `flx.components`; your own unlayered CSS still wins.

package/dist/skin.d.ts

@@ -0,0 +1,6 @@
+/** The soft skin, for `AppearanceProvider` from `@fluixi-ui/theme`. */
+export declare const softSkin: {
+    name: string;
+    load: () => Promise<any>;
+};
+//# sourceMappingURL=skin.d.ts.map

package/dist/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","sourceRoot":"","sources":["../src/skin.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,eAAO,MAAM,QAAQ;IACnB,IAAI;IACJ,IAAI;CACL,CAAC"}

package/dist/skin.js

@@ -0,0 +1,5 @@
+/** The soft skin, for `AppearanceProvider` from `@fluixi-ui/theme`. */
+export const softSkin = {
+    name: 'soft',
+    load: () => import('../soft.css'),
+};

package/dist/tsconfig.lib.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"7.0.2","root":[60,63],"packageJsons":["../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/modules/package.json","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/package.json","../package.json"],"fileNames":["lib.es5.d.ts","lib.es2015.d.ts","lib.es2016.d.ts","lib.es2017.d.ts","lib.es2018.d.ts","lib.es2019.d.ts","lib.es2020.d.ts","lib.es2021.d.ts","lib.es2022.d.ts","lib.dom.d.ts","lib.dom.iterable.d.ts","lib.es2015.core.d.ts","lib.es2015.collection.d.ts","lib.es2015.generator.d.ts","lib.es2015.iterable.d.ts","lib.es2015.promise.d.ts","lib.es2015.proxy.d.ts","lib.es2015.reflect.d.ts","lib.es2015.symbol.d.ts","lib.es2015.symbol.wellknown.d.ts","lib.es2016.array.include.d.ts","lib.es2016.intl.d.ts","lib.es2017.arraybuffer.d.ts","lib.es2017.date.d.ts","lib.es2017.object.d.ts","lib.es2017.sharedmemory.d.ts","lib.es2017.string.d.ts","lib.es2017.intl.d.ts","lib.es2017.typedarrays.d.ts","lib.es2018.asyncgenerator.d.ts","lib.es2018.asynciterable.d.ts","lib.es2018.intl.d.ts","lib.es2018.promise.d.ts","lib.es2018.regexp.d.ts","lib.es2019.array.d.ts","lib.es2019.object.d.ts","lib.es2019.string.d.ts","lib.es2019.symbol.d.ts","lib.es2019.intl.d.ts","lib.es2020.bigint.d.ts","lib.es2020.date.d.ts","lib.es2020.promise.d.ts","lib.es2020.sharedmemory.d.ts","lib.es2020.string.d.ts","lib.es2020.symbol.wellknown.d.ts","lib.es2020.intl.d.ts","lib.es2020.number.d.ts","lib.es2021.promise.d.ts","lib.es2021.string.d.ts","lib.es2021.weakref.d.ts","lib.es2021.intl.d.ts","lib.es2022.array.d.ts","lib.es2022.error.d.ts","lib.es2022.intl.d.ts","lib.es2022.object.d.ts","lib.es2022.string.d.ts","lib.es2022.regexp.d.ts","lib.decorators.d.ts","lib.decorators.legacy.d.ts","../src/css.d.ts","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.d.ts","../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/modules/index.d.ts","../src/skin.ts"],"fileInfos":[{"version":"16934abaab7026ac114da441aabea1a0","affectsGlobalScope":true,"impliedNodeFormat":1},"d4306fb2e47f74835e8674ffac07d76f","e437c5c1302869326c3bb93da85bbbcf","e4324975a566567b21d350615f1fc6ac","333b1b9a2a9ac3b8497dba5c63b5ba50","6cffacd662b6eb5fa7a36aa2ea366bfa","b4c34f9c23304dbef2d23698637ed638","e5cb86a5fc491796ecd1d2dd348d208f","feb6c6fb19cdb246a5d8acb36a6901c7",{"version":"aae8996e8b5684814785a42cbbefcd79","affectsGlobalScope":true,"impliedNodeFormat":1},"abad6dd56cc8caf095c165df8124d237",{"version":"926204c28cd3d073865348473ae28d2e","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"f25e42c801b2cb3cf2b39792006a9beb","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"6344b55f26a4e81d9608777dbfb877dd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"3c0ed28e53d3695b363e256ec1c023fd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4c2761daba7f17141c25baa0821ac5da","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b87656acabd63e69379ff6ffcfe52fc7","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"597469522da047a5af5222cc6989f405","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"1708ea4d34dc37fadadc63ca01127e80","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"55d97a8c6fbf34a30450a7b1e5f7a298","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"0ee05eb59426d33e374226d8dcfa708b","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"e347c14030993906efcfbb88915b6a05","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b0231263857c9b6a03641acdc9280ceb","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"3b15c4a83b598cacb4067676e6f0abed","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b417d97b7934cef63b1889abec0bbfbf","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"09a6cf4032ebba60ce22a501e663f881","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"2b056277dd138e8f5650fc04e20eaa8d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"e22cc07e3f3cc242ba52fa3f8ea1fc58","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"2c45da767a1bfbb220848df1bc4029e4","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b44c3e0fbaf2130cdcf6ac38b120ffa1","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b612fb5cf8e5d964b92063a75207632a","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"02705151a5e1551b9162a9ed8ab763f7","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"41025e398be9215d32e4337335da8f0b","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"52684c2b1f353a5538e4f275182a54cd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"6dedb6a4f90d1df3a6fbe5693e44886c","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"ca3f36fe3562c07e0f0d71c2bebd3f6d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"409974d6129befbb8226ddd1c6558568","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4d9cfde2a1ae1b4925f1f9bc10848e5d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"7e1daecc66dd564144e3bb1a0266b5fd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"a8e1d9bb35fd0637f2f9fd2b2a54f2ec","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4f168501772a6543182765bfd5f2fbfe","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"a19c80aad1b2162103496f5ba293a732","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"b69afa63cd5d059851c78adb2856ee09","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"ae2fc5d954e9b0f5feee3d481b953c27","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"1cfd3091a071d8b6feec15277643bafe","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"1da2c1f258970fd3cc91184f69e91a9d","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"a0d87491913d843139e0c993650a3235","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4ef72aa378127e7b7abba915b0110b1e","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"3ec74c6a7d4463f0254db3a74cf75646","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"84c2bdfa470d075526cce6322d81b0b6","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"0b3844c2b8c73e4e1ab91431411cad11","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"4fc71cf4a15b8d99675a31df77f26e07","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"d1b49564ddaeca3df5b6dbae925d2242","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"6a25be566d60ccfc2d6e8b7bfdeefa83","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"8a20e27646985dfd58c57ca6566553dd","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"9969f02ad3cdcbf4f709405cda44167f","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"9c9be4792a7a4f42c15ae7360bf28779","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"f64453cbf9671f28158677fa5c43967a","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"33f317af5428801f944a478d2c1e38e5","affectsGlobalScope":true,"impliedNodeFormat":1},{"version":"ff1d5c1ba4b9260d7d542a6571f14d76","impliedNodeFormat":99},"68565f078f6cbaa18bac7ac1aee706a4",{"version":"6df9988546b1b8e15cb137c4ed46c629","impliedNodeFormat":99},{"version":"eb11d2847f64677ae687fe292a81ca88","signature":"fe8815c5572c5f32d28cd537da21df8f","impliedNodeFormat":99}],"fileIdsList":[[60],[60,61]],"options":{"composite":true,"emitDeclarationOnly":false,"declaration":true,"declarationMap":true,"importHelpers":true,"module":199,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noEmitOnError":true,"noUnusedLocals":true,"noImplicitOverride":true,"noUncheckedSideEffectImports":false,"outDir":"./","rootDir":"../src","skipLibCheck":true,"strict":true,"target":9,"tsBuildInfoFile":"./tsconfig.lib.tsbuildinfo","verbatimModuleSyntax":true},"referencedMap":[[58,1],[59,1],[10,1],[11,1],[13,1],[12,1],[2,1],[14,1],[15,1],[16,1],[17,1],[18,1],[19,1],[20,1],[21,1],[3,1],[22,1],[23,1],[4,1],[24,1],[28,1],[25,1],[26,1],[27,1],[29,1],[30,1],[31,1],[5,1],[32,1],[33,1],[34,1],[35,1],[6,1],[39,1],[36,1],[37,1],[38,1],[40,1],[7,1],[41,1],[46,1],[47,1],[42,1],[43,1],[44,1],[45,1],[8,1],[51,1],[48,1],[49,1],[50,1],[52,1],[9,1],[53,1],[54,1],[55,1],[57,1],[56,1],[1,1],[62,2],[61,1],[63,1]],"latestChangedDtsFile":"./skin.d.ts"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluixi-ui/skin-soft",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.10",
   "description": "Soft corporate skin for Fluixi UI — clean, gently elevated dashboard look; activate with data-ui=\"soft\"",
   "license": "MIT",
   "private": false,
@@ -18,15 +18,22 @@
     "*.css"
   ],
   "files": [
+    "dist",
     "soft.css",
+    "soft.css.js",
     "README.md",
     "LICENSE"
   ],
   "exports": {
     "./package.json": "./package.json",
-    "./styles.css": "./soft.css"
+    "./styles.css": "./soft.css",
+    "./skin": {
+      "types": "./dist/skin.d.ts",
+      "import": "./dist/skin.js",
+      "default": "./dist/skin.js"
+    }
   },
   "scripts": {
-    "build": "true"
+    "build": "tsc -p tsconfig.lib.json && node ../../scripts/css-loaders.mjs soft.css"
   }
 }