@tabelhadev/tabelhawebui 0.28.4

package/dist/theme/theme.css

@@ -0,0 +1,348 @@
+/*
+ * tabelhawebui — Catppuccin theme + "reading someone's source file" aesthetic.
+ * Same design system as the portfolio and tabelhatuiui: mono carries the structure,
+ * sharp borders.
+ *
+ * Usage: import once in the app and the custom properties become the global theme.
+ *   @import '@tabelhadev/tabelhawebui/theme.css';
+ *
+ * The accent is overridable per app via CSS var --twui-accent (or inheriting
+ * from its own [data-theme='dark']).
+ */
+
+@layer twui-theme {
+  :root {
+    --twui-paper: #eff1f5;
+    --twui-paper-raised: #e6e9ef;
+    --twui-ink: #4c4f69;
+    --twui-ink-soft: #6c6f85;
+    --twui-ink-faint: #9ca0b0;
+    --twui-rule: #ccd0da;
+    --twui-accent: #e64553; /* maroon */
+    --twui-accent-soft: color-mix(
+      in srgb,
+      var(--twui-accent) 12%,
+      var(--twui-paper)
+    );
+    --twui-signal: #40a02b;
+    --twui-signal-soft: color-mix(
+      in srgb,
+      var(--twui-signal) 14%,
+      var(--twui-paper)
+    );
+    --twui-danger: #d20f39;
+
+    /* Fonts */
+    --twui-font-mono:
+      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --twui-font-serif: "Newsreader", ui-serif, Georgia, serif;
+
+    /* "Printed" shadow (hard offset) — popover/toast/dropdown */
+    --twui-shadow-offset: 3px 3px 0 0 var(--twui-rule);
+
+    /* Catppuccin Latte — full scale */
+    --twui-latte-base: #eff1f5;
+    --twui-latte-mantle: #e6e9ef;
+    --twui-latte-crust: #dce0e8;
+    --twui-latte-surface0: #ccd0da;
+    --twui-latte-surface1: #bcc0cc;
+    --twui-latte-surface2: #acb0be;
+    --twui-latte-overlay0: #9ca0b0;
+    --twui-latte-overlay1: #8c8fa1;
+    --twui-latte-overlay2: #7c7f93;
+    --twui-latte-subtext0: #6c6f85;
+    --twui-latte-subtext1: #5c5f77;
+    --twui-latte-text: #4c4f69;
+
+    /* Catppuccin Latte raw (for charts, badges, etc.) */
+    --twui-latte-rosewater: #dc8a78;
+    --twui-latte-flamingo: #dd7878;
+    --twui-latte-pink: #ea76cb;
+    --twui-latte-mauve: #8839ef;
+    --twui-latte-red: #d20f39;
+    --twui-latte-maroon: #e64553;
+    --twui-latte-peach: #fe640b;
+    --twui-latte-yellow: #df8e1d;
+    --twui-latte-green: #40a02b;
+    --twui-latte-teal: #179299;
+    --twui-latte-sky: #04a5e5;
+    --twui-latte-sapphire: #209fb5;
+    --twui-latte-blue: #1e66f5;
+    --twui-latte-lavender: #7287fd;
+  }
+
+  [data-theme="dark"],
+  .dark {
+    --twui-paper: #1e1e2e;
+    --twui-paper-raised: #181825;
+    --twui-ink: #cdd6f4;
+    --twui-ink-soft: #a6adc8;
+    --twui-ink-faint: #6c7086;
+    --twui-rule: #313244;
+    --twui-accent: #f5c2e7; /* pink */
+    --twui-accent-soft: color-mix(
+      in srgb,
+      var(--twui-accent) 16%,
+      var(--twui-paper)
+    );
+    --twui-signal: #a6e3a1;
+    --twui-signal-soft: color-mix(
+      in srgb,
+      var(--twui-signal) 16%,
+      var(--twui-paper)
+    );
+    --twui-danger: #f38ba8;
+
+    /* Catppuccin Mocha — full scale */
+    --twui-mocha-base: #1e1e2e;
+    --twui-mocha-mantle: #181825;
+    --twui-mocha-crust: #11111b;
+    --twui-mocha-surface0: #313244;
+    --twui-mocha-surface1: #45475a;
+    --twui-mocha-surface2: #585b70;
+    --twui-mocha-overlay0: #6c7086;
+    --twui-mocha-overlay1: #7f849c;
+    --twui-mocha-overlay2: #9399b2;
+    --twui-mocha-subtext0: #a6adc8;
+    --twui-mocha-subtext1: #bac2de;
+    --twui-mocha-text: #cdd6f4;
+
+    /* Catppuccin Mocha raw */
+    --twui-mocha-rosewater: #f5e0dc;
+    --twui-mocha-flamingo: #f2cdcd;
+    --twui-mocha-pink: #f5c2e7;
+    --twui-mocha-mauve: #cba6f7;
+    --twui-mocha-red: #f38ba8;
+    --twui-mocha-maroon: #eba0ac;
+    --twui-mocha-peach: #fab387;
+    --twui-mocha-yellow: #f9e2af;
+    --twui-mocha-green: #a6e3a1;
+    --twui-mocha-teal: #94e2d5;
+    --twui-mocha-sky: #89dceb;
+    --twui-mocha-sapphire: #74c7ec;
+    --twui-mocha-blue: #89b4fa;
+    --twui-mocha-lavender: #b4befe;
+  }
+
+  /* Per-flavor palette, consumed via var(--twui-<flavor>-<color>) in
+	   components that need discrete colors. Choosing based on the active
+	   theme is the app's responsibility (or the component that knows the theme). */
+  :root,
+  [data-theme="light"] {
+    --twui-base: var(--twui-latte-base);
+    --twui-mantle: var(--twui-latte-mantle);
+    --twui-crust: var(--twui-latte-crust);
+    --twui-surface0: var(--twui-latte-surface0);
+    --twui-surface1: var(--twui-latte-surface1);
+    --twui-surface2: var(--twui-latte-surface2);
+    --twui-overlay0: var(--twui-latte-overlay0);
+    --twui-overlay1: var(--twui-latte-overlay1);
+    --twui-overlay2: var(--twui-latte-overlay2);
+    --twui-subtext0: var(--twui-latte-subtext0);
+    --twui-subtext1: var(--twui-latte-subtext1);
+    --twui-text: var(--twui-latte-text);
+
+    --twui-rosewater: var(--twui-latte-rosewater);
+    --twui-flamingo: var(--twui-latte-flamingo);
+    --twui-pink: var(--twui-latte-pink);
+    --twui-mauve: var(--twui-latte-mauve);
+    --twui-red: var(--twui-latte-red);
+    --twui-maroon: var(--twui-latte-maroon);
+    --twui-peach: var(--twui-latte-peach);
+    --twui-yellow: var(--twui-latte-yellow);
+    --twui-green: var(--twui-latte-green);
+    --twui-teal: var(--twui-latte-teal);
+    --twui-sky: var(--twui-latte-sky);
+    --twui-sapphire: var(--twui-latte-sapphire);
+    --twui-blue: var(--twui-latte-blue);
+    --twui-lavender: var(--twui-latte-lavender);
+  }
+
+  [data-theme="dark"],
+  .dark {
+    --twui-base: var(--twui-mocha-base);
+    --twui-mantle: var(--twui-mocha-mantle);
+    --twui-crust: var(--twui-mocha-crust);
+    --twui-surface0: var(--twui-mocha-surface0);
+    --twui-surface1: var(--twui-mocha-surface1);
+    --twui-surface2: var(--twui-mocha-surface2);
+    --twui-overlay0: var(--twui-mocha-overlay0);
+    --twui-overlay1: var(--twui-mocha-overlay1);
+    --twui-overlay2: var(--twui-mocha-overlay2);
+    --twui-subtext0: var(--twui-mocha-subtext0);
+    --twui-subtext1: var(--twui-mocha-subtext1);
+    --twui-text: var(--twui-mocha-text);
+
+    --twui-rosewater: var(--twui-mocha-rosewater);
+    --twui-flamingo: var(--twui-mocha-flamingo);
+    --twui-pink: var(--twui-mocha-pink);
+    --twui-mauve: var(--twui-mocha-mauve);
+    --twui-red: var(--twui-mocha-red);
+    --twui-maroon: var(--twui-mocha-maroon);
+    --twui-peach: var(--twui-mocha-peach);
+    --twui-yellow: var(--twui-mocha-yellow);
+    --twui-green: var(--twui-mocha-green);
+    --twui-teal: var(--twui-mocha-teal);
+    --twui-sky: var(--twui-mocha-sky);
+    --twui-sapphire: var(--twui-mocha-sapphire);
+    --twui-blue: var(--twui-mocha-blue);
+    --twui-lavender: var(--twui-mocha-lavender);
+  }
+
+  /* Per-app accent — choose via data-accent on <html> (e.g. data-accent="teal").
+     --twui-accent-soft derives automatically (color-mix) and the semantic
+     signal/danger don't change. Without data-accent, falls back to default (maroon / pink). */
+  :root[data-accent="maroon"] {
+    --twui-accent: var(--twui-latte-maroon);
+  }
+  [data-theme="dark"][data-accent="maroon"],
+  .dark[data-accent="maroon"] {
+    --twui-accent: var(--twui-mocha-maroon);
+  }
+
+  :root[data-accent="pink"] {
+    --twui-accent: var(--twui-latte-pink);
+  }
+  [data-theme="dark"][data-accent="pink"],
+  .dark[data-accent="pink"] {
+    --twui-accent: var(--twui-mocha-pink);
+  }
+
+  :root[data-accent="mauve"] {
+    --twui-accent: var(--twui-latte-mauve);
+  }
+  [data-theme="dark"][data-accent="mauve"],
+  .dark[data-accent="mauve"] {
+    --twui-accent: var(--twui-mocha-mauve);
+  }
+
+  :root[data-accent="red"] {
+    --twui-accent: var(--twui-latte-red);
+  }
+  [data-theme="dark"][data-accent="red"],
+  .dark[data-accent="red"] {
+    --twui-accent: var(--twui-mocha-red);
+  }
+
+  :root[data-accent="peach"] {
+    --twui-accent: var(--twui-latte-peach);
+  }
+  [data-theme="dark"][data-accent="peach"],
+  .dark[data-accent="peach"] {
+    --twui-accent: var(--twui-mocha-peach);
+  }
+
+  :root[data-accent="yellow"] {
+    --twui-accent: var(--twui-latte-yellow);
+  }
+  [data-theme="dark"][data-accent="yellow"],
+  .dark[data-accent="yellow"] {
+    --twui-accent: var(--twui-mocha-yellow);
+  }
+
+  :root[data-accent="green"] {
+    --twui-accent: var(--twui-latte-green);
+  }
+  [data-theme="dark"][data-accent="green"],
+  .dark[data-accent="green"] {
+    --twui-accent: var(--twui-mocha-green);
+  }
+
+  :root[data-accent="teal"] {
+    --twui-accent: var(--twui-latte-teal);
+  }
+  [data-theme="dark"][data-accent="teal"],
+  .dark[data-accent="teal"] {
+    --twui-accent: var(--twui-mocha-teal);
+  }
+
+  :root[data-accent="lavender"] {
+    --twui-accent: var(--twui-latte-lavender);
+  }
+  [data-theme="dark"][data-accent="lavender"],
+  .dark[data-accent="lavender"] {
+    --twui-accent: var(--twui-mocha-lavender);
+  }
+
+  :root[data-accent="rosewater"] {
+    --twui-accent: var(--twui-latte-rosewater);
+  }
+  [data-theme="dark"][data-accent="rosewater"],
+  .dark[data-accent="rosewater"] {
+    --twui-accent: var(--twui-mocha-rosewater);
+  }
+
+  :root[data-accent="flamingo"] {
+    --twui-accent: var(--twui-latte-flamingo);
+  }
+  [data-theme="dark"][data-accent="flamingo"],
+  .dark[data-accent="flamingo"] {
+    --twui-accent: var(--twui-mocha-flamingo);
+  }
+
+  :root[data-accent="blue"] {
+    --twui-accent: var(--twui-latte-blue);
+  }
+  [data-theme="dark"][data-accent="blue"],
+  .dark[data-accent="blue"] {
+    --twui-accent: var(--twui-mocha-blue);
+  }
+
+  :root[data-accent="sky"] {
+    --twui-accent: var(--twui-latte-sky);
+  }
+  [data-theme="dark"][data-accent="sky"],
+  .dark[data-accent="sky"] {
+    --twui-accent: var(--twui-mocha-sky);
+  }
+
+  :root[data-accent="sapphire"] {
+    --twui-accent: var(--twui-latte-sapphire);
+  }
+  [data-theme="dark"][data-accent="sapphire"],
+  .dark[data-accent="sapphire"] {
+    --twui-accent: var(--twui-mocha-sapphire);
+  }
+}
+
+@layer twui-base {
+  html {
+    background-color: var(--twui-paper);
+    color-scheme: light;
+  }
+
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--twui-paper);
+    color: var(--twui-ink);
+    font-family: var(--twui-font-serif);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  ::selection {
+    background-color: var(--twui-accent);
+    color: var(--twui-paper);
+  }
+
+  a:focus-visible,
+  button:focus-visible,
+  [tabindex]:focus-visible {
+    outline: 2px solid var(--twui-accent);
+    outline-offset: 3px;
+    border-radius: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tabelhadev/tabelhawebui",
+  "version": "0.28.4",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TAbelhaDev/tabelhawebui.git"
+  },
+  "type": "module",
+  "description": "Tema + chrome compartilhado dos apps web do ianptkcs (Catppuccin + estética 'reading someone's source file').",
+  "scripts": {
+    "build": "svelte-package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepublishOnly": "bun run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "prettier --check .",
+    "format": "prettier --write ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@sveltejs/kit": "^2.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/node": "^26.2.0",
+    "jsdom": "^30.0.1",
+    "prettier": "3.8.1",
+    "svelte": "5.56.10",
+    "svelte-check": "^4.0.0",
+    "vite": "^7.0.0",
+    "vitest": "^4.1.10"
+  }
+}