@westayltd/design-tokens 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.
Files changed (13) hide show
  1. package/README.md +108 -0
  2. package/colors.json +80 -0
  3. package/dist/index.cjs +172 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +266 -0
  6. package/dist/index.d.ts +266 -0
  7. package/dist/index.js +141 -0
  8. package/dist/index.js.map +1 -0
  9. package/package.json +51 -0
  10. package/radius.json +8 -0
  11. package/spacing.json +12 -0
  12. package/tsconfig.json +17 -0
  13. package/typography.json +28 -0
package/README.md ADDED
@@ -0,0 +1,108 @@
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/colors.json ADDED
@@ -0,0 +1,80 @@
1
+ {
2
+ "light": {
3
+ "brand": {
4
+ "crimson": {
5
+ "900": "#7A0C0C",
6
+ "700": "#B11212",
7
+ "500": "#E53935",
8
+ "300": "#F19999",
9
+ "100": "#FDECEC"
10
+ },
11
+ "burgundy": {
12
+ "900": "#4A0F24",
13
+ "500": "#8C1D40",
14
+ "100": "#F5E6EC"
15
+ },
16
+ "royal": {
17
+ "900": "#0B2C5D",
18
+ "500": "#0D47A1",
19
+ "100": "#E3F2FD"
20
+ },
21
+ "mint": {
22
+ "900": "#0F4D3C",
23
+ "500": "#2E7D6B",
24
+ "100": "#E0F4EF"
25
+ }
26
+ },
27
+
28
+ "surface": {
29
+ "bg": "#FFFFFF",
30
+ "subtle": "#F7F7F7",
31
+ "raised": "#FFFFFF",
32
+ "border": "#E5E7EB"
33
+ },
34
+
35
+ "text": {
36
+ "primary": "#111827",
37
+ "secondary": "#4B5563",
38
+ "muted": "#9CA3AF",
39
+ "inverse": "#FFFFFF"
40
+ },
41
+
42
+ "feedback": {
43
+ "success": "#2E7D32",
44
+ "error": "#C62828",
45
+ "warning": "#F9A825",
46
+ "info": "#1565C0"
47
+ }
48
+ },
49
+
50
+ "dark": {
51
+ "brand": {
52
+ "crimson": {
53
+ "900": "#FDECEC",
54
+ "700": "#F19999",
55
+ "500": "#E53935"
56
+ }
57
+ },
58
+
59
+ "surface": {
60
+ "bg": "#0B0B0C",
61
+ "subtle": "#161618",
62
+ "raised": "#1F1F22",
63
+ "border": "#2E2E33"
64
+ },
65
+
66
+ "text": {
67
+ "primary": "#F9FAFB",
68
+ "secondary": "#D1D5DB",
69
+ "muted": "#9CA3AF",
70
+ "inverse": "#111827"
71
+ },
72
+
73
+ "feedback": {
74
+ "success": "#81C784",
75
+ "error": "#EF9A9A",
76
+ "warning": "#FFE082",
77
+ "info": "#90CAF9"
78
+ }
79
+ }
80
+ }
package/dist/index.cjs ADDED
@@ -0,0 +1,172 @@
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.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ colors: () => colors_default,
24
+ radius: () => radius_default,
25
+ spacing: () => spacing_default,
26
+ tokens: () => tokens,
27
+ typography: () => typography_default
28
+ });
29
+ module.exports = __toCommonJS(index_exports);
30
+
31
+ // colors.json
32
+ var colors_default = {
33
+ light: {
34
+ brand: {
35
+ crimson: {
36
+ "900": "#7A0C0C",
37
+ "700": "#B11212",
38
+ "500": "#E53935",
39
+ "300": "#F19999",
40
+ "100": "#FDECEC"
41
+ },
42
+ burgundy: {
43
+ "900": "#4A0F24",
44
+ "500": "#8C1D40",
45
+ "100": "#F5E6EC"
46
+ },
47
+ royal: {
48
+ "900": "#0B2C5D",
49
+ "500": "#0D47A1",
50
+ "100": "#E3F2FD"
51
+ },
52
+ mint: {
53
+ "900": "#0F4D3C",
54
+ "500": "#2E7D6B",
55
+ "100": "#E0F4EF"
56
+ }
57
+ },
58
+ surface: {
59
+ bg: "#FFFFFF",
60
+ subtle: "#F7F7F7",
61
+ raised: "#FFFFFF",
62
+ border: "#E5E7EB"
63
+ },
64
+ text: {
65
+ primary: "#111827",
66
+ secondary: "#4B5563",
67
+ muted: "#9CA3AF",
68
+ inverse: "#FFFFFF"
69
+ },
70
+ feedback: {
71
+ success: "#2E7D32",
72
+ error: "#C62828",
73
+ warning: "#F9A825",
74
+ info: "#1565C0"
75
+ }
76
+ },
77
+ dark: {
78
+ brand: {
79
+ crimson: {
80
+ "900": "#FDECEC",
81
+ "700": "#F19999",
82
+ "500": "#E53935"
83
+ }
84
+ },
85
+ surface: {
86
+ bg: "#0B0B0C",
87
+ subtle: "#161618",
88
+ raised: "#1F1F22",
89
+ border: "#2E2E33"
90
+ },
91
+ text: {
92
+ primary: "#F9FAFB",
93
+ secondary: "#D1D5DB",
94
+ muted: "#9CA3AF",
95
+ inverse: "#111827"
96
+ },
97
+ feedback: {
98
+ success: "#81C784",
99
+ error: "#EF9A9A",
100
+ warning: "#FFE082",
101
+ info: "#90CAF9"
102
+ }
103
+ }
104
+ };
105
+
106
+ // spacing.json
107
+ var spacing_default = {
108
+ "0": "0px",
109
+ "1": "4px",
110
+ "2": "8px",
111
+ "3": "12px",
112
+ "4": "16px",
113
+ "5": "20px",
114
+ "6": "24px",
115
+ "8": "32px",
116
+ "10": "40px",
117
+ "12": "48px"
118
+ };
119
+
120
+ // typography.json
121
+ var typography_default = {
122
+ fontFamily: {
123
+ sans: ["Helvetica", "Arial", "sans-serif"]
124
+ },
125
+ fontSize: {
126
+ xs: "12px",
127
+ sm: "14px",
128
+ base: "16px",
129
+ lg: "18px",
130
+ xl: "20px",
131
+ "2xl": "24px",
132
+ "3xl": "30px"
133
+ },
134
+ fontWeight: {
135
+ regular: "400",
136
+ medium: "500",
137
+ semibold: "600",
138
+ bold: "700"
139
+ },
140
+ lineHeight: {
141
+ tight: "1.2",
142
+ normal: "1.5",
143
+ relaxed: "1.7"
144
+ }
145
+ };
146
+
147
+ // radius.json
148
+ var radius_default = {
149
+ none: "0px",
150
+ sm: "6px",
151
+ md: "10px",
152
+ lg: "14px",
153
+ xl: "20px",
154
+ full: "9999px"
155
+ };
156
+
157
+ // index.ts
158
+ var tokens = {
159
+ colors: colors_default,
160
+ spacing: spacing_default,
161
+ typography: typography_default,
162
+ radius: radius_default
163
+ };
164
+ // Annotate the CommonJS export names for ESM import in node:
165
+ 0 && (module.exports = {
166
+ colors,
167
+ radius,
168
+ spacing,
169
+ tokens,
170
+ typography
171
+ });
172
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../index.ts","../colors.json","../spacing.json","../typography.json","../radius.json"],"sourcesContent":["import colors from \"./colors.json\";\nimport spacing from \"./spacing.json\";\nimport typography from \"./typography.json\";\nimport radius from \"./radius.json\";\n\nexport const tokens = {\n colors,\n spacing,\n typography,\n radius,\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n\nexport type Colors = typeof colors;\nexport type Spacing = typeof spacing;\nexport type Typography = typeof typography;\nexport type Radius = typeof radius;\nexport type Tokens = typeof tokens;\n\nexport { colors, spacing, typography, radius };\n","{\n \"light\": {\n \"brand\": {\n \"crimson\": {\n \"900\": \"#7A0C0C\",\n \"700\": \"#B11212\",\n \"500\": \"#E53935\",\n \"300\": \"#F19999\",\n \"100\": \"#FDECEC\"\n },\n \"burgundy\": {\n \"900\": \"#4A0F24\",\n \"500\": \"#8C1D40\",\n \"100\": \"#F5E6EC\"\n },\n \"royal\": {\n \"900\": \"#0B2C5D\",\n \"500\": \"#0D47A1\",\n \"100\": \"#E3F2FD\"\n },\n \"mint\": {\n \"900\": \"#0F4D3C\",\n \"500\": \"#2E7D6B\",\n \"100\": \"#E0F4EF\"\n }\n },\n\n \"surface\": {\n \"bg\": \"#FFFFFF\",\n \"subtle\": \"#F7F7F7\",\n \"raised\": \"#FFFFFF\",\n \"border\": \"#E5E7EB\"\n },\n\n \"text\": {\n \"primary\": \"#111827\",\n \"secondary\": \"#4B5563\",\n \"muted\": \"#9CA3AF\",\n \"inverse\": \"#FFFFFF\"\n },\n\n \"feedback\": {\n \"success\": \"#2E7D32\",\n \"error\": \"#C62828\",\n \"warning\": \"#F9A825\",\n \"info\": \"#1565C0\"\n }\n },\n\n \"dark\": {\n \"brand\": {\n \"crimson\": {\n \"900\": \"#FDECEC\",\n \"700\": \"#F19999\",\n \"500\": \"#E53935\"\n }\n },\n\n \"surface\": {\n \"bg\": \"#0B0B0C\",\n \"subtle\": \"#161618\",\n \"raised\": \"#1F1F22\",\n \"border\": \"#2E2E33\"\n },\n\n \"text\": {\n \"primary\": \"#F9FAFB\",\n \"secondary\": \"#D1D5DB\",\n \"muted\": \"#9CA3AF\",\n \"inverse\": \"#111827\"\n },\n\n \"feedback\": {\n \"success\": \"#81C784\",\n \"error\": \"#EF9A9A\",\n \"warning\": \"#FFE082\",\n \"info\": \"#90CAF9\"\n }\n }\n}\n","{\n \"0\": \"0px\",\n \"1\": \"4px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\"\n}\n","{\n \"fontFamily\": {\n \"sans\": [\"Helvetica\", \"Arial\", \"sans-serif\"]\n },\n\n \"fontSize\": {\n \"xs\": \"12px\",\n \"sm\": \"14px\",\n \"base\": \"16px\",\n \"lg\": \"18px\",\n \"xl\": \"20px\",\n \"2xl\": \"24px\",\n \"3xl\": \"30px\"\n },\n\n \"fontWeight\": {\n \"regular\": \"400\",\n \"medium\": \"500\",\n \"semibold\": \"600\",\n \"bold\": \"700\"\n },\n\n \"lineHeight\": {\n \"tight\": \"1.2\",\n \"normal\": \"1.5\",\n \"relaxed\": \"1.7\"\n }\n}\n","{\n \"none\": \"0px\",\n \"sm\": \"6px\",\n \"md\": \"10px\",\n \"lg\": \"14px\",\n \"xl\": \"20px\",\n \"full\": \"9999px\"\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA,EACE,OAAS;AAAA,IACP,OAAS;AAAA,MACP,SAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,UAAY;AAAA,QACV,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,OAAS;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,MAAQ;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,SAAW;AAAA,MACT,IAAM;AAAA,MACN,QAAU;AAAA,MACV,QAAU;AAAA,MACV,QAAU;AAAA,IACZ;AAAA,IAEA,MAAQ;AAAA,MACN,SAAW;AAAA,MACX,WAAa;AAAA,MACb,OAAS;AAAA,MACT,SAAW;AAAA,IACb;AAAA,IAEA,UAAY;AAAA,MACV,SAAW;AAAA,MACX,OAAS;AAAA,MACT,SAAW;AAAA,MACX,MAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,MAAQ;AAAA,IACN,OAAS;AAAA,MACP,SAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,SAAW;AAAA,MACT,IAAM;AAAA,MACN,QAAU;AAAA,MACV,QAAU;AAAA,MACV,QAAU;AAAA,IACZ;AAAA,IAEA,MAAQ;AAAA,MACN,SAAW;AAAA,MACX,WAAa;AAAA,MACb,OAAS;AAAA,MACT,SAAW;AAAA,IACb;AAAA,IAEA,UAAY;AAAA,MACV,SAAW;AAAA,MACX,OAAS;AAAA,MACT,SAAW;AAAA,MACX,MAAQ;AAAA,IACV;AAAA,EACF;AACF;;;AC/EA;AAAA,EACE,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR;;;ACXA;AAAA,EACE,YAAc;AAAA,IACZ,MAAQ,CAAC,aAAa,SAAS,YAAY;AAAA,EAC7C;AAAA,EAEA,UAAY;AAAA,IACV,IAAM;AAAA,IACN,IAAM;AAAA,IACN,MAAQ;AAAA,IACR,IAAM;AAAA,IACN,IAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EAEA,YAAc;AAAA,IACZ,SAAW;AAAA,IACX,QAAU;AAAA,IACV,UAAY;AAAA,IACZ,MAAQ;AAAA,EACV;AAAA,EAEA,YAAc;AAAA,IACZ,OAAS;AAAA,IACT,QAAU;AAAA,IACV,SAAW;AAAA,EACb;AACF;;;AC3BA;AAAA,EACE,MAAQ;AAAA,EACR,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,MAAQ;AACV;;;AJFO,IAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,266 @@
1
+ var light = {
2
+ brand: {
3
+ crimson: {
4
+ "100": "#FDECEC",
5
+ "300": "#F19999",
6
+ "500": "#E53935",
7
+ "700": "#B11212",
8
+ "900": "#7A0C0C"
9
+ },
10
+ burgundy: {
11
+ "100": "#F5E6EC",
12
+ "500": "#8C1D40",
13
+ "900": "#4A0F24"
14
+ },
15
+ royal: {
16
+ "100": "#E3F2FD",
17
+ "500": "#0D47A1",
18
+ "900": "#0B2C5D"
19
+ },
20
+ mint: {
21
+ "100": "#E0F4EF",
22
+ "500": "#2E7D6B",
23
+ "900": "#0F4D3C"
24
+ }
25
+ },
26
+ surface: {
27
+ bg: "#FFFFFF",
28
+ subtle: "#F7F7F7",
29
+ raised: "#FFFFFF",
30
+ border: "#E5E7EB"
31
+ },
32
+ text: {
33
+ primary: "#111827",
34
+ secondary: "#4B5563",
35
+ muted: "#9CA3AF",
36
+ inverse: "#FFFFFF"
37
+ },
38
+ feedback: {
39
+ success: "#2E7D32",
40
+ error: "#C62828",
41
+ warning: "#F9A825",
42
+ info: "#1565C0"
43
+ }
44
+ };
45
+ var dark = {
46
+ brand: {
47
+ crimson: {
48
+ "500": "#E53935",
49
+ "700": "#F19999",
50
+ "900": "#FDECEC"
51
+ }
52
+ },
53
+ surface: {
54
+ bg: "#0B0B0C",
55
+ subtle: "#161618",
56
+ raised: "#1F1F22",
57
+ border: "#2E2E33"
58
+ },
59
+ text: {
60
+ primary: "#F9FAFB",
61
+ secondary: "#D1D5DB",
62
+ muted: "#9CA3AF",
63
+ inverse: "#111827"
64
+ },
65
+ feedback: {
66
+ success: "#81C784",
67
+ error: "#EF9A9A",
68
+ warning: "#FFE082",
69
+ info: "#90CAF9"
70
+ }
71
+ };
72
+ var colors = {
73
+ light: light,
74
+ dark: dark
75
+ };
76
+
77
+ var spacing = {
78
+ "0": "0px",
79
+ "1": "4px",
80
+ "2": "8px",
81
+ "3": "12px",
82
+ "4": "16px",
83
+ "5": "20px",
84
+ "6": "24px",
85
+ "8": "32px",
86
+ "10": "40px",
87
+ "12": "48px"
88
+ };
89
+
90
+ var fontFamily = {
91
+ sans: [
92
+ "Helvetica",
93
+ "Arial",
94
+ "sans-serif"
95
+ ]
96
+ };
97
+ var fontSize = {
98
+ xs: "12px",
99
+ sm: "14px",
100
+ base: "16px",
101
+ lg: "18px",
102
+ xl: "20px",
103
+ "2xl": "24px",
104
+ "3xl": "30px"
105
+ };
106
+ var fontWeight = {
107
+ regular: "400",
108
+ medium: "500",
109
+ semibold: "600",
110
+ bold: "700"
111
+ };
112
+ var lineHeight = {
113
+ tight: "1.2",
114
+ normal: "1.5",
115
+ relaxed: "1.7"
116
+ };
117
+ var typography = {
118
+ fontFamily: fontFamily,
119
+ fontSize: fontSize,
120
+ fontWeight: fontWeight,
121
+ lineHeight: lineHeight
122
+ };
123
+
124
+ var none = "0px";
125
+ var sm = "6px";
126
+ var md = "10px";
127
+ var lg = "14px";
128
+ var xl = "20px";
129
+ var full = "9999px";
130
+ var radius = {
131
+ none: none,
132
+ sm: sm,
133
+ md: md,
134
+ lg: lg,
135
+ xl: xl,
136
+ full: full
137
+ };
138
+
139
+ declare const tokens: {
140
+ readonly colors: {
141
+ light: {
142
+ brand: {
143
+ crimson: {
144
+ "900": string;
145
+ "700": string;
146
+ "500": string;
147
+ "300": string;
148
+ "100": string;
149
+ };
150
+ burgundy: {
151
+ "900": string;
152
+ "500": string;
153
+ "100": string;
154
+ };
155
+ royal: {
156
+ "900": string;
157
+ "500": string;
158
+ "100": string;
159
+ };
160
+ mint: {
161
+ "900": string;
162
+ "500": string;
163
+ "100": string;
164
+ };
165
+ };
166
+ surface: {
167
+ bg: string;
168
+ subtle: string;
169
+ raised: string;
170
+ border: string;
171
+ };
172
+ text: {
173
+ primary: string;
174
+ secondary: string;
175
+ muted: string;
176
+ inverse: string;
177
+ };
178
+ feedback: {
179
+ success: string;
180
+ error: string;
181
+ warning: string;
182
+ info: string;
183
+ };
184
+ };
185
+ dark: {
186
+ brand: {
187
+ crimson: {
188
+ "900": string;
189
+ "700": string;
190
+ "500": string;
191
+ };
192
+ };
193
+ surface: {
194
+ bg: string;
195
+ subtle: string;
196
+ raised: string;
197
+ border: string;
198
+ };
199
+ text: {
200
+ primary: string;
201
+ secondary: string;
202
+ muted: string;
203
+ inverse: string;
204
+ };
205
+ feedback: {
206
+ success: string;
207
+ error: string;
208
+ warning: string;
209
+ info: string;
210
+ };
211
+ };
212
+ };
213
+ readonly spacing: {
214
+ "0": string;
215
+ "1": string;
216
+ "2": string;
217
+ "3": string;
218
+ "4": string;
219
+ "5": string;
220
+ "6": string;
221
+ "8": string;
222
+ "10": string;
223
+ "12": string;
224
+ };
225
+ readonly typography: {
226
+ fontFamily: {
227
+ sans: string[];
228
+ };
229
+ fontSize: {
230
+ xs: string;
231
+ sm: string;
232
+ base: string;
233
+ lg: string;
234
+ xl: string;
235
+ "2xl": string;
236
+ "3xl": string;
237
+ };
238
+ fontWeight: {
239
+ regular: string;
240
+ medium: string;
241
+ semibold: string;
242
+ bold: string;
243
+ };
244
+ lineHeight: {
245
+ tight: string;
246
+ normal: string;
247
+ relaxed: string;
248
+ };
249
+ };
250
+ readonly radius: {
251
+ none: string;
252
+ sm: string;
253
+ md: string;
254
+ lg: string;
255
+ xl: string;
256
+ full: string;
257
+ };
258
+ };
259
+ type ThemeMode = "light" | "dark";
260
+ type Colors = typeof colors;
261
+ type Spacing = typeof spacing;
262
+ type Typography = typeof typography;
263
+ type Radius = typeof radius;
264
+ type Tokens = typeof tokens;
265
+
266
+ export { type Colors, type Radius, type Spacing, type ThemeMode, type Tokens, type Typography, colors, radius, spacing, tokens, typography };
package/dist/index.d.ts ADDED
@@ -0,0 +1,266 @@
1
+ var light = {
2
+ brand: {
3
+ crimson: {
4
+ "100": "#FDECEC",
5
+ "300": "#F19999",
6
+ "500": "#E53935",
7
+ "700": "#B11212",
8
+ "900": "#7A0C0C"
9
+ },
10
+ burgundy: {
11
+ "100": "#F5E6EC",
12
+ "500": "#8C1D40",
13
+ "900": "#4A0F24"
14
+ },
15
+ royal: {
16
+ "100": "#E3F2FD",
17
+ "500": "#0D47A1",
18
+ "900": "#0B2C5D"
19
+ },
20
+ mint: {
21
+ "100": "#E0F4EF",
22
+ "500": "#2E7D6B",
23
+ "900": "#0F4D3C"
24
+ }
25
+ },
26
+ surface: {
27
+ bg: "#FFFFFF",
28
+ subtle: "#F7F7F7",
29
+ raised: "#FFFFFF",
30
+ border: "#E5E7EB"
31
+ },
32
+ text: {
33
+ primary: "#111827",
34
+ secondary: "#4B5563",
35
+ muted: "#9CA3AF",
36
+ inverse: "#FFFFFF"
37
+ },
38
+ feedback: {
39
+ success: "#2E7D32",
40
+ error: "#C62828",
41
+ warning: "#F9A825",
42
+ info: "#1565C0"
43
+ }
44
+ };
45
+ var dark = {
46
+ brand: {
47
+ crimson: {
48
+ "500": "#E53935",
49
+ "700": "#F19999",
50
+ "900": "#FDECEC"
51
+ }
52
+ },
53
+ surface: {
54
+ bg: "#0B0B0C",
55
+ subtle: "#161618",
56
+ raised: "#1F1F22",
57
+ border: "#2E2E33"
58
+ },
59
+ text: {
60
+ primary: "#F9FAFB",
61
+ secondary: "#D1D5DB",
62
+ muted: "#9CA3AF",
63
+ inverse: "#111827"
64
+ },
65
+ feedback: {
66
+ success: "#81C784",
67
+ error: "#EF9A9A",
68
+ warning: "#FFE082",
69
+ info: "#90CAF9"
70
+ }
71
+ };
72
+ var colors = {
73
+ light: light,
74
+ dark: dark
75
+ };
76
+
77
+ var spacing = {
78
+ "0": "0px",
79
+ "1": "4px",
80
+ "2": "8px",
81
+ "3": "12px",
82
+ "4": "16px",
83
+ "5": "20px",
84
+ "6": "24px",
85
+ "8": "32px",
86
+ "10": "40px",
87
+ "12": "48px"
88
+ };
89
+
90
+ var fontFamily = {
91
+ sans: [
92
+ "Helvetica",
93
+ "Arial",
94
+ "sans-serif"
95
+ ]
96
+ };
97
+ var fontSize = {
98
+ xs: "12px",
99
+ sm: "14px",
100
+ base: "16px",
101
+ lg: "18px",
102
+ xl: "20px",
103
+ "2xl": "24px",
104
+ "3xl": "30px"
105
+ };
106
+ var fontWeight = {
107
+ regular: "400",
108
+ medium: "500",
109
+ semibold: "600",
110
+ bold: "700"
111
+ };
112
+ var lineHeight = {
113
+ tight: "1.2",
114
+ normal: "1.5",
115
+ relaxed: "1.7"
116
+ };
117
+ var typography = {
118
+ fontFamily: fontFamily,
119
+ fontSize: fontSize,
120
+ fontWeight: fontWeight,
121
+ lineHeight: lineHeight
122
+ };
123
+
124
+ var none = "0px";
125
+ var sm = "6px";
126
+ var md = "10px";
127
+ var lg = "14px";
128
+ var xl = "20px";
129
+ var full = "9999px";
130
+ var radius = {
131
+ none: none,
132
+ sm: sm,
133
+ md: md,
134
+ lg: lg,
135
+ xl: xl,
136
+ full: full
137
+ };
138
+
139
+ declare const tokens: {
140
+ readonly colors: {
141
+ light: {
142
+ brand: {
143
+ crimson: {
144
+ "900": string;
145
+ "700": string;
146
+ "500": string;
147
+ "300": string;
148
+ "100": string;
149
+ };
150
+ burgundy: {
151
+ "900": string;
152
+ "500": string;
153
+ "100": string;
154
+ };
155
+ royal: {
156
+ "900": string;
157
+ "500": string;
158
+ "100": string;
159
+ };
160
+ mint: {
161
+ "900": string;
162
+ "500": string;
163
+ "100": string;
164
+ };
165
+ };
166
+ surface: {
167
+ bg: string;
168
+ subtle: string;
169
+ raised: string;
170
+ border: string;
171
+ };
172
+ text: {
173
+ primary: string;
174
+ secondary: string;
175
+ muted: string;
176
+ inverse: string;
177
+ };
178
+ feedback: {
179
+ success: string;
180
+ error: string;
181
+ warning: string;
182
+ info: string;
183
+ };
184
+ };
185
+ dark: {
186
+ brand: {
187
+ crimson: {
188
+ "900": string;
189
+ "700": string;
190
+ "500": string;
191
+ };
192
+ };
193
+ surface: {
194
+ bg: string;
195
+ subtle: string;
196
+ raised: string;
197
+ border: string;
198
+ };
199
+ text: {
200
+ primary: string;
201
+ secondary: string;
202
+ muted: string;
203
+ inverse: string;
204
+ };
205
+ feedback: {
206
+ success: string;
207
+ error: string;
208
+ warning: string;
209
+ info: string;
210
+ };
211
+ };
212
+ };
213
+ readonly spacing: {
214
+ "0": string;
215
+ "1": string;
216
+ "2": string;
217
+ "3": string;
218
+ "4": string;
219
+ "5": string;
220
+ "6": string;
221
+ "8": string;
222
+ "10": string;
223
+ "12": string;
224
+ };
225
+ readonly typography: {
226
+ fontFamily: {
227
+ sans: string[];
228
+ };
229
+ fontSize: {
230
+ xs: string;
231
+ sm: string;
232
+ base: string;
233
+ lg: string;
234
+ xl: string;
235
+ "2xl": string;
236
+ "3xl": string;
237
+ };
238
+ fontWeight: {
239
+ regular: string;
240
+ medium: string;
241
+ semibold: string;
242
+ bold: string;
243
+ };
244
+ lineHeight: {
245
+ tight: string;
246
+ normal: string;
247
+ relaxed: string;
248
+ };
249
+ };
250
+ readonly radius: {
251
+ none: string;
252
+ sm: string;
253
+ md: string;
254
+ lg: string;
255
+ xl: string;
256
+ full: string;
257
+ };
258
+ };
259
+ type ThemeMode = "light" | "dark";
260
+ type Colors = typeof colors;
261
+ type Spacing = typeof spacing;
262
+ type Typography = typeof typography;
263
+ type Radius = typeof radius;
264
+ type Tokens = typeof tokens;
265
+
266
+ export { type Colors, type Radius, type Spacing, type ThemeMode, type Tokens, type Typography, colors, radius, spacing, tokens, typography };
package/dist/index.js ADDED
@@ -0,0 +1,141 @@
1
+ // colors.json
2
+ var colors_default = {
3
+ light: {
4
+ brand: {
5
+ crimson: {
6
+ "900": "#7A0C0C",
7
+ "700": "#B11212",
8
+ "500": "#E53935",
9
+ "300": "#F19999",
10
+ "100": "#FDECEC"
11
+ },
12
+ burgundy: {
13
+ "900": "#4A0F24",
14
+ "500": "#8C1D40",
15
+ "100": "#F5E6EC"
16
+ },
17
+ royal: {
18
+ "900": "#0B2C5D",
19
+ "500": "#0D47A1",
20
+ "100": "#E3F2FD"
21
+ },
22
+ mint: {
23
+ "900": "#0F4D3C",
24
+ "500": "#2E7D6B",
25
+ "100": "#E0F4EF"
26
+ }
27
+ },
28
+ surface: {
29
+ bg: "#FFFFFF",
30
+ subtle: "#F7F7F7",
31
+ raised: "#FFFFFF",
32
+ border: "#E5E7EB"
33
+ },
34
+ text: {
35
+ primary: "#111827",
36
+ secondary: "#4B5563",
37
+ muted: "#9CA3AF",
38
+ inverse: "#FFFFFF"
39
+ },
40
+ feedback: {
41
+ success: "#2E7D32",
42
+ error: "#C62828",
43
+ warning: "#F9A825",
44
+ info: "#1565C0"
45
+ }
46
+ },
47
+ dark: {
48
+ brand: {
49
+ crimson: {
50
+ "900": "#FDECEC",
51
+ "700": "#F19999",
52
+ "500": "#E53935"
53
+ }
54
+ },
55
+ surface: {
56
+ bg: "#0B0B0C",
57
+ subtle: "#161618",
58
+ raised: "#1F1F22",
59
+ border: "#2E2E33"
60
+ },
61
+ text: {
62
+ primary: "#F9FAFB",
63
+ secondary: "#D1D5DB",
64
+ muted: "#9CA3AF",
65
+ inverse: "#111827"
66
+ },
67
+ feedback: {
68
+ success: "#81C784",
69
+ error: "#EF9A9A",
70
+ warning: "#FFE082",
71
+ info: "#90CAF9"
72
+ }
73
+ }
74
+ };
75
+
76
+ // spacing.json
77
+ var spacing_default = {
78
+ "0": "0px",
79
+ "1": "4px",
80
+ "2": "8px",
81
+ "3": "12px",
82
+ "4": "16px",
83
+ "5": "20px",
84
+ "6": "24px",
85
+ "8": "32px",
86
+ "10": "40px",
87
+ "12": "48px"
88
+ };
89
+
90
+ // typography.json
91
+ var typography_default = {
92
+ fontFamily: {
93
+ sans: ["Helvetica", "Arial", "sans-serif"]
94
+ },
95
+ fontSize: {
96
+ xs: "12px",
97
+ sm: "14px",
98
+ base: "16px",
99
+ lg: "18px",
100
+ xl: "20px",
101
+ "2xl": "24px",
102
+ "3xl": "30px"
103
+ },
104
+ fontWeight: {
105
+ regular: "400",
106
+ medium: "500",
107
+ semibold: "600",
108
+ bold: "700"
109
+ },
110
+ lineHeight: {
111
+ tight: "1.2",
112
+ normal: "1.5",
113
+ relaxed: "1.7"
114
+ }
115
+ };
116
+
117
+ // radius.json
118
+ var radius_default = {
119
+ none: "0px",
120
+ sm: "6px",
121
+ md: "10px",
122
+ lg: "14px",
123
+ xl: "20px",
124
+ full: "9999px"
125
+ };
126
+
127
+ // index.ts
128
+ var tokens = {
129
+ colors: colors_default,
130
+ spacing: spacing_default,
131
+ typography: typography_default,
132
+ radius: radius_default
133
+ };
134
+ export {
135
+ colors_default as colors,
136
+ radius_default as radius,
137
+ spacing_default as spacing,
138
+ tokens,
139
+ typography_default as typography
140
+ };
141
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../colors.json","../spacing.json","../typography.json","../radius.json","../index.ts"],"sourcesContent":["{\n \"light\": {\n \"brand\": {\n \"crimson\": {\n \"900\": \"#7A0C0C\",\n \"700\": \"#B11212\",\n \"500\": \"#E53935\",\n \"300\": \"#F19999\",\n \"100\": \"#FDECEC\"\n },\n \"burgundy\": {\n \"900\": \"#4A0F24\",\n \"500\": \"#8C1D40\",\n \"100\": \"#F5E6EC\"\n },\n \"royal\": {\n \"900\": \"#0B2C5D\",\n \"500\": \"#0D47A1\",\n \"100\": \"#E3F2FD\"\n },\n \"mint\": {\n \"900\": \"#0F4D3C\",\n \"500\": \"#2E7D6B\",\n \"100\": \"#E0F4EF\"\n }\n },\n\n \"surface\": {\n \"bg\": \"#FFFFFF\",\n \"subtle\": \"#F7F7F7\",\n \"raised\": \"#FFFFFF\",\n \"border\": \"#E5E7EB\"\n },\n\n \"text\": {\n \"primary\": \"#111827\",\n \"secondary\": \"#4B5563\",\n \"muted\": \"#9CA3AF\",\n \"inverse\": \"#FFFFFF\"\n },\n\n \"feedback\": {\n \"success\": \"#2E7D32\",\n \"error\": \"#C62828\",\n \"warning\": \"#F9A825\",\n \"info\": \"#1565C0\"\n }\n },\n\n \"dark\": {\n \"brand\": {\n \"crimson\": {\n \"900\": \"#FDECEC\",\n \"700\": \"#F19999\",\n \"500\": \"#E53935\"\n }\n },\n\n \"surface\": {\n \"bg\": \"#0B0B0C\",\n \"subtle\": \"#161618\",\n \"raised\": \"#1F1F22\",\n \"border\": \"#2E2E33\"\n },\n\n \"text\": {\n \"primary\": \"#F9FAFB\",\n \"secondary\": \"#D1D5DB\",\n \"muted\": \"#9CA3AF\",\n \"inverse\": \"#111827\"\n },\n\n \"feedback\": {\n \"success\": \"#81C784\",\n \"error\": \"#EF9A9A\",\n \"warning\": \"#FFE082\",\n \"info\": \"#90CAF9\"\n }\n }\n}\n","{\n \"0\": \"0px\",\n \"1\": \"4px\",\n \"2\": \"8px\",\n \"3\": \"12px\",\n \"4\": \"16px\",\n \"5\": \"20px\",\n \"6\": \"24px\",\n \"8\": \"32px\",\n \"10\": \"40px\",\n \"12\": \"48px\"\n}\n","{\n \"fontFamily\": {\n \"sans\": [\"Helvetica\", \"Arial\", \"sans-serif\"]\n },\n\n \"fontSize\": {\n \"xs\": \"12px\",\n \"sm\": \"14px\",\n \"base\": \"16px\",\n \"lg\": \"18px\",\n \"xl\": \"20px\",\n \"2xl\": \"24px\",\n \"3xl\": \"30px\"\n },\n\n \"fontWeight\": {\n \"regular\": \"400\",\n \"medium\": \"500\",\n \"semibold\": \"600\",\n \"bold\": \"700\"\n },\n\n \"lineHeight\": {\n \"tight\": \"1.2\",\n \"normal\": \"1.5\",\n \"relaxed\": \"1.7\"\n }\n}\n","{\n \"none\": \"0px\",\n \"sm\": \"6px\",\n \"md\": \"10px\",\n \"lg\": \"14px\",\n \"xl\": \"20px\",\n \"full\": \"9999px\"\n}\n","import colors from \"./colors.json\";\nimport spacing from \"./spacing.json\";\nimport typography from \"./typography.json\";\nimport radius from \"./radius.json\";\n\nexport const tokens = {\n colors,\n spacing,\n typography,\n radius,\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n\nexport type Colors = typeof colors;\nexport type Spacing = typeof spacing;\nexport type Typography = typeof typography;\nexport type Radius = typeof radius;\nexport type Tokens = typeof tokens;\n\nexport { colors, spacing, typography, radius };\n"],"mappings":";AAAA;AAAA,EACE,OAAS;AAAA,IACP,OAAS;AAAA,MACP,SAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,UAAY;AAAA,QACV,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,OAAS;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,MAAQ;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,SAAW;AAAA,MACT,IAAM;AAAA,MACN,QAAU;AAAA,MACV,QAAU;AAAA,MACV,QAAU;AAAA,IACZ;AAAA,IAEA,MAAQ;AAAA,MACN,SAAW;AAAA,MACX,WAAa;AAAA,MACb,OAAS;AAAA,MACT,SAAW;AAAA,IACb;AAAA,IAEA,UAAY;AAAA,MACV,SAAW;AAAA,MACX,OAAS;AAAA,MACT,SAAW;AAAA,MACX,MAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,MAAQ;AAAA,IACN,OAAS;AAAA,MACP,SAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IAEA,SAAW;AAAA,MACT,IAAM;AAAA,MACN,QAAU;AAAA,MACV,QAAU;AAAA,MACV,QAAU;AAAA,IACZ;AAAA,IAEA,MAAQ;AAAA,MACN,SAAW;AAAA,MACX,WAAa;AAAA,MACb,OAAS;AAAA,MACT,SAAW;AAAA,IACb;AAAA,IAEA,UAAY;AAAA,MACV,SAAW;AAAA,MACX,OAAS;AAAA,MACT,SAAW;AAAA,MACX,MAAQ;AAAA,IACV;AAAA,EACF;AACF;;;AC/EA;AAAA,EACE,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AACR;;;ACXA;AAAA,EACE,YAAc;AAAA,IACZ,MAAQ,CAAC,aAAa,SAAS,YAAY;AAAA,EAC7C;AAAA,EAEA,UAAY;AAAA,IACV,IAAM;AAAA,IACN,IAAM;AAAA,IACN,MAAQ;AAAA,IACR,IAAM;AAAA,IACN,IAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EAEA,YAAc;AAAA,IACZ,SAAW;AAAA,IACX,QAAU;AAAA,IACV,UAAY;AAAA,IACZ,MAAQ;AAAA,EACV;AAAA,EAEA,YAAc;AAAA,IACZ,OAAS;AAAA,IACT,QAAU;AAAA,IACV,SAAW;AAAA,EACb;AACF;;;AC3BA;AAAA,EACE,MAAQ;AAAA,EACR,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,IAAM;AAAA,EACN,MAAQ;AACV;;;ACFO,IAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
package/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "@westayltd/design-tokens",
3
+ "version": "0.1.0",
4
+ "description": "Design tokens for Westay applications",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "files": [
10
+ "dist",
11
+ "*.json"
12
+ ],
13
+ "exports": {
14
+ ".": {
15
+ "types": "./dist/index.d.ts",
16
+ "import": "./dist/index.js",
17
+ "require": "./dist/index.cjs"
18
+ },
19
+ "./colors": "./colors.json",
20
+ "./colors.json": "./colors.json",
21
+ "./spacing": "./spacing.json",
22
+ "./spacing.json": "./spacing.json",
23
+ "./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"
50
+ }
51
+ }
package/radius.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "none": "0px",
3
+ "sm": "6px",
4
+ "md": "10px",
5
+ "lg": "14px",
6
+ "xl": "20px",
7
+ "full": "9999px"
8
+ }
package/spacing.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "0": "0px",
3
+ "1": "4px",
4
+ "2": "8px",
5
+ "3": "12px",
6
+ "4": "16px",
7
+ "5": "20px",
8
+ "6": "24px",
9
+ "8": "32px",
10
+ "10": "40px",
11
+ "12": "48px"
12
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,17 @@
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
+ }
package/typography.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "fontFamily": {
3
+ "sans": ["Helvetica", "Arial", "sans-serif"]
4
+ },
5
+
6
+ "fontSize": {
7
+ "xs": "12px",
8
+ "sm": "14px",
9
+ "base": "16px",
10
+ "lg": "18px",
11
+ "xl": "20px",
12
+ "2xl": "24px",
13
+ "3xl": "30px"
14
+ },
15
+
16
+ "fontWeight": {
17
+ "regular": "400",
18
+ "medium": "500",
19
+ "semibold": "600",
20
+ "bold": "700"
21
+ },
22
+
23
+ "lineHeight": {
24
+ "tight": "1.2",
25
+ "normal": "1.5",
26
+ "relaxed": "1.7"
27
+ }
28
+ }