bsmnt 0.1.0 → 0.1.2

package/packages/create-basement-app/templates/webgpu/lib/styles/css/root.css

@@ -1,68 +0,0 @@
-/*
- * THIS FILE IS GENERATED BY setup-styles.ts
- * DO NOT EDIT IT DIRECTLY.
- */
-
-@custom-media --hover (hover: hover);
-@custom-media --reduced-motion (prefers-reduced-motion: reduce);
-@custom-media --mobile (width <= 767.98px);
-@custom-media --desktop-large (width >= 1920px);
-@custom-media --desktop (width >= 1440px);
-@custom-media --tablet-lg (width >= 1024px);
-@custom-media --tablet (width >= 768px);
-@custom-media --mobile (width >= 640px);
-
-:root {
-	--device-width: 640;
-	--device-height: 650;
-
-	--columns: 4;
-	--gap: 16px;
-	--safe: 16px;
-
-	--header-height: 58px;
-
-	--layout-width: calc(100vw - (2 * var(--safe)));
-	--column-width: calc((var(--layout-width) - (var(--columns) - 1) * var(--gap)) / var(--columns));
-
-	--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-	--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-	--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-	--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-	--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-	--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-	--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-	--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-	--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-	--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-	--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-	--ease-gleasing: cubic-bezier(0.4, 0, 0, 1);
-
-	--color-black: #000000;
-	--color-white: #ffffff;
-	--color-orange: #FF4D00;
-	--color-blue: #487CFF;
-	--color-green: #00FF9B;
-	--color-violet: #F101A5;
-	--color-pink: #FF73A6;
-	--color-gray: #666666;
-
-	@variant desktop {
-    --device-width: 1440;
-    --device-height: 816;
-
-    --columns: 12;
-		--gap: 16px;
-		--safe: 16px;
-
-    --header-height: 98px;
-	}
-}
-  

package/packages/create-basement-app/templates/webgpu/lib/styles/css/tailwind.css

@@ -1,132 +0,0 @@
-/*
- * THIS FILE IS GENERATED BY setup-styles.ts
- * DO NOT EDIT IT DIRECTLY.
- */
-
-/** Custom theme **/
-@theme {
-	--breakpoint-*: initial;
-	--breakpoint-desktop-large: 1920px;
-	--breakpoint-desktop: 1440px;
-	--breakpoint-tablet-lg: 1024px;
-	--breakpoint-tablet: 768px;
-	--breakpoint-mobile: 640px;
-
-  --color-*: initial;
-	--color-primary: #ffffff;
-	--color-secondary: #000000;
-	--color-contrast: #FF4D00;
-  --color-black: #000000;
-	--color-white: #ffffff;
-	--color-orange: #FF4D00;
-	--color-blue: #487CFF;
-	--color-green: #00FF9B;
-	--color-violet: #F101A5;
-	--color-pink: #FF73A6;
-	--color-gray: #666666;
-
-  /* gray */
-	--color-gray-50: #F5F5F5;
-	--color-gray-100: #E0E0E0;
-	--color-gray-200: #C2C2C2;
-	--color-gray-300: #A3A3A3;
-	--color-gray-400: #858585;
-	--color-gray-500: #666666;
-	--color-gray-600: #4D4D4D;
-	--color-gray-700: #333333;
-	--color-gray-800: #1A1A1A;
-
-	--spacing: 0.25rem;
-	--spacing-0: 0;
-	--spacing-safe: var(--safe);
-	--spacing-gap: var(--gap);
-  --spacing-header-height: var(--header-height);
-
-  --font-*: initial;
-  --font-mono: var(--geist-mono);
-
-  --ease-*: initial;
-  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-	--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-	--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-	--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-	--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-	--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-	--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-	--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-	--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-	--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-	--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-	--ease-gleasing: cubic-bezier(0.4, 0, 0, 1);
-}
-
-/** Custom theme overwrites **/
-[data-theme=light] {
-  --color-primary: #ffffff;
-	--color-secondary: #000000;
-	--color-contrast: #FF4D00;
-}
-[data-theme=dark] {
-  --color-primary: #000000;
-	--color-secondary: #ffffff;
-	--color-contrast: #FF4D00;
-}
-  
-
-/** Custom static utilities **/
-@utility test-mono {
-  font-family: var(--geist-mono);
-	font-style: normal;
-	font-weight: 400;
-	line-height: 90%;
-	letter-spacing: 0em;
-	font-size: 20px;
-	@variant desktop { font-size: 24px; }
-}
-
-@utility desktop-only {
-  @media (--mobile) {
-    display: none !important;
-  }
-}
-
-@utility mobile-only {
-  @media (--desktop) {
-    display: none !important;
-  }
-}
-
-@utility b-grid {
-	display: grid;
-	grid-template-columns: repeat(var(--columns), 1fr);
-	column-gap: var(--gap);
-}
-
-@utility b-layout-block {
-	margin-inline: auto;
-  width: calc(100% - 2 * var(--safe));
-}
-
-@utility b-layout-block-inner {
-	padding-inline: var(--safe);
-	width: 100%;
-}
-
-@utility b-layout-grid {
-	@apply b-layout-block b-grid;
-}
-
-@utility b-layout-grid-inner {
-	@apply b-layout-block-inner b-grid;
-}
-
-/** Custom variants **/
-@custom-variant light (&:where([data-theme=light], [data-theme=light] *));
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

