@santi020k/theme 1.0.0

package/site.d.ts

@@ -0,0 +1,27 @@
+export {
+  bindPreferredSiteThemeSync,
+  bindSiteNavigation,
+  getPreferredSiteTheme,
+  isSiteTheme,
+  readStoredSiteTheme,
+  rootInDarkMode,
+  setSiteNavOpen,
+  setSiteTheme,
+  SITE_DESKTOP_NAV_QUERY,
+  SITE_HUB_DESKTOP_NAV_QUERY,
+  SITE_REDUCED_MOTION_QUERY,
+  SITE_REVEAL_DARK_BACKGROUND,
+  SITE_REVEAL_LIGHT_BACKGROUND,
+  SITE_THEME_ATTRIBUTE,
+  SITE_THEME_DARK,
+  SITE_THEME_LIGHT,
+  SITE_THEME_PREFERENCE_QUERY,
+  SITE_THEME_STORAGE_KEY,
+  SITE_TOUCH_POINTER_QUERY,
+  syncSiteThemeToggle,
+  type PreferredSiteThemeSyncOptions,
+  type SiteNavigationOptions,
+  type SiteTheme,
+  type SiteThemeOptions,
+  type SiteThemePreferenceOptions
+} from '@santi020k/theme-core/site'

package/site.js

@@ -0,0 +1,22 @@
+export {
+  bindPreferredSiteThemeSync,
+  bindSiteNavigation,
+  getPreferredSiteTheme,
+  isSiteTheme,
+  readStoredSiteTheme,
+  rootInDarkMode,
+  setSiteNavOpen,
+  setSiteTheme,
+  SITE_DESKTOP_NAV_QUERY,
+  SITE_HUB_DESKTOP_NAV_QUERY,
+  SITE_REDUCED_MOTION_QUERY,
+  SITE_REVEAL_DARK_BACKGROUND,
+  SITE_REVEAL_LIGHT_BACKGROUND,
+  SITE_THEME_ATTRIBUTE,
+  SITE_THEME_DARK,
+  SITE_THEME_LIGHT,
+  SITE_THEME_PREFERENCE_QUERY,
+  SITE_THEME_STORAGE_KEY,
+  SITE_TOUCH_POINTER_QUERY,
+  syncSiteThemeToggle
+} from '@santi020k/theme-core/site'

package/tailwind.d.ts

@@ -0,0 +1,24 @@
+export declare const theme: {
+  readonly fonts: {
+    readonly sans: string
+    readonly display: string
+    readonly mono: string
+  }
+  readonly colors: {
+    readonly canvas: string
+    readonly surface: string
+    readonly 'surface-muted': string
+    readonly 'surface-strong': string
+    readonly line: string
+    readonly ink: string
+    readonly 'ink-soft': string
+    readonly 'ink-muted': string
+    readonly brand: string
+    readonly 'brand-solid': string
+    readonly 'brand-soft': string
+    readonly accent: string
+    readonly glow: string
+  }
+}
+
+export declare const tailwindTheme: typeof theme

package/tailwind.js

@@ -0,0 +1,24 @@
+export const theme = {
+  fonts: {
+    sans: '"Montserrat", "Avenir Next", "Segoe UI", sans-serif',
+    display: '"Montserrat", "Avenir Next", sans-serif',
+    mono: '"Montserrat", "SFMono-Regular", "SF Mono", monospace'
+  },
+  colors: {
+    canvas: 'hsl(var(--theme-bg))',
+    surface: 'hsl(var(--surface))',
+    'surface-muted': 'hsl(var(--surface-muted))',
+    'surface-strong': 'hsl(var(--surface-strong))',
+    line: 'hsl(var(--line))',
+    ink: 'hsl(var(--ink))',
+    'ink-soft': 'hsl(var(--ink-soft))',
+    'ink-muted': 'hsl(var(--ink-muted))',
+    brand: 'hsl(var(--brand))',
+    'brand-solid': 'hsl(var(--brand-solid))',
+    'brand-soft': 'hsl(var(--brand-soft))',
+    accent: 'hsl(var(--accent))',
+    glow: 'hsl(var(--glow))'
+  }
+}
+
+export const tailwindTheme = theme

