@kids-reporter/routing-ui 0.1.0-alpha.2 → 0.1.0-alpha.3

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/dist/styles.css +16 -130
  2. package/eslint.config.mjs +3 -2
  3. package/package.json +4 -1
  4. package/src/styles.css +16 -130
package/dist/styles.css CHANGED
@@ -56,12 +56,12 @@
56
56
  --font-size-h5-large: 22px;
57
57
  --font-size-h6-large: 18px;
58
58
 
59
- --font-size-h1-small: 28px;
60
- --font-size-h2-small: 24px;
61
- --font-size-h3-small: 22px;
62
- --font-size-h4-small: 18px;
63
- --font-size-h5-small: 17px;
64
- --font-size-h6-small: 16px;
59
+ --font-size-h1-small: 32px;
60
+ --font-size-h2-small: 28px;
61
+ --font-size-h3-small: 24px;
62
+ --font-size-h4-small: 22px;
63
+ --font-size-h5-small: 20px;
64
+ --font-size-h6-small: 18px;
65
65
 
66
66
  --font-size-p1: 16px;
67
67
  --font-size-p2: 14px;
@@ -122,11 +122,11 @@
122
122
  /* Updated color palette using design system */
123
123
  --paletteColor1: var(--color-blue-400);
124
124
  --paletteColor2: var(--color-blue-600);
125
- --paletteColor3: var(--color-neutral-gray-700);
126
- --paletteColor4: var(--color-neutral-gray-900);
125
+ --paletteColor3: var(--color-neutral-700);
126
+ --paletteColor4: var(--color-neutral-900);
127
127
  --paletteColor5: var(--color-red-400);
128
128
  --paletteColor6: var(--color-yellow-400);
129
- --paletteColor7: var(--color-neutral-gray-200);
129
+ --paletteColor7: var(--color-neutral-200);
130
130
  --paletteColor8: var(--color-neutral-white);
131
131
  --color: var(--paletteColor3);
132
132
  }
@@ -134,120 +134,6 @@
134
134
  /* Design System CSS Variables for compatibility */
