@fluixi-ui/skin-paper 0.1.0-alpha.0 → 0.1.0-alpha.2

package/README.md

@@ -18,6 +18,20 @@ document.documentElement.dataset.ui = 'paper';
 
 The attribute can sit on any subtree to scope the skin there.
 
+## Switching skins
+
+`paperSkin` from `@fluixi-ui/skin-paper/skin` describes the skin to `AppearanceProvider` from
+`@fluixi-ui/theme`, which loads the stylesheet the first time the skin is chosen, fonts included.
+
+```tsx
+import { AppearanceProvider, fluixiSkin } from '@fluixi-ui/theme';
+import { paperSkin } from '@fluixi-ui/skin-paper/skin';
+
+<AppearanceProvider skins={[fluixiSkin, paperSkin]}>
+  <App />
+</AppearanceProvider>
+```
+
 ## Construction
 
 Every surface belongs to one family:

package/dist/skin.d.ts

@@ -0,0 +1,6 @@
+/** The paper skin, for `AppearanceProvider` from `@fluixi-ui/theme`. Loads its fonts with it. */
+export declare const paperSkin: {
+    name: string;
+    load: () => Promise<[any, 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,iGAAiG;AACjG,eAAO,MAAM,SAAS;IACpB,IAAI;IACJ,IAAI;CACL,CAAC"}

package/dist/skin.js

@@ -0,0 +1,5 @@
+/** The paper skin, for `AppearanceProvider` from `@fluixi-ui/theme`. Loads its fonts with it. */
+export const paperSkin = {
+    name: 'paper',
+    load: () => Promise.all([import('../fonts.css'), import('../paper.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"],"missingPackageJsons":["../node_modules/tslib/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":"e8436c94d4bfe23d80822110f33e903a","signature":"a5d80f2205ac5bc8b0bde4a604045f0f","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-paper",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Paper skin for Fluixi UI: warm canvas, floating white sheets, hairline rings; activate with data-ui=\"paper\"",
   "license": "MIT",
   "private": false,
@@ -18,6 +18,7 @@
     "*.css"
   ],
   "files": [
+    "dist",
     "paper.css",
     "paper.css.js",
     "fonts.css",
@@ -28,13 +29,18 @@
   "exports": {
     "./package.json": "./package.json",
     "./styles.css": "./paper.css",
-    "./fonts.css": "./fonts.css"
+    "./fonts.css": "./fonts.css",
+    "./skin": {
+      "types": "./dist/skin.d.ts",
+      "import": "./dist/skin.js",
+      "default": "./dist/skin.js"
+    }
   },
   "dependencies": {
     "@fontsource-variable/figtree": "^5.3.0",
     "@fontsource-variable/bricolage-grotesque": "^5.3.0"
   },
   "scripts": {
-    "build": "node ../../scripts/css-loaders.mjs paper.css fonts.css"
+    "build": "tsc -p tsconfig.lib.json && node ../../scripts/css-loaders.mjs paper.css fonts.css"
   }
 }

package/paper.css

@@ -166,7 +166,7 @@
   /* ---- Buttons: the control family -------------------------------------------- */
   /* Rings replace the border; pressing settles the button half a pixel. Focus is an
      outline, offset 2px, so it never replaces the construction shadow. */
-  [data-ui='paper'] :where([data-variant]:not([data-badge])) {
+  [data-ui='paper'] :where([data-variant]:not([data-badge], [data-chip])) {
     border: none;
     font-weight: 600;
     transition:
@@ -174,40 +174,55 @@
       box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
       transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
   }
-  [data-ui='paper'] :where([data-variant]:not([data-badge])[data-pressed]:not([data-disabled])) {
+  [data-ui='paper'] :where([data-variant]:not([data-badge], [data-chip])[data-pressed]:not([data-disabled])) {
     transform: translateY(0.5px);
   }
-  [data-ui='paper'] :where([data-variant]:not([data-badge]):focus-visible) {
+  [data-ui='paper'] :where([data-variant]:not([data-badge], [data-chip]):focus-visible) {
     outline: 2px solid var(--flx-ui-color-focus-ring);
     outline-offset: 2px;
   }
   /* A filled action: top highlight, a ring darker than its fill, contact below. Built
      here, not as a root token, so a data-tone on the button recolours the ring. */
-  [data-ui='paper'] :where([data-variant='solid']:not([data-badge])) {
+  [data-ui='paper'] :where([data-variant='solid']:not([data-badge], [data-chip])) {
     box-shadow: inset 0 1px 0 var(--flx-ui-paper-action-highlight),
       0 0 0 0.5px color-mix(in srgb, var(--flx-ui-color-primary) 70%, #000),
       0 1px 2px var(--flx-ui-paper-contact);
   }
-  [data-ui='paper'] :where([data-variant='outline']:not([data-badge])) {
+  [data-ui='paper'] :where([data-variant='outline']:not([data-badge], [data-chip])) {
     background: var(--flx-ui-paper-control);
     box-shadow: var(--flx-ui-paper-control-shadow);
   }
-  [data-ui='paper'] :where([data-variant='outline']:not([data-badge]):hover:not([data-disabled])) {
+  /* Paper keeps its pressed control: the base outline fills with its tone on hover. */
+  [data-ui='paper'] :where([data-variant='outline']:not([data-badge], [data-chip]):is(:hover, :active):not([data-disabled])) {
     background: var(--flx-ui-paper-control-hover);
+    border-color: var(--flx-ui-color-border-strong);
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='paper'] :where([data-variant='outline']:is([data-tone='danger'], [data-tone='success'], [data-tone='warning']):not([data-badge], [data-chip]):is(:hover, :active):not([data-disabled])) {
+    color: var(--flx-ui-color-primary);
+  }
+  [data-ui='paper'] :where([data-variant='soft']:not([data-badge], [data-chip])) {
+    box-shadow: none;
   }
-  [data-ui='paper'] :where([data-variant='soft']:not([data-badge])) {
+  [data-ui='paper'] :where([data-variant='ghost']:not([data-badge], [data-chip])) {
     box-shadow: none;
   }
-  [data-ui='paper'] :where([data-variant='ghost']:not([data-badge])) {
+  /* The one variant that keeps a border: a dashed line, no fill, until hovered. */
+  [data-ui='paper'] :where([data-variant='dashed']:not([data-badge], [data-chip])) {
+    border: 1px dashed color-mix(in srgb, var(--flx-ui-gray-12) 24%, transparent);
     box-shadow: none;
   }
-  [data-ui='paper'] :where([data-variant='ghost']:not([data-badge]):hover:not([data-disabled])) {
+  [data-ui='paper'] :where([data-variant='dashed']:not([data-badge], [data-chip]):hover:not([data-disabled])) {
+    background: color-mix(in srgb, var(--flx-ui-gray-12) 4%, transparent);
+    border-color: color-mix(in srgb, var(--flx-ui-gray-12) 40%, transparent);
+  }
+  [data-ui='paper'] :where([data-variant='ghost']:not([data-badge], [data-chip]):hover:not([data-disabled])) {
     background: color-mix(in srgb, var(--flx-ui-gray-12) 6%, transparent);
   }
-  [data-ui='paper'] :where([data-variant]:not([data-badge])[data-disabled]) {
+  [data-ui='paper'] :where([data-variant]:not([data-badge], [data-chip])[data-disabled]) {
     box-shadow: none;
   }
-  [data-ui='paper'] :where([data-variant='outline']:not([data-badge])[data-disabled]) {
+  [data-ui='paper'] :where([data-variant='outline']:not([data-badge], [data-chip])[data-disabled]) {
     background: transparent;
     box-shadow: 0 0 0 0.5px var(--flx-ui-paper-ring);
   }
@@ -394,4 +409,16 @@
     background: var(--flx-ui-paper-floating);
     box-shadow: var(--flx-ui-paper-dialog-shadow);
   }
+  /* ---- Glow: a hairline accent ring with a soft halo ----------------------------------- */
+  [data-ui='paper'] :where([data-glow]:not([data-glow-side])) {
+    --flx-ui-glow-width: 1px;
+  }
+  [data-ui='paper'] :where([data-glow]:not([data-glow-side]))::after {
+    background: var(--flx-ui-glow-via, color-mix(in oklab, var(--flx-ui-glow-from, var(--flx-ui-color-primary)), #fff 40%));
+    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--flx-ui-glow-from, var(--flx-ui-color-primary)) 30%, transparent));
+    animation: none;
+  }
+  [data-ui='paper'] :where([data-glow]:not([data-glow-side]):is(:hover, :focus-visible):not([data-disabled]))::after {
+    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--flx-ui-glow-from, var(--flx-ui-color-primary)) 40%, transparent));
+  }
 }