mates-design 0.1.0-beta.2

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "mates-design",
+  "version": "0.1.0-beta.2",
+  "description": "A modern, minimalist and awesome UI component library built on mates",
+  "type": "module",
+  "main": "./dist/mates-design.cjs.js",
+  "module": "./dist/mates-design.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mates-design.es.js",
+      "require": "./dist/mates-design.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./reset.css": "./dist/reset.css"
+  },
+  "files": [
+    "dist",
+    "src/css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib && tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "mates": "*"
+  },
+  "devDependencies": {
+    "happy-dom": "^17.4.4",
+    "highlight.js": "^11.11.1",
+    "typescript": "^5.3.2",
+    "vite": "^6.3.5",
+    "vitest": "^3.0.5"
+  }
+}

package/src/css/reset.css

@@ -0,0 +1,126 @@
+/* mates-design — Minimal Reset */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+body {
+    font-family: var(--md-font-family);
+    font-size: var(--md-text-base);
+    line-height: var(--md-leading-normal);
+    color: var(--md-color-text);
+    background: var(--md-color-background);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
+}
+
+button {
+    cursor: pointer;
+}
+
+a {
+    color: var(--md-color-primary);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+img,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+/* Material Symbols font tweaks */
+.material-symbols-rounded {
+    font-variation-settings:
+        "FILL" 0,
+        "wght" 400,
+        "GRAD" 0,
+        "opsz" 24;
+    font-size: 1.5rem;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+}
+
+/* ── Reduced motion ─────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --md-duration-fast: 0ms;
+        --md-duration-short: 0ms;
+        --md-duration-base: 0ms;
+        --md-duration-medium: 0ms;
+        --md-duration-slow: 0ms;
+    }
+}
+
+/* ── Scrollbars ─────────────────────────────────────────────────────────── */
+
+/* Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--md-scrollbar-thumb) var(--md-scrollbar-track);
+}
+
+/* Chromium / Safari — ::-webkit-scrollbar */
+::-webkit-scrollbar {
+    width: var(--md-scrollbar-width);
+    height: var(--md-scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--md-scrollbar-track);
+    border-radius: var(--md-scrollbar-radius);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--md-scrollbar-thumb);
+    border-radius: var(--md-scrollbar-radius);
+    border: 0.13rem solid transparent;
+    background-clip: content-box;
+    transition: background var(--md-duration-short) var(--md-easing-standard);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--md-scrollbar-thumb-hover);
+    background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: var(--md-scrollbar-thumb-active);
+    background-clip: content-box;
+}
+
+::-webkit-scrollbar-corner {
+    background: var(--md-scrollbar-track);
+}

package/src/css/tokens.css

