Box component

.prettierrc

@@ -5,5 +5,11 @@
   "singleQuote": true,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "plugins": ["prettier-plugin-organize-imports"]
+  "plugins": ["prettier-plugin-organize-imports"],
+  "overrides": [
+    {
+      "files": ["**/*properties.css", "**/*tokens.css"],
+      "options": { "printWidth": 200 }
+    }
+  ]
 }

.storybook/preview.ts

@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/vue3-vite'
 import { AppCompose, Wrapper, type YTheme } from '../src'
+// Supports weights 100-900
+import '@fontsource-variable/roboto'
 
 const theme: YTheme = {
   primary: '#e3c567',
@@ -27,9 +29,9 @@ const preview: Preview = {
       components: { story, AppCompose, Wrapper },
       template: `
         <AppCompose :theme="theme">
-          <Wrapper> 
+          <!-- <Wrapper> -->
             <story />
-          </Wrapper> 
+          <!-- </Wrapper> -->
         </AppCompose>
         `,
 

bin/templates/compose-theme-goal.css

@@ -8,35 +8,60 @@
   /**
 * ZINDEX 
 */
+
   /**
 * TYPOGRAPHY 
 */
+
   /**
 * BREAKPOINT 
 */
+
   /**
 * SPACE 
 */
+
   /* --zIndex-undefined: 1000; */
+
   /* --typography-text: clamp(0.4444rem, 0.6881rem - 0.2407vw, 0.64rem); */
+
   /* --typography-text: clamp(0.6667rem, 0.8328rem - 0.1641vw, 0.8rem); */
+
   /* --typography-text: clamp(1rem, 1rem + 0vw, 1rem); */
+
   /* --typography-text: clamp(1.25rem, 1.1885rem + 0.3077vw, 1.5rem); */
+
   /* --typography-text: clamp(1.5625rem, 1.3933rem + 0.8462vw, 2.25rem); */
+
   /* --typography-text: clamp(1.9531rem, 1.6031rem + 1.75vw, 3.375rem); */
+
   /* --typography-text: clamp(2.4414rem, 1.7962rem + 3.226vi, 5.0625rem); */
+
   /* --typography-heading: calc(1rem * 2.5); */
+
   /* --breakpoint-mobile: 640px; */
+
   /* --breakpoint-tablet: 768px; */
+
   /* --breakpoint-desktop: 1024px; */
+
   /* --breakpoint-desktop-xl: 1280px; */
+
   /* --breakpoint-desktop-xxl: 1820px; */
+
   /* --space-unit: 1rem; */
+
   /* --space-xxs: calc(0.25 * var(--space-unit)); */
+
   /* --space-xs: calc(0.5 * var(--space-unit)); */
+
   /* --space-sm: calc(0.75 * var(--space-unit)); */
+
   /* --space-md: calc(1 * var(--space-unit)); */
+
   /* --space-lg: calc(1.5 * var(--space-unit)); */
+
   /* --space-xl: calc(2 * var(--space-unit)); */
+
   /* --space-xxl: calc(4 * var(--space-unit)); */
 }

bin/templates/compose-theme.css

@@ -6,7 +6,9 @@
  */
 :root {
   /* -------------------------------------------------- */
+
   /* Breakpoints */
+
   /* -------------------------------------------------- */
   --breakpoints-mobile: 640px;
   --breakpoints-tablet: 768px;
@@ -15,12 +17,16 @@
   --breakpoints-desktop-xxl: 1820px;
 
   /* -------------------------------------------------- */
+
   /* Layout */
+
   /* -------------------------------------------------- */
   --layout-zIndex: 1000;
 
   /* -------------------------------------------------- */
+
   /* Space */
+
   /* -------------------------------------------------- */
   --space-unit: 1rem;
   --space-xxs: calc(0.25 * var(--space-unit));
@@ -32,12 +38,16 @@
   --space-xxl: calc(4 * var(--space-unit));
 
   /* -------------------------------------------------- */
+
   /* Font */
+
   /* -------------------------------------------------- */
   --font-gotham: assets/fonts/gotham/gotham.woff2;
 
   /* -------------------------------------------------- */
+
   /* Text */
+
   /* -------------------------------------------------- */
   --text-xs: clamp(0.4444rem, 0.6881rem - 0.2407vw, 0.64rem);
   --text-sm: clamp(0.6667rem, 0.8328rem - 0.1641vw, 0.8rem);
@@ -48,7 +58,9 @@
   --text-h1: clamp(2.4414rem, 1.7962rem + 3.226vi, 5.0625rem);
 
   /* -------------------------------------------------- */
+
   /* Heading */
+
   /* -------------------------------------------------- */
   --heading-height: calc(1rem * 2.5);
 }

eslint.config.mjs

@@ -30,9 +30,9 @@ export default defineConfig([
       'vue/component-name-in-template-casing': [
         'warn',
         'PascalCase',
-        {
-          registeredComponentsOnly: false,
-        },
+        // {
+        //   registeredComponentsOnly: false,
+        // },
       ],
       '@typescript-eslint/no-empty-object-type': 'off',
     },

package.json

@@ -11,7 +11,7 @@
     "build:server": "vite build --outDir dist/server --ssr src/entry-server.js",
     "build:style": "style-dictionary build --config style-dictionary/config.js ",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "component:new": "npx hygen component new",
+    "new:component": "npx hygen new component",
     "dev": "vite",
     "dev:ssr": "node server",
     "format": "prettier --write . --config ./.prettierrc",
@@ -32,6 +32,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@fontsource-variable/roboto": "^5.2.9",
     "compression": "1.8.1",
     "culori": "4.0.1",
     "express": "5.1.0",
@@ -68,7 +69,6 @@
     "lint-staged": "16.1.0",
     "prettier": "3.5.3",
     "prettier-plugin-organize-imports": "4.1.0",
-    "react-dom": "19.2.0",
     "sass": "1.89.2",
     "storybook": "10.1.11",
     "storybook-addon-pseudo-states": "10.1.11",
@@ -85,6 +85,7 @@
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-linter": "2.1.1",
     "vite-plugin-vue-devtools": "8.0.5",
+    "vite-tsconfig-paths": "6.0.4",
     "vitest": "4.0.17",
     "vue-tsc": "2.2.10"
   },

src/assets/css/base/fonts.css

@@ -3,22 +3,27 @@
 @font-face {
   font-family: gotham;
   src: url('../fonts/GOTHAM-BOOK.OTF') format('opentype');
+
   /* src: var(--_font-regular); */
+
   /* src: url('/fonts/GOTHAM-BOOK.OTF') format('opentype'); */
   font-display: swap;
 }
 
 @font-face {
   font-family: gotham;
   src: url('../fonts/GOTHAM-BOLD.OTF') format('opentype');
+
   /* src: var(--_font-bold); */
   font-weight: 700;
   font-display: swap;
 }
 
 @font-face {
   font-family: gotham;
+
   /* src: url('../fonts/GOTHAM-BLACKITALIC.OTF') format('opentype'); */
+
   /* src: var(--_font-bolder); */
   src: url('../fonts/GOTHAM-BLACKITALIC.OTF') format('opentype');
   font-weight: 900;
@@ -29,13 +34,15 @@
 @font-face {
   font-family: gotham;
   src: url('../fonts/GOTHAM-BLACK.OTF') format('opentype');
+
   /* src: var(--_font-bolder-italic); */
   font-weight: 900;
   font-display: swap;
 }
 
 body {
-  font-family: 'Roboto Slab', serif;
+  font-family: 'Roboto Variable', sans-serif;
+
   /* font-family: gotham; */
 }