@sandilya/ui 0.1.0 → 0.2.0

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 (7) hide show
  1. package/README.md +9 -18
  2. package/base.css +5 -0
  3. package/package.json +7 -8
  4. package/theme.css +91 -0
  5. package/themes/template.css +4 -3
  6. package/tokens.css +2 -2
  7. package/tailwind-preset.js +0 -106
package/README.md CHANGED
@@ -1,34 +1,25 @@
1
1
  # @sandilya/ui
2
2
 
3
- Color tokens, brand themes, base styles and the Tailwind CSS 3 preset for [san-ui](https://ui.sandilya.dev).
3
+ Color tokens, brand themes, base styles and the Tailwind CSS 4 theme for [san-ui](https://ui.sandilya.dev).
4
4
 
5
5
  ```bash
6
6
  bun add @sandilya/ui
7
7
  ```
8
8
 
9
- ```js
10
- // tailwind.config.js
11
- import preset from '@sandilya/ui';
12
-
13
- export default { presets: [preset], content: ['./src/**/*.{ts,tsx}'] };
14
- ```
15
-
16
9
  ```css
17
10
  /* src/index.css */
11
+ @import 'tailwindcss';
18
12
  @import '@sandilya/ui/tokens.css';
19
13
  @import '@sandilya/ui/themes/eloovor.css'; /* or your own theme */
14
+ @import '@sandilya/ui/theme.css';
20
15
  @import '@sandilya/ui/base.css';
21
-
22
- @tailwind base;
23
- @tailwind components;
24
- @tailwind utilities;
25
16
  ```
26
17
 
27
- | File | What it is |
28
- | -------------------- | ----------------------------------------------------------------- |
29
- | `tokens.css` | The shared base: every color role in light and dark, radius |
30
- | `themes/*.css` | A brand: color ramps, the hues neutrals lean toward, fonts |
31
- | `base.css` | Border, page and selection defaults the components assume |
32
- | `tailwind-preset.js` | Tailwind names for the tokens, radius, shadows, fonts, animations |
18
+ | File | What it is |
19
+ | -------------- | ------------------------------------------------------------------------------- |
20
+ | `tokens.css` | The shared base: every color role in light and dark, radius |
21
+ | `themes/*.css` | A brand: color ramps, the hues neutrals lean toward, fonts |
22
+ | `theme.css` | Tailwind names for the tokens, radius, shadows, fonts, dark variant, animations |
23
+ | `base.css` | Border, cursor, page and selection defaults the components assume |
33
24
 
34
25
  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/ui#readme).
package/base.css CHANGED
@@ -20,6 +20,11 @@
20
20
  -moz-osx-font-smoothing: grayscale;
21
21
  }
22
22
 
23
+ button:not(:disabled),
24
+ [role='button']:not(:disabled):not([aria-disabled='true']) {
25
+ cursor: pointer;
26
+ }
27
+
23
28
  ::selection {
24
29
  background-color: hsl(var(--highlight) / 0.55);
25
30
  color: hsl(var(--highlight-foreground));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sandilya/ui",
3
- "version": "0.1.0",
4
- "description": "Design tokens, themes and the Tailwind preset for san-ui",
3
+ "version": "0.2.0",
4
+ "description": "Design tokens, themes and the Tailwind CSS 4 theme for san-ui",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
7
  "repository": {
@@ -13,12 +13,11 @@
13
13
  "keywords": [
14
14
  "design-tokens",
15
15
  "tailwindcss",
16
- "tailwind-preset",
16
+ "tailwind-theme",
17
17
  "design-system"
18
18
  ],
19
19
  "exports": {
20
- ".": "./tailwind-preset.js",
21
- "./tailwind-preset": "./tailwind-preset.js",
20
+ "./theme.css": "./theme.css",
22
21
  "./tokens.css": "./tokens.css",
23
22
  "./themes/*": "./themes/*",
24
23
  "./base.css": "./base.css"
@@ -26,8 +25,8 @@
26
25
  "files": [
27
26
  "tokens.css",
28
27
  "base.css",
28
+ "theme.css",
29
29
  "themes",
30
- "tailwind-preset.js",
31
30
  "README.md",
32
31
  "LICENSE"
33
32
  ],
@@ -35,10 +34,10 @@
35
34
  "*.css"
36
35
  ],
37
36
  "dependencies": {
38
- "tailwindcss-animate": "^1.0.7"
37
+ "tw-animate-css": "^1.4.0"
39
38
  },
40
39
  "peerDependencies": {
41
- "tailwindcss": "^3.4.0"
40
+ "tailwindcss": "^4.0.0"
42
41
  },
43
42
  "publishConfig": {
44
43
  "access": "public"
package/theme.css ADDED
@@ -0,0 +1,91 @@
1
+ /*
2
+ * Tailwind names for the san-ui tokens (tokens.css plus a theme from
3
+ * themes/). Import it after `tailwindcss`; an app's CSS adds only its own
4
+ * domain colors and motion in its own @theme block.
5
+ */
6
+ @import 'tw-animate-css';
7
+
8
+ @custom-variant dark (&:is(.dark *));
9
+
10
+ /* The faces come from the theme (--font-sans, --font-display) */
11
+ @theme inline reference {
12
+ --font-sans: var(--font-sans);
13
+ --font-display: var(--font-display);
14
+ }
15
+
16
+ @theme inline {
17
+ /* Radius by role: xs for chips, md for fields, lg for small cards,
18
+ xl for section cards, 2xl for dialogs. Buttons are pills. */
19
+ --radius-xs: calc(var(--radius) - 4px);
20
+ --radius-md: calc(var(--radius) - 2px);
21
+ --radius-lg: var(--radius);
22
+ --radius-xl: calc(var(--radius) + 4px);
23
+ --radius-2xl: calc(var(--radius) + 8px);
24
+
25
+ /* Ink-tinted shadows, only for things that float: menus, dialogs, toasts */
26
+ --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06);
27
+ --shadow-sm:
28
+ 0 1px 3px hsl(var(--shadow-color) / 0.08),
29
+ 0 1px 2px hsl(var(--shadow-color) / 0.04);
30
+ --shadow-md:
31
+ 0 4px 12px -2px hsl(var(--shadow-color) / 0.1),
32
+ 0 2px 4px hsl(var(--shadow-color) / 0.04);
33
+ --shadow-lg:
34
+ 0 12px 32px -8px hsl(var(--shadow-color) / 0.18),
35
+ 0 2px 6px hsl(var(--shadow-color) / 0.06);
36
+ --shadow-xl:
37
+ 0 24px 56px -12px hsl(var(--shadow-color) / 0.26),
38
+ 0 4px 12px hsl(var(--shadow-color) / 0.08);
39
+
40
+ --color-background: hsl(var(--background));
41
+ --color-foreground: hsl(var(--foreground));
42
+ --color-surface: hsl(var(--surface));
43
+ --color-card: hsl(var(--card));
44
+ --color-card-foreground: hsl(var(--card-foreground));
45
+ --color-popover: hsl(var(--popover));
46
+ --color-popover-foreground: hsl(var(--popover-foreground));
47
+ --color-muted: hsl(var(--muted));
48
+ --color-muted-foreground: hsl(var(--muted-foreground));
49
+ --color-primary: hsl(var(--primary));
50
+ --color-primary-foreground: hsl(var(--primary-foreground));
51
+
52
+ --color-brand: hsl(var(--brand));
53
+ --color-brand-foreground: hsl(var(--brand-foreground));
54
+ --color-brand-50: hsl(var(--brand-50));
55
+ --color-brand-100: hsl(var(--brand-100));
56
+ --color-brand-200: hsl(var(--brand-200));
57
+ --color-brand-300: hsl(var(--brand-300));
58
+ --color-brand-400: hsl(var(--brand-400));
59
+ --color-brand-500: hsl(var(--brand-500));
60
+ --color-brand-600: hsl(var(--brand-600));
61
+ --color-brand-700: hsl(var(--brand-700));
62
+ --color-brand-800: hsl(var(--brand-800));
63
+ --color-brand-900: hsl(var(--brand-900));
64
+ --color-brand-950: hsl(var(--brand-950));
65
+
66
+ --color-highlight: hsl(var(--highlight));
67
+ --color-highlight-foreground: hsl(var(--highlight-foreground));
68
+ --color-highlight-50: hsl(var(--highlight-50));
69
+ --color-highlight-100: hsl(var(--highlight-100));
70
+ --color-highlight-200: hsl(var(--highlight-200));
71
+ --color-highlight-300: hsl(var(--highlight-300));
72
+ --color-highlight-400: hsl(var(--highlight-400));
73
+ --color-highlight-500: hsl(var(--highlight-500));
74
+ --color-highlight-600: hsl(var(--highlight-600));
75
+ --color-highlight-700: hsl(var(--highlight-700));
76
+ --color-highlight-800: hsl(var(--highlight-800));
77
+ --color-highlight-900: hsl(var(--highlight-900));
78
+ --color-highlight-950: hsl(var(--highlight-950));
79
+
80
+ --color-destructive: hsl(var(--destructive));
81
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
82
+ --color-success: hsl(var(--success));
83
+ --color-success-foreground: hsl(var(--success-foreground));
84
+ --color-warning: hsl(var(--warning));
85
+ --color-warning-foreground: hsl(var(--warning-foreground));
86
+ --color-info: hsl(var(--info));
87
+ --color-info-foreground: hsl(var(--info-foreground));
88
+ --color-border: hsl(var(--border));
89
+ --color-input: hsl(var(--input));
90
+ --color-ring: hsl(var(--ring));
91
+ }
package/themes/template.css CHANGED
@@ -20,9 +20,10 @@
20
20
  --tint-hue: 190;
21
21
  --ink-hue: 195;
22
22
 
23
- /* Optional. Load the font files in the app. */
24
- /* --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif; */
25
- /* --font-display: 'Fraunces Variable', var(--font-sans); */
23
+ /* System fonts. To use your own, load the files in the app and name them
24
+ here, e.g. 'Inter Variable', ui-sans-serif, system-ui, sans-serif */
25
+ --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
26
+ --font-display: var(--font-sans);
26
27
 
27
28
  /* Brand ramp. --brand-600 is the primary button. */
28
29
  --brand-50: 185 45% 96%;
package/tokens.css CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Values are bare HSL channels so Tailwind opacity modifiers keep working
5
5
  * (bg-success/10, text-brand/80). Tailwind names for them live in
6
- * tailwind.preset.js.
6
+ * theme.css.
7
7
  *
8
8
  * This file holds what every app shares: the neutral surfaces, feedback
9
9
  * colors, lines, radius and the paper reset. The brand comes from a theme
@@ -110,7 +110,7 @@
110
110
  }
111
111
 
112
112
  /*
113
- * Printed pages (resumes, documents) are paper, not app: plain neutral
113
+ * Printed pages (documents, invoices, resumes) are paper, not app: plain neutral
114
114
  * greys and a print font, so the preview matches the download.
115
115
  */
116
116
  .force-light-mode,
package/tailwind-preset.js DELETED
@@ -1,106 +0,0 @@
1
- import tailwindcssAnimate from 'tailwindcss-animate';
2
-
3
- /**
4
- * Tailwind names for the san-ui tokens (tokens.css plus a theme from
5
- * themes/). An app's tailwind.config.js uses this as a preset and adds only
6
- * its own domain colors and motion.
7
- */
8
- const token = name => `hsl(var(--${name}))`;
9
- const ramp = name =>
10
- Object.fromEntries(
11
- [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(step => [
12
- step,
13
- token(`${name}-${step}`),
14
- ]),
15
- );
16
-
17
- /** @type {import('tailwindcss').Config} */
18
- export default {
19
- darkMode: ['class'],
20
- theme: {
21
- extend: {
22
- // Radius by role: sm for chips, md for fields, lg for small cards,
23
- // xl for section cards, 2xl for dialogs. Buttons are pills.
24
- borderRadius: {
25
- sm: 'calc(var(--radius) - 4px)',
26
- md: 'calc(var(--radius) - 2px)',
27
- lg: 'var(--radius)',
28
- xl: 'calc(var(--radius) + 4px)',
29
- '2xl': 'calc(var(--radius) + 8px)',
30
- },
31
- // The faces come from the theme (--font-sans, --font-display)
32
- fontFamily: {
33
- sans: ['var(--font-sans)'],
34
- display: ['var(--font-display)'],
35
- },
36
- // Ink-tinted shadows, only for things that float: menus, dialogs, toasts
37
- boxShadow: {
38
- sm: '0 1px 2px hsl(var(--shadow-color) / 0.06)',
39
- DEFAULT:
40
- '0 1px 3px hsl(var(--shadow-color) / 0.08), 0 1px 2px hsl(var(--shadow-color) / 0.04)',
41
- md: '0 4px 12px -2px hsl(var(--shadow-color) / 0.1), 0 2px 4px hsl(var(--shadow-color) / 0.04)',
42
- lg: '0 12px 32px -8px hsl(var(--shadow-color) / 0.18), 0 2px 6px hsl(var(--shadow-color) / 0.06)',
43
- xl: '0 24px 56px -12px hsl(var(--shadow-color) / 0.26), 0 4px 12px hsl(var(--shadow-color) / 0.08)',
44
- },
45
- colors: {
46
- background: token('background'),
47
- foreground: token('foreground'),
48
- surface: token('surface'),
49
- card: { DEFAULT: token('card'), foreground: token('card-foreground') },
50
- popover: {
51
- DEFAULT: token('popover'),
52
- foreground: token('popover-foreground'),
53
- },
54
- muted: {
55
- DEFAULT: token('muted'),
56
- foreground: token('muted-foreground'),
57
- },
58
- primary: {
59
- DEFAULT: token('primary'),
60
- foreground: token('primary-foreground'),
61
- },
62
- brand: {
63
- DEFAULT: token('brand'),
64
- foreground: token('brand-foreground'),
65
- ...ramp('brand'),
66
- },
67
- highlight: {
68
- DEFAULT: token('highlight'),
69
- foreground: token('highlight-foreground'),
70
- ...ramp('highlight'),
71
- },
72
- destructive: {
73
- DEFAULT: token('destructive'),
74
- foreground: token('destructive-foreground'),
75
- },
76
- success: {
77
- DEFAULT: token('success'),
78
- foreground: token('success-foreground'),
79
- },
80
- warning: {
81
- DEFAULT: token('warning'),
82
- foreground: token('warning-foreground'),
83
- },
84
- info: { DEFAULT: token('info'), foreground: token('info-foreground') },
85
- border: token('border'),
86
- input: token('input'),
87
- ring: token('ring'),
88
- },
89
- animation: {
90
- 'accordion-down': 'accordion-down 0.2s ease-out',
91
- 'accordion-up': 'accordion-up 0.2s ease-out',
92
- },
93
- keyframes: {
94
- 'accordion-down': {
95
- from: { height: '0' },
96
- to: { height: 'var(--radix-accordion-content-height)' },
97
- },
98
- 'accordion-up': {
99
- from: { height: 'var(--radix-accordion-content-height)' },
100
- to: { height: '0' },
101
- },
102
- },
103
- },
104
- },
105
- plugins: [tailwindcssAnimate],
106
- };