@nonsuch/component-library 0.1.0 → 0.2.0

package/README.md

@@ -44,6 +44,42 @@ Then import custom components as needed:
 import { NsButton } from '@nonsuch/component-library'
 ```
 
+### Fonts (Optional)
+
+The library ships [Fixel](https://fixel.macpaw.com/) as the Nonsuch brand font with Roboto as a fallback. Three integration options:
+
+**Option 1: Global CSS (recommended)** — makes Fixel the default for your entire app:
+
+```ts
+import '@nonsuch/component-library/fonts/global.css'
+```
+
+This loads all `@font-face` declarations and sets `Fixel Text` on `body` and `Fixel Display` on headings.
+
+**Option 2: Font faces only** — load the fonts without applying them globally, then use them where you choose:
+
+```ts
+import '@nonsuch/component-library/fonts.css'
+```
+
+```css
+.my-element {
+  font-family: 'Fixel Text', 'Roboto', sans-serif;
+}
+```
+
+**Option 3: Quasar Sass variables** — integrates with Quasar's typography system:
+
+```sass
+// src/quasar-variables.sass
+@use '@nonsuch/component-library/fonts/quasar-overrides' as *
+```
+
+```ts
+// vite.config.ts
+quasar({ sassVariables: 'src/quasar-variables.sass' })
+```
+
 Or use Quasar components directly — they aren't re-exported through this library, so you import them from `quasar` as normal:
 
 ```ts
@@ -100,6 +136,10 @@ Each custom component lives in its own directory with co-located story and test
 - **Vite library mode** — builds to ES modules with externalized `vue` and `quasar`
 - **TypeScript** — strict mode with emitted `.d.ts` declarations
 
+## Contributing
+
+Want to add or improve components? Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for a friendly step-by-step guide — no deep Vue experience required!
+
 ## License
 
 MIT — see [LICENSE](./LICENSE)

package/dist/nonsuch-components.css

@@ -1 +1 @@
-.ns-button[data-v-5eac18a7]{font-weight:500;letter-spacing:.02em}
+.ns-button[data-v-e1d8675d]{font-family:Fixel Text,Roboto,sans-serif;font-weight:500;letter-spacing:.02em}

package/dist/nonsuch-components.js