@@ -0,0 +1,341 @@
+/* mates-design — Design Tokens
+   All CSS custom properties. Override any token on :root to rebrand. */
+
+:root {
+    /* ── Primitive: Blue scale (base #0172ad) ──────────────────────────────── */
+    --md-blue-50: #e8f4fd;
+    --md-blue-100: #c4e3f5;
+    --md-blue-200: #7ec9ed;
+    --md-blue-300: #2fabdf;
+    --md-blue-400: #0289bc;
+    --md-blue-500: #0179a7;
+    --md-blue-600: #0172ad;
+    --md-blue-700: #015a8a;
+    --md-blue-800: #014368;
+    --md-blue-900: #012d47;
+    --md-blue-950: #011c2e;
+
+    /* ── Primitive: Grey scale (slate, slightly cool) ──────────────────────── */
+    --md-grey-50: #f8fafc;
+    --md-grey-100: #f1f5f9;
+    --md-grey-200: #e2e8f0;
+    --md-grey-300: #cbd5e1;
+    --md-grey-400: #94a3b8;
+    --md-grey-500: #64748b;
+    --md-grey-600: #475569;
+    --md-grey-700: #334155;
+    --md-grey-800: #1e293b;
+    --md-grey-900: #0f172a;
+    --md-grey-950: #020617;
+
+    --md-white: #ffffff;
+    --md-black: #000000;
+
+    /* ── Semantic: Primary ─────────────────────────────────────────────────── */
+    --md-color-primary: var(--md-blue-600);
+    --md-color-primary-hover: #0169a0; /* ~8% darker — subtle */
+    --md-color-primary-active: var(
+        --md-blue-700
+    ); /* full step darker on press */
+    --md-color-on-primary: var(--md-white);
+    --md-color-primary-muted: var(--md-blue-50);
+    --md-color-on-primary-muted: var(--md-blue-700);
+
+    /* ── Semantic: Surface ─────────────────────────────────────────────────── */
+    --md-color-background: var(--md-white);
+    --md-color-surface: var(--md-white);
+    --md-color-surface-raised: var(--md-white);
+    --md-color-surface-sunken: var(--md-grey-50);
+    --md-color-surface-overlay: var(--md-grey-100);
+
+    /* ── Semantic: Text ────────────────────────────────────────────────────── */
+    --md-color-text: var(--md-grey-900);
+    --md-color-text-muted: var(--md-grey-500);
+    --md-color-text-placeholder: var(--md-grey-400);
+    --md-color-text-disabled: var(--md-grey-300);
+    --md-color-text-inverse: var(--md-white);
+
+    /* ── Semantic: Border ──────────────────────────────────────────────────── */
+    --md-color-border: var(--md-grey-200);
+    --md-color-border-strong: var(--md-grey-400);
+    --md-color-border-primary: var(--md-blue-600);
+    --md-color-border-focus-input: var(--md-blue-400);
+    --md-color-divider: var(--md-grey-200);
+
+    /* ── Semantic: Focus ───────────────────────────────────────────────────── */
+    --md-color-focus-ring: var(--md-blue-500);
+
+    /* ── Functional: Error / Success / Warning ─────────────────────────────── */
+    --md-color-error: #dc2626;
+    --md-color-error-muted: #fef2f2;
+    --md-color-on-error: #ffffff;
+    --md-color-success: #16a34a;
+    --md-color-success-muted: #f0fdf4;
+    --md-color-on-success: #ffffff;
+    --md-color-warning: #d97706;
+    --md-color-warning-muted: #fffbeb;
+    --md-color-on-warning: #ffffff;
+    --md-color-error-hover: #ca2323;
+    --md-color-error-active: #b91c1c;
+    --md-color-success-hover: #149644;
+    --md-color-success-active: #15803d;
+
+    /* ── Overlay ───────────────────────────────────────────────────────────── */
+    --md-color-scrim: rgba(0, 0, 0, 0.5);
+    --md-color-scrim-light: rgba(0, 0, 0, 0.25);
+
+    /* ── Scrollbar ─────────────────────────────────────────────────────────────── */
+    --md-scrollbar-width: 0.44rem; /* 7px — thin but grippable */
+    --md-scrollbar-track: transparent;
+    --md-scrollbar-thumb: var(--md-grey-300);
+    --md-scrollbar-thumb-hover: var(--md-grey-400);
+    --md-scrollbar-thumb-active: var(--md-grey-500);
+    --md-scrollbar-radius: var(--md-radius-full);
+
+    /* ── State Colors ──────────────────────────────────────────────────────── */
+    --md-state-hover-bg: var(--md-blue-50);
+    --md-state-hover-text: var(--md-grey-900);
+    --md-state-press-bg: var(--md-blue-100);
+    --md-state-press-text: var(--md-blue-800);
+    --md-state-selected-bg: var(--md-blue-100);
+    --md-state-selected-text: var(--md-blue-700);
+    --md-state-selected-border: var(--md-blue-600);
+    --md-state-activated-bg: var(--md-blue-600);
+    --md-state-activated-text: var(--md-white);
+    --md-state-activated-hover-bg: var(--md-blue-700);
+    --md-state-selected-hover-bg: var(--md-blue-200);
+    --md-state-disabled-opacity: 0.38;
+    --md-state-disabled-bg-opacity: 0.1;
+
+    /* ── Glow Effects ──────────────────────────────────────────────────────── */
+    --md-glow-primary: 0 0.19rem 0.63rem rgba(1, 114, 173, 0.22);
+    --md-glow-primary-lg: 0 0.31rem 1.13rem rgba(1, 114, 173, 0.35);
+    --md-glow-focus: 0 0 0 0.25rem rgba(1, 121, 167, 0.2);
+    --md-glow-error: 0 0.19rem 0.63rem rgba(220, 38, 38, 0.2);
+    --md-glow-success: 0 0.19rem 0.63rem rgba(22, 163, 74, 0.2);
+
+    /* ── Focus Ring ────────────────────────────────────────────────────────── */
+    --md-focus-ring-color: var(--md-color-focus-ring);
+    --md-focus-ring-width: 0.13rem;
+    --md-focus-ring-offset: 0.19rem;
+    --md-focus-ring-glow: var(--md-glow-focus);
+
+    /* ── Press Bloom ───────────────────────────────────────────────────────── */
+    --md-press-bloom-opacity: 0.14;
+    --md-press-bloom-blur: 1.13rem;
+    --md-press-bloom-size: 2.5;
+    --md-press-scale: 0.97;
+
+    /* ── Elevation / Shadow ────────────────────────────────────────────────── */
+    --md-elevation-0: none;
+    --md-elevation-1:
+        0 0.06rem 0.19rem rgba(0, 0, 0, 0.06),
+        0 0.06rem 0.13rem rgba(0, 0, 0, 0.08);
+    --md-elevation-2:
+        0 0.25rem 0.38rem rgba(0, 0, 0, 0.07),
+        0 0.13rem 0.25rem rgba(0, 0, 0, 0.06);
+    --md-elevation-3:
+        0 0.63rem 0.94rem rgba(0, 0, 0, 0.08),
+        0 0.25rem 0.38rem rgba(0, 0, 0, 0.05);
+    --md-elevation-4:
+        0 1.25rem 1.56rem rgba(0, 0, 0, 0.08),
+        0 0.5rem 0.63rem rgba(0, 0, 0, 0.05);
+    --md-elevation-5:
+        0 2rem 2.5rem rgba(0, 0, 0, 0.1), 0 0.75rem 1rem rgba(0, 0, 0, 0.06);
+
+    --md-shadow-card: var(--md-elevation-1);
+    --md-shadow-card-hover:
+        0 0.19rem 0.38rem rgba(0, 0, 0, 0.06),
+        0 0.06rem 0.19rem rgba(0, 0, 0, 0.05);
+    --md-shadow-dropdown:
+        0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    --md-shadow-drawer: var(--md-elevation-4);
+    --md-shadow-dialog: var(--md-elevation-5);
+    --md-button-shadow-hover: 0 0.06rem 0.25rem rgba(0, 0, 0, 0.14); /* darker on light bg */
+
+    /* ── Shape / Radius ────────────────────────────────────────────────────── */
+    --md-radius-none: 0;
+    --md-radius-xs: 0.25rem;
+    --md-radius-sm: 0.38rem;
+    --md-radius-md: 0.5rem;
+    --md-radius-lg: 0.75rem;
+    --md-radius-xl: 1rem;
+    --md-radius-2xl: 1.5rem;
+    --md-radius-full: 624.94rem;
+
+    /* ── Typography ────────────────────────────────────────────────────────── */
+    --md-font-family: "Inter", system-ui, -apple-system, sans-serif;
+    --md-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
+
+    --md-text-xs: 0.75rem;
+    --md-text-sm: 0.88rem;
+    --md-text-md: 1rem; /* alias used by several components */
+    --md-text-base: 1rem;
+    --md-text-lg: 1.13rem;
+    --md-text-xl: 1.25rem; /* 1.25rem */
+    --md-text-2xl: 1.5rem; /* 1.5rem */
+    --md-text-3xl: 1.88rem; /* 1.88rem */
+    --md-text-4xl: 2.25rem; /* 2.25rem */
+
+    --md-weight-light: 300;
+    --md-weight-regular: 400;
+    --md-weight-medium: 500;
+    --md-weight-semibold: 600;
+    --md-weight-bold: 700;
+
+    --md-leading-tight: 1.2;
+    --md-leading-snug: 1.375;
+    --md-leading-normal: 1.5;
+    --md-leading-relaxed: 1.625;
+
+    /* ── Spacing ────────────────────────────────────────────────────────────── */
+    --md-space-1: 0.25rem; /* 0.25rem */
+    --md-space-2: 0.5rem; /* 0.5rem */
+    --md-space-3: 0.75rem; /* 0.75rem */
+    --md-space-4: 1rem; /* 1rem */
+    --md-space-5: 1.25rem; /* 1.25rem */
+    --md-space-6: 1.5rem; /* 1.5rem */
+    --md-space-8: 2rem; /* 2rem */
+    --md-space-10: 2.5rem; /* 2.5rem */
+    --md-space-12: 3rem; /* 3rem */
+    --md-space-16: 4rem; /* 4rem */
+
+    /* ── Control sizes (MUI-aligned; md=40px inputs, xl=56px text fields) ──────── */
+    --md-control-height-xs: 2rem; /* compact selects, dense rows */
+    --md-control-height-sm: 2.25rem; /* 36px */
+    --md-control-height-md: 2.5rem; /* 40px — MUI TextField sm / IconButton md */
+    --md-control-height-lg: 3rem; /* 48px — MUI MenuItem default */
+    --md-control-height-xl: 3.5rem; /* hero / large fields */
+    --md-control-padding-x-sm: var(--md-space-3);
+    --md-control-padding-x-md: var(--md-space-4);
+    --md-control-padding-x-lg: 1.38rem; /* 22px — MUI Button large */
+    --md-list-row-min-height: 3rem; /* 48px — MUI MenuItem default */
+
+    /* ── Motion ─────────────────────────────────────────────────────────────── */
+    --md-duration-fast: 80ms;
+    --md-duration-short: 120ms;
+    --md-duration-base: 180ms;
+    --md-duration-medium: 240ms;
+    --md-duration-slow: 360ms;
+    --md-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --md-easing-decelerate: cubic-bezier(0, 0, 0, 1);
+    --md-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
+    --md-easing-spring: cubic-bezier(0.22, 1, 0.36, 1);
+
+    /* ── Motion semantic aliases (map to simplified scale above) ───────────── */
+    --md-duration-short1: var(--md-duration-fast);
+    --md-duration-short2: var(--md-duration-fast);
+    --md-duration-short3: var(--md-duration-short);
+    --md-duration-short4: var(--md-duration-short);
+    --md-duration-medium1: var(--md-duration-base);
+    --md-duration-medium2: var(--md-duration-medium);
+    --md-duration-medium3: var(--md-duration-medium);
+    --md-duration-medium4: var(--md-duration-slow);
+    --md-duration-long1: var(--md-duration-slow);
+    --md-duration-long2: var(--md-duration-slow);
+    --md-duration-long3: var(--md-duration-slow);
+    --md-duration-long4: var(--md-duration-slow);
+    --md-easing-linear: linear;
+    --md-easing-standard-accel: var(--md-easing-accelerate);
+    --md-easing-standard-decel: var(--md-easing-decelerate);
+    --md-easing-emphasized: var(--md-easing-standard);
+    --md-easing-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
+    --md-easing-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
+
+    /* ── Composite transition shorthands ────────────────────────────────────── */
+    --md-transition-fade: opacity var(--md-duration-short)
+        var(--md-easing-standard);
+    --md-transition-expand: transform var(--md-duration-medium)
+        var(--md-easing-decelerate);
+    --md-transition-slide: transform var(--md-duration-medium)
+        var(--md-easing-decelerate);
+    --md-transition-scale: transform var(--md-duration-short)
+        var(--md-easing-decelerate);
+    --md-transition-color:
+        color var(--md-duration-fast) var(--md-easing-standard),
+        background-color var(--md-duration-fast) var(--md-easing-standard);
+}
+
+/* ── Dark mode ──────────────────────────────────────────────────────────── */
+[data-theme="dark"] {
+    --md-color-primary: var(--md-blue-300);
+    --md-color-primary-hover: var(--md-blue-200);
+    --md-color-primary-active: var(--md-blue-100);
+    --md-color-on-primary: var(--md-grey-900);
+    --md-color-primary-muted: var(--md-blue-950);
+    --md-color-on-primary-muted: var(--md-blue-200);
+
+    --md-color-background: #111318;
+    --md-color-surface: #16181f;
+    --md-color-surface-raised: #1c1f28;
+    --md-color-surface-sunken: #0e1015;
+    --md-color-surface-overlay: #21242e;
+
+    --md-color-text: var(--md-grey-50);
+    --md-color-text-muted: var(--md-grey-300);
+    --md-color-text-placeholder: var(--md-grey-400);
+    --md-color-text-disabled: var(--md-grey-600);
+    --md-color-text-inverse: var(--md-grey-900);
+
+    --md-color-border: #1e2535;
+    --md-color-border-strong: var(--md-grey-600);
+    --md-color-border-primary: var(--md-blue-400);
+    --md-color-border-focus-input: var(--md-blue-300);
+
+    --md-color-divider: var(--md-color-border);
+
+    --md-scrollbar-thumb: var(--md-grey-700);
+    --md-scrollbar-thumb-hover: var(--md-grey-600);
+    --md-scrollbar-thumb-active: var(--md-grey-500);
+
+    --md-color-focus-ring: var(--md-blue-400);
+
+    --md-color-error: #f87171;
+    --md-color-error-muted: #450a0a;
+    --md-color-on-error: #450a0a; /* dark text on bright red bg */
+    --md-color-success: #4ade80;
+    --md-color-success-muted: #052e16;
+    --md-color-on-success: #052e16; /* dark text on bright green bg */
+    --md-color-warning: #fbbf24;
+    --md-color-warning-muted: #431407;
+    --md-color-on-warning: #431407; /* dark text on bright amber bg */
+    --md-color-error-hover: #e55a5a;
+    --md-color-error-active: #ef4444;
+    --md-color-success-hover: #34d058;
+    --md-color-success-active: #2ea043;
+
+    --md-state-hover-bg: rgba(1, 114, 173, 0.15);
+    --md-state-hover-text: var(--md-blue-200);
+    --md-state-press-bg: rgba(1, 114, 173, 0.25);
+    --md-state-press-text: var(--md-blue-100);
+    --md-state-selected-bg: rgba(1, 114, 173, 0.28);
+    --md-state-selected-text: var(--md-blue-200);
+    --md-state-selected-border: var(--md-blue-300);
+    --md-state-selected-hover-bg: rgba(1, 114, 173, 0.38);
+    --md-state-activated-bg: var(--md-blue-500);
+    --md-state-activated-hover-bg: var(--md-blue-400);
+
+    --md-glow-primary: 0 0.25rem 1rem rgba(47, 171, 223, 0.4);
+    --md-glow-primary-lg: 0 0.38rem 1.5rem rgba(47, 171, 223, 0.55);
+    --md-glow-focus: 0 0 0 0.25rem rgba(2, 137, 188, 0.28);
+
+    --md-elevation-1:
+        0 0.06rem 0.19rem rgba(0, 0, 0, 0.2),
+        0 0.06rem 0.13rem rgba(0, 0, 0, 0.18);
+    --md-elevation-2:
+        0 0.25rem 0.38rem rgba(0, 0, 0, 0.24),
+        0 0.13rem 0.25rem rgba(0, 0, 0, 0.16);
+    --md-elevation-3:
+        0 0.63rem 0.94rem rgba(0, 0, 0, 0.28),
+        0 0.25rem 0.38rem rgba(0, 0, 0, 0.18);
+    --md-elevation-4:
+        0 1.25rem 1.56rem rgba(0, 0, 0, 0.32),
+        0 0.5rem 0.63rem rgba(0, 0, 0, 0.2);
+    --md-elevation-5:
+        0 2rem 2.5rem rgba(0, 0, 0, 0.36), 0 0.75rem 1rem rgba(0, 0, 0, 0.22);
+    --md-shadow-dropdown:
+        0 5px 5px -3px rgba(0, 0, 0, 0.5), 0 8px 10px 1px rgba(0, 0, 0, 0.42),
+        0 3px 14px 2px rgba(0, 0, 0, 0.36);
+    --md-button-shadow-hover: 0 0.06rem 0.25rem rgba(255, 255, 255, 0.1); /* lighter on dark bg */
+}