@better-forge/ui 0.1.0 → 0.1.1

package/styles/icons.css

@@ -1,4 +1,4 @@
-/* The Material Symbols font cut down to the icons the shared interface (and the template) use. A product that draws
-   icons of its own builds a font that also holds the names listed in `@better-forge/ui/icons.json` and declares it
-   instead of importing this file. */
-@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: block; src: url('./fonts/material-symbols-outlined-fill.woff2') format('woff2'); }
+/* The Material Symbols font cut down to the icons the shared interface (and the template) use. A product that draws
+   icons of its own builds a font that also holds the names listed in `@better-forge/ui/icons.json` and declares it
+   instead of importing this file. */
+@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: block; src: url('./fonts/material-symbols-outlined-fill.woff2') format('woff2'); }

package/tailwind-preset.js

@@ -1,79 +1,79 @@
-/**
- * The look of the Better interfaces as a Tailwind preset: colours are CSS variables (so branding and dark mode can swap
- * them at runtime), the type faces and the entrance animation. Wrapping each colour in color-mix with Tailwind's
- * <alpha-value> placeholder keeps opacity modifiers such as `bg-primary/10` working; without a modifier the mix is
- * 100% and renders the variable unchanged.
- */
-import { fileURLToPath, URL } from 'node:url'
-
-const token = (name) => `color-mix(in srgb, var(${name}) calc(<alpha-value> * 100%), transparent)`
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        // Branding aliases (runtime overrideable)
-        primary: token('--color-primary'),
-        accent: token('--color-accent'),
-        // M3 surface tokens (CSS-var backed → respond to dark mode)
-        surface: token('--m3-surface'),
-        'surface-dim': token('--m3-surface-dim'),
-        'surface-bright': token('--m3-surface-bright'),
-        'surface-container-lowest': token('--m3-surface-container-lowest'),
-        'surface-container-low': token('--m3-surface-container-low'),
-        'surface-container': token('--m3-surface-container'),
-        'surface-container-high': token('--m3-surface-container-high'),
-        'surface-container-highest': token('--m3-surface-container-highest'),
-        // M3 on-surface tokens
-        'on-surface': token('--m3-on-surface'),
-        'on-surface-variant': token('--m3-on-surface-variant'),
-        // M3 misc
-        secondary: token('--m3-secondary'),
-        outline: token('--m3-outline'),
-        'outline-variant': token('--m3-outline-variant'),
-        'on-primary': token('--m3-on-primary'),
-        'on-primary-container': token('--m3-on-primary-container'),
-        'primary-fixed': token('--m3-primary-fixed'),
-        'primary-container': token('--m3-primary-container'),
-        'surface-tint': token('--m3-surface-tint'),
-        'secondary-container': token('--m3-secondary-container'),
-        'on-secondary-container': token('--m3-on-secondary-container'),
-        'secondary-fixed': token('--m3-secondary-fixed'),
-        error: token('--m3-error'),
-        'error-container': token('--m3-error-container'),
-        'on-error-container': token('--m3-on-error-container'),
-        // Status colors
-        'status-up': token('--m3-up'),
-        'status-down': token('--m3-down'),
-        'status-degraded': token('--m3-degraded'),
-        'status-partial': token('--m3-partial'),
-      },
-      fontFamily: {
-        headline: ['Manrope', 'system-ui', 'sans-serif'],
-        display: ['Manrope', 'system-ui', 'sans-serif'],
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        // Small uppercase eyebrow labels (Dashboard, Setup); same face as body text.
-        label: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'Menlo', 'monospace'],
-      },
-      animation: {
-        'fade-up': 'fadeUp 0.45s ease forwards',
-      },
-      keyframes: {
-        fadeUp: {
-          '0%': { opacity: '0', transform: 'translateY(12px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-      },
-      borderRadius: {
-        '3xl': '1.5rem',
-        '4xl': '2rem',
-      },
-    },
-  },
-}
-
-/** Where the classes of the shared components are written, to add to a product's `content`. */
-export const uiContent = `${fileURLToPath(new URL('./dist', import.meta.url)).replaceAll('\\', '/')}/**/*.js`
+/**
+ * The look of the Better interfaces as a Tailwind preset: colours are CSS variables (so branding and dark mode can swap
+ * them at runtime), the type faces and the entrance animation. Wrapping each colour in color-mix with Tailwind's
+ * <alpha-value> placeholder keeps opacity modifiers such as `bg-primary/10` working; without a modifier the mix is
+ * 100% and renders the variable unchanged.
+ */
+import { fileURLToPath, URL } from 'node:url'
+
+const token = (name) => `color-mix(in srgb, var(${name}) calc(<alpha-value> * 100%), transparent)`
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Branding aliases (runtime overrideable)
+        primary: token('--color-primary'),
+        accent: token('--color-accent'),
+        // M3 surface tokens (CSS-var backed → respond to dark mode)
+        surface: token('--m3-surface'),
+        'surface-dim': token('--m3-surface-dim'),
+        'surface-bright': token('--m3-surface-bright'),
+        'surface-container-lowest': token('--m3-surface-container-lowest'),
+        'surface-container-low': token('--m3-surface-container-low'),
+        'surface-container': token('--m3-surface-container'),
+        'surface-container-high': token('--m3-surface-container-high'),
+        'surface-container-highest': token('--m3-surface-container-highest'),
+        // M3 on-surface tokens
+        'on-surface': token('--m3-on-surface'),
+        'on-surface-variant': token('--m3-on-surface-variant'),
+        // M3 misc
+        secondary: token('--m3-secondary'),
+        outline: token('--m3-outline'),
+        'outline-variant': token('--m3-outline-variant'),
+        'on-primary': token('--m3-on-primary'),
+        'on-primary-container': token('--m3-on-primary-container'),
+        'primary-fixed': token('--m3-primary-fixed'),
+        'primary-container': token('--m3-primary-container'),
+        'surface-tint': token('--m3-surface-tint'),
+        'secondary-container': token('--m3-secondary-container'),
+        'on-secondary-container': token('--m3-on-secondary-container'),
+        'secondary-fixed': token('--m3-secondary-fixed'),
+        error: token('--m3-error'),
+        'error-container': token('--m3-error-container'),
+        'on-error-container': token('--m3-on-error-container'),
+        // Status colors
+        'status-up': token('--m3-up'),
+        'status-down': token('--m3-down'),
+        'status-degraded': token('--m3-degraded'),
+        'status-partial': token('--m3-partial'),
+      },
+      fontFamily: {
+        headline: ['Manrope', 'system-ui', 'sans-serif'],
+        display: ['Manrope', 'system-ui', 'sans-serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        // Small uppercase eyebrow labels (Dashboard, Setup); same face as body text.
+        label: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Menlo', 'monospace'],
+      },
+      animation: {
+        'fade-up': 'fadeUp 0.45s ease forwards',
+      },
+      keyframes: {
+        fadeUp: {
+          '0%': { opacity: '0', transform: 'translateY(12px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      borderRadius: {
+        '3xl': '1.5rem',
+        '4xl': '2rem',
+      },
+    },
+  },
+}
+
+/** Where the classes of the shared components are written, to add to a product's `content`. */
+export const uiContent = `${fileURLToPath(new URL('./dist', import.meta.url)).replaceAll('\\', '/')}/**/*.js`