@dendelion/func-ui 0.1.1

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@dendelion/func-ui",
+  "version": "0.1.1",
+  "description": "Glossy, noisy, cosy React component library — frosted glass, film grain, and lava glow",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "packageManager": "pnpm@10.12.1",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind": {
+      "types": "./tailwind.ts",
+      "import": "./tailwind.ts",
+      "require": "./tailwind.ts"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "tailwind.ts",
+    "tailwind.config.js",
+    "postcss.config.js",
+    "src/globals.scss",
+    "src/styles",
+    "public/fonts",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:showcase": "vite build --config vite.app.config.ts",
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit",
+    "lint": "biome check ./src && stylelint \"src/**/*.scss\"",
+    "lint:fix": "biome check ./src --write && stylelint \"src/**/*.scss\"",
+    "lint:styles": "stylelint \"src/**/*.scss\"",
+    "check-package": "publint",
+    "ci": "pnpm run check-types && pnpm run lint && pnpm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adooone/func-ui.git"
+  },
+  "homepage": "https://github.com/adooone/func-ui#readme",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "glass",
+    "grain",
+    "film",
+    "funk",
+    "tailwindcss",
+    "design-system"
+  ],
+  "author": "Dendelion",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.40.0",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@dendelion/paper-camp": "^0.13.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "autoprefixer": "^10.4.20",
+    "gsap": "^3.15.0",
+    "postcss": "^8.4.47",
+    "postcss-scss": "^4.0.9",
+    "publint": "^0.3.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass-embedded": "^1.100.0",
+    "stylelint": "^17.14.0",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@biomejs/biome",
+      "@swc/core",
+      "esbuild"
+    ]
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/globals.scss