package/packages/create-basement-app/templates/webgpu/lib/styles/easings.ts

@@ -1,21 +0,0 @@
-export const easings = {
-  "in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
-  "in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-  "in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
-  "in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
-  "in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
-  "in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
-  "out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-  "out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
-  "out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
-  "out-quint": "cubic-bezier(0.23, 1, 0.32, 1)",
-  "out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
-  "out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)",
-  "in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
-  "in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)",
-  "in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)",
-  "in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)",
-  "in-out-expo": "cubic-bezier(1, 0, 0, 1)",
-  "in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
-  gleasing: "cubic-bezier(0.4, 0, 0, 1)",
-}

package/packages/create-basement-app/templates/webgpu/lib/styles/fonts.ts

@@ -1,28 +0,0 @@
-import localFont from "next/font/local"
-
-const mono = localFont({
-  src: [
-    {
-      path: "../../public/fonts/geist/Geist-Mono.woff2",
-      weight: "400",
-      style: "normal",
-    },
-  ],
-  display: "swap",
-  variable: "--geist-mono",
-  preload: true,
-  adjustFontFallback: "Arial",
-  fallback: [
-    "ui-monospace",
-    "SFMono-Regular",
-    "Consolas",
-    "Liberation Mono",
-    "Menlo",
-    "monospace",
-  ],
-})
-
-const fonts = [mono]
-const fontsVariable = fonts.map((font) => font.variable).join(" ")
-
-export { fontsVariable }

package/packages/create-basement-app/templates/webgpu/lib/styles/index.ts

@@ -1,12 +0,0 @@
-/**
- * Styling System
- *
- * Import from barrel:
- *   import { colors, themes, breakpoints } from '@/styles'
- */
-
-export { colors, type Themes, themeNames, themes } from "./colors"
-export type { ThemeName } from "./config"
-export { breakpoints, customSizes, layout, screens } from "./config"
-export { easings } from "./easings"
-export { fontsVariable } from "./fonts"

package/packages/create-basement-app/templates/webgpu/lib/styles/layout.mjs

@@ -1,27 +0,0 @@
-// THIS FILE HAS TO STAY .mjs AS ITS CONSUMED BY POSTCSS
-// EDIT THIS AS NEEDED
-
-const breakpoints = {
-  "desktop-large": 1920,
-  desktop: 1440,
-  "tablet-lg": 1024,
-  tablet: 768,
-  mobile: 640,
-}
-
-const screens = {
-  mobile: { width: breakpoints.mobile, height: 650 },
-  desktop: { width: breakpoints.desktop, height: 816 },
-}
-
-const layout = {
-  columns: { mobile: 4, desktop: 12 },
-  gap: { mobile: 16, desktop: 16 },
-  safe: { mobile: 16, desktop: 16 },
-}
-
-const customSizes = {
-  "header-height": { mobile: 58, desktop: 98 },
-}
-
-export { breakpoints, customSizes, layout, screens }