package/tokens/tokens.css

@@ -0,0 +1,88 @@
+/* Santi020k design tokens.
+ * Source of truth: @santi020k/theme
+ */
+
+@custom-variant dark ([data-theme="dark"] &);
+
+:root,
+:root[data-theme="light"] {
+  color-scheme: light;
+  --santi020k-font-sans: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
+  --santi020k-font-display: "Montserrat", "Avenir Next", sans-serif;
+  --santi020k-font-mono: "Montserrat", "SFMono-Regular", "SF Mono", monospace;
+  --theme-bg: 268 20% 98%;
+  --surface: 268 20% 100%;
+  --surface-muted: 268 20% 96%;
+  --surface-strong: 268 15% 90%;
+  --line: 268 15% 84%;
+  --ink: 268 10% 20%;
+  --ink-soft: 268 8% 36%;
+  --ink-muted: 268 6% 28%;
+  --brand: 264 92% 47%;
+  --brand-solid: 264 92% 42%;
+  --brand-soft: 264 60% 94%;
+  --accent: 264 95% 57%;
+  --glow: 264 95% 70%;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --theme-bg: 260 43% 8%;
+  --surface: 260 30% 12%;
+  --surface-muted: 260 25% 15%;
+  --surface-strong: 260 20% 21%;
+  --line: 260 15% 30%;
+  --ink: 260 10% 88%;
+  --ink-soft: 260 8% 72%;
+  --ink-muted: 260 6% 56%;
+  --brand: 264 90% 58%;
+  --brand-solid: 264 90% 52%;
+  --brand-soft: 264 45% 18%;
+  --accent: 264 90% 68%;
+  --glow: 264 85% 50%;
+}
+
+@media (prefers-contrast: more) {
+  :root,
+  :root[data-theme="light"] {
+    --surface-muted: 268 18% 94%;
+    --surface-strong: 268 14% 88%;
+    --line: 268 18% 66%;
+    --ink-soft: 268 12% 24%;
+    --ink-muted: 268 10% 18%;
+    --brand: 264 92% 40%;
+    --brand-solid: 264 92% 38%;
+    --brand-soft: 264 60% 92%;
+  }
+
+  :root[data-theme="dark"] {
+    --surface-muted: 260 25% 15%;
+    --surface-strong: 260 20% 20%;
+    --line: 260 15% 48%;
+    --ink-soft: 260 10% 84%;
+    --ink-muted: 260 8% 76%;
+    --brand: 264 90% 62%;
+    --brand-solid: 264 90% 55%;
+    --brand-soft: 264 45% 22%;
+  }
+}
+
+@theme {
+  --font-sans: var(--santi020k-font-sans);
+  --font-display: var(--santi020k-font-display);
+  --font-mono: var(--santi020k-font-mono);
+
+  --color-canvas: hsl(var(--theme-bg));
+  --color-surface: hsl(var(--surface));
+  --color-surface-muted: hsl(var(--surface-muted));
+  --color-surface-strong: hsl(var(--surface-strong));
+  --color-line: hsl(var(--line));
+  --color-ink: hsl(var(--ink));
+  --color-ink-soft: hsl(var(--ink-soft));
+  --color-ink-muted: hsl(var(--ink-muted));
+  --color-brand: hsl(var(--brand));
+  --color-brand-solid: hsl(var(--brand-solid));
+  --color-brand-soft: hsl(var(--brand-soft));
+  --color-accent: hsl(var(--accent));
+  --color-glow: hsl(var(--glow));
+}

package/tokens/tokens.json