@@ -0,0 +1,133 @@
+@use './styles/tokens' as *;
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// ─── Fonts ─────────────────────────────────────────────────────
+// Body — Montserrat Alternates
+@font-face {
+  font-family: 'Montserrat Alternates';
+  src: url('/fonts/montserrat-alternates-latin-400-normal.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat Alternates';
+  src: url('/fonts/montserrat-alternates-latin-500-normal.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat Alternates';
+  src: url('/fonts/montserrat-alternates-latin-600-normal.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Montserrat Alternates';
+  src: url('/fonts/montserrat-alternates-latin-700-normal.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+// Titles — KyivType Serif
+@font-face {
+  font-family: 'KyivType Serif';
+  src: url('/fonts/KyivTypeSerif-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'KyivType Serif';
+  src: url('/fonts/KyivTypeSerif-Bold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'KyivType Serif';
+  src: url('/fonts/KyivTypeSerif-Heavy.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+// Accents — Tiny5 (pixel)
+@font-face {
+  font-family: 'Tiny5';
+  src: url('/fonts/tiny5-latin-400-normal.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+// ─── Theme tokens ──────────────────────────────────────────────
+:root {
+  --fui-bg: #{$color-bg-light};
+  --fui-text: #{$color-text-light};
+  --fui-surface: #{$color-surface-light};
+  --fui-scroller: #{$color-scroller-light};
+  --fui-accent: #{$color-accent};
+  --fui-glow: #{$color-glow};
+  --fui-shadow-color: #000;
+  --fui-shadow-offset: 5px 5px 0 0 #000;
+  --fui-card-bg: rgba(255, 255, 255, 0.35);
+  --fui-danger: #c04f4f;
+
+  // Semantic status pairs (fill + text) — one source of truth for stamps,
+  // alerts, toasts, and consumer status maps.
+  --fui-status-neutral-fill: rgba(0, 0, 0, 0.08);
+  --fui-status-neutral-text: #55555a;
+  --fui-status-info-fill: rgba(74, 144, 217, 0.16);
+  --fui-status-info-text: #2f6cb0;
+  --fui-status-success-fill: rgba(43, 165, 121, 0.16);
+  --fui-status-success-text: #1e8460;
+  --fui-status-warning-fill: rgba(224, 158, 66, 0.18);
+  --fui-status-warning-text: #a66a1f;
+  --fui-status-error-fill: rgba(214, 86, 86, 0.16);
+  --fui-status-error-text: #b03a3a;
+}
+
+.dark {
+  --fui-bg: #{$color-bg-dark};
+  --fui-text: #{$color-text-dark};
+  --fui-surface: #{$color-surface-dark};
+  --fui-scroller: #{$color-scroller-dark};
+  --fui-shadow-color: #fff;
+  --fui-shadow-offset: 5px 5px 0 0 #fff;
+  --fui-card-bg: rgba(38, 38, 38, 0.5);
+  --fui-danger: #c25b5b;
+  --fui-status-neutral-fill: rgba(255, 255, 255, 0.1);
+  --fui-status-neutral-text: #b9b9c0;
+  --fui-status-info-fill: rgba(96, 165, 235, 0.2);
+  --fui-status-info-text: #8ec2f2;
+  --fui-status-success-fill: rgba(54, 206, 145, 0.18);
+  --fui-status-success-text: #7de3b6;
+  --fui-status-warning-fill: rgba(235, 178, 92, 0.18);
+  --fui-status-warning-text: #ecc487;
+  --fui-status-error-fill: rgba(226, 106, 106, 0.18);
+  --fui-status-error-text: #eda1a1;
+}
+
+// ─── Base ──────────────────────────────────────────────────────
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-sans;
+  line-height: 1.6;
+  background-color: var(--fui-bg);
+  color: var(--fui-text);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,30 @@
+@use 'tokens' as *;
+
+// ─── Focus ring ────────────────────────────────────────────────
+@mixin focus-ring {
+  outline: 2px solid $color-accent;
+  outline-offset: 2px;
+}
+
+// ─── Frosted glass ─────────────────────────────────────────────
+// The core "glossy transparent" surface: translucent fill behind a
+// heavy backdrop blur. Blur radius is var-backed so consumers can tune it.
+@mixin glass($blur: $blur-glass) {
+  background-color: var(--fui-surface);
+  backdrop-filter: blur(var(--fui-glass-blur, #{$blur}));
+  -webkit-backdrop-filter: blur(var(--fui-glass-blur, #{$blur}));
+  box-shadow: $glass-shadow;
+  // Follow the body's theme fade instead of snapping on toggle.
+  transition: background-color 0.3s ease;
+  // Descendants standing on this surface are already frosted — components
+  // that read this var (Card, secondary Button) drop their own backdrop
+  // blur, which would otherwise re-sample the panel on every scroll tick.
+  --fui-nested-backdrop: none;
+}
+
+// ─── Reduced motion ────────────────────────────────────────────
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}

package/src/styles/_tokens.scss

@@ -0,0 +1,46 @@
+// Canonical source of truth for all design tokens.
+// tailwind.ts derives its values from here — keep them in sync.
+
+// ─── Accent ────────────────────────────────────────────────────
+$color-accent: #2ba579;
+$color-accent-light: #34c08d;
+$color-accent-dark: #1e8460;
+$color-glow: #36ce91; // brighter accent used for the lava glow
+
+// ─── Dark theme ────────────────────────────────────────────────
+$color-bg-dark: #0e0e10;
+$color-text-dark: #ececec;
+$color-surface-dark: rgba(24, 24, 24, 0.72); // frosted panel
+$color-scroller-dark: #222224;
+
+// ─── Light theme ───────────────────────────────────────────────
+$color-bg-light: #fafafa;
+$color-text-light: #0e0e10;
+$color-surface-light: rgba(255, 255, 255, 0.32); // frosted panel
+$color-scroller-light: #eaeaea;
+
+// ─── Spacing ───────────────────────────────────────────────────
+$space-1: 0.25rem;
+$space-2: 0.5rem;
+$space-3: 0.75rem;
+$space-4: 1rem;
+$space-5: 1.25rem;
+$space-6: 1.5rem;
+$space-8: 2rem;
+
+// ─── Type scale ────────────────────────────────────────────────
+$font-family-sans: 'Montserrat Alternates', sans-serif;
+$font-family-title: 'KyivType Serif', Georgia, serif;
+$font-family-mono: 'Montserrat Alternates', sans-serif;
+
+$font-size-sm: 0.875rem;
+$font-size-md: 1rem;
+$font-size-lg: 1.125rem;
+$font-size-xl: 1.25rem;
+$font-size-2xl: 1.5rem;
+
+// ─── Effects ───────────────────────────────────────────────────
+$blur-glass: 50px;
+$grain-duration: 8s;
+$glass-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
+$radius-md: 0px; // the film aesthetic uses hard, square edges

package/tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+import { funcPreset } from './tailwind.ts';
+
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  presets: [funcPreset],
+};

package/tailwind.ts

@@ -0,0 +1,66 @@
+// Color values here must stay in sync with src/styles/_tokens.scss — that file
+// is the canonical source.
+/** @type {import('tailwindcss').Config} */
+export const funcPreset = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Montserrat Alternates"', 'ui-sans-serif', 'sans-serif'],
+        title: ['"KyivType Serif"', 'Georgia', 'serif'],
+        serif: ['"KyivType Serif"', 'Georgia', 'serif'],
+        mono: ['"Montserrat Alternates"', 'ui-sans-serif', 'sans-serif'],
+      },
+      colors: {
+        // Signature accent — a dark green-teal.
+        accent: {
+          DEFAULT: '#2BA579',
+          light: '#34C08D',
+          dark: '#1E8460',
+        },
+        // Brighter accent used for the lava glow.
+        glow: '#36CE91',
+        // Semantic, theme-aware colours (driven by the CSS vars in globals.scss).
+        bg: 'var(--fui-bg)',
+        fg: 'var(--fui-text)',
+        surface: 'var(--fui-surface)',
+      },
+      boxShadow: {
+        offset: 'var(--fui-shadow-offset)',
+        glow: '0 0 50px rgba(54, 206, 145, 0.25)',
+        glass: '0 0 50px rgba(0, 0, 0, 0.3)',
+      },
+      backdropBlur: {
+        glass: '50px',
+      },
+      keyframes: {
+        grain: {
+          '0%, 100%': { transform: 'translate(0, 0)' },
+          '10%': { transform: 'translate(-5%, -10%)' },
+          '20%': { transform: 'translate(-15%, 5%)' },
+          '30%': { transform: 'translate(7%, -25%)' },
+          '40%': { transform: 'translate(-5%, 25%)' },
+          '50%': { transform: 'translate(-15%, 10%)' },
+          '60%': { transform: 'translate(15%, 0%)' },
+          '70%': { transform: 'translate(0%, 15%)' },
+          '80%': { transform: 'translate(3%, -15%)' },
+          '90%': { transform: 'translate(-10%, 10%)' },
+        },
+        'lava-float': {
+          from: { transform: 'translateY(0)' },
+          to: { transform: 'translateY(240px)' },
+        },
+        // Seamless loop for content duplicated exactly twice
+        marquee: {
+          to: { transform: 'translateX(-50%)' },
+        },
+      },
+      animation: {
+        grain: 'grain 8s steps(10) infinite',
+        marquee: 'marquee 40s linear infinite',
+      },
+    },
+  },
+};
+
+export default funcPreset;