package/packages/create-basement-app/templates/webgpu/lib/styles/scripts/README.md

@@ -1,29 +0,0 @@
-# Style Generation Scripts
-
-Generate CSS from TypeScript config. Run with `bun setup:styles`.
-
-## Scripts
-
-| Script | Output |
-|--------|--------|
-| `setup-styles.ts` | Orchestrates all generation |
-| `generate-root.ts` | → `css/root.css` |
-| `generate-tailwind.ts` | → `css/tailwind.css` |
-| `generate-scale.ts` | Scale utilities |
-| `postcss-functions.mjs` | `tovw()`, `torem()`, `toem()`, `columns()` |
-
-## Build Flow
-
-```
-TypeScript Config → Generation Scripts → CSS Variables → PostCSS → Output
-```
-
-1. Edit `colors.ts`, `typography.ts`, etc.
-2. Run `bun setup:styles`
-3. Generated CSS is used by PostCSS
-
-## Best Practices
-
-- Always run `bun setup:styles` after config changes
-- Never edit `css/root.css` or `css/tailwind.css` directly
-- Use `bun dev` for development (includes style watching)

package/packages/create-basement-app/templates/webgpu/lib/styles/scripts/generate-root.ts

@@ -1,57 +0,0 @@
-import type { Config } from "../config"
-import { formatObject } from "./utils"
-
-export function generateRoot({
-  breakpoints,
-  colors,
-  customSizes,
-  easings,
-  layout,
-  screens,
-}: Pick<
-  Config,
-  "breakpoints" | "colors" | "customSizes" | "easings" | "layout" | "screens"
->) {
-  return `@custom-media --hover (hover: hover);
-@custom-media --reduced-motion (prefers-reduced-motion: reduce);
-@custom-media --mobile (width <= ${breakpoints.tablet - 0.02}px);
-${formatObject(breakpoints, ([name, value]) => `@custom-media --${name} (width >= ${value}px);`, "\n")}
-
-:root {
-	--device-width: ${screens.mobile.width};
-	--device-height: ${screens.mobile.height};
-
-	${formatObject(layout, ([name, { mobile }]) => {
-    if (name === "columns") return `--columns: ${mobile};`
-
-    return `--${name}: ${mobile}px;`
-  })}
-
-	${formatObject(customSizes, ([name, { mobile }]) => `--${name}: ${mobile}px;`)}
-
-	--layout-width: calc(100vw - (2 * var(--safe)));
-	--column-width: calc((var(--layout-width) - (var(--columns) - 1) * var(--gap)) / var(--columns));
-
-	${formatObject(easings, ([name, value]) => `--ease-${name}: ${value};`)}
-
-	${formatObject(colors, ([name, value]) => `--color-${name}: ${value};`)}
-
-	@variant desktop {
-    --device-width: ${screens.desktop.width};
-    --device-height: ${screens.desktop.height};
-
-    ${formatObject(
-      layout,
-      ([name, { desktop }]) => {
-        if (name === "columns") return `--columns: ${desktop};`
-
-        return `--${name}: ${desktop}px;`
-      },
-      "\n\t\t"
-    )}
-
-    ${formatObject(customSizes, ([name, { desktop }]) => `--${name}: ${desktop}px;`, "\n\t\t")}
-	}
-}
-  `
-}

package/packages/create-basement-app/templates/webgpu/lib/styles/scripts/generate-tailwind.ts

