@eloovor-design/tokens 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anand Sandilya
+
+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

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# @eloovor-design/tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Color tokens, brand themes, base styles and the Tailwind CSS 3 preset for [eloovor-design](https://design.eloovor.com).
+
+```bash
+bun add @eloovor-design/tokens
+```
+
+```js
+// tailwind.config.js
+import preset from '@eloovor-design/tokens';
+
+export default { presets: [preset], content: ['./src/**/*.{ts,tsx}'] };
+```
+
+```css
+/* src/index.css */
+@import '@eloovor-design/tokens/tokens.css';
+@import '@eloovor-design/tokens/themes/eloovor.css'; /* or your own theme */
+@import '@eloovor-design/tokens/base.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+| File                 | What it is                                                        |
+| -------------------- | ----------------------------------------------------------------- |
+| `tokens.css`         | The shared base: every color role in light and dark, radius       |
+| `themes/*.css`       | A brand: color ramps, the hues neutrals lean toward, fonts        |
+| `base.css`           | Border, page and selection defaults the components assume         |
+| `tailwind-preset.js` | Tailwind names for the tokens, radius, shadows, fonts, animations |
+
+To make your own theme, copy `themes/template.css` into your app. The components come from the shadcn registry; setup, the theme contract and the rules are in the [repository README](https://github.com/anand-san/eloovor-design#readme).

package/base.css

@@ -0,0 +1,27 @@
+/*
+ * eloovor-design base element styles. Import it with the other @imports at
+ * the top of the app's CSS; `@layer base` puts it after Tailwind's preflight.
+ * Components assume borders default to the border token and the page sits
+ * on the background token.
+ */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: hsl(var(--border));
+  }
+
+  html,
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection {
+    background-color: hsl(var(--highlight) / 0.55);
+    color: hsl(var(--highlight-foreground));
+  }
+}

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@eloovor-design/tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Design tokens, themes and the Tailwind preset for eloovor-design",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anand-san/eloovor-design.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://design.eloovor.com",
+  "keywords": [
+    "design-tokens",
+    "tailwindcss",
+    "tailwind-preset",
+    "design-system"
+  ],
+  "exports": {
+    ".": "./tailwind-preset.js",
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./tokens.css": "./tokens.css",
+    "./themes/*": "./themes/*",
+    "./base.css": "./base.css"
+  },
+  "files": [
+    "tokens.css",
+    "base.css",
+    "themes",
+    "tailwind-preset.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,106 @@
+import tailwindcssAnimate from 'tailwindcss-animate';
+
+/**
+ * Tailwind names for the eloovor-design tokens (tokens.css plus a theme from
+ * themes/). An app's tailwind.config.js uses this as a preset and adds only
+ * its own domain colors and motion.
+ */
+const token = name => `hsl(var(--${name}))`;
+const ramp = name =>
+  Object.fromEntries(
+    [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(step => [
+      step,
+      token(`${name}-${step}`),
+    ]),
+  );
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      // Radius by role: sm for chips, md for fields, lg for small cards,
+      // xl for section cards, 2xl for dialogs. Buttons are pills.
+      borderRadius: {
+        sm: 'calc(var(--radius) - 4px)',
+        md: 'calc(var(--radius) - 2px)',
+        lg: 'var(--radius)',
+        xl: 'calc(var(--radius) + 4px)',
+        '2xl': 'calc(var(--radius) + 8px)',
+      },
+      // The faces come from the theme (--font-sans, --font-display)
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+        display: ['var(--font-display)'],
+      },
+      // Ink-tinted shadows, only for things that float: menus, dialogs, toasts
+      boxShadow: {
+        sm: '0 1px 2px hsl(var(--shadow-color) / 0.06)',
+        DEFAULT:
+          '0 1px 3px hsl(var(--shadow-color) / 0.08), 0 1px 2px hsl(var(--shadow-color) / 0.04)',
+        md: '0 4px 12px -2px hsl(var(--shadow-color) / 0.1), 0 2px 4px hsl(var(--shadow-color) / 0.04)',
+        lg: '0 12px 32px -8px hsl(var(--shadow-color) / 0.18), 0 2px 6px hsl(var(--shadow-color) / 0.06)',
+        xl: '0 24px 56px -12px hsl(var(--shadow-color) / 0.26), 0 4px 12px hsl(var(--shadow-color) / 0.08)',
+      },
+      colors: {
+        background: token('background'),
+        foreground: token('foreground'),
+        surface: token('surface'),
+        card: { DEFAULT: token('card'), foreground: token('card-foreground') },
+        popover: {
+          DEFAULT: token('popover'),
+          foreground: token('popover-foreground'),
+        },
+        muted: {
+          DEFAULT: token('muted'),
+          foreground: token('muted-foreground'),
+        },
+        primary: {
+          DEFAULT: token('primary'),
+          foreground: token('primary-foreground'),
+        },
+        brand: {
+          DEFAULT: token('brand'),
+          foreground: token('brand-foreground'),
+          ...ramp('brand'),
+        },
+        highlight: {
+          DEFAULT: token('highlight'),
+          foreground: token('highlight-foreground'),
+          ...ramp('highlight'),
+        },
+        destructive: {
+          DEFAULT: token('destructive'),
+          foreground: token('destructive-foreground'),
+        },
+        success: {
+          DEFAULT: token('success'),
+          foreground: token('success-foreground'),
+        },
+        warning: {
+          DEFAULT: token('warning'),
+          foreground: token('warning-foreground'),
+        },
+        info: { DEFAULT: token('info'), foreground: token('info-foreground') },
+        border: token('border'),
+        input: token('input'),
+        ring: token('ring'),
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+};

package/themes/eloovor.css

@@ -0,0 +1,62 @@
+/*
+ * Eloovor theme: "ink and highlighter".
+ *
+ * The logo violet does the work of a pen: primary actions, focus,
+ * selection. Neutrals are that same ink, thinned, so greys lean slightly
+ * violet instead of reading as dead grey. Marigold is the highlighter: a
+ * fill for the few things that should jump out, like matched keywords or
+ * Elo's suggestions. It is never used for text on white.
+ *
+ * Import after tokens.css. Fonts are loaded by the app
+ * (@fontsource-variable/figtree, @fontsource-variable/bricolage-grotesque).
+ */
+
+:root,
+.force-light-mode,
+.dark .force-light-mode {
+  --tint-hue: 252;
+  --ink-hue: 255;
+
+  --font-sans:
+    'Figtree Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    sans-serif;
+  --font-display:
+    'Bricolage Grotesque Variable', 'Figtree Variable', ui-sans-serif,
+    system-ui, sans-serif;
+
+  /* Brand ramp, built around the logo violet #574a7d (brand-600) */
+  --brand-50: 255 33% 97%;
+  --brand-100: 255 33% 94%;
+  --brand-200: 255 30% 87%;
+  --brand-300: 255 29% 77%;
+  --brand-400: 255 26% 64%;
+  --brand-500: 255 24% 51%;
+  --brand-600: 255 26% 39%;
+  --brand-700: 255 28% 32%;
+  --brand-800: 255 30% 25%;
+  --brand-900: 255 32% 19%;
+  --brand-950: 255 36% 12%;
+
+  /* Highlight ramp: marigold */
+  --highlight-50: 46 100% 96%;
+  --highlight-100: 45 97% 89%;
+  --highlight-200: 44 95% 79%;
+  --highlight-300: 42 93% 68%;
+  --highlight-400: 40 91% 58%;
+  --highlight-500: 37 88% 50%;
+  --highlight-600: 33 85% 42%;
+  --highlight-700: 29 80% 35%;
+  --highlight-800: 26 70% 29%;
+  --highlight-900: 24 64% 23%;
+  --highlight-950: 22 70% 12%;
+}
+
+.dark {
+  --tint-hue: 255;
+  --ink-hue: 250;
+
+  --primary: 255 48% 78%; /* lavender, dark text on it */
+  --brand: 255 44% 74%;
+  --highlight: 42 86% 62%;
+  --ring: 255 48% 72%;
+}

package/themes/template.css

@@ -0,0 +1,61 @@
+/*
+ * Starting point for a new app's theme. Copy it into the app, rename it,
+ * and replace the values. It works as is, with a teal brand, a lemon
+ * highlighter and system fonts.
+ *
+ * Import after tokens.css. Everything else (surfaces, feedback colors,
+ * lines, radius) comes from the base and follows these hues.
+ *
+ * Checks before shipping a theme:
+ * - --brand-600 on white and white on --brand-600 are at least 4.5:1.
+ * - --highlight-300 behind --highlight-950 text is at least 4.5:1.
+ * - --tint-hue is the brand hue, or near it, so greys feel related.
+ * - Look at every Storybook story in light and dark.
+ */
+
+:root,
+.force-light-mode,
+.dark .force-light-mode {
+  /* Neutrals lean toward this hue; text and light shadows use --ink-hue */
+  --tint-hue: 190;
+  --ink-hue: 195;
+
+  /* Optional. Load the font files in the app. */
+  /* --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; */
+  /* --font-display: 'Fraunces Variable', var(--font-sans); */
+
+  /* Brand ramp. --brand-600 is the primary button. */
+  --brand-50: 185 45% 96%;
+  --brand-100: 186 45% 91%;
+  --brand-200: 187 42% 82%;
+  --brand-300: 188 40% 69%;
+  --brand-400: 189 38% 53%;
+  --brand-500: 190 45% 40%;
+  --brand-600: 191 55% 31%;
+  --brand-700: 192 55% 25%;
+  --brand-800: 193 52% 20%;
+  --brand-900: 194 50% 16%;
+  --brand-950: 196 55% 9%;
+
+  /* Highlight ramp. --highlight-300 is the marker fill. */
+  --highlight-50: 60 100% 96%;
+  --highlight-100: 58 97% 88%;
+  --highlight-200: 56 95% 78%;
+  --highlight-300: 54 92% 66%;
+  --highlight-400: 51 90% 55%;
+  --highlight-500: 48 88% 47%;
+  --highlight-600: 44 85% 39%;
+  --highlight-700: 40 80% 32%;
+  --highlight-800: 36 70% 26%;
+  --highlight-900: 32 64% 21%;
+  --highlight-950: 30 70% 11%;
+}
+
+.dark {
+  --tint-hue: 195;
+  --ink-hue: 190;
+
+  /* Optional: the base uses brand-300 and highlight-300 here */
+  /* --primary: 188 50% 70%; */
+  /* --ring: 188 50% 64%; */
+}

package/tokens.css

@@ -0,0 +1,129 @@
+/*
+ * eloovor-design base tokens: every color role, light and dark.
+ *
+ * Values are bare HSL channels so Tailwind opacity modifiers keep working
+ * (bg-success/10, text-brand/80). Tailwind names for them live in
+ * tailwind.preset.js.
+ *
+ * This file holds what every app shares: the neutral surfaces, feedback
+ * colors, lines, radius and the paper reset. The brand comes from a theme
+ * (themes/*.css), imported after this file. A theme supplies:
+ *
+ *   --brand-50 … --brand-950       the primary color ramp
+ *   --highlight-50 … --highlight-950 the highlighter ramp
+ *   --tint-hue                     the hue neutrals lean toward
+ *   --ink-hue                      the hue of text and light-mode shadows
+ *   --font-sans, --font-display    optional, system fonts otherwise
+ *
+ * and may override any role below, usually primary, brand, highlight and
+ * ring in dark mode.
+ */
+
+/*
+ * Light values. `.dark .force-light-mode` is listed here so printed pages
+ * stay light inside dark mode; its specificity beats `.dark`.
+ */
+:root,
+.force-light-mode,
+.dark .force-light-mode {
+  color-scheme: light;
+
+  --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-display: var(--font-sans);
+
+  /* Surfaces: a tinted canvas, white cards that sit on it */
+  --background: var(--tint-hue) 33% 99%;
+  --foreground: var(--ink-hue) 30% 13%; /* ink */
+  --surface: var(--tint-hue) 26% 96.5%; /* soft section cards */
+  --card: 0 0% 100%; /* outline cards */
+  --card-foreground: var(--ink-hue) 30% 13%;
+  --popover: 0 0% 100%; /* menus, popovers, dialogs */
+  --popover-foreground: var(--ink-hue) 30% 13%;
+  --muted: var(--tint-hue) 20% 93.5%;
+  --muted-foreground: var(--tint-hue) 10% 42%; /* secondary text, 5.6:1 on the canvas */
+
+  /* Actions and brand */
+  --primary: var(--brand-600); /* main buttons, selection, child card tints */
+  --primary-foreground: 0 0% 100%;
+  --brand: var(--brand-600);
+  --brand-foreground: 0 0% 100%;
+  --highlight: var(--highlight-300); /* highlighter fill */
+  --highlight-foreground: var(--highlight-950);
+  --destructive: 2 58% 47%; /* brick red, 5.6:1 on white */
+  --destructive-foreground: 0 0% 100%;
+
+  /* Feedback */
+  --success: 152 62% 27%; /* leaf green */
+  --success-foreground: 0 0% 100%;
+  --warning: 26 90% 36%; /* burnt orange, kept apart from a yellow highlight */
+  --warning-foreground: 0 0% 100%;
+  --info: 214 72% 44%; /* ink blue */
+  --info-foreground: 0 0% 100%;
+
+  /* Lines */
+  --border: var(--tint-hue) 20% 90%;
+  --input: var(--tint-hue) 16% 84%; /* a step darker than border, so fields read as fields */
+  --ring: var(--brand-500);
+
+  /* Shadows are tinted with ink, never pure black */
+  --shadow-color: var(--ink-hue) 30% 20%;
+
+  --radius: 0.625rem;
+}
+
+.dark {
+  color-scheme: dark;
+
+  /* Surfaces: deep ink, not charcoal */
+  --background: var(--tint-hue) 20% 8%;
+  --foreground: var(--ink-hue) 22% 92%;
+  --surface: var(--tint-hue) 17% 11%;
+  --card: var(--tint-hue) 17% 11%;
+  --card-foreground: var(--ink-hue) 22% 92%;
+  --popover: var(--tint-hue) 17% 12.5%;
+  --popover-foreground: var(--ink-hue) 22% 92%;
+  --muted: var(--tint-hue) 14% 16%;
+  --muted-foreground: var(--ink-hue) 10% 66%;
+
+  /* Light brand steps with dark text on them; themes usually tune these */
+  --primary: var(--brand-300);
+  --primary-foreground: var(--brand-950);
+  --brand: var(--brand-300);
+  --brand-foreground: var(--brand-950);
+  --highlight: var(--highlight-300);
+  --highlight-foreground: var(--highlight-950);
+  --destructive: 2 62% 67%;
+  --destructive-foreground: 2 70% 14%;
+
+  --success: 150 46% 58%;
+  --success-foreground: 152 60% 10%;
+  --warning: 30 88% 62%;
+  --warning-foreground: 24 80% 12%;
+  --info: 214 85% 70%;
+  --info-foreground: 220 60% 14%;
+
+  --border: var(--tint-hue) 14% 18%;
+  --input: var(--tint-hue) 13% 25%;
+  --ring: var(--brand-400);
+
+  --shadow-color: var(--tint-hue) 40% 2%;
+}
+
+/*
+ * Printed pages (resumes, documents) are paper, not app: plain neutral
+ * greys and a print font, so the preview matches the download.
+ */
+.force-light-mode,
+.dark .force-light-mode {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --surface: 0 0% 98%;
+  --card-foreground: 0 0% 3.9%;
+  --popover-foreground: 0 0% 3.9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  font-family: Helvetica, Arial, sans-serif;
+}