bsmnt 0.2.9 → 0.2.11

package/src/templates/next-default/lib/styles/colors.ts

@@ -1,63 +0,0 @@
-const palettes = {
-  gray: {
-    50: "#F5F5F5",
-    100: "#E0E0E0",
-    200: "#C2C2C2",
-    300: "#A3A3A3",
-    400: "#858585",
-    500: "#666666",
-    600: "#4D4D4D",
-    700: "#333333",
-    800: "#1A1A1A",
-  },
-  blue: {
-    500: "#487CFF",
-  },
-  green: {
-    500: "#00FF9B",
-  },
-  violet: {
-    500: "#F101A5",
-  },
-  pink: {
-    500: "#FF73A6",
-  },
-  orange: {
-    500: "#FF4D00",
-  },
-}
-
-const colors = {
-  black: "#000000",
-  white: "#ffffff",
-  orange: palettes.orange[500],
-  blue: palettes.blue[500],
-  green: palettes.green[500],
-  violet: palettes.violet[500],
-  pink: palettes.pink[500],
-  gray: palettes.gray[500],
-} as const
-
-const themeNames = ["light", "dark"] as const
-const colorNames = ["primary", "secondary", "contrast"] as const
-
-const themes = {
-  light: {
-    primary: colors.white,
-    secondary: colors.black,
-    contrast: colors.orange,
-  },
-  dark: {
-    primary: colors.black,
-    secondary: colors.white,
-    contrast: colors.orange,
-  },
-} as const satisfies Themes
-
-export { colors, palettes, themeNames, themes }
-
-// UTIL TYPES
-export type Themes = Record<
-  (typeof themeNames)[number],
-  Record<(typeof colorNames)[number], string>
->

package/src/templates/next-default/lib/styles/config.ts

@@ -1,34 +0,0 @@
-import { colors, palettes, themeNames, themes } from "./colors"
-import { easings } from "./easings"
-import { breakpoints, customSizes, layout, screens } from "./layout.mjs"
-import { fonts, typography } from "./typography"
-
-const config = {
-  breakpoints,
-  colors,
-  customSizes,
-  easings,
-  fonts,
-  layout,
-  palettes,
-  screens,
-  themeNames,
-  themes,
-  typography,
-} as const
-
-export {
-  breakpoints,
-  colors,
-  customSizes,
-  easings,
-  fonts,
-  layout,
-  palettes,
-  screens,
-  themeNames,
-  themes,
-  typography,
-}
-export type ThemeName = keyof typeof themes
-export type Config = typeof config

package/src/templates/next-default/lib/styles/css/global.css

