npm - bsmnt - Versions diffs - 0.0.2 → 0.1.0 - Mend

bsmnt 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (430) hide show

package/packages/create-basement-app/templates/webgl/lib/styles/css/global.css ADDED Viewed

@@ -0,0 +1,85 @@
+/* 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/packages/create-basement-app/templates/webgl/lib/styles/css/index.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* 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/packages/create-basement-app/templates/webgl/lib/styles/css/reset.css ADDED Viewed

@@ -0,0 +1,166 @@
+/***
+    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/packages/create-basement-app/templates/webgl/lib/styles/css/root.css ADDED Viewed

@@ -0,0 +1,68 @@
+/*
+ * 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/webgl/lib/styles/css/tailwind.css ADDED Viewed

@@ -0,0 +1,132 @@
+/*
+ * 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/webgl/lib/styles/easings.ts ADDED Viewed

@@ -0,0 +1,21 @@
+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/webgl/lib/styles/fonts.ts ADDED Viewed

@@ -0,0 +1,28 @@
+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/webgl/lib/styles/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * 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/webgl/lib/styles/layout.mjs ADDED Viewed

@@ -0,0 +1,27 @@
+// 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/webgl/lib/styles/scripts/README.md ADDED Viewed

@@ -0,0 +1,29 @@
+# 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/webgl/lib/styles/scripts/generate-root.ts ADDED Viewed

@@ -0,0 +1,57 @@
+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")}
+	}
+}
+  `
+}