@sckyzo/cosmos-theme 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+All notable changes to `@sckyzo/cosmos-theme` are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.0.1] - 2026-05-20
+
+First test release.
+
+### Added
+
+- Tailwind 4 theme (`css/tailwind-tokens.css`) — design tokens exposed as
+  `@theme` so consumer projects inherit the Cosmos scale, palette and radii.
+- Universal CSS variables (`css/css-vars.css`) — light/dark mode surfaces
+  (`--color-bg-base`, `--color-text-base`, brand ramp, status colors).
+- Font face declarations (`css/fonts.css`) — Outfit (display/body) and
+  JetBrains Mono (code), distributed via `@fontsource/*`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SckyzO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# @sckyzo/cosmos-theme
+
+Cosmos design tokens — CSS only.
+
+Provides three CSS files consumable by any framework:
+
+| Import                          | Purpose                                                                |
+| ------------------------------- | ---------------------------------------------------------------------- |
+| `@sckyzo/cosmos-theme/tailwind` | Tailwind 4 `@theme` block (palette, fonts, shadows, brand colors)      |
+| `@sckyzo/cosmos-theme/vars`     | Universal CSS custom properties (bg, text, border, accent + dark mode) |
+| `@sckyzo/cosmos-theme/fonts`    | `@fontsource` font imports (Outfit + JetBrains Mono)                   |
+
+## Usage
+
+### With Tailwind 4 (recommended for React apps)
+
+```css
+/* src/index.css */
+@import '@sckyzo/cosmos-theme/fonts';
+@import '@sckyzo/cosmos-theme/tailwind';
+@import 'tailwindcss';
+@import '@sckyzo/cosmos-theme/vars';
+```
+
+### Without Tailwind (e.g. Docusaurus)
+
+```css
+@import '@sckyzo/cosmos-theme/fonts';
+@import '@sckyzo/cosmos-theme/vars';
+/* Then reference vars: var(--color-brand-500), var(--color-bg-base), etc. */
+```
+
+## Tokens
+
+See [`css/tailwind-tokens.css`](css/tailwind-tokens.css) for the full source.
+
+Categories:
+
+- **Brand palette** : `--color-brand-25` to `--color-brand-950`
+- **Semantic colors** : `--color-success-*`, `--color-error-*`, `--color-warn-*`
+- **Status** : `--color-status-{ok,warn,crit,unknown}`
+- **Typography** : `--font-sans` (Outfit), `--font-mono` (JetBrains Mono)
+- **Shadows** : `--shadow-card`, `--shadow-card-hover`
+- **Layout vars** (dark-mode aware): `--color-bg-{base,panel,elevated}`, `--color-text-{base,primary,secondary,muted}`, `--color-border`, `--color-accent`
+
+## License
+
+MIT — see [LICENSE](../../LICENSE).

package/css/css-vars.css

@@ -0,0 +1,52 @@
+/* Cosmos CSS variables — universal (work with or without Tailwind).
+ *
+ * Light mode is :root (default). Dark mode is .dark — applied by the
+ * consumer's theme switcher (ThemeContext, etc.) on the <html> element.
+ *
+ * Consumers reference these via var(--color-bg-base), var(--color-text-primary), etc.
+ * Tailwind 4 utilities (bg-accent-primary, etc.) are bridged via tailwind-tokens.css.
+ */
+
+:root {
+  /* ── Surfaces ──────────────────────────────────────────────────────────── */
+  --color-bg-base: #f9fafb;
+  --color-bg-panel: #fff;
+  --color-bg-elevated: #fff;
+
+  /* ── Borders ───────────────────────────────────────────────────────────── */
+  --color-border: #d0d5dd;
+
+  /* ── Text ──────────────────────────────────────────────────────────────── */
+  --color-text-base: #101828;
+  --color-text-primary: #101828;
+  --color-text-secondary: #667085;
+  --color-text-muted: #98a2b3;
+
+  /* ── Accent ────────────────────────────────────────────────────────────── */
+  --color-accent: #465fff;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --color-bg-base: #0c111d;
+  --color-bg-panel: #1a2231;
+  --color-bg-elevated: #1d2939;
+
+  --color-border: #344054;
+
+  --color-text-base: #e4e7ec;
+  --color-text-primary: #fff;
+  --color-text-secondary: #98a2b3;
+  --color-text-muted: #667085;
+
+  --color-accent: #465fff;
+}
+
+/* Smooth theme switching transition — opt-in via .cosmos-bg-transition class
+   on the app shell (not body, to avoid transitioning every DOM element). */
+.cosmos-bg-transition {
+  transition-property: color, background-color, border-color;
+  transition-duration: 500ms;
+  transition-timing-function: ease;
+}

package/css/fonts.css

@@ -0,0 +1,13 @@
+/* Cosmos fonts — self-hosted via @fontsource (no internet required at runtime).
+   Consumers must install @fontsource/outfit and @fontsource/jetbrains-mono as deps. */
+
+@import '@fontsource/outfit/300.css';
+@import '@fontsource/outfit/400.css';
+@import '@fontsource/outfit/500.css';
+@import '@fontsource/outfit/600.css';
+@import '@fontsource/outfit/700.css';
+@import '@fontsource/outfit/800.css';
+
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/500.css';
+@import '@fontsource/jetbrains-mono/700.css';

package/css/tailwind-tokens.css