@@ -0,0 +1,120 @@
+{
+  "name": "Santi020k",
+  "packageName": "@santi020k/theme",
+  "colors": [
+    {
+      "name": "theme-bg",
+      "light": "268 20% 98%",
+      "dark": "260 43% 8%",
+      "lightContrast": "268 20% 98%",
+      "darkContrast": "260 43% 8%",
+      "description": "Page background"
+    },
+    {
+      "name": "surface",
+      "light": "268 20% 100%",
+      "dark": "260 30% 12%",
+      "description": "Card and panel surfaces"
+    },
+    {
+      "name": "surface-muted",
+      "light": "268 20% 96%",
+      "dark": "260 25% 15%",
+      "lightContrast": "268 18% 94%",
+      "darkContrast": "260 25% 15%",
+      "description": "Muted surfaces"
+    },
+    {
+      "name": "surface-strong",
+      "light": "268 15% 90%",
+      "dark": "260 20% 21%",
+      "lightContrast": "268 14% 88%",
+      "darkContrast": "260 20% 20%",
+      "description": "Strong surfaces"
+    },
+    {
+      "name": "line",
+      "light": "268 15% 84%",
+      "dark": "260 15% 30%",
+      "lightContrast": "268 18% 66%",
+      "darkContrast": "260 15% 48%",
+      "description": "Borders and dividers"
+    },
+    {
+      "name": "ink",
+      "light": "268 10% 20%",
+      "dark": "260 10% 88%",
+      "description": "Primary text and headings"
+    },
+    {
+      "name": "ink-soft",
+      "light": "268 8% 36%",
+      "dark": "260 8% 72%",
+      "lightContrast": "268 12% 24%",
+      "darkContrast": "260 10% 84%",
+      "description": "Body and secondary text"
+    },
+    {
+      "name": "ink-muted",
+      "light": "268 6% 28%",
+      "dark": "260 6% 56%",
+      "lightContrast": "268 10% 18%",
+      "darkContrast": "260 8% 76%",
+      "description": "Muted labels and captions"
+    },
+    {
+      "name": "brand",
+      "light": "264 92% 47%",
+      "dark": "264 90% 58%",
+      "lightContrast": "264 92% 40%",
+      "darkContrast": "264 90% 62%",
+      "description": "Primary brand purple"
+    },
+    {
+      "name": "brand-solid",
+      "light": "264 92% 42%",
+      "dark": "264 90% 52%",
+      "lightContrast": "264 92% 38%",
+      "darkContrast": "264 90% 55%",
+      "description": "Saturated fills for accessible controls"
+    },
+    {
+      "name": "brand-soft",
+      "light": "264 60% 94%",
+      "dark": "264 45% 18%",
+      "lightContrast": "264 60% 92%",
+      "darkContrast": "264 45% 22%",
+      "description": "Tinted surfaces and selections"
+    },
+    {
+      "name": "accent",
+      "light": "264 95% 57%",
+      "dark": "264 90% 68%",
+      "description": "Hovers and active states"
+    },
+    {
+      "name": "glow",
+      "light": "264 95% 70%",
+      "dark": "264 85% 50%",
+      "description": "Background gradients and highlights"
+    }
+  ],
+  "typography": {
+    "display": "\"Montserrat\", \"Avenir Next\", sans-serif",
+    "body": "\"Montserrat\", \"Avenir Next\", \"Segoe UI\", sans-serif",
+    "mono": "\"Montserrat\", \"SFMono-Regular\", \"SF Mono\", monospace",
+    "source": "google-fonts",
+    "importUrl": "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap",
+    "weights": [
+      100,
+      200,
+      300,
+      400,
+      500,
+      600,
+      700,
+      800,
+      900
+    ]
+  }
+}

package/typography.css

@@ -0,0 +1,9 @@
+/* Santi020k typography tokens.
+ * Font loading is left to the consuming app. The canonical web font is Montserrat.
+ */
+
+:root {
+  --santi020k-font-sans: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
+  --santi020k-font-display: "Montserrat", "Avenir Next", sans-serif;
+  --santi020k-font-mono: "Montserrat", "SFMono-Regular", "SF Mono", monospace;
+}