135
135
  @layer base {
136
136
  :root {
137
- /* Colors - Neutral */
138
- --color-neutral-white: #ffffff;
139
- --color-neutral-gray-100: #f8f8f8;
140
- --color-neutral-gray-200: #eaeaea;
141
- --color-neutral-gray-300: #d9d9d9;
142
- --color-neutral-gray-400: #c6c6c6;
143
- --color-neutral-gray-500: #a3a3a3;
144
- --color-neutral-gray-600: #8e8e8e;
145
- --color-neutral-gray-700: #575757;
146
- --color-neutral-gray-800: #3b3b3b;
147
- --color-neutral-gray-900: #232323;
148
- --color-neutral-black: #000000;
149
- --color-neutral-border: #00000026;
150
-
151
- /* Colors - Brand Red */
152
- --color-red-100: #fff0f2;
153
- --color-red-200: #ffc4ca;
154
- --color-red-300: #ff98a2;
155
- --color-red-400: #f76977;
156
- --color-red-500: #bd4450;
157
- --color-red-600: #a0343e;
158
- --color-red-700: #82262f;
159
- --color-red-800: #651a22;
160
-
161
- /* Colors - Brand Blue */
162
- --color-blue-100: #e9f8ff;
163
- --color-blue-200: #b9e8ff;
164
- --color-blue-300: #89d9ff;
165
- --color-blue-400: #27b3f5;
166
- --color-blue-500: #1696d3;
167
- --color-blue-600: #087bb1;
168
- --color-blue-700: #00618f;
169
- --color-blue-800: #004a6d;
170
-
171
- /* Colors - Brand Yellow */
172
- --color-yellow-100: #fff9ec;
173
- --color-yellow-200: #ffedc2;
174
- --color-yellow-300: #ffe197;
175
- --color-yellow-400: #f8c341;
176
- --color-yellow-500: #d6a52d;
177
- --color-yellow-600: #b4881d;
178
- --color-yellow-700: #926c10;
179
- --color-yellow-800: #705207;
180
-
181
- /* Typography - Font Families */
182
- --font-family-noto: 'Noto Sans TC', sans-serif;
183
- --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
184
-
185
- /* Typography - Font Sizes */
186
- --font-size-h1-large: 48px;
187
- --font-size-h2-large: 40px;
188
- --font-size-h3-large: 32px;
189
- --font-size-h4-large: 28px;
190
- --font-size-h5-large: 22px;
191
- --font-size-h6-large: 18px;
192
-
193
- --font-size-h1-small: 28px;
194
- --font-size-h2-small: 24px;
195
- --font-size-h3-small: 22px;
196
- --font-size-h4-small: 18px;
197
- --font-size-h5-small: 17px;
198
- --font-size-h6-small: 16px;
199
-
200
- --font-size-p1: 16px;
201
- --font-size-p2: 14px;
202
- --font-size-p3: 12px;
203
- --font-size-p4: 10px;
204
-
205
- /* Typography - Line Heights */
206
- --line-height-tight: 1.25;
207
- --line-height-normal: 1.6;
208
- --line-height-relaxed: 1.75;
209
-
210
- /* Typography - Letter Spacing */
211
- --letter-spacing-wide: 0.05em;
212
-
213
- /* Spacing - Grid System */
214
- --spacing-grid-xs: 4px;
215
- --spacing-grid-sm: 8px;
216
- --spacing-grid-md: 16px;
217
- --spacing-grid-lg: 24px;
218
- --spacing-grid-xl: 32px;
219
- --spacing-grid-2xl: 48px;
220
- --spacing-grid-3xl: 64px;
221
- --spacing-grid-4xl: 96px;
222
- --spacing-grid-5xl: 128px;
223
-
224
- /* Container Widths */
225
- --container-mobile: 375px;
226
- --container-tablet: 768px;
227
- --container-desktop: 1024px;
228
- --container-hd: 1440px;
229
-
230
- /* Grid Gutters */
231
- --gutter-mobile: 16px;
232
- --gutter-tablet: 24px;
233
- --gutter-desktop: 32px;
234
- --gutter-hd: 32px;
235
-
236
- /* Margins */
237
- --margin-mobile: 24px;
238
- --margin-tablet: 32px;
239
- --margin-desktop: 48px;
240
- --margin-hd: 120px;
241
-
242
- /* Responsive Breakpoints */
243
- --breakpoint-mobile: 375px;
244
- --breakpoint-tablet: 768px;
245
- --breakpoint-desktop: 1024px;
246
- --breakpoint-hd: 1440px;
247
-
248
- /* Header */
249
- --mobile-header-height: 64px;
250
-
251
137
  /* Legacy variables for backward compatibility */
252
138
  --fontFamily: var(--font-family-noto);
253
139
  --max-width: 1100px;
@@ -256,11 +142,11 @@
256
142
  /* Updated color palette using design system */
257
143
  --paletteColor1: var(--color-blue-400);
258
144
  --paletteColor2: var(--color-blue-600);
259
- --paletteColor3: var(--color-neutral-gray-700);
260
- --paletteColor4: var(--color-neutral-gray-900);
145
+ --paletteColor3: var(--color-neutral-700);
146
+ --paletteColor4: var(--color-neutral-900);
261
147
  --paletteColor5: var(--color-red-400);
262
148
  --paletteColor6: var(--color-yellow-400);
263
- --paletteColor7: var(--color-neutral-gray-200);
149
+ --paletteColor7: var(--color-neutral-200);
264
150
  --paletteColor8: var(--color-neutral-white);
265
151
  --color: var(--paletteColor3);
266
152
  }
@@ -321,16 +207,16 @@
321
207
  font-family: var(--font-family-noto);
322
208
  font-size: var(--font-size-h1-small);
323
209
  font-weight: 700;
324
- line-height: var(--line-height-tight);
325
- letter-spacing: var(--letter-spacing-wide);
210
+ line-height: var(--line-height-normal);
211
+ letter-spacing: 1.6px;
326
212
  }
327
213
 
328
214
  .prose-h2-small {
329
215
  font-family: var(--font-family-noto);
330
216
  font-size: var(--font-size-h2-small);
331
217
  font-weight: 700;
332
- line-height: var(--line-height-tight);
333
- letter-spacing: var(--letter-spacing-wide);
218
+ line-height: var(--line-height-normal);
219
+ letter-spacing: 1.4px;
334
220
  }
335
221
 
