@o2project/design-system 1.4.2 → 1.5.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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +80 -1
  3. package/dist/main.css +100 -0
  4. package/dist/main.tailwind.css +99 -0
  5. package/dist/panda.config.ts +146 -0
  6. package/package.json +8 -5
  7. package/main.css +0 -87
  8. package/main.tailwind.css +0 -87
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## [1.5.0](https://github.com/o2project/design-system/compare/v1.4.2...v1.5.0) (2026-01-10)
2
+
3
+ ### ✨ Features
4
+
5
+ * add multi-framework color token generation with OKLCH format ([9cdc223](https://github.com/o2project/design-system/commit/9cdc223c2f5c531e0d7d530f2fdfdb84ae1c9591))
6
+
1
7
  ## [1.4.2](https://github.com/o2project/design-system/compare/v1.4.1...v1.4.2) (2026-01-09)
2
8
 
3
9
  ### 📚 Some changes
package/README.md CHANGED
@@ -96,7 +96,86 @@ export const Primary = {
96
96
 
97
97
  ## 🎨 Tailwind CSS
98
98
 
99
- Tailwind CSS is configured and integrated with Storybook. You can use all Tailwind utility classes in your components.
99
+ This design system uses Tailwind CSS v4 with CSS-first configuration. Tailwind is integrated with Storybook, and you can use all Tailwind utility classes in your components. See the [Using Colors](#using-colors) section for how to use the design system's color tokens in your project.
100
+
101
+ ## 🎨 Color System
102
+
103
+ This design system uses OKLCH color space for perceptually uniform colors.
104
+
105
+ ### Building Colors
106
+
107
+ To generate color files for different frameworks:
108
+
109
+ ```bash
110
+ npm run build
111
+ ```
112
+
113
+ This command generates:
114
+
115
+ - `dist/main.css` - Pure CSS Custom Properties
116
+ - `dist/main.tailwind.css` - Tailwind CSS v4 theme
117
+ - `dist/panda.config.ts` - Panda CSS configuration
118
+
119
+ ### Using Colors
120
+
121
+ #### Pure CSS
122
+
123
+ ```css
124
+ @import '@o2project/design-system/dist/main.css';
125
+
126
+ .my-component {
127
+ color: var(--color-primary-main);
128
+ background: var(--color-neutral-background);
129
+ }
130
+ ```
131
+
132
+ #### Tailwind CSS v4
133
+
134
+ Tailwind CSS v4 uses CSS-first configuration. Import the design system's color theme in your CSS file:
135
+
136
+ ```css
137
+ /* app.css or main.css */
138
+ @import 'tailwindcss';
139
+ @import '@o2project/design-system/dist/main.tailwind.css';
140
+ ```
141
+
142
+ Then use the color classes in your HTML/JSX:
143
+
144
+ ```html
145
+ <!-- Global colors -->
146
+ <div class="bg-blue-700 text-blue-50">Blue themed component</div>
147
+
148
+ <!-- Semantic tokens -->
149
+ <div class="bg-primary-main text-neutral-background">Primary themed component</div>
150
+ ```
151
+
152
+ Available color classes:
153
+
154
+ - Global colors: `red-*`, `green-*`, `blue-*`, `yellow-*`, `monotone-*` (50-950)
155
+ - Semantic tokens: `primary-main`, `primary-accent`, `actions-like`, `neutral-background`, `neutral-text`, `neutral-subtext`, `neutral-border`, `neutral-white`, `neutral-black`
156
+
157
+ For more details about the color system, see [src/colors/README.md](src/colors/README.md).
158
+
159
+ #### Panda CSS
160
+
161
+ ```typescript
162
+ // panda.config.ts
163
+ import { defineConfig } from '@pandacss/dev';
164
+ import designSystemColors from '@o2project/design-system/panda.config';
165
+
166
+ export default defineConfig({
167
+ presets: [designSystemColors],
168
+ // ...
169
+ });
170
+ ```
171
+
172
+ ### Updating Colors
173
+
174
+ 1. Edit OKLCH values in `src/colors/README.md`
175
+ 2. Run `npm run build`
176
+ 3. All color files will be automatically updated
177
+
178
+ For more details, see [src/colors/README.md](src/colors/README.md).
100
179
 
101
180
  ## 📚 Documentation
102
181
 
package/dist/main.css ADDED
@@ -0,0 +1,100 @@
1
+ /**
2
+ * Auto-generated by build.ts
3
+ * DO NOT EDIT MANUALLY
4
+ *
5
+ * Source of truth: src/colors/README.md
6
+ * To update colors, modify README.md and run: npm run build
7
+ */
8
+
9
+ :root {
10
+ /* Global Colors - Red */
11
+ --color-red-50: oklch(0.97 0.013 25);
12
+ --color-red-100: oklch(0.90 0.042 25);
13
+ --color-red-200: oklch(0.83 0.080 25);
14
+ --color-red-300: oklch(0.75 0.135 25);
15
+ --color-red-400: oklch(0.67 0.190 25);
16
+ --color-red-500: oklch(0.59 0.224 25);
17
+ --color-red-600: oklch(0.51 0.196 25);
18
+ --color-red-700: oklch(0.43 0.160 25);
19
+ --color-red-800: oklch(0.35 0.132 25);
20
+ --color-red-900: oklch(0.28 0.103 25);
21
+ --color-red-950: oklch(0.21 0.070 25);
22
+
23
+ /* Global Colors - Green */
24
+ --color-green-50: oklch(0.97 0.010 144);
25
+ --color-green-100: oklch(0.90 0.041 144);
26
+ --color-green-200: oklch(0.83 0.077 144);
27
+ --color-green-300: oklch(0.75 0.121 144);
28
+ --color-green-400: oklch(0.67 0.155 144);
29
+ --color-green-500: oklch(0.59 0.165 144);
30
+ --color-green-600: oklch(0.51 0.141 144);
31
+ --color-green-700: oklch(0.43 0.119 144);
32
+ --color-green-800: oklch(0.35 0.087 144);
33
+ --color-green-900: oklch(0.28 0.070 144);
34
+ --color-green-950: oklch(0.21 0.050 144);
35
+
36
+ /* Global Colors - Blue */
37
+ --color-blue-50: oklch(0.97 0.011 253);
38
+ --color-blue-100: oklch(0.90 0.041 253);
39
+ --color-blue-200: oklch(0.83 0.077 253);
40
+ --color-blue-300: oklch(0.75 0.121 253);
41
+ --color-blue-400: oklch(0.67 0.155 253);
42
+ --color-blue-500: oklch(0.59 0.165 253);
43
+ --color-blue-600: oklch(0.51 0.141 253);
44
+ --color-blue-700: oklch(0.43 0.119 253);
45
+ --color-blue-800: oklch(0.35 0.087 253);
46
+ --color-blue-900: oklch(0.28 0.070 253);
47
+ --color-blue-950: oklch(0.21 0.050 253);
48
+
49
+ /* Global Colors - Yellow */
50
+ --color-yellow-50: oklch(0.97 0.040 102);
51
+ --color-yellow-100: oklch(0.90 0.099 102);
52
+ --color-yellow-200: oklch(0.83 0.162 102);
53
+ --color-yellow-300: oklch(0.75 0.157 102);
54
+ --color-yellow-400: oklch(0.67 0.135 102);
55
+ --color-yellow-500: oklch(0.59 0.123 102);
56
+ --color-yellow-600: oklch(0.51 0.104 102);
57
+ --color-yellow-700: oklch(0.43 0.085 102);
58
+ --color-yellow-800: oklch(0.35 0.067 102);
59
+ --color-yellow-900: oklch(0.28 0.051 102);
60
+ --color-yellow-950: oklch(0.21 0.040 102);
61
+
62
+ /* Global Colors - Monotone */
63
+ --color-monotone-50: oklch(0.97 0 0);
64
+ --color-monotone-100: oklch(0.90 0 0);
65
+ --color-monotone-200: oklch(0.83 0 0);
66
+ --color-monotone-300: oklch(0.75 0 0);
67
+ --color-monotone-400: oklch(0.67 0 0);
68
+ --color-monotone-500: oklch(0.59 0 0);
69
+ --color-monotone-600: oklch(0.51 0 0);
70
+ --color-monotone-700: oklch(0.43 0 0);
71
+ --color-monotone-800: oklch(0.35 0 0);
72
+ --color-monotone-900: oklch(0.28 0 0);
73
+ --color-monotone-950: oklch(0.21 0 0);
74
+
75
+ /* Semantic Tokens - Light Mode */
76
+ --color-primary-main: oklch(0.43 0.119 253);
77
+ --color-primary-accent: oklch(0.83 0.077 144);
78
+ --color-actions-like: oklch(0.67 0.190 25);
79
+ --color-neutral-background: oklch(0.97 0 0);
80
+ --color-neutral-text: oklch(0.21 0 0);
81
+ --color-neutral-subtext: oklch(0.43 0 0);
82
+ --color-neutral-border: oklch(0.59 0 0);
83
+ --color-neutral-white: #ffffff;
84
+ --color-neutral-black: #000000;
85
+ }
86
+
87
+ @media (prefers-color-scheme: dark) {
88
+ :root {
89
+ /* Semantic Tokens - Dark Mode */
90
+ --color-primary-main: oklch(0.51 0.141 253);
91
+ --color-primary-accent: oklch(0.75 0.121 144);
92
+ --color-actions-like: oklch(0.67 0.190 25);
93
+ --color-neutral-background: oklch(0.28 0 0);
94
+ --color-neutral-text: oklch(0.97 0 0);
95
+ --color-neutral-subtext: oklch(0.75 0 0);
96
+ --color-neutral-border: oklch(0.51 0 0);
97
+ --color-neutral-white: #ffffff;
98
+ --color-neutral-black: #000000;
99
+ }
100
+ }
package/dist/main.tailwind.css ADDED
@@ -0,0 +1,99 @@
1
+ /**
2
+ * Auto-generated by build.ts
3
+ * DO NOT EDIT MANUALLY
4
+ *
5
+ * Source of truth: src/colors/README.md
6
+ * To update colors, modify README.md and run: npm run build
7
+ */
8
+
9
+ @import 'tailwindcss';
10
+
11
+ @theme {
12
+ /* Global Colors - Red */
13
+ --color-red-50: oklch(0.97 0.013 25);
14
+ --color-red-100: oklch(0.90 0.042 25);
15
+ --color-red-200: oklch(0.83 0.080 25);
16
+ --color-red-300: oklch(0.75 0.135 25);
17
+ --color-red-400: oklch(0.67 0.190 25);
18
+ --color-red-500: oklch(0.59 0.224 25);
19
+ --color-red-600: oklch(0.51 0.196 25);
20
+ --color-red-700: oklch(0.43 0.160 25);
21
+ --color-red-800: oklch(0.35 0.132 25);
22
+ --color-red-900: oklch(0.28 0.103 25);
23
+ --color-red-950: oklch(0.21 0.070 25);
24
+
25
+ /* Global Colors - Green */
26
+ --color-green-50: oklch(0.97 0.010 144);
27
+ --color-green-100: oklch(0.90 0.041 144);
28
+ --color-green-200: oklch(0.83 0.077 144);
29
+ --color-green-300: oklch(0.75 0.121 144);
30
+ --color-green-400: oklch(0.67 0.155 144);
31
+ --color-green-500: oklch(0.59 0.165 144);
32
+ --color-green-600: oklch(0.51 0.141 144);
33
+ --color-green-700: oklch(0.43 0.119 144);
34
+ --color-green-800: oklch(0.35 0.087 144);
35
+ --color-green-900: oklch(0.28 0.070 144);
36
+ --color-green-950: oklch(0.21 0.050 144);
37
+
38
+ /* Global Colors - Blue */
39
+ --color-blue-50: oklch(0.97 0.011 253);
40
+ --color-blue-100: oklch(0.90 0.041 253);
41
+ --color-blue-200: oklch(0.83 0.077 253);
42
+ --color-blue-300: oklch(0.75 0.121 253);
43
+ --color-blue-400: oklch(0.67 0.155 253);
44
+ --color-blue-500: oklch(0.59 0.165 253);
45
+ --color-blue-600: oklch(0.51 0.141 253);
46
+ --color-blue-700: oklch(0.43 0.119 253);
47
+ --color-blue-800: oklch(0.35 0.087 253);
48
+ --color-blue-900: oklch(0.28 0.070 253);
49
+ --color-blue-950: oklch(0.21 0.050 253);
50
+
51
+ /* Global Colors - Yellow */
52
+ --color-yellow-50: oklch(0.97 0.040 102);
53
+ --color-yellow-100: oklch(0.90 0.099 102);
54
+ --color-yellow-200: oklch(0.83 0.162 102);
55
+ --color-yellow-300: oklch(0.75 0.157 102);
56
+ --color-yellow-400: oklch(0.67 0.135 102);
57
+ --color-yellow-500: oklch(0.59 0.123 102);
58
+ --color-yellow-600: oklch(0.51 0.104 102);
59
+ --color-yellow-700: oklch(0.43 0.085 102);
60
+ --color-yellow-800: oklch(0.35 0.067 102);
61
+ --color-yellow-900: oklch(0.28 0.051 102);
62
+ --color-yellow-950: oklch(0.21 0.040 102);
63
+
64
+ /* Global Colors - Monotone */
65
+ --color-monotone-50: oklch(0.97 0 0);
66
+ --color-monotone-100: oklch(0.90 0 0);
67
+ --color-monotone-200: oklch(0.83 0 0);
68
+ --color-monotone-300: oklch(0.75 0 0);
69
+ --color-monotone-400: oklch(0.67 0 0);
70
+ --color-monotone-500: oklch(0.59 0 0);
71
+ --color-monotone-600: oklch(0.51 0 0);
72
+ --color-monotone-700: oklch(0.43 0 0);
73
+ --color-monotone-800: oklch(0.35 0 0);
74
+ --color-monotone-900: oklch(0.28 0 0);
75
+ --color-monotone-950: oklch(0.21 0 0);
76
+
77
+ /* Semantic Tokens */
78
+ --color-primary-main: oklch(0.43 0.119 253);
79
+ --color-primary-accent: oklch(0.83 0.077 144);
80
+ --color-actions-like: oklch(0.67 0.190 25);
81
+ --color-neutral-background: oklch(0.97 0 0);
82
+ --color-neutral-text: oklch(0.21 0 0);
83
+ --color-neutral-subtext: oklch(0.43 0 0);
84
+ --color-neutral-border: oklch(0.59 0 0);
85
+ --color-neutral-white: #ffffff;
86
+ --color-neutral-black: #000000;
87
+
88
+ @media (prefers-color-scheme: dark) {
89
+ --color-primary-main: oklch(0.51 0.141 253);
90
+ --color-primary-accent: oklch(0.75 0.121 144);
91
+ --color-actions-like: oklch(0.67 0.190 25);
92
+ --color-neutral-background: oklch(0.28 0 0);
93
+ --color-neutral-text: oklch(0.97 0 0);
94
+ --color-neutral-subtext: oklch(0.75 0 0);
95
+ --color-neutral-border: oklch(0.51 0 0);
96
+ --color-neutral-white: #ffffff;
97
+ --color-neutral-black: #000000;
98
+ }
99
+ }
package/dist/panda.config.ts ADDED
@@ -0,0 +1,146 @@
1
+ /**
2
+ * Auto-generated by build.ts
3
+ * DO NOT EDIT MANUALLY
4
+ *
5
+ * Source of truth: src/colors/README.md
6
+ * To update colors, modify README.md and run: npm run build
7
+ */
8
+
9
+ /* eslint-disable import/no-unresolved, @typescript-eslint/no-unsafe-call */
10
+ import { defineConfig } from '@pandacss/dev'
11
+
12
+ export default defineConfig({
13
+ theme: {
14
+ extend: {
15
+ tokens: {
16
+ colors: {
17
+ red: {
18
+ 50: { value: 'oklch(0.97 0.013 25)' },
19
+ 100: { value: 'oklch(0.90 0.042 25)' },
20
+ 200: { value: 'oklch(0.83 0.080 25)' },
21
+ 300: { value: 'oklch(0.75 0.135 25)' },
22
+ 400: { value: 'oklch(0.67 0.190 25)' },
23
+ 500: { value: 'oklch(0.59 0.224 25)' },
24
+ 600: { value: 'oklch(0.51 0.196 25)' },
25
+ 700: { value: 'oklch(0.43 0.160 25)' },
26
+ 800: { value: 'oklch(0.35 0.132 25)' },
27
+ 900: { value: 'oklch(0.28 0.103 25)' },
28
+ 950: { value: 'oklch(0.21 0.070 25)' },
29
+ },
30
+ green: {
31
+ 50: { value: 'oklch(0.97 0.010 144)' },
32
+ 100: { value: 'oklch(0.90 0.041 144)' },
33
+ 200: { value: 'oklch(0.83 0.077 144)' },
34
+ 300: { value: 'oklch(0.75 0.121 144)' },
35
+ 400: { value: 'oklch(0.67 0.155 144)' },
36
+ 500: { value: 'oklch(0.59 0.165 144)' },
37
+ 600: { value: 'oklch(0.51 0.141 144)' },
38
+ 700: { value: 'oklch(0.43 0.119 144)' },
39
+ 800: { value: 'oklch(0.35 0.087 144)' },
40
+ 900: { value: 'oklch(0.28 0.070 144)' },
41
+ 950: { value: 'oklch(0.21 0.050 144)' },
42
+ },
43
+ blue: {
44
+ 50: { value: 'oklch(0.97 0.011 253)' },
45
+ 100: { value: 'oklch(0.90 0.041 253)' },
46
+ 200: { value: 'oklch(0.83 0.077 253)' },
47
+ 300: { value: 'oklch(0.75 0.121 253)' },
48
+ 400: { value: 'oklch(0.67 0.155 253)' },
49
+ 500: { value: 'oklch(0.59 0.165 253)' },
50
+ 600: { value: 'oklch(0.51 0.141 253)' },
51
+ 700: { value: 'oklch(0.43 0.119 253)' },
52
+ 800: { value: 'oklch(0.35 0.087 253)' },
53
+ 900: { value: 'oklch(0.28 0.070 253)' },
54
+ 950: { value: 'oklch(0.21 0.050 253)' },
55
+ },
56
+ yellow: {
57
+ 50: { value: 'oklch(0.97 0.040 102)' },
58
+ 100: { value: 'oklch(0.90 0.099 102)' },
59
+ 200: { value: 'oklch(0.83 0.162 102)' },
60
+ 300: { value: 'oklch(0.75 0.157 102)' },
61
+ 400: { value: 'oklch(0.67 0.135 102)' },
62
+ 500: { value: 'oklch(0.59 0.123 102)' },
63
+ 600: { value: 'oklch(0.51 0.104 102)' },
64
+ 700: { value: 'oklch(0.43 0.085 102)' },
65
+ 800: { value: 'oklch(0.35 0.067 102)' },
66
+ 900: { value: 'oklch(0.28 0.051 102)' },
67
+ 950: { value: 'oklch(0.21 0.040 102)' },
68
+ },
69
+ monotone: {
70
+ 50: { value: 'oklch(0.97 0 0)' },
71
+ 100: { value: 'oklch(0.90 0 0)' },
72
+ 200: { value: 'oklch(0.83 0 0)' },
73
+ 300: { value: 'oklch(0.75 0 0)' },
74
+ 400: { value: 'oklch(0.67 0 0)' },
75
+ 500: { value: 'oklch(0.59 0 0)' },
76
+ 600: { value: 'oklch(0.51 0 0)' },
77
+ 700: { value: 'oklch(0.43 0 0)' },
78
+ 800: { value: 'oklch(0.35 0 0)' },
79
+ 900: { value: 'oklch(0.28 0 0)' },
80
+ 950: { value: 'oklch(0.21 0 0)' },
81
+ },
82
+ primary: {
83
+ main: {
84
+ value: {
85
+ base: 'oklch(0.43 0.119 253)',
86
+ _dark: 'oklch(0.51 0.141 253)',
87
+ },
88
+ },
89
+ accent: {
90
+ value: {
91
+ base: 'oklch(0.83 0.077 144)',
92
+ _dark: 'oklch(0.75 0.121 144)',
93
+ },
94
+ },
95
+ },
96
+ actions: {
97
+ like: {
98
+ value: {
99
+ base: 'oklch(0.67 0.190 25)',
100
+ _dark: 'oklch(0.67 0.190 25)',
101
+ },
102
+ },
103
+ },
104
+ neutral: {
105
+ background: {
106
+ value: {
107
+ base: 'oklch(0.97 0 0)',
108
+ _dark: 'oklch(0.28 0 0)',
109
+ },
110
+ },
111
+ text: {
112
+ value: {
113
+ base: 'oklch(0.21 0 0)',
114
+ _dark: 'oklch(0.97 0 0)',
115
+ },
116
+ },
117
+ subtext: {
118
+ value: {
119
+ base: 'oklch(0.43 0 0)',
120
+ _dark: 'oklch(0.75 0 0)',
121
+ },
122
+ },
123
+ border: {
124
+ value: {
125
+ base: 'oklch(0.59 0 0)',
126
+ _dark: 'oklch(0.51 0 0)',
127
+ },
128
+ },
129
+ white: {
130
+ value: {
131
+ base: '#ffffff',
132
+ _dark: '#ffffff',
133
+ },
134
+ },
135
+ black: {
136
+ value: {
137
+ base: '#000000',
138
+ _dark: '#000000',
139
+ },
140
+ },
141
+ },
142
+ },
143
+ },
144
+ },
145
+ },
146
+ })
package/package.json CHANGED
@@ -1,24 +1,27 @@
1
1
  {
2
2
  "name": "@o2project/design-system",
3
- "version": "1.4.2",
3
+ "version": "1.5.0",
4
4
  "type": "module",
5
5
  "description": "Design system for O2 Project",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
- "main": "main.css",
9
+ "main": "dist/main.css",
10
+ "exports": {
11
+ "./panda.config": "./dist/panda.config.ts"
12
+ },
10
13
  "files": [
11
14
  "CHANGELOG.md",
12
- "main.tailwind.css"
15
+ "dist"
13
16
  ],
14
17
  "scripts": {
18
+ "build": "tsx src/colors/scripts/build.ts",
15
19
  "check-typescript": "tsc --noEmit",
16
20
  "lint": "eslint '**/*.{js,jsx,ts,tsx}'",
17
21
  "format": "prettier --write .",
18
22
  "storybook": "storybook dev -p 15021",
19
23
  "build-storybook": "storybook build",
20
- "test:oklch": "tsx src/colors/scripts/oklch-to-hex.ts",
21
- "sync:colors": "tsx src/colors/scripts/sync-colors.ts"
24
+ "test": "tsx --test tests/integration/**/*.test.ts"
22
25
  },
23
26
  "keywords": [],
24
27
  "author": "O2 Project",
package/main.css DELETED
@@ -1,87 +0,0 @@
1
- :root {
2
- /* Primary colors */
3
- --color-primary-tks-yellow: #ffe65e;
4
- --color-primary-tks-green: #396039;
5
- --color-primary-tks-blue: #005895;
6
-
7
- /* Blue scale */
8
- --color-blue-50: #e7f0f8;
9
- --color-blue-100: #d2e0ee;
10
- --color-blue-200: #a8c1da;
11
- --color-blue-300: #7fa2c6;
12
- --color-blue-400: #5385b4;
13
- --color-blue-500: #005895;
14
- --color-blue-600: #004a82;
15
- --color-blue-700: #003c6b;
16
- --color-blue-800: #002a4e;
17
- --color-blue-900: #001c35;
18
- --color-blue-950: #000c1b;
19
-
20
- /* Green scale */
21
- --color-green-50: #ebf0ea;
22
- --color-green-100: #d6e2d6;
23
- --color-green-200: #b1c4b0;
24
- --color-green-300: #8ca78b;
25
- --color-green-400: #698b68;
26
- --color-green-500: #396039;
27
- --color-green-600: #2d522d;
28
- --color-green-700: #234423;
29
- --color-green-800: #163017;
30
- --color-green-900: #0d200d;
31
- --color-green-950: #040e04;
32
-
33
- /* Yellow scale */
34
- --color-yellow-50: #fdf6d8;
35
- --color-yellow-100: #ffefb2;
36
- --color-yellow-200: #ffe671;
37
- --color-yellow-300: #edcc48;
38
- --color-yellow-400: #caac2f;
39
- --color-yellow-500: #a78d1e;
40
- --color-yellow-600: #86700a;
41
- --color-yellow-700: #665400;
42
- --color-yellow-800: #473900;
43
- --color-yellow-900: #312802;
44
- --color-yellow-950: #201a03;
45
-
46
- /* Red scale */
47
- --color-red-50: #fceae8;
48
- --color-red-100: #f8d4d1;
49
- --color-red-200: #febab4;
50
- --color-red-300: #fa8880;
51
- --color-red-400: #ff645f;
52
- --color-red-500: #fa3d42;
53
- --color-red-600: #d01c29;
54
- --color-red-700: #a20519;
55
- --color-red-800: #72020e;
56
- --color-red-900: #4f0a0d;
57
- --color-red-950: #340909;
58
-
59
- /* Monotone scale */
60
- --color-monotone-brightest: #fcfcfc;
61
- --color-monotone-darkest: #1b1b1b;
62
- --color-monotone-100: #d7d7d7;
63
- --color-monotone-200: #b4b4b4;
64
- --color-monotone-300: #929292;
65
- --color-monotone-400: #717171;
66
- --color-monotone-500: #525252;
67
- --color-monotone-600: #353535;
68
-
69
- /* Action colors */
70
- --color-action-like: #fa3d42;
71
-
72
- /* Light mode semantic colors */
73
- --color-neutral-background: #fcfcfc;
74
- --color-neutral-text: #1b1b1b;
75
- --color-neutral-text-sub: #717171;
76
- --color-neutral-border: #525252;
77
- }
78
-
79
- @media (prefers-color-scheme: dark) {
80
- :root {
81
- /* Dark mode semantic colors */
82
- --color-neutral-background: #1b1b1b;
83
- --color-neutral-text: #fcfcfc;
84
- --color-neutral-text-sub: #b4b4b4;
85
- --color-neutral-border: #525252;
86
- }
87
- }
package/main.tailwind.css DELETED
@@ -1,87 +0,0 @@
1
- @import 'tailwindcss';
2
-
3
- @theme {
4
- /* Primary colors */
5
- --color-primary-tks-yellow: #ffe65e;
6
- --color-primary-tks-green: #396039;
7
- --color-primary-tks-blue: #005895;
8
-
9
- /* Blue scale */
10
- --color-blue-50: #e7f0f8;
11
- --color-blue-100: #d2e0ee;
12
- --color-blue-200: #a8c1da;
13
- --color-blue-300: #7fa2c6;
14
- --color-blue-400: #5385b4;
15
- --color-blue-500: #005895;
16
- --color-blue-600: #004a82;
17
- --color-blue-700: #003c6b;
18
- --color-blue-800: #002a4e;
19
- --color-blue-900: #001c35;
20
- --color-blue-950: #000c1b;
21
-
22
- /* Green scale */
23
- --color-green-50: #ebf0ea;
24
- --color-green-100: #d6e2d6;
25
- --color-green-200: #b1c4b0;
26
- --color-green-300: #8ca78b;
27
- --color-green-400: #698b68;
28
- --color-green-500: #396039;
29
- --color-green-600: #2d522d;
30
- --color-green-700: #234423;
31
- --color-green-800: #163017;
32
- --color-green-900: #0d200d;
33
- --color-green-950: #040e04;
34
-
35
- /* Yellow scale */
36
- --color-yellow-50: #fdf6d8;
37
- --color-yellow-100: #ffefb2;
38
- --color-yellow-200: #ffe671;
39
- --color-yellow-300: #edcc48;
40
- --color-yellow-400: #caac2f;
41
- --color-yellow-500: #a78d1e;
42
- --color-yellow-600: #86700a;
43
- --color-yellow-700: #665400;
44
- --color-yellow-800: #473900;
45
- --color-yellow-900: #312802;
46
- --color-yellow-950: #201a03;
47
-
48
- /* Red scale */
49
- --color-red-50: #fceae8;
50
- --color-red-100: #f8d4d1;
51
- --color-red-200: #febab4;
52
- --color-red-300: #fa8880;
53
- --color-red-400: #ff645f;
54
- --color-red-500: #fa3d42;
55
- --color-red-600: #d01c29;
56
- --color-red-700: #a20519;
57
- --color-red-800: #72020e;
58
- --color-red-900: #4f0a0d;
59
- --color-red-950: #340909;
60
-
61
- /* Monotone scale */
62
- --color-monotone-brightest: #fcfcfc;
63
- --color-monotone-darkest: #1b1b1b;
64
- --color-monotone-100: #d7d7d7;
65
- --color-monotone-200: #b4b4b4;
66
- --color-monotone-300: #929292;
67
- --color-monotone-400: #717171;
68
- --color-monotone-500: #525252;
69
- --color-monotone-600: #353535;
70
-
71
- /* Action colors */
72
- --color-action-like: #fa3d42;
73
-
74
- /* Light mode semantic colors */
75
- --color-neutral-background: #fcfcfc;
76
- --color-neutral-text: #1b1b1b;
77
- --color-neutral-text-sub: #717171;
78
- --color-neutral-border: #525252;
79
-
80
- @media (prefers-color-scheme: dark) {
81
- /* Dark mode semantic colors */
82
- --color-neutral-background: #1b1b1b;
83
- --color-neutral-text: #fcfcfc;
84
- --color-neutral-text-sub: #b4b4b4;
85
- --color-neutral-border: #525252;
86
- }
87
- }