@@ -1,85 +0,0 @@
-/* GLOBAL CSS FILE - Contains global styles that shouldn't be reset */
-
-html {
-  --scrollbar-gutter: 0px;
-  scrollbar-gutter: stable; /* This is needed to prevent the scrollbar from jumping */
-
-  &.lenis-stopped {
-    --scrollbar-gutter: var(--scrollbar-width);
-  }
-}
-
-html.overflow-hidden {
-  overflow: hidden;
-  touch-action: none;
-}
-
-body {
-  min-height: 100vh;
-  overscroll-behavior: none;
-  background-color: var(--color-primary);
-  color: var(--color-secondary);
-  display: flex;
-  flex-direction: column;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Selection styling */
-*::selection {
-  background-color: var(--color-contrast);
-  color: var(--color-primary);
-}
-
-/* SVG icon colors */
-svg.icon {
-  path[fill],
-  rect[fill],
-  circle[fill] {
-    fill: currentColor;
-  }
-  path[stroke],
-  rect[stroke],
-  circle[stroke] {
-    stroke: currentColor;
-  }
-}
-
-/* Hover states */
-.link {
-  @media (--hover) {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-/* Focus states */
-*:focus-visible {
-  outline: 2px solid var(--color-contrast);
-}
-
-html.scrollbar-grabbing,
-img {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-
-button {
-  cursor: pointer;
-  /* Fix vertical text centering by trimming font metric space */
-  text-box-trim: both;
-  text-box-edge: cap alphabetic;
-  user-select: none;
-}
-
-html.screenshot {
-  *:not(:has(canvas), canvas, :has(#orchestra), #orchestra, #orchestra *) {
-    /* biome-ignore lint: it's all good */
-    opacity: 0 !important;
-  }
-}

package/src/templates/next-default/lib/styles/css/index.css

@@ -1,6 +0,0 @@
-/* INDEX CSS FILE - Barrel file for importing all the css files */
-@import "./reset.css";
-@import "tailwindcss/utilities.css";
-@import "./tailwind.css";
-@import "./root.css";
-@import "./global.css";

package/src/templates/next-default/lib/styles/css/reset.css

@@ -1,166 +0,0 @@
-/***
-    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
-    GitHub page: https://github.com/elad2412/the-new-css-reset
-***/
-
-/*
-    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
-    - The "symbol *" part is to solve Firefox SVG sprite bug
-    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
- */
-*:where(
-    :not(
-        html,
-        iframe,
-        canvas,
-        img,
-        svg,
-        video,
-        audio,
-        dialog,
-        vercel-live-feedback,
-        nextjs-portal,
-        :where(select, option)
-      ):not(svg *, symbol *)
-  ) {
-  all: unset;
-  display: revert;
-}
-
-/* Preferred box-sizing value */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Fix mobile Safari increase font-size on landscape mode */
-html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-}
-
-/* Reapply the pointer cursor for anchor tags */
-a,
-button {
-  cursor: revert;
-}
-
-/* Remove list styles (bullets/numbers) */
-ol,
-ul,
-menu,
-summary {
-  list-style: none;
-}
-
-/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
-ol {
-  counter-reset: revert;
-}
-
-/* For images to not be able to exceed their container */
-img {
-  max-inline-size: 100%;
-  max-block-size: 100%;
-}
-
-/* removes spacing between cells in tables */
-table {
-  border-collapse: collapse;
-}
-
-/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-input,
-textarea {
-  -webkit-user-select: auto;
-}
-
-/* revert the 'white-space' property for textarea elements on Safari */
-textarea {
-  white-space: revert;
-}
-
-/* minimum style to allow to style meter element */
-meter {
-  -webkit-appearance: revert;
-  appearance: revert;
-}
-
-/* preformatted text - use only for this feature */
-:where(pre) {
-  all: revert;
-  box-sizing: border-box;
-}
-
-/* reset default text opacity of input placeholder */
-::placeholder {
-  color: unset;
-}
-
-/* fix the feature of 'hidden' attribute.
-display:revert; revert to element instead of attribute */
-:where([hidden]) {
-  display: none;
-}
-
-/* revert for bug in Chromium browsers
-- fix for the content editable attribute will work properly.
-- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
-:where([contenteditable]:not([contenteditable="false"])) {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-  overflow-wrap: break-word;
-  -webkit-line-break: after-white-space;
-  -webkit-user-select: auto;
-}
-
-/* apply back the draggable feature - exist only in Chromium and Safari */
-:where([draggable="true"]) {
-  -webkit-user-drag: element;
-}
-
-/* Revert Modal native behavior */
-:where(dialog:modal) {
-  all: revert;
-  box-sizing: border-box;
-}
-
-/* Remove details summary webkit styles */
-::-webkit-details-marker {
-  display: none;
-}
-
-/* Add support for color-scheme */
-:root {
-  color-scheme: light dark;
-}
-
-/* Add support for newer form controls */
-:where(input[type="file"]) {
-  cursor: default;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-/* Improve text rendering */
-html {
-  text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-text-size-adjust: 100%;
-  text-rendering: optimizeLegibility;
-}
-
-/* Remove tap highlight on iOS */
-a,
-button {
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Improve media defaults */
-video,
-audio {
-  max-inline-size: 100%;
-  max-block-size: 100%;
-}

package/src/templates/next-default/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/src/templates/next-default/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/src/templates/next-default/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/src/templates/next-default/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/src/templates/next-default/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/src/templates/next-default/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/src/templates/next-default/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")}
-	}
-}
-  `
-}