@@ -0,0 +1,78 @@
+/* Cosmos Tailwind 4 theme — @theme block (generates Tailwind utility classes).
+ *
+ * Usage:
+ *   @import '@sckyzo/cosmos-theme/fonts';
+ *   @import '@sckyzo/cosmos-theme/tailwind';
+ *   @import 'tailwindcss';
+ *   @import '@sckyzo/cosmos-theme/vars';
+ *
+ * The dark variant is class-based (.dark) — applied by the consumer's theme switcher.
+ */
+
+/* Tailwind dark variant: respond to the .dark class set by the consumer's ThemeContext,
+   instead of (or in addition to) prefers-color-scheme. */
+@custom-variant dark (&:is(.dark, .dark *));
+
+@theme {
+  /* ── Typography ─────────────────────────────────────────────────────────── */
+  --font-sans: 'Outfit', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* ── Status colors — health indicators, badges, alerts ─────────────────── */
+  --color-status-ok: #10b981;
+  --color-status-warn: #f59e0b;
+  --color-status-crit: #ef4444;
+  --color-status-unknown: #6b7280;
+
+  /* ── Card shadows — work on both light and dark backgrounds ────────────── */
+  --shadow-card: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%);
+  --shadow-card-hover: 0 10px 25px rgb(0 0 0 / 50%), 0 4px 6px rgb(0 0 0 / 20%);
+
+  /* ── TailAdmin elevation shadows (theme.shadow-{xs,sm,md,lg,xl}) ───────── */
+  --shadow-theme-xs: 0px 1px 2px 0px rgb(16 24 40 / 5%);
+  --shadow-theme-sm: 0px 1px 3px 0px rgb(16 24 40 / 10%), 0px 1px 2px 0px rgb(16 24 40 / 6%);
+  --shadow-theme-md: 0px 4px 8px -2px rgb(16 24 40 / 10%), 0px 2px 4px -2px rgb(16 24 40 / 6%);
+  --shadow-theme-lg: 0px 12px 16px -4px rgb(16 24 40 / 8%), 0px 4px 6px -2px rgb(16 24 40 / 3%);
+  --shadow-theme-xl: 0px 20px 24px -4px rgb(16 24 40 / 8%), 0px 8px 8px -4px rgb(16 24 40 / 3%);
+  --shadow-focus-ring: 0px 0px 0px 4px rgb(70 95 255 / 12%);
+
+  /* ── Brand palette (TailAdmin blue) ────────────────────────────────────── */
+  --color-brand-25: #f2f7ff;
+  --color-brand-50: #ecf3ff;
+  --color-brand-100: #dde9ff;
+  --color-brand-200: #c2d6ff;
+  --color-brand-300: #9cb9ff;
+  --color-brand-400: #7592ff;
+  --color-brand-500: #465fff;
+  --color-brand-600: #3641f5;
+  --color-brand-700: #2a31d8;
+  --color-brand-800: #252dae;
+  --color-brand-900: #262e89;
+  --color-brand-950: #161950;
+
+  /* Dark gray aligned with Tailwind gray-900 — keeps SectionCard bg matching body bg */
+  --color-gray-dark: #111827;
+
+  /* ── Semantic colors ───────────────────────────────────────────────────── */
+  --color-success-25: #f6fef9;
+  --color-success-50: #ecfdf3;
+  --color-success-100: #d1fadf;
+  --color-success-500: #12b76a;
+  --color-success-600: #039855;
+
+  --color-error-25: #fffbfa;
+  --color-error-50: #fef3f2;
+  --color-error-100: #fee4e2;
+  --color-error-500: #f04438;
+  --color-error-600: #d92d20;
+
+  --color-warning-25: #fffcf5;
+  --color-warning-50: #fffaeb;
+  --color-warning-100: #fef0c7;
+  --color-warning-500: #f79009;
+  --color-warning-600: #dc6803;
+
+  /* ── Bridges: aliases that pull values from CSS vars (defined in css-vars.css)
+     so utilities like bg-accent-primary stay in sync with theme switcher. */
+  --color-accent-primary: var(--color-accent);
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sckyzo/cosmos-theme",
+  "version": "0.0.1",
+  "description": "Cosmos design tokens — Tailwind 4 theme + universal CSS variables (palette, fonts, dark mode)",
+  "license": "MIT",
+  "author": "SckyzO",
+  "homepage": "https://github.com/SckyzO/cosmos/tree/main/packages/theme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SckyzO/cosmos.git",
+    "directory": "packages/theme"
+  },
+  "type": "module",
+  "main": "./css/tailwind-tokens.css",
+  "exports": {
+    ".": "./css/tailwind-tokens.css",
+    "./tailwind": "./css/tailwind-tokens.css",
+    "./vars": "./css/css-vars.css",
+    "./fonts": "./css/fonts.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "css/",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/outfit": "^5.2.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "tailwindcss",
+    "tailwind-v4",
+    "css-variables",
+    "cosmos"
+  ],
+  "scripts": {
+    "lint": "echo 'CSS-only package, no JS lint needed'",
+    "lint:fix": "echo 'CSS-only package, no JS lint needed'",
+    "typecheck": "echo 'CSS-only package, no TS check needed'",
+    "test": "echo 'CSS-only package, no tests yet'",
+    "build": "echo 'CSS-only package, no build step needed'"
+  }
+}