@@ -1,6 +1,6 @@
-import r from "quasar/src/components/btn/QBtn.js";
-import { defineComponent as u, openBlock as d, createBlock as l, mergeProps as s, withCtx as c, renderSlot as f } from "vue";
-const p = /* @__PURE__ */ u({
+import a from "quasar/src/components/btn/QBtn.js";
+import { defineComponent as d, openBlock as u, createBlock as l, mergeProps as s, withCtx as c, renderSlot as f } from "vue";
+const p = /* @__PURE__ */ d({
   __name: "NsButton",
   props: {
     color: { default: "primary" },
@@ -10,7 +10,7 @@ const p = /* @__PURE__ */ u({
     rounded: { type: Boolean, default: !0 }
   },
   setup(e) {
-    return (t, o) => (d(), l(r, s(t.$attrs, {
+    return (t, o) => (u(), l(a, s(t.$attrs, {
       color: e.color,
       size: e.size,
       unelevated: e.unelevated,
@@ -26,10 +26,10 @@ const p = /* @__PURE__ */ u({
   }
 }), i = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [n, a] of t)
-    o[n] = a;
+  for (const [n, r] of t)
+    o[n] = r;
   return o;
-}, B = /* @__PURE__ */ i(p, [["__scopeId", "data-v-5eac18a7"]]);
+}, B = /* @__PURE__ */ i(p, [["__scopeId", "data-v-e1d8675d"]]);
 export {
   B as NsButton
 };

package/fonts/_quasar-overrides.sass

@@ -0,0 +1,12 @@
+// Quasar Sass variable overrides for Fixel font
+//
+// For consumers using @quasar/vite-plugin, reference this file
+// in your own Sass variables to set Fixel as Quasar's default font:
+//
+//   // src/quasar-variables.sass
+//   @use '@nonsuch/component-library/fonts/quasar-overrides' as *
+//
+// Then in vite.config.ts:
+//   quasar({ sassVariables: 'src/quasar-variables.sass' })
+
+$body-font-family: 'Fixel Text', 'Roboto', sans-serif

package/fonts/files/README.md

@@ -0,0 +1,37 @@
+# Font Files
+
+Place your Fixel `.woff2` files here following this naming convention:
+
+## Fixel Text (body text, buttons, labels)
+
+```text
+FixelText-Regular.woff2
+FixelText-Medium.woff2
+FixelText-SemiBold.woff2
+FixelText-Bold.woff2
+FixelText-RegularItalic.woff2
+FixelText-MediumItalic.woff2
+FixelText-SemiBoldItalic.woff2
+FixelText-BoldItalic.woff2
+```
+
+## Fixel Display (headings, large text)
+
+```text
+FixelDisplay-Regular.woff2
+FixelDisplay-Medium.woff2
+FixelDisplay-SemiBold.woff2
+FixelDisplay-Bold.woff2
+```
+
+## Where to get the files
+
+Download from <https://fixel.macpaw.com/> and place the `.woff2` versions here.
+
+If your download only includes `.otf` or `.ttf`, you can convert to `.woff2` using
+a tool like <https://cloudconvert.com/ttf-to-woff2> for optimal web performance.
+
+## Adding more weights
+
+If you need additional weights (Thin, ExtraLight, Light, ExtraBold, Black),
+add the `.woff2` files here and update `../fonts.css` with matching `@font-face` rules.

package/fonts/fonts.css

@@ -0,0 +1,310 @@
+/*
+ * Fixel Font — @font-face declarations
+ * https://fixel.macpaw.com/
+ *
+ * Import this file to load the font faces without applying them globally:
+ *   import '@nonsuch/component-library/fonts.css'
+ *
+ * Or use global.css to also set Fixel as the default body/heading font:
+ *   import '@nonsuch/component-library/fonts/global.css'
+ *
+ * Font families available after import:
+ *   font-family: 'Fixel Text', 'Roboto', sans-serif;   — body, UI elements
+ *   font-family: 'Fixel Display', 'Roboto', sans-serif; — headings, hero text
+ */
+
+/* ========================================================================
+   Fixel Text — body text, buttons, labels, UI elements
+   ======================================================================== */
+
+/* Thin (100) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('./files/FixelText-Thin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url('./files/FixelText-ThinItalic.woff2') format('woff2');
+}
+
+/* ExtraLight (200) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('./files/FixelText-ExtraLight.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url('./files/FixelText-ExtraLightItalic.woff2') format('woff2');
+}
+
+/* Light (300) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./files/FixelText-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./files/FixelText-LightItalic.woff2') format('woff2');
+}
+
+/* Regular (400) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./files/FixelText-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./files/FixelText-RegularItalic.woff2') format('woff2');
+}
+
+/* Medium (500) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./files/FixelText-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./files/FixelText-MediumItalic.woff2') format('woff2');
+}
+
+/* SemiBold (600) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./files/FixelText-SemiBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./files/FixelText-SemiBoldItalic.woff2') format('woff2');
+}
+
+/* Bold (700) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./files/FixelText-Bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./files/FixelText-BoldItalic.woff2') format('woff2');
+}
+
+/* ExtraBold (800) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('./files/FixelText-ExtraBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('./files/FixelText-ExtraBoldItalic.woff2') format('woff2');
+}
+
+/* Black (900) */
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('./files/FixelText-Black.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Text';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('./files/FixelText-BlackItalic.woff2') format('woff2');
+}
+
+/* ========================================================================
+   Fixel Display — headings and large text
+   ======================================================================== */
+
+/* Thin (100) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('./files/FixelDisplay-Thin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url('./files/FixelDisplay-ThinItalic.woff2') format('woff2');
+}
+
+/* ExtraLight (200) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('./files/FixelDisplay-ExtraLight.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url('./files/FixelDisplay-ExtraLightItalic.woff2') format('woff2');
+}
+
+/* Light (300) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./files/FixelDisplay-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('./files/FixelDisplay-LightItalic.woff2') format('woff2');
+}
+
+/* Regular (400) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./files/FixelDisplay-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./files/FixelDisplay-RegularItalic.woff2') format('woff2');
+}
+
+/* Medium (500) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./files/FixelDisplay-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./files/FixelDisplay-MediumItalic.woff2') format('woff2');
+}
+
+/* SemiBold (600) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./files/FixelDisplay-SemiBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./files/FixelDisplay-SemiBoldItalic.woff2') format('woff2');
+}
+
+/* Bold (700) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./files/FixelDisplay-Bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./files/FixelDisplay-BoldItalic.woff2') format('woff2');
+}
+
+/* ExtraBold (800) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('./files/FixelDisplay-ExtraBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('./files/FixelDisplay-ExtraBoldItalic.woff2') format('woff2');
+}
+
+/* Black (900) */
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('./files/FixelDisplay-Black.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fixel Display';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('./files/FixelDisplay-BlackItalic.woff2') format('woff2');
+}

package/fonts/global.css

@@ -0,0 +1,34 @@
+/*
+ * Fixel Font — Global application defaults
+ *
+ * Import this ONE file to load Fixel AND apply it as the default font:
+ *   import '@nonsuch/component-library/fonts/global.css'
+ *
+ * This sets:
+ *   - body / all UI text → Fixel Text
+ *   - h1–h6 headings    → Fixel Display
+ *   - Roboto fallback for both
+ */
+
+@import './fonts.css';
+
+/* Apply Fixel Text as the default body font */
+body {
+  font-family: 'Fixel Text', 'Roboto', sans-serif;
+}
+
+/* Apply Fixel Display to headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.text-h1,
+.text-h2,
+.text-h3,
+.text-h4,
+.text-h5,
+.text-h6 {
+  font-family: 'Fixel Display', 'Roboto', sans-serif;
+}

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@nonsuch/component-library",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A Vue 3 component library built on Quasar with opinionated defaults and custom components.",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nonsuch/componentLibrary.git"
+    "url": "git+https://github.com/Nonsuch-io/componentLibrary.git"
   },
   "files": [
-    "dist"
+    "dist",
+    "fonts"
   ],
   "main": "./dist/nonsuch-components.js",
   "module": "./dist/nonsuch-components.js",
@@ -20,7 +21,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/nonsuch-components.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./fonts.css": "./fonts/fonts.css",
+    "./fonts/global.css": "./fonts/global.css",
+    "./fonts/quasar-overrides": "./fonts/_quasar-overrides.sass"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",