@westayltd/design-tokens 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 (4) hide show
  1. package/colors.json +112 -48
  2. package/package.json +6 -36
  3. package/README.md +0 -108
  4. package/tsconfig.json +0 -17
package/colors.json CHANGED
@@ -2,79 +2,143 @@
2
2
  "light": {
3
3
  "brand": {
4
4
  "crimson": {
5
- "900": "#7A0C0C",
6
- "700": "#B11212",
5
+ "800": "#8C1D18",
6
+ "700": "#B3261E",
7
+ "600": "#D32F2F",
7
8
  "500": "#E53935",
8
- "300": "#F19999",
9
+ "400": "#EF5350",
10
+ "300": "#E57373",
11
+ "200": "#EF9A9A",
9
12
  "100": "#FDECEC"
10
13
  },
11
14
  "burgundy": {
12
- "900": "#4A0F24",
13
- "500": "#8C1D40",
14
- "100": "#F5E6EC"
15
+ "800": "#6D1B2D",
16
+ "700": "#8E2438",
17
+ "600": "#AD3B4E",
18
+ "500": "#C75A6A",
19
+ "400": "#D98C96",
20
+ "300": "#E5B4BA",
21
+ "200": "#F0D9DC",
22
+ "100": "#FBF1F2"
15
23
  },
16
- "royal": {
17
- "900": "#0B2C5D",
18
- "500": "#0D47A1",
24
+ "royals": {
25
+ "800": "#0D2A4D",
26
+ "700": "#123E6B",
27
+ "600": "#15528C",
28
+ "500": "#1565C0",
29
+ "400": "#1E88E5",
30
+ "300": "#42A5F5",
31
+ "200": "#90CAF9",
19
32
  "100": "#E3F2FD"
20
33
  },
21
- "mint": {
22
- "900": "#0F4D3C",
23
- "500": "#2E7D6B",
24
- "100": "#E0F4EF"
34
+ "oldMoney": {
35
+ "800": "#1F3D34",
36
+ "700": "#29544A",
37
+ "600": "#336B5F",
38
+ "500": "#3F7F72",
39
+ "400": "#6BA79B",
40
+ "300": "#9EC6BE",
41
+ "200": "#CFE5E1",
42
+ "100": "#EDF7F5"
43
+ },
44
+ "driftwood": {
45
+ "800": "#8A5A2B",
46
+ "700": "#A66A32",
47
+ "600": "#BF7A3A",
48
+ "500": "#D18E4B",
49
+ "400": "#E3AD74",
50
+ "300": "#EFC89E",
51
+ "200": "#F6DEC4",
52
+ "100": "#FCF2E8"
53
+ },
54
+ "oceanic": {
55
+ "800": "#00796B",
56
+ "700": "#009688",
57
+ "600": "#26A69A",
58
+ "500": "#2EC4B6",
59
+ "400": "#6EE7DB",
60
+ "300": "#9BF0E8",
61
+ "200": "#CFF8F3",
62
+ "100": "#ECFDFB"
25
63
  }
26
64
  },
27
65
 
28
- "surface": {
29
- "bg": "#FFFFFF",
30
- "subtle": "#F7F7F7",
31
- "raised": "#FFFFFF",
32
- "border": "#E5E7EB"
66
+ "neutral": {
67
+ "monochrome": {
68
+ "800": "#000000",
69
+ "700": "#1A1A1A",
70
+ "600": "#333333",
71
+ "500": "#4D4D4D",
72
+ "400": "#666666",
73
+ "300": "#808080",
74
+ "200": "#B3B3B3",
75
+ "100": "#FFFFFF"
76
+ },
77
+ "greyscale": {
78
+ "800": "#111827",
79
+ "700": "#1F2937",
80
+ "600": "#374151",
81
+ "500": "#4B5563",
82
+ "400": "#9CA3AF",
83
+ "300": "#D1D5DB",
84
+ "200": "#E5E7EB",
85
+ "100": "#F9FAFB"
86
+ }
33
87
  },
34
88
 
35
- "text": {
36
- "primary": "#111827",
37
- "secondary": "#4B5563",
38
- "muted": "#9CA3AF",
39
- "inverse": "#FFFFFF"
89
+ "feedback": {
90
+ "success": {
91
+ "800": "#1B5E20",
92
+ "700": "#2E7D32",
93
+ "600": "#388E3C",
94
+ "500": "#4CAF50",
95
+ "400": "#66BB6A",
96
+ "300": "#81C784",
97
+ "200": "#A5D6A7",
98
+ "100": "#E8F5E9"
99
+ },
100
+ "error": {
101
+ "800": "#8E1B1B",
102
+ "700": "#B3261E",
103
+ "600": "#D32F2F",
104
+ "500": "#E53935",
105
+ "400": "#EF5350",
106
+ "300": "#E57373",
107
+ "200": "#EF9A9A",
108
+ "100": "#FDECEC"
109
+ },
110
+ "warning": {
111
+ "800": "#8C6D1F",
112
+ "700": "#B28704",
113
+ "600": "#F9A825",
114
+ "500": "#FBC02D",
115
+ "400": "#FFD54F",
116
+ "300": "#FFE082",
117
+ "200": "#FFECB3",
118
+ "100": "#FFF8E1"
119
+ }
40
120
  },
41
121
 
42
- "feedback": {
43
- "success": "#2E7D32",
44
- "error": "#C62828",
45
- "warning": "#F9A825",
46
- "info": "#1565C0"
122
+ "gradient": {
123
+ "membership": {
124
+ "access": ["#1A237E", "#3949AB"],
125
+ "elite": ["#4E342E", "#8D6E63"],
126
+ "prestige": ["#C9A23F", "#F5E082"],
127
+ "prive": ["#212121", "#000000"]
128
+ }
47
129
  }
48
130
  },
49
131
 
50
132
  "dark": {
51
- "brand": {
52
- "crimson": {
53
- "900": "#FDECEC",
54
- "700": "#F19999",
55
- "500": "#E53935"
56
- }
57
- },
58
-
59
133
  "surface": {
60
134
  "bg": "#0B0B0C",
61
- "subtle": "#161618",
62
- "raised": "#1F1F22",
135
+ "raised": "#161618",
63
136
  "border": "#2E2E33"
64
137
  },
65
-
66
138
  "text": {
67
139
  "primary": "#F9FAFB",
68
140
  "secondary": "#D1D5DB",
69
- "muted": "#9CA3AF",
70
- "inverse": "#111827"
71
- },
72
-
73
- "feedback": {
74
- "success": "#81C784",
75
- "error": "#EF9A9A",
76
- "warning": "#FFE082",
77
- "info": "#90CAF9"
141
+ "muted": "#9CA3AF"
78
142
  }
79
143
  }
80
144
  }
package/package.json CHANGED
@@ -1,11 +1,9 @@
1
1
  {
2
2
  "name": "@westayltd/design-tokens",
3
- "version": "0.1.0",
4
- "description": "Design tokens for Westay applications",
3
+ "version": "0.2.0",
5
4
  "type": "module",
6
- "main": "./dist/index.js",
7
- "module": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
9
7
  "files": [
10
8
  "dist",
11
9
  "*.json"
@@ -13,39 +11,11 @@
13
11
  "exports": {
14
12
  ".": {
15
13
  "types": "./dist/index.d.ts",
16
- "import": "./dist/index.js",
17
- "require": "./dist/index.cjs"
14
+ "default": "./dist/index.js"
18
15
  },
19
16
  "./colors": "./colors.json",
20
- "./colors.json": "./colors.json",
21
17
  "./spacing": "./spacing.json",
22
- "./spacing.json": "./spacing.json",
23
18
  "./typography": "./typography.json",
24
- "./typography.json": "./typography.json",
25
- "./radius": "./radius.json",
26
- "./radius.json": "./radius.json"
27
- },
28
- "scripts": {
29
- "build": "tsup",
30
- "prepublishOnly": "npm run build"
31
- },
32
- "devDependencies": {
33
- "tsup": "^8.3.0",
34
- "typescript": "^5.7.0"
35
- },
36
- "keywords": [
37
- "design-tokens",
38
- "westay",
39
- "design-system",
40
- "css",
41
- "tokens"
42
- ],
43
- "license": "MIT",
44
- "repository": {
45
- "type": "git",
46
- "url": "https://github.com/westay/design-tokens"
47
- },
48
- "publishConfig": {
49
- "access": "public"
19
+ "./radius": "./radius.json"
50
20
  }
51
- }
21
+ }
package/README.md DELETED
@@ -1,108 +0,0 @@
1
- # @westay/design-tokens
2
-
3
- Design tokens for Westay applications. This package provides colors, spacing, typography, and border radius tokens for consistent UI development.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @westay/design-tokens
9
- ```
10
-
11
- ## Usage
12
-
13
- ### Import all tokens
14
-
15
- ```typescript
16
- import { tokens } from "@westay/design-tokens";
17
-
18
- // Access colors by theme
19
- const bgColor = tokens.colors.light.surface.bg;
20
- const darkBgColor = tokens.colors.dark.surface.bg;
21
-
22
- // Access spacing
23
- const padding = tokens.spacing["4"]; // "16px"
24
-
25
- // Access typography
26
- const fontSize = tokens.typography.fontSize.base; // "16px"
27
-
28
- // Access radius
29
- const borderRadius = tokens.radius.md; // "10px"
30
- ```
31
-
32
- ### Import individual token files
33
-
34
- ```typescript
35
- // Import specific token categories
36
- import colors from "@westay/design-tokens/colors";
37
- import spacing from "@westay/design-tokens/spacing";
38
- import typography from "@westay/design-tokens/typography";
39
- import radius from "@westay/design-tokens/radius";
40
- ```
41
-
42
- ### Direct JSON imports
43
-
44
- ```typescript
45
- import colors from "@westay/design-tokens/colors.json";
46
- ```
47
-
48
- ## Token Structure
49
-
50
- ### Colors
51
-
52
- Organized by theme (`light` / `dark`) with the following categories:
53
-
54
- - `brand` - Primary brand colors (crimson, burgundy, royal, mint)
55
- - `surface` - Background and surface colors
56
- - `text` - Text colors
57
- - `feedback` - Status colors (success, error, warning, info)
58
-
59
- ### Spacing
60
-
61
- Numeric scale from `0` to `12`:
62
-
63
- | Token | Value |
64
- |-------|-------|
65
- | 0 | 0px |
66
- | 1 | 4px |
67
- | 2 | 8px |
68
- | 3 | 12px |
69
- | 4 | 16px |
70
- | 5 | 20px |
71
- | 6 | 24px |
72
- | 8 | 32px |
73
- | 10 | 40px |
74
- | 12 | 48px |
75
-
76
- ### Typography
77
-
78
- - `fontFamily` - Font stacks
79
- - `fontSize` - Size scale (xs to 3xl)
80
- - `fontWeight` - Weight values (regular, medium, semibold, bold)
81
- - `lineHeight` - Line height values (tight, normal, relaxed)
82
-
83
- ### Radius
84
-
85
- | Token | Value |
86
- |-------|--------|
87
- | none | 0px |
88
- | sm | 6px |
89
- | md | 10px |
90
- | lg | 14px |
91
- | xl | 20px |
92
- | full | 9999px |
93
-
94
- ## TypeScript
95
-
96
- This package includes TypeScript definitions. The `ThemeMode` type is exported for theme switching:
97
-
98
- ```typescript
99
- import { tokens, ThemeMode } from "@westay/design-tokens";
100
-
101
- function getColors(mode: ThemeMode) {
102
- return tokens.colors[mode];
103
- }
104
- ```
105
-
106
- ## License
107
-
108
- MIT
package/tsconfig.json DELETED
@@ -1,17 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "target": "ES2020",
4
- "module": "ESNext",
5
- "moduleResolution": "bundler",
6
- "declaration": true,
7
- "declarationMap": true,
8
- "strict": true,
9
- "esModuleInterop": true,
10
- "skipLibCheck": true,
11
- "resolveJsonModule": true,
12
- "outDir": "./dist",
13
- "rootDir": "."
14
- },
15
- "include": ["index.ts"],
16
- "exclude": ["node_modules", "dist"]
17
- }