@12min/ds 0.1.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.
- package/README.md +173 -0
- package/dist/chunk-E2C4G6H4.mjs +45 -0
- package/dist/chunk-E2C4G6H4.mjs.map +1 -0
- package/dist/chunk-QIJRSFZB.mjs +41 -0
- package/dist/chunk-QIJRSFZB.mjs.map +1 -0
- package/dist/index.native.d.mts +2 -0
- package/dist/index.native.d.ts +2 -0
- package/dist/index.native.js +107 -0
- package/dist/index.native.js.map +1 -0
- package/dist/index.native.mjs +13 -0
- package/dist/index.native.mjs.map +1 -0
- package/dist/index.web.d.mts +22 -0
- package/dist/index.web.d.ts +22 -0
- package/dist/index.web.js +107 -0
- package/dist/index.web.js.map +1 -0
- package/dist/index.web.mjs +13 -0
- package/dist/index.web.mjs.map +1 -0
- package/dist/tailwind/theme.css +41 -0
- package/dist/tokens/index.d.mts +42 -0
- package/dist/tokens/index.d.ts +42 -0
- package/dist/tokens/index.js +71 -0
- package/dist/tokens/index.js.map +1 -0
- package/dist/tokens/index.mjs +7 -0
- package/dist/tokens/index.mjs.map +1 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
```text
|
|
2
|
+
██╗ ██████╗ ███╗ ███╗ ██╗ ███╗ ██╗ ██████╗ ███████╗
|
|
3
|
+
███║ ╚════██╗ ████╗ ████║ ██║ ████╗ ██║ ██╔══██╗ ██╔════╝
|
|
4
|
+
╚██║ █████╔╝ ██╔████╔██║ ██║ ██╔██╗ ██║ █████╗ ██║ ██║ ███████╗
|
|
5
|
+
██║ ██╔═══╝ ██║╚██╔╝██║ ██║ ██║╚██╗██║ ╚════╝ ██║ ██║ ╚════██║
|
|
6
|
+
██║ ███████╗ ██║ ╚═╝ ██║ ██║ ██║ ╚████║ ██████╔╝ ███████║
|
|
7
|
+
╚═╝ ╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═══╝ ╚═════╝ ╚══════╝
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
# `@12min/ds`
|
|
11
|
+
|
|
12
|
+
Single source of truth for 12min's visual language — tokens, styles, and components shared across web and mobile.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## What's included
|
|
17
|
+
|
|
18
|
+
| | Now | Phase 2 |
|
|
19
|
+
|---|---|---|
|
|
20
|
+
| Color tokens | ✅ | |
|
|
21
|
+
| CSS theme (`theme.css`) | ✅ | |
|
|
22
|
+
| Semantic themes (light / dark) | ✅ | |
|
|
23
|
+
| Core components (Button, Input, Card, Modal) | | ✅ |
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
```sh
|
|
30
|
+
pnpm add @12min/ds
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
**Peer dependencies** — install in the consuming app if not already present:
|
|
34
|
+
|
|
35
|
+
```sh
|
|
36
|
+
# web
|
|
37
|
+
pnpm add tailwindcss@^4.0.0
|
|
38
|
+
|
|
39
|
+
# mobile
|
|
40
|
+
bun add nativewind@5.0.0-preview.3
|
|
41
|
+
bun add --dev tailwindcss@^4.0.0
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Usage
|
|
47
|
+
|
|
48
|
+
### Tokens
|
|
49
|
+
|
|
50
|
+
Raw token values as TypeScript — use anywhere, including `StyleSheet.create`.
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { colors } from '@12min/ds/tokens'
|
|
54
|
+
|
|
55
|
+
const styles = StyleSheet.create({
|
|
56
|
+
button: { backgroundColor: colors.brand.primary },
|
|
57
|
+
})
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Web — Tailwind v4
|
|
61
|
+
|
|
62
|
+
Import the generated theme in your global CSS entry point:
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
/* globals.css */
|
|
66
|
+
@import "tailwindcss";
|
|
67
|
+
@import "@12min/ds/tailwind/theme.css";
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
All tokens are now available as Tailwind utilities:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<div className="bg-brand-primary text-neutral-0">
|
|
74
|
+
<div className="bg-success text-neutral-0">
|
|
75
|
+
<div className="bg-error-light">
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Mobile — NativeWind v5
|
|
79
|
+
|
|
80
|
+
Point Metro at the published theme file:
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
// metro.config.js
|
|
84
|
+
const { withNativeWind } = require('nativewind/metro')
|
|
85
|
+
|
|
86
|
+
module.exports = withNativeWind(config, {
|
|
87
|
+
input: 'node_modules/@12min/ds/dist/tailwind/theme.css',
|
|
88
|
+
})
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Same class names, compiled to `StyleSheet` at build time:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
<View className="bg-brand-primary dark:bg-neutral-900">
|
|
95
|
+
<Text className="text-neutral-0">Hello</Text>
|
|
96
|
+
</View>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Semantic themes (optional)
|
|
100
|
+
|
|
101
|
+
For programmatic access to token values — useful for chart libraries, animations, or any non-Tailwind consumer:
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
import { lightTheme, darkTheme } from '@12min/ds'
|
|
105
|
+
import { useColorScheme } from 'react-native'
|
|
106
|
+
|
|
107
|
+
const scheme = useColorScheme()
|
|
108
|
+
const theme = scheme === 'dark' ? darkTheme : lightTheme
|
|
109
|
+
|
|
110
|
+
// theme.primary === '#FF6B35'
|
|
111
|
+
// theme.background, theme.surface, theme.error, ...
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Development
|
|
117
|
+
|
|
118
|
+
### Requirements
|
|
119
|
+
|
|
120
|
+
- Node 20+
|
|
121
|
+
- pnpm 10+
|
|
122
|
+
|
|
123
|
+
```sh
|
|
124
|
+
pnpm install
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Scripts
|
|
128
|
+
|
|
129
|
+
| Command | Description |
|
|
130
|
+
|---|---|
|
|
131
|
+
| `pnpm build` | Clean, generate theme, compile, copy CSS |
|
|
132
|
+
| `pnpm dev` | Watch mode (tsup) |
|
|
133
|
+
| `pnpm generate:theme` | Regenerate `src/tailwind/theme.css` from tokens |
|
|
134
|
+
| `pnpm typecheck` | TypeScript — library code |
|
|
135
|
+
| `pnpm lint` | ESLint |
|
|
136
|
+
|
|
137
|
+
### Adding or changing tokens
|
|
138
|
+
|
|
139
|
+
1. Edit `src/tokens/colors.ts`
|
|
140
|
+
2. Run `pnpm generate:theme` to regenerate `theme.css`
|
|
141
|
+
3. Verify the output in `src/tailwind/theme.css`
|
|
142
|
+
4. Run `pnpm build` before committing
|
|
143
|
+
|
|
144
|
+
`theme.css` is gitignored — it is always generated from source.
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
## Releases
|
|
149
|
+
|
|
150
|
+
Versions follow [semver](https://semver.org). The `./tokens` export is a stable public API — breaking changes to its shape require a major version bump.
|
|
151
|
+
|
|
152
|
+
```sh
|
|
153
|
+
# bump version and create git tag
|
|
154
|
+
pnpm version patch # 0.1.0 → 0.1.1
|
|
155
|
+
pnpm version minor # 0.1.0 → 0.2.0
|
|
156
|
+
pnpm version major # 0.1.0 → 1.0.0
|
|
157
|
+
|
|
158
|
+
# push tag to trigger the release workflow
|
|
159
|
+
git push origin main --tags
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
The GitHub Actions release workflow publishes to npm automatically on `v*` tags.
|
|
163
|
+
See [`docs/next-steps.md §5`](docs/next-steps.md) for the full workflow file.
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
## Documentation
|
|
168
|
+
|
|
169
|
+
| Doc | Description |
|
|
170
|
+
|---|---|
|
|
171
|
+
| [`docs/architecture.md`](docs/architecture.md) | Three-layer model, component structure, platform resolution |
|
|
172
|
+
| [`docs/next-steps.md`](docs/next-steps.md) | Pending decisions, migration guides, release workflow |
|
|
173
|
+
| [`docs/critical-review.md`](docs/critical-review.md) | Architectural decisions log — open and closed |
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
// src/tokens/colors.ts
|
|
2
|
+
var colors = {
|
|
3
|
+
brand: {
|
|
4
|
+
primary: "#FF6B35",
|
|
5
|
+
secondary: "#1A1A2E"
|
|
6
|
+
},
|
|
7
|
+
neutral: {
|
|
8
|
+
0: "#FFFFFF",
|
|
9
|
+
50: "#FAFAFA",
|
|
10
|
+
100: "#F5F5F5",
|
|
11
|
+
200: "#E5E5E5",
|
|
12
|
+
300: "#D4D4D4",
|
|
13
|
+
400: "#A3A3A3",
|
|
14
|
+
500: "#737373",
|
|
15
|
+
600: "#525252",
|
|
16
|
+
700: "#404040",
|
|
17
|
+
800: "#262626",
|
|
18
|
+
900: "#121212"
|
|
19
|
+
},
|
|
20
|
+
success: {
|
|
21
|
+
light: "#4ADE80",
|
|
22
|
+
default: "#22C55E",
|
|
23
|
+
dark: "#16A34A"
|
|
24
|
+
},
|
|
25
|
+
error: {
|
|
26
|
+
light: "#F87171",
|
|
27
|
+
default: "#EF4444",
|
|
28
|
+
dark: "#DC2626"
|
|
29
|
+
},
|
|
30
|
+
warning: {
|
|
31
|
+
light: "#FCD34D",
|
|
32
|
+
default: "#F59E0B",
|
|
33
|
+
dark: "#D97706"
|
|
34
|
+
},
|
|
35
|
+
info: {
|
|
36
|
+
light: "#60A5FA",
|
|
37
|
+
default: "#3B82F6",
|
|
38
|
+
dark: "#2563EB"
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export {
|
|
43
|
+
colors
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=chunk-E2C4G6H4.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens/colors.ts"],"sourcesContent":["export const colors = {\n brand: {\n primary: '#FF6B35',\n secondary: '#1A1A2E',\n },\n\n neutral: {\n 0: '#FFFFFF',\n 50: '#FAFAFA',\n 100: '#F5F5F5',\n 200: '#E5E5E5',\n 300: '#D4D4D4',\n 400: '#A3A3A3',\n 500: '#737373',\n 600: '#525252',\n 700: '#404040',\n 800: '#262626',\n 900: '#121212',\n },\n\n success: {\n light: '#4ADE80',\n default: '#22C55E',\n dark: '#16A34A',\n },\n\n error: {\n light: '#F87171',\n default: '#EF4444',\n dark: '#DC2626',\n },\n\n warning: {\n light: '#FCD34D',\n default: '#F59E0B',\n dark: '#D97706',\n },\n\n info: {\n light: '#60A5FA',\n default: '#3B82F6',\n dark: '#2563EB',\n },\n} as const\n\nexport type Colors = typeof colors\n"],"mappings":";AAAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EAEA,SAAS;AAAA,IACP,GAAK;AAAA,IACL,IAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,OAAO;AAAA,IACL,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,MAAM;AAAA,IACJ,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AACF;","names":[]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import {
|
|
2
|
+
colors
|
|
3
|
+
} from "./chunk-E2C4G6H4.mjs";
|
|
4
|
+
|
|
5
|
+
// src/themes/lightTheme.ts
|
|
6
|
+
var lightTheme = {
|
|
7
|
+
background: colors.neutral[0],
|
|
8
|
+
surface: colors.neutral[100],
|
|
9
|
+
border: colors.neutral[200],
|
|
10
|
+
onBackground: colors.neutral[900],
|
|
11
|
+
onSurface: colors.neutral[800],
|
|
12
|
+
muted: colors.neutral[500],
|
|
13
|
+
primary: colors.brand.primary,
|
|
14
|
+
secondary: colors.brand.secondary,
|
|
15
|
+
success: colors.success.default,
|
|
16
|
+
error: colors.error.default,
|
|
17
|
+
warning: colors.warning.default,
|
|
18
|
+
info: colors.info.default
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
// src/themes/darkTheme.ts
|
|
22
|
+
var darkTheme = {
|
|
23
|
+
background: colors.neutral[900],
|
|
24
|
+
surface: colors.neutral[800],
|
|
25
|
+
border: colors.neutral[700],
|
|
26
|
+
onBackground: colors.neutral[0],
|
|
27
|
+
onSurface: colors.neutral[100],
|
|
28
|
+
muted: colors.neutral[400],
|
|
29
|
+
primary: colors.brand.primary,
|
|
30
|
+
secondary: colors.brand.secondary,
|
|
31
|
+
success: colors.success.light,
|
|
32
|
+
error: colors.error.light,
|
|
33
|
+
warning: colors.warning.light,
|
|
34
|
+
info: colors.info.light
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export {
|
|
38
|
+
lightTheme,
|
|
39
|
+
darkTheme
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=chunk-QIJRSFZB.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/themes/lightTheme.ts","../src/themes/darkTheme.ts"],"sourcesContent":["import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const lightTheme: Theme = {\n background: colors.neutral[0],\n surface: colors.neutral[100],\n border: colors.neutral[200],\n onBackground: colors.neutral[900],\n onSurface: colors.neutral[800],\n muted: colors.neutral[500],\n primary: colors.brand.primary,\n secondary: colors.brand.secondary,\n success: colors.success.default,\n error: colors.error.default,\n warning: colors.warning.default,\n info: colors.info.default,\n}\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const darkTheme: Theme = {\n background: colors.neutral[900],\n surface: colors.neutral[800],\n border: colors.neutral[700],\n onBackground: colors.neutral[0],\n onSurface: colors.neutral[100],\n muted: colors.neutral[400],\n primary: colors.brand.primary,\n secondary: colors.brand.secondary,\n success: colors.success.light,\n error: colors.error.light,\n warning: colors.warning.light,\n info: colors.info.light,\n} as const\n"],"mappings":";;;;;AAGO,IAAM,aAAoB;AAAA,EAC/B,YAAc,OAAO,QAAQ,CAAC;AAAA,EAC9B,SAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,QAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,cAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,WAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,OAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,SAAc,OAAO,MAAM;AAAA,EAC3B,WAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,OAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,MAAc,OAAO,KAAK;AAC5B;;;ACbO,IAAM,YAAmB;AAAA,EAC9B,YAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,QAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,cAAe,OAAO,QAAQ,CAAC;AAAA,EAC/B,WAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,OAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,MAAM;AAAA,EAC5B,WAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,OAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,MAAe,OAAO,KAAK;AAC7B;","names":[]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// index.native.ts
|
|
21
|
+
var index_native_exports = {};
|
|
22
|
+
__export(index_native_exports, {
|
|
23
|
+
colors: () => colors,
|
|
24
|
+
darkTheme: () => darkTheme,
|
|
25
|
+
lightTheme: () => lightTheme
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(index_native_exports);
|
|
28
|
+
|
|
29
|
+
// src/tokens/colors.ts
|
|
30
|
+
var colors = {
|
|
31
|
+
brand: {
|
|
32
|
+
primary: "#FF6B35",
|
|
33
|
+
secondary: "#1A1A2E"
|
|
34
|
+
},
|
|
35
|
+
neutral: {
|
|
36
|
+
0: "#FFFFFF",
|
|
37
|
+
50: "#FAFAFA",
|
|
38
|
+
100: "#F5F5F5",
|
|
39
|
+
200: "#E5E5E5",
|
|
40
|
+
300: "#D4D4D4",
|
|
41
|
+
400: "#A3A3A3",
|
|
42
|
+
500: "#737373",
|
|
43
|
+
600: "#525252",
|
|
44
|
+
700: "#404040",
|
|
45
|
+
800: "#262626",
|
|
46
|
+
900: "#121212"
|
|
47
|
+
},
|
|
48
|
+
success: {
|
|
49
|
+
light: "#4ADE80",
|
|
50
|
+
default: "#22C55E",
|
|
51
|
+
dark: "#16A34A"
|
|
52
|
+
},
|
|
53
|
+
error: {
|
|
54
|
+
light: "#F87171",
|
|
55
|
+
default: "#EF4444",
|
|
56
|
+
dark: "#DC2626"
|
|
57
|
+
},
|
|
58
|
+
warning: {
|
|
59
|
+
light: "#FCD34D",
|
|
60
|
+
default: "#F59E0B",
|
|
61
|
+
dark: "#D97706"
|
|
62
|
+
},
|
|
63
|
+
info: {
|
|
64
|
+
light: "#60A5FA",
|
|
65
|
+
default: "#3B82F6",
|
|
66
|
+
dark: "#2563EB"
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// src/themes/lightTheme.ts
|
|
71
|
+
var lightTheme = {
|
|
72
|
+
background: colors.neutral[0],
|
|
73
|
+
surface: colors.neutral[100],
|
|
74
|
+
border: colors.neutral[200],
|
|
75
|
+
onBackground: colors.neutral[900],
|
|
76
|
+
onSurface: colors.neutral[800],
|
|
77
|
+
muted: colors.neutral[500],
|
|
78
|
+
primary: colors.brand.primary,
|
|
79
|
+
secondary: colors.brand.secondary,
|
|
80
|
+
success: colors.success.default,
|
|
81
|
+
error: colors.error.default,
|
|
82
|
+
warning: colors.warning.default,
|
|
83
|
+
info: colors.info.default
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// src/themes/darkTheme.ts
|
|
87
|
+
var darkTheme = {
|
|
88
|
+
background: colors.neutral[900],
|
|
89
|
+
surface: colors.neutral[800],
|
|
90
|
+
border: colors.neutral[700],
|
|
91
|
+
onBackground: colors.neutral[0],
|
|
92
|
+
onSurface: colors.neutral[100],
|
|
93
|
+
muted: colors.neutral[400],
|
|
94
|
+
primary: colors.brand.primary,
|
|
95
|
+
secondary: colors.brand.secondary,
|
|
96
|
+
success: colors.success.light,
|
|
97
|
+
error: colors.error.light,
|
|
98
|
+
warning: colors.warning.light,
|
|
99
|
+
info: colors.info.light
|
|
100
|
+
};
|
|
101
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
102
|
+
0 && (module.exports = {
|
|
103
|
+
colors,
|
|
104
|
+
darkTheme,
|
|
105
|
+
lightTheme
|
|
106
|
+
});
|
|
107
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../index.native.ts","../src/tokens/colors.ts","../src/themes/lightTheme.ts","../src/themes/darkTheme.ts"],"sourcesContent":["export * from './src/tokens'\nexport * from './src/themes'\n","export const colors = {\n brand: {\n primary: '#FF6B35',\n secondary: '#1A1A2E',\n },\n\n neutral: {\n 0: '#FFFFFF',\n 50: '#FAFAFA',\n 100: '#F5F5F5',\n 200: '#E5E5E5',\n 300: '#D4D4D4',\n 400: '#A3A3A3',\n 500: '#737373',\n 600: '#525252',\n 700: '#404040',\n 800: '#262626',\n 900: '#121212',\n },\n\n success: {\n light: '#4ADE80',\n default: '#22C55E',\n dark: '#16A34A',\n },\n\n error: {\n light: '#F87171',\n default: '#EF4444',\n dark: '#DC2626',\n },\n\n warning: {\n light: '#FCD34D',\n default: '#F59E0B',\n dark: '#D97706',\n },\n\n info: {\n light: '#60A5FA',\n default: '#3B82F6',\n dark: '#2563EB',\n },\n} as const\n\nexport type Colors = typeof colors\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const lightTheme: Theme = {\n background: colors.neutral[0],\n surface: colors.neutral[100],\n border: colors.neutral[200],\n onBackground: colors.neutral[900],\n onSurface: colors.neutral[800],\n muted: colors.neutral[500],\n primary: colors.brand.primary,\n secondary: colors.brand.secondary,\n success: colors.success.default,\n error: colors.error.default,\n warning: colors.warning.default,\n info: colors.info.default,\n}\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const darkTheme: Theme = {\n background: colors.neutral[900],\n surface: colors.neutral[800],\n border: colors.neutral[700],\n onBackground: colors.neutral[0],\n onSurface: colors.neutral[100],\n muted: colors.neutral[400],\n primary: colors.brand.primary,\n secondary: colors.brand.secondary,\n success: colors.success.light,\n error: colors.error.light,\n warning: colors.warning.light,\n info: colors.info.light,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EAEA,SAAS;AAAA,IACP,GAAK;AAAA,IACL,IAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,OAAO;AAAA,IACL,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,MAAM;AAAA,IACJ,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AACF;;;ACxCO,IAAM,aAAoB;AAAA,EAC/B,YAAc,OAAO,QAAQ,CAAC;AAAA,EAC9B,SAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,QAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,cAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,WAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,OAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,SAAc,OAAO,MAAM;AAAA,EAC3B,WAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,OAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,MAAc,OAAO,KAAK;AAC5B;;;ACbO,IAAM,YAAmB;AAAA,EAC9B,YAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,QAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,cAAe,OAAO,QAAQ,CAAC;AAAA,EAC/B,WAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,OAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,MAAM;AAAA,EAC5B,WAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,OAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,MAAe,OAAO,KAAK;AAC7B;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export { Colors, colors } from './tokens/index.mjs';
|
|
2
|
+
|
|
3
|
+
interface Theme {
|
|
4
|
+
background: string;
|
|
5
|
+
surface: string;
|
|
6
|
+
border: string;
|
|
7
|
+
onBackground: string;
|
|
8
|
+
onSurface: string;
|
|
9
|
+
muted: string;
|
|
10
|
+
primary: string;
|
|
11
|
+
secondary: string;
|
|
12
|
+
success: string;
|
|
13
|
+
error: string;
|
|
14
|
+
warning: string;
|
|
15
|
+
info: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declare const lightTheme: Theme;
|
|
19
|
+
|
|
20
|
+
declare const darkTheme: Theme;
|
|
21
|
+
|
|
22
|
+
export { type Theme, darkTheme, lightTheme };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export { Colors, colors } from './tokens/index.js';
|
|
2
|
+
|
|
3
|
+
interface Theme {
|
|
4
|
+
background: string;
|
|
5
|
+
surface: string;
|
|
6
|
+
border: string;
|
|
7
|
+
onBackground: string;
|
|
8
|
+
onSurface: string;
|
|
9
|
+
muted: string;
|
|
10
|
+
primary: string;
|
|
11
|
+
secondary: string;
|
|
12
|
+
success: string;
|
|
13
|
+
error: string;
|
|
14
|
+
warning: string;
|
|
15
|
+
info: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
declare const lightTheme: Theme;
|
|
19
|
+
|
|
20
|
+
declare const darkTheme: Theme;
|
|
21
|
+
|
|
22
|
+
export { type Theme, darkTheme, lightTheme };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// index.web.ts
|
|
21
|
+
var index_web_exports = {};
|
|
22
|
+
__export(index_web_exports, {
|
|
23
|
+
colors: () => colors,
|
|
24
|
+
darkTheme: () => darkTheme,
|
|
25
|
+
lightTheme: () => lightTheme
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(index_web_exports);
|
|
28
|
+
|
|
29
|
+
// src/tokens/colors.ts
|
|
30
|
+
var colors = {
|
|
31
|
+
brand: {
|
|
32
|
+
primary: "#FF6B35",
|
|
33
|
+
secondary: "#1A1A2E"
|
|
34
|
+
},
|
|
35
|
+
neutral: {
|
|
36
|
+
0: "#FFFFFF",
|
|
37
|
+
50: "#FAFAFA",
|
|
38
|
+
100: "#F5F5F5",
|
|
39
|
+
200: "#E5E5E5",
|
|
40
|
+
300: "#D4D4D4",
|
|
41
|
+
400: "#A3A3A3",
|
|
42
|
+
500: "#737373",
|
|
43
|
+
600: "#525252",
|
|
44
|
+
700: "#404040",
|
|
45
|
+
800: "#262626",
|
|
46
|
+
900: "#121212"
|
|
47
|
+
},
|
|
48
|
+
success: {
|
|
49
|
+
light: "#4ADE80",
|
|
50
|
+
default: "#22C55E",
|
|
51
|
+
dark: "#16A34A"
|
|
52
|
+
},
|
|
53
|
+
error: {
|
|
54
|
+
light: "#F87171",
|
|
55
|
+
default: "#EF4444",
|
|
56
|
+
dark: "#DC2626"
|
|
57
|
+
},
|
|
58
|
+
warning: {
|
|
59
|
+
light: "#FCD34D",
|
|
60
|
+
default: "#F59E0B",
|
|
61
|
+
dark: "#D97706"
|
|
62
|
+
},
|
|
63
|
+
info: {
|
|
64
|
+
light: "#60A5FA",
|
|
65
|
+
default: "#3B82F6",
|
|
66
|
+
dark: "#2563EB"
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// src/themes/lightTheme.ts
|
|
71
|
+
var lightTheme = {
|
|
72
|
+
background: colors.neutral[0],
|
|
73
|
+
surface: colors.neutral[100],
|
|
74
|
+
border: colors.neutral[200],
|
|
75
|
+
onBackground: colors.neutral[900],
|
|
76
|
+
onSurface: colors.neutral[800],
|
|
77
|
+
muted: colors.neutral[500],
|
|
78
|
+
primary: colors.brand.primary,
|
|
79
|
+
secondary: colors.brand.secondary,
|
|
80
|
+
success: colors.success.default,
|
|
81
|
+
error: colors.error.default,
|
|
82
|
+
warning: colors.warning.default,
|
|
83
|
+
info: colors.info.default
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
// src/themes/darkTheme.ts
|
|
87
|
+
var darkTheme = {
|
|
88
|
+
background: colors.neutral[900],
|
|
89
|
+
surface: colors.neutral[800],
|
|
90
|
+
border: colors.neutral[700],
|
|
91
|
+
onBackground: colors.neutral[0],
|
|
92
|
+
onSurface: colors.neutral[100],
|
|
93
|
+
muted: colors.neutral[400],
|
|
94
|
+
primary: colors.brand.primary,
|
|
95
|
+
secondary: colors.brand.secondary,
|
|
96
|
+
success: colors.success.light,
|
|
97
|
+
error: colors.error.light,
|
|
98
|
+
warning: colors.warning.light,
|
|
99
|
+
info: colors.info.light
|
|
100
|
+
};
|
|
101
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
102
|
+
0 && (module.exports = {
|
|
103
|
+
colors,
|
|
104
|
+
darkTheme,
|
|
105
|
+
lightTheme
|
|
106
|
+
});
|
|
107
|
+
//# sourceMappingURL=index.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../index.web.ts","../src/tokens/colors.ts","../src/themes/lightTheme.ts","../src/themes/darkTheme.ts"],"sourcesContent":["export * from './src/tokens'\nexport * from './src/themes'\n","export const colors = {\n brand: {\n primary: '#FF6B35',\n secondary: '#1A1A2E',\n },\n\n neutral: {\n 0: '#FFFFFF',\n 50: '#FAFAFA',\n 100: '#F5F5F5',\n 200: '#E5E5E5',\n 300: '#D4D4D4',\n 400: '#A3A3A3',\n 500: '#737373',\n 600: '#525252',\n 700: '#404040',\n 800: '#262626',\n 900: '#121212',\n },\n\n success: {\n light: '#4ADE80',\n default: '#22C55E',\n dark: '#16A34A',\n },\n\n error: {\n light: '#F87171',\n default: '#EF4444',\n dark: '#DC2626',\n },\n\n warning: {\n light: '#FCD34D',\n default: '#F59E0B',\n dark: '#D97706',\n },\n\n info: {\n light: '#60A5FA',\n default: '#3B82F6',\n dark: '#2563EB',\n },\n} as const\n\nexport type Colors = typeof colors\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const lightTheme: Theme = {\n background: colors.neutral[0],\n surface: colors.neutral[100],\n border: colors.neutral[200],\n onBackground: colors.neutral[900],\n onSurface: colors.neutral[800],\n muted: colors.neutral[500],\n primary: colors.brand.primary,\n secondary: colors.brand.secondary,\n success: colors.success.default,\n error: colors.error.default,\n warning: colors.warning.default,\n info: colors.info.default,\n}\n","import { colors } from '../tokens/colors'\nimport type { Theme } from './types'\n\nexport const darkTheme: Theme = {\n background: colors.neutral[900],\n surface: colors.neutral[800],\n border: colors.neutral[700],\n onBackground: colors.neutral[0],\n onSurface: colors.neutral[100],\n muted: colors.neutral[400],\n primary: colors.brand.primary,\n secondary: colors.brand.secondary,\n success: colors.success.light,\n error: colors.error.light,\n warning: colors.warning.light,\n info: colors.info.light,\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EAEA,SAAS;AAAA,IACP,GAAK;AAAA,IACL,IAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,OAAO;AAAA,IACL,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,MAAM;AAAA,IACJ,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AACF;;;ACxCO,IAAM,aAAoB;AAAA,EAC/B,YAAc,OAAO,QAAQ,CAAC;AAAA,EAC9B,SAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,QAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,cAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,WAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,OAAc,OAAO,QAAQ,GAAG;AAAA,EAChC,SAAc,OAAO,MAAM;AAAA,EAC3B,WAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,OAAc,OAAO,MAAM;AAAA,EAC3B,SAAc,OAAO,QAAQ;AAAA,EAC7B,MAAc,OAAO,KAAK;AAC5B;;;ACbO,IAAM,YAAmB;AAAA,EAC9B,YAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,QAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,cAAe,OAAO,QAAQ,CAAC;AAAA,EAC/B,WAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,OAAe,OAAO,QAAQ,GAAG;AAAA,EACjC,SAAe,OAAO,MAAM;AAAA,EAC5B,WAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,OAAe,OAAO,MAAM;AAAA,EAC5B,SAAe,OAAO,QAAQ;AAAA,EAC9B,MAAe,OAAO,KAAK;AAC7B;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* Generated by generateTheme.ts — do not edit manually */
|
|
2
|
+
@theme {
|
|
3
|
+
--color-brand-primary: #FF6B35;
|
|
4
|
+
--color-brand-secondary: #1A1A2E;
|
|
5
|
+
--color-neutral-0: #FFFFFF;
|
|
6
|
+
--color-neutral-50: #FAFAFA;
|
|
7
|
+
--color-neutral-100: #F5F5F5;
|
|
8
|
+
--color-neutral-200: #E5E5E5;
|
|
9
|
+
--color-neutral-300: #D4D4D4;
|
|
10
|
+
--color-neutral-400: #A3A3A3;
|
|
11
|
+
--color-neutral-500: #737373;
|
|
12
|
+
--color-neutral-600: #525252;
|
|
13
|
+
--color-neutral-700: #404040;
|
|
14
|
+
--color-neutral-800: #262626;
|
|
15
|
+
--color-neutral-900: #121212;
|
|
16
|
+
--color-success-light: #4ADE80;
|
|
17
|
+
--color-success: #22C55E;
|
|
18
|
+
--color-success-dark: #16A34A;
|
|
19
|
+
--color-error-light: #F87171;
|
|
20
|
+
--color-error: #EF4444;
|
|
21
|
+
--color-error-dark: #DC2626;
|
|
22
|
+
--color-warning-light: #FCD34D;
|
|
23
|
+
--color-warning: #F59E0B;
|
|
24
|
+
--color-warning-dark: #D97706;
|
|
25
|
+
--color-info-light: #60A5FA;
|
|
26
|
+
--color-info: #3B82F6;
|
|
27
|
+
--color-info-dark: #2563EB;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media (prefers-color-scheme: dark) {
|
|
31
|
+
@theme {
|
|
32
|
+
--color-neutral-0: #121212;
|
|
33
|
+
--color-neutral-50: #262626;
|
|
34
|
+
--color-neutral-100: #262626;
|
|
35
|
+
--color-neutral-200: #404040;
|
|
36
|
+
--color-neutral-300: #525252;
|
|
37
|
+
--color-neutral-700: #D4D4D4;
|
|
38
|
+
--color-neutral-800: #E5E5E5;
|
|
39
|
+
--color-neutral-900: #FFFFFF;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
declare const colors: {
|
|
2
|
+
readonly brand: {
|
|
3
|
+
readonly primary: "#FF6B35";
|
|
4
|
+
readonly secondary: "#1A1A2E";
|
|
5
|
+
};
|
|
6
|
+
readonly neutral: {
|
|
7
|
+
readonly 0: "#FFFFFF";
|
|
8
|
+
readonly 50: "#FAFAFA";
|
|
9
|
+
readonly 100: "#F5F5F5";
|
|
10
|
+
readonly 200: "#E5E5E5";
|
|
11
|
+
readonly 300: "#D4D4D4";
|
|
12
|
+
readonly 400: "#A3A3A3";
|
|
13
|
+
readonly 500: "#737373";
|
|
14
|
+
readonly 600: "#525252";
|
|
15
|
+
readonly 700: "#404040";
|
|
16
|
+
readonly 800: "#262626";
|
|
17
|
+
readonly 900: "#121212";
|
|
18
|
+
};
|
|
19
|
+
readonly success: {
|
|
20
|
+
readonly light: "#4ADE80";
|
|
21
|
+
readonly default: "#22C55E";
|
|
22
|
+
readonly dark: "#16A34A";
|
|
23
|
+
};
|
|
24
|
+
readonly error: {
|
|
25
|
+
readonly light: "#F87171";
|
|
26
|
+
readonly default: "#EF4444";
|
|
27
|
+
readonly dark: "#DC2626";
|
|
28
|
+
};
|
|
29
|
+
readonly warning: {
|
|
30
|
+
readonly light: "#FCD34D";
|
|
31
|
+
readonly default: "#F59E0B";
|
|
32
|
+
readonly dark: "#D97706";
|
|
33
|
+
};
|
|
34
|
+
readonly info: {
|
|
35
|
+
readonly light: "#60A5FA";
|
|
36
|
+
readonly default: "#3B82F6";
|
|
37
|
+
readonly dark: "#2563EB";
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
type Colors = typeof colors;
|
|
41
|
+
|
|
42
|
+
export { type Colors, colors };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
declare const colors: {
|
|
2
|
+
readonly brand: {
|
|
3
|
+
readonly primary: "#FF6B35";
|
|
4
|
+
readonly secondary: "#1A1A2E";
|
|
5
|
+
};
|
|
6
|
+
readonly neutral: {
|
|
7
|
+
readonly 0: "#FFFFFF";
|
|
8
|
+
readonly 50: "#FAFAFA";
|
|
9
|
+
readonly 100: "#F5F5F5";
|
|
10
|
+
readonly 200: "#E5E5E5";
|
|
11
|
+
readonly 300: "#D4D4D4";
|
|
12
|
+
readonly 400: "#A3A3A3";
|
|
13
|
+
readonly 500: "#737373";
|
|
14
|
+
readonly 600: "#525252";
|
|
15
|
+
readonly 700: "#404040";
|
|
16
|
+
readonly 800: "#262626";
|
|
17
|
+
readonly 900: "#121212";
|
|
18
|
+
};
|
|
19
|
+
readonly success: {
|
|
20
|
+
readonly light: "#4ADE80";
|
|
21
|
+
readonly default: "#22C55E";
|
|
22
|
+
readonly dark: "#16A34A";
|
|
23
|
+
};
|
|
24
|
+
readonly error: {
|
|
25
|
+
readonly light: "#F87171";
|
|
26
|
+
readonly default: "#EF4444";
|
|
27
|
+
readonly dark: "#DC2626";
|
|
28
|
+
};
|
|
29
|
+
readonly warning: {
|
|
30
|
+
readonly light: "#FCD34D";
|
|
31
|
+
readonly default: "#F59E0B";
|
|
32
|
+
readonly dark: "#D97706";
|
|
33
|
+
};
|
|
34
|
+
readonly info: {
|
|
35
|
+
readonly light: "#60A5FA";
|
|
36
|
+
readonly default: "#3B82F6";
|
|
37
|
+
readonly dark: "#2563EB";
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
type Colors = typeof colors;
|
|
41
|
+
|
|
42
|
+
export { type Colors, colors };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/tokens/index.ts
|
|
21
|
+
var tokens_exports = {};
|
|
22
|
+
__export(tokens_exports, {
|
|
23
|
+
colors: () => colors
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(tokens_exports);
|
|
26
|
+
|
|
27
|
+
// src/tokens/colors.ts
|
|
28
|
+
var colors = {
|
|
29
|
+
brand: {
|
|
30
|
+
primary: "#FF6B35",
|
|
31
|
+
secondary: "#1A1A2E"
|
|
32
|
+
},
|
|
33
|
+
neutral: {
|
|
34
|
+
0: "#FFFFFF",
|
|
35
|
+
50: "#FAFAFA",
|
|
36
|
+
100: "#F5F5F5",
|
|
37
|
+
200: "#E5E5E5",
|
|
38
|
+
300: "#D4D4D4",
|
|
39
|
+
400: "#A3A3A3",
|
|
40
|
+
500: "#737373",
|
|
41
|
+
600: "#525252",
|
|
42
|
+
700: "#404040",
|
|
43
|
+
800: "#262626",
|
|
44
|
+
900: "#121212"
|
|
45
|
+
},
|
|
46
|
+
success: {
|
|
47
|
+
light: "#4ADE80",
|
|
48
|
+
default: "#22C55E",
|
|
49
|
+
dark: "#16A34A"
|
|
50
|
+
},
|
|
51
|
+
error: {
|
|
52
|
+
light: "#F87171",
|
|
53
|
+
default: "#EF4444",
|
|
54
|
+
dark: "#DC2626"
|
|
55
|
+
},
|
|
56
|
+
warning: {
|
|
57
|
+
light: "#FCD34D",
|
|
58
|
+
default: "#F59E0B",
|
|
59
|
+
dark: "#D97706"
|
|
60
|
+
},
|
|
61
|
+
info: {
|
|
62
|
+
light: "#60A5FA",
|
|
63
|
+
default: "#3B82F6",
|
|
64
|
+
dark: "#2563EB"
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
68
|
+
0 && (module.exports = {
|
|
69
|
+
colors
|
|
70
|
+
});
|
|
71
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/tokens/index.ts","../../src/tokens/colors.ts"],"sourcesContent":["export * from './colors'\n","export const colors = {\n brand: {\n primary: '#FF6B35',\n secondary: '#1A1A2E',\n },\n\n neutral: {\n 0: '#FFFFFF',\n 50: '#FAFAFA',\n 100: '#F5F5F5',\n 200: '#E5E5E5',\n 300: '#D4D4D4',\n 400: '#A3A3A3',\n 500: '#737373',\n 600: '#525252',\n 700: '#404040',\n 800: '#262626',\n 900: '#121212',\n },\n\n success: {\n light: '#4ADE80',\n default: '#22C55E',\n dark: '#16A34A',\n },\n\n error: {\n light: '#F87171',\n default: '#EF4444',\n dark: '#DC2626',\n },\n\n warning: {\n light: '#FCD34D',\n default: '#F59E0B',\n dark: '#D97706',\n },\n\n info: {\n light: '#60A5FA',\n default: '#3B82F6',\n dark: '#2563EB',\n },\n} as const\n\nexport type Colors = typeof colors\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,SAAW;AAAA,IACX,WAAW;AAAA,EACb;AAAA,EAEA,SAAS;AAAA,IACP,GAAK;AAAA,IACL,IAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,OAAO;AAAA,IACL,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,SAAS;AAAA,IACP,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AAAA,EAEA,MAAM;AAAA,IACJ,OAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAS;AAAA,EACX;AACF;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@12min/ds",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"sideEffects": ["dist/tailwind/theme.css"],
|
|
5
|
+
"main": "./dist/index.web.js",
|
|
6
|
+
"module": "./dist/index.web.mjs",
|
|
7
|
+
"types": "./dist/index.web.d.ts",
|
|
8
|
+
"react-native": "./dist/index.native.js",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"react-native": {
|
|
12
|
+
"types": "./dist/index.native.d.ts",
|
|
13
|
+
"default": "./dist/index.native.js"
|
|
14
|
+
},
|
|
15
|
+
"types": "./dist/index.web.d.ts",
|
|
16
|
+
"import": "./dist/index.web.mjs",
|
|
17
|
+
"require": "./dist/index.web.js"
|
|
18
|
+
},
|
|
19
|
+
"./tokens": {
|
|
20
|
+
"types": "./dist/tokens/index.d.ts",
|
|
21
|
+
"import": "./dist/tokens/index.mjs",
|
|
22
|
+
"require": "./dist/tokens/index.js"
|
|
23
|
+
},
|
|
24
|
+
"./tailwind/theme.css": "./dist/tailwind/theme.css"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"publishConfig": {
|
|
30
|
+
"access": "public"
|
|
31
|
+
},
|
|
32
|
+
"scripts": {
|
|
33
|
+
"clean": "rm -rf dist",
|
|
34
|
+
"generate:theme": "tsx --tsconfig tsconfig.scripts.json src/tailwind/generateTheme.ts",
|
|
35
|
+
"build": "pnpm clean && pnpm generate:theme && tsup && mkdir -p dist/tailwind && cp src/tailwind/theme.css dist/tailwind/theme.css",
|
|
36
|
+
"dev": "tsup --watch",
|
|
37
|
+
"typecheck": "tsc --noEmit",
|
|
38
|
+
"lint": "eslint src --ext ts,tsx",
|
|
39
|
+
"prepublishOnly": "pnpm build && pnpm typecheck"
|
|
40
|
+
},
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"react": ">=18",
|
|
43
|
+
"react-dom": ">=18",
|
|
44
|
+
"react-native": ">=0.72",
|
|
45
|
+
"tailwindcss": "^4.0.0"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"class-variance-authority": "^0.7.1",
|
|
49
|
+
"clsx": "^2.1.1",
|
|
50
|
+
"tailwind-merge": "^3.0.0"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@types/node": "^25.6.0",
|
|
54
|
+
"@types/react": "^19.2.14",
|
|
55
|
+
"@types/react-native": "^0.73.0",
|
|
56
|
+
"eslint": "^9.39.4",
|
|
57
|
+
"tsup": "^8.0.0",
|
|
58
|
+
"tsx": "^4.7.0",
|
|
59
|
+
"typescript": "^5.3.0"
|
|
60
|
+
}
|
|
61
|
+
}
|