336
222
  .prose-h3-small {
package/eslint.config.mjs CHANGED
@@ -1,8 +1,9 @@
1
+ import globals from 'globals'
2
+
1
3
  import baseConfig, {
2
- typescriptConfig,
3
4
  javascriptConfig,
5
+ typescriptConfig,
4
6
  } from '../../eslint.base.config.mjs'
5
- import globals from 'globals'
6
7
 
7
8
  export default [
8
9
  ...baseConfig,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@kids-reporter/routing-ui",
3
3
  "license": "MIT",
4
- "version": "0.1.0-alpha.2",
4
+ "version": "0.1.0-alpha.3",
5
5
  "description": "Routing UI for Kids Reporter",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -26,6 +26,7 @@
26
26
  "class-variance-authority": "^0.7.1",
27
27
  "clsx": "^2.1.1",
28
28
  "lodash": "^4.17.21",
29
+ "next": "^14.2.33",
29
30
  "tailwind-merge": "^3.3.1"
30
31
  },
31
32
  "devDependencies": {
@@ -41,6 +42,8 @@
41
42
  "@types/react-dom": "18.3.7",
42
43
  "prettier": "^3.6.2",
43
44
  "prettier-plugin-tailwindcss": "^0.6.14",
45
+ "react": "18.3.1",
46
+ "react-dom": "18.3.1",
44
47
  "typescript": "^5.9.2"
45
48
  },
46
49
  "peerDependencies": {
package/src/styles.css CHANGED
@@ -56,12 +56,12 @@
56
56
  --font-size-h5-large: 22px;
57
57
  --font-size-h6-large: 18px;
58
58
 
59
- --font-size-h1-small: 28px;
60
- --font-size-h2-small: 24px;
61
- --font-size-h3-small: 22px;
62
- --font-size-h4-small: 18px;
63
- --font-size-h5-small: 17px;
64
- --font-size-h6-small: 16px;
59
+ --font-size-h1-small: 32px;
60
+ --font-size-h2-small: 28px;
61
+ --font-size-h3-small: 24px;
62
+ --font-size-h4-small: 22px;
63
+ --font-size-h5-small: 20px;
64
+ --font-size-h6-small: 18px;
65
65
 
66
66
  --font-size-p1: 16px;
67
67
  --font-size-p2: 14px;
@@ -122,11 +122,11 @@
122
122
  /* Updated color palette using design system */
123
123
  --paletteColor1: var(--color-blue-400);
124
124
  --paletteColor2: var(--color-blue-600);
125
- --paletteColor3: var(--color-neutral-gray-700);
126
- --paletteColor4: var(--color-neutral-gray-900);
125
+ --paletteColor3: var(--color-neutral-700);
126
+ --paletteColor4: var(--color-neutral-900);
127
127
  --paletteColor5: var(--color-red-400);
128
128
  --paletteColor6: var(--color-yellow-400);
129
- --paletteColor7: var(--color-neutral-gray-200);
129
+ --paletteColor7: var(--color-neutral-200);
130
130
  --paletteColor8: var(--color-neutral-white);
131
131
  --color: var(--paletteColor3);
132
132
  }
@@ -134,120 +134,6 @@
134
134
  /* Design System CSS Variables for compatibility */
135
135
  @layer base {
136
136
  :root {
137
- /* Colors - Neutral */
138
- --color-neutral-white: #ffffff;
139
- --color-neutral-gray-100: #f8f8f8;
140
- --color-neutral-gray-200: #eaeaea;
141
- --color-neutral-gray-300: #d9d9d9;
142
- --color-neutral-gray-400: #c6c6c6;
143
- --color-neutral-gray-500: #a3a3a3;
144
- --color-neutral-gray-600: #8e8e8e;
145
- --color-neutral-gray-700: #575757;
146
- --color-neutral-gray-800: #3b3b3b;
147
- --color-neutral-gray-900: #232323;
148
- --color-neutral-black: #000000;
149
- --color-neutral-border: #00000026;
150
-
151
- /* Colors - Brand Red */
152
- --color-red-100: #fff0f2;
153
- --color-red-200: #ffc4ca;
154
- --color-red-300: #ff98a2;
155
- --color-red-400: #f76977;
156
- --color-red-500: #bd4450;
157
- --color-red-600: #a0343e;
158
- --color-red-700: #82262f;
159
- --color-red-800: #651a22;
160
-
161
- /* Colors - Brand Blue */
162
- --color-blue-100: #e9f8ff;
163
- --color-blue-200: #b9e8ff;
164
- --color-blue-300: #89d9ff;
165
- --color-blue-400: #27b3f5;
166
- --color-blue-500: #1696d3;
167
- --color-blue-600: #087bb1;
168
- --color-blue-700: #00618f;
169
- --color-blue-800: #004a6d;
170
-
171
- /* Colors - Brand Yellow */
172
- --color-yellow-100: #fff9ec;
173
- --color-yellow-200: #ffedc2;
174
- --color-yellow-300: #ffe197;
175
- --color-yellow-400: #f8c341;
176
- --color-yellow-500: #d6a52d;
177
- --color-yellow-600: #b4881d;
178
- --color-yellow-700: #926c10;
179
- --color-yellow-800: #705207;
180
-
181
- /* Typography - Font Families */
182
- --font-family-noto: 'Noto Sans TC', sans-serif;
183
- --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
184
-
185
- /* Typography - Font Sizes */
186
- --font-size-h1-large: 48px;
187
- --font-size-h2-large: 40px;
188
- --font-size-h3-large: 32px;
189
- --font-size-h4-large: 28px;
190
- --font-size-h5-large: 22px;
191
- --font-size-h6-large: 18px;
192
-
193
- --font-size-h1-small: 28px;
194
- --font-size-h2-small: 24px;
195
- --font-size-h3-small: 22px;
196
- --font-size-h4-small: 18px;
197
- --font-size-h5-small: 17px;
198
- --font-size-h6-small: 16px;
199
-
200
- --font-size-p1: 16px;
201
- --font-size-p2: 14px;
202
- --font-size-p3: 12px;
203
- --font-size-p4: 10px;
204
-
205
- /* Typography - Line Heights */
206
- --line-height-tight: 1.25;
207
- --line-height-normal: 1.6;
208
- --line-height-relaxed: 1.75;
209
-
210
- /* Typography - Letter Spacing */
211
- --letter-spacing-wide: 0.05em;
212
-
213
- /* Spacing - Grid System */
214
- --spacing-grid-xs: 4px;
215
- --spacing-grid-sm: 8px;
216
- --spacing-grid-md: 16px;
217
- --spacing-grid-lg: 24px;
218
- --spacing-grid-xl: 32px;
219
- --spacing-grid-2xl: 48px;
220
- --spacing-grid-3xl: 64px;
221
- --spacing-grid-4xl: 96px;
222
- --spacing-grid-5xl: 128px;
223
-
224
- /* Container Widths */
225
- --container-mobile: 375px;
226
- --container-tablet: 768px;
227
- --container-desktop: 1024px;
228
- --container-hd: 1440px;
229
-
230
- /* Grid Gutters */
231
- --gutter-mobile: 16px;
232
- --gutter-tablet: 24px;
233
- --gutter-desktop: 32px;
234
- --gutter-hd: 32px;
235
-
236
- /* Margins */
237
- --margin-mobile: 24px;
238
- --margin-tablet: 32px;
239
- --margin-desktop: 48px;
240
- --margin-hd: 120px;
241
-
242
- /* Responsive Breakpoints */
243
- --breakpoint-mobile: 375px;
244
- --breakpoint-tablet: 768px;
245
- --breakpoint-desktop: 1024px;
246
- --breakpoint-hd: 1440px;
247
-
248
- /* Header */
249
- --mobile-header-height: 64px;
250
-
251
137
  /* Legacy variables for backward compatibility */
252
138
  --fontFamily: var(--font-family-noto);
253
139
  --max-width: 1100px;
@@ -256,11 +142,11 @@
256
142
  /* Updated color palette using design system */
257
143
  --paletteColor1: var(--color-blue-400);
258
144
  --paletteColor2: var(--color-blue-600);
259
- --paletteColor3: var(--color-neutral-gray-700);
260
- --paletteColor4: var(--color-neutral-gray-900);
145
+ --paletteColor3: var(--color-neutral-700);
146
+ --paletteColor4: var(--color-neutral-900);
261
147
  --paletteColor5: var(--color-red-400);
262
148
  --paletteColor6: var(--color-yellow-400);
263
- --paletteColor7: var(--color-neutral-gray-200);
149
+ --paletteColor7: var(--color-neutral-200);
264
150
  --paletteColor8: var(--color-neutral-white);
265
151
  --color: var(--paletteColor3);
266
152
  }
@@ -321,16 +207,16 @@
321
207
  font-family: var(--font-family-noto);
322
208
  font-size: var(--font-size-h1-small);
323
209
  font-weight: 700;
324
- line-height: var(--line-height-tight);
325
- letter-spacing: var(--letter-spacing-wide);
210
+ line-height: var(--line-height-normal);
211
+ letter-spacing: 1.6px;
326
212
  }
327
213
 
328
214
  .prose-h2-small {
329
215
  font-family: var(--font-family-noto);
330
216
  font-size: var(--font-size-h2-small);
331
217
  font-weight: 700;
332
- line-height: var(--line-height-tight);
333
- letter-spacing: var(--letter-spacing-wide);
218
+ line-height: var(--line-height-normal);
219
+ letter-spacing: 1.4px;
334
220
  }
335
221
 
336
222
  .prose-h3-small {