@tale-ui/core 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +99 -0
  2. package/dist/style.css +4509 -0
  3. package/package.json +20 -0
  4. package/src/foundations/_base-elements.css +42 -0
  5. package/src/foundations/_text-utilities.css +73 -0
  6. package/src/foundations/_typography.css +188 -0
  7. package/src/index.css +38 -0
  8. package/src/layout/_centering.css +277 -0
  9. package/src/layout/_flex.css +98 -0
  10. package/src/layout/_gap.css +455 -0
  11. package/src/layout/_grid.css +1852 -0
  12. package/src/themes/_color-modes.css +165 -0
  13. package/src/themes/_color-themes.css +208 -0
  14. package/src/themes/_neutral-themes.css +198 -0
  15. package/src/tokens/_base.css +8 -0
  16. package/src/tokens/_colors.css +253 -0
  17. package/src/tokens/_effects.css +17 -0
  18. package/src/tokens/_neutrals.css +196 -0
  19. package/src/tokens/_spacing.css +19 -0
  20. package/src/tokens/_typography.css +87 -0
  21. package/src/utilities/_border.css +25 -0
  22. package/src/utilities/_display.css +75 -0
  23. package/src/utilities/_position.css +24 -0
  24. package/src/utilities/_sizing.css +27 -0
  25. package/src/utilities/_spacing.css +8 -0
  26. package/src/utilities/_visual.css +123 -0
package/README.md ADDED
@@ -0,0 +1,99 @@
1
+ # Design System
2
+
3
+ [![Publish design system](https://github.com/Tale-UI/core/actions/workflows/publish.yml/badge.svg)](https://github.com/Tale-UI/core/actions/workflows/publish.yml)
4
+
5
+ A modular, token-based CSS design system with fluid responsive scaling, comprehensive color theming, and dark mode support. Framework-agnostic — works with any stack.
6
+
7
+ ## Features
8
+
9
+ - **Fluid design tokens** — Spacing and typography scale smoothly with `clamp()`
10
+ - **Modular CSS** — 20+ focused modules composed via `@import`
11
+ - **16 color families** with 11 shades each, plus 6 neutral tone families
12
+ - **Dark mode** — Auto-inverting neutral scale via `data-color-mode` attribute
13
+ - **Responsive** — 4 breakpoints (480, 768, 992, 1600px) with utility variants
14
+ - **No build tools required** — CSS `@import` works natively in modern browsers
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install @tale-ui/core
20
+ ```
21
+
22
+ **Bundler (Next.js, Vite, webpack):**
23
+ ```css
24
+ @import '@tale-ui/core';
25
+ ```
26
+
27
+ **Plain HTML:**
28
+ ```html
29
+ <link rel="stylesheet" href="node_modules/@tale-ui/core/dist/style.css">
30
+ ```
31
+
32
+ > **Framework note:** This design system sets `html { font-size: 62.5% }` (1rem = 10px). If using Tailwind, shadcn/ui, or Bootstrap, add `html { font-size: 100%; }` after the import.
33
+
34
+ ## Quick Start
35
+
36
+ ```html
37
+ <!-- Fonts -->
38
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
39
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet" />
41
+
42
+ <!-- Design System -->
43
+ <link rel="stylesheet" href="node_modules/@tale-ui/core/dist/style.css" />
44
+ ```
45
+
46
+ ### Dark Mode
47
+
48
+ ```html
49
+ <html data-color-mode="dark">
50
+ ```
51
+
52
+ ## Usage Examples
53
+
54
+ ```html
55
+ <!-- Responsive grid with gap -->
56
+ <div class="grid--3 grid--l-2 grid--m-1 gap--l gap--m-m">
57
+ <div>Item 1</div>
58
+ <div>Item 2</div>
59
+ <div>Item 3</div>
60
+ </div>
61
+
62
+ <!-- Centered content -->
63
+ <section class="center--all padding--l">
64
+ <h1 class="text--display-l">Hello</h1>
65
+ <p class="text--body-l">Welcome to the design system.</p>
66
+ </section>
67
+
68
+ <!-- Themed section -->
69
+ <section class="color-purple neutral-cool">
70
+ <button style="background: var(--color-60); color: var(--neutral-10);">
71
+ Purple Button
72
+ </button>
73
+ </section>
74
+ ```
75
+
76
+ ## Documentation
77
+
78
+ - **[AI Reference](https://github.com/Tale-UI/core/blob/main/packages/css/docs/ai-reference.md)** — Every valid class, token, and value
79
+ - **[Framework Integration](https://github.com/Tale-UI/core/blob/main/packages/css/docs/framework-integration.md)** — Using alongside Tailwind, shadcn/ui, Next.js, Vite, etc.
80
+ - **[Visual Docs](https://github.com/Tale-UI/core/blob/main/packages/css/docs/documentation.html)** — Interactive component demos
81
+ - **[Contributor Guide](https://github.com/Tale-UI/core/blob/main/packages/css/CLAUDE.md)** — Architecture, conventions, and how to extend the system
82
+
83
+ ## Project Structure
84
+
85
+ ```
86
+ src/ # Modular CSS source
87
+ ├── index.css # Entry point (@imports in order)
88
+ ├── tokens/ # Design tokens (spacing, typography, colors, effects)
89
+ ├── foundations/ # Typography classes, text utilities, base elements
90
+ ├── layout/ # Grid, flex, gap, centering + responsive variants
91
+ ├── utilities/ # Display, visual, position, sizing, border, spacing
92
+ └── themes/ # Color themes, neutral families, dark mode
93
+ ```
94
+
95
+ See [CLAUDE.md](./CLAUDE.md) for the complete architecture reference.
96
+
97
+ ## License
98
+
99
+ MIT