@@ -1,162 +0,0 @@
-import type { Config } from "../config"
-import { formatObject } from "./utils"
-
-export function generateTailwind({
-  breakpoints,
-  colors,
-  customSizes,
-  easings,
-  fonts,
-  palettes,
-  themes,
-  typography,
-}: Pick<
-  Config,
-  | "breakpoints"
-  | "colors"
-  | "customSizes"
-  | "easings"
-  | "fonts"
-  | "palettes"
-  | "themes"
-  | "typography"
->) {
-  // Theme
-  const themeEntries = Object.entries(themes)
-  const firstTheme = themeEntries[0]?.[1] ?? {}
-  const theme = `/** Custom theme **/
-@theme {
-	--breakpoint-*: initial;
-	${formatObject(breakpoints, ([name, value]) => `--breakpoint-${name}: ${value}px;`)}
-
-  --color-*: initial;
-	${formatObject(firstTheme, ([key, value]) => `--color-${key}: ${value};`)}
-  ${formatObject(colors, ([key, value]) => `--color-${key}: ${value};`)}
-
-  ${Object.entries(palettes)
-    .filter(([, scaleValues]) => Object.keys(scaleValues).length > 1)
-    .map(
-      ([paletteName, paletteValues]) =>
-        `/* ${paletteName} */\n\t` +
-        Object.entries(paletteValues)
-          .map(([shade, value]) => `--color-${paletteName}-${shade}: ${value};`)
-          .join("\n\t")
-    )
-    .join("\n\n\t")}
-
-	--spacing: 0.25rem;
-	--spacing-0: 0;
-	--spacing-safe: var(--safe);
-	--spacing-gap: var(--gap);
-  ${formatObject(customSizes, ([key]) => `--spacing-${key}: var(--${key});`)}
-
-  --font-*: initial;
-  ${formatObject(fonts, ([name, variableName]) => `--font-${name}: var(${variableName});`)}
-
-  --ease-*: initial;
-  ${formatObject(easings, ([name, value]) => `--ease-${name}: ${value};`)}
-}`
-
-  // Theme overwrites
-  const themeOverwrites = `
-/** Custom theme overwrites **/
-${formatObject(
-  themes,
-  ([name, value]) => `[data-theme=${name}] {
-  ${formatObject(value, ([key, value]) => `--color-${key}: ${value};`)}
-}`,
-  "\n"
-)}
-  `
-
-  // Utilities
-  const utilities = `
-/** Custom static utilities **/
-${Object.entries(typography)
-  .map(
-    ([name, value]) => `@utility ${name} {
-  ${Object.entries(value)
-    .filter((entry) => entry?.[0] && entry?.[1])
-    .filter((entry) => entry !== undefined)
-    .map(([key, value]) => {
-      if (key === "font-size") {
-        if (typeof value === "number") {
-          return `font-size: ${value}px;`
-        }
-
-        if (
-          typeof value === "object" &&
-          "mobile" in value &&
-          "desktop" in value
-        ) {
-          return [
-            `font-size: ${(value?.mobile as number) ?? 0}px;`,
-            `@variant desktop { font-size: ${(value?.desktop as number) ?? 0}px; }`,
-          ].join("\n\t")
-        }
-
-        return `font-size: ${value as unknown as number}px;`
-      }
-
-      if (typeof value === "object") {
-        return [
-          `${key}: ${value.mobile};`,
-          `@variant desktop { ${key}: ${value.desktop}; }`,
-        ].join("\n\t")
-      }
-
-      return `${key}: ${value};`
-    })
-    .join("\n\t")}
-}`
-  )
-  .join("\n\n")}
-
-@utility desktop-only {
-  @media (--mobile) {
-    display: none !important;
-  }
-}
-
-@utility mobile-only {
-  @media (--desktop) {
-    display: none !important;
-  }
-}
-
-@utility b-grid {
-	display: grid;
-	grid-template-columns: repeat(var(--columns), 1fr);
-	column-gap: var(--gap);
-}
-
-@utility b-layout-block {
-	margin-inline: auto;
-  width: calc(100% - 2 * var(--safe));
-}
-
-@utility b-layout-block-inner {
-	padding-inline: var(--safe);
-	width: 100%;
-}
-
-@utility b-layout-grid {
-	@apply b-layout-block b-grid;
-}
-
-@utility b-layout-grid-inner {
-	@apply b-layout-block-inner b-grid;
-}`
-
-  // Variants
-  const variants = `
-/** Custom variants **/
-${Object.keys(themes)
-  .map(
-    (name) =>
-      `@custom-variant ${name} (&:where([data-theme=${name}], [data-theme=${name}] *));`
-  )
-  .join("\n")}`
-
-  return [theme, themeOverwrites, utilities, variants].join("\n")
-}