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

package/src/header/menu/index.tsx

@@ -86,7 +86,7 @@ function Menu({
       {/* Menu */}
       <div
         className={cn(
-          'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out scrollbar-thin tablet:pt-0 fixed z-1001 h-full w-full transform pt-(--mobile-header-height) transition-transform duration-300',
+          'top-0 left-0 tablet:w-80 bg-white shadow-2xl ease-in-out tablet:pt-0 fixed z-1001 h-full scrollbar-thin w-full transform pt-(--mobile-header-height) transition-transform duration-300',
           isOpen ? 'translate-x-0' : '-translate-x-full'
         )}
       >

package/src/header/shared-components.tsx

@@ -173,12 +173,12 @@ export function SearchInputSection(props: SearchInputSectionProps) {
           isFocused,
         })}
       >
-        <h3 className="prose-p3 font-bold mb-3 text-neutral-700">熱門搜尋</h3>
+        <h3 className="font-bold mb-3 prose-p3 text-neutral-700">熱門搜尋</h3>
         <div className="gap-2.5 flex flex-wrap">
           {tags.map((keyword) => (
             <a
               key={keyword}
-              className="px-3 py-1 prose-p2 font-bold cursor-pointer rounded-full bg-neutral-200 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white"
+              className="px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white"
               href={`/search?q=${encodeURIComponent(keyword)}`}
             >
               #{keyword}
@@ -285,7 +285,7 @@ export function BottomNavigation({
           <div key={item.label} className="flex items-center">
             <a
               href={item.href}
-              className="py-1 prose-p1 font-bold! h-6 flex items-center text-neutral-900 transition-colors hover:text-red-400"
+              className="py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400"
             >
               {item.label}
             </a>

package/src/styles.css

@@ -56,12 +56,12 @@
   --font-size-h5-large: 22px;
   --font-size-h6-large: 18px;
 
-  --font-size-h1-small: 28px;
-  --font-size-h2-small: 24px;
-  --font-size-h3-small: 22px;
-  --font-size-h4-small: 18px;
-  --font-size-h5-small: 17px;
-  --font-size-h6-small: 16px;
+  --font-size-h1-small: 32px;
+  --font-size-h2-small: 28px;
+  --font-size-h3-small: 24px;
+  --font-size-h4-small: 22px;
+  --font-size-h5-small: 20px;
+  --font-size-h6-small: 18px;
 
   --font-size-p1: 16px;
   --font-size-p2: 14px;
@@ -122,11 +122,11 @@
   /* Updated color palette using design system */
   --paletteColor1: var(--color-blue-400);
   --paletteColor2: var(--color-blue-600);
-  --paletteColor3: var(--color-neutral-gray-700);
-  --paletteColor4: var(--color-neutral-gray-900);
+  --paletteColor3: var(--color-neutral-700);
+  --paletteColor4: var(--color-neutral-900);
   --paletteColor5: var(--color-red-400);
   --paletteColor6: var(--color-yellow-400);
-  --paletteColor7: var(--color-neutral-gray-200);
+  --paletteColor7: var(--color-neutral-200);
   --paletteColor8: var(--color-neutral-white);
   --color: var(--paletteColor3);
 }
@@ -134,120 +134,6 @@
 /* Design System CSS Variables for compatibility */
 @layer base {
   :root {
-    /* Colors - Neutral */
-    --color-neutral-white: #ffffff;
-    --color-neutral-gray-100: #f8f8f8;
-    --color-neutral-gray-200: #eaeaea;
-    --color-neutral-gray-300: #d9d9d9;
-    --color-neutral-gray-400: #c6c6c6;
-    --color-neutral-gray-500: #a3a3a3;
-    --color-neutral-gray-600: #8e8e8e;
-    --color-neutral-gray-700: #575757;
-    --color-neutral-gray-800: #3b3b3b;
-    --color-neutral-gray-900: #232323;
-    --color-neutral-black: #000000;
-    --color-neutral-border: #00000026;
-
-    /* Colors - Brand Red */
-    --color-red-100: #fff0f2;
-    --color-red-200: #ffc4ca;
-    --color-red-300: #ff98a2;
-    --color-red-400: #f76977;
-    --color-red-500: #bd4450;
-    --color-red-600: #a0343e;
-    --color-red-700: #82262f;
-    --color-red-800: #651a22;
-
-    /* Colors - Brand Blue */
-    --color-blue-100: #e9f8ff;
-    --color-blue-200: #b9e8ff;
-    --color-blue-300: #89d9ff;
-    --color-blue-400: #27b3f5;
-    --color-blue-500: #1696d3;
-    --color-blue-600: #087bb1;
-    --color-blue-700: #00618f;
-    --color-blue-800: #004a6d;
-
-    /* Colors - Brand Yellow */
-    --color-yellow-100: #fff9ec;
-    --color-yellow-200: #ffedc2;
-    --color-yellow-300: #ffe197;
-    --color-yellow-400: #f8c341;
-    --color-yellow-500: #d6a52d;
-    --color-yellow-600: #b4881d;
-    --color-yellow-700: #926c10;
-    --color-yellow-800: #705207;
-
-    /* Typography - Font Families */
-    --font-family-noto: 'Noto Sans TC', sans-serif;
-    --font-family-swei: 'SweiMarkerSansCJKtc-Regular', sans-serif;
-
-    /* Typography - Font Sizes */
-    --font-size-h1-large: 48px;
-    --font-size-h2-large: 40px;
-    --font-size-h3-large: 32px;
-    --font-size-h4-large: 28px;
-    --font-size-h5-large: 22px;
-    --font-size-h6-large: 18px;
-
-    --font-size-h1-small: 28px;
-    --font-size-h2-small: 24px;
-    --font-size-h3-small: 22px;
-    --font-size-h4-small: 18px;
-    --font-size-h5-small: 17px;
-    --font-size-h6-small: 16px;
-
-    --font-size-p1: 16px;
-    --font-size-p2: 14px;
-    --font-size-p3: 12px;
-    --font-size-p4: 10px;
-
-    /* Typography - Line Heights */
-    --line-height-tight: 1.25;
-    --line-height-normal: 1.6;
-    --line-height-relaxed: 1.75;
-
-    /* Typography - Letter Spacing */
-    --letter-spacing-wide: 0.05em;
-
-    /* Spacing - Grid System */
-    --spacing-grid-xs: 4px;
-    --spacing-grid-sm: 8px;
-    --spacing-grid-md: 16px;
-    --spacing-grid-lg: 24px;
-    --spacing-grid-xl: 32px;
-    --spacing-grid-2xl: 48px;
-    --spacing-grid-3xl: 64px;
-    --spacing-grid-4xl: 96px;
-    --spacing-grid-5xl: 128px;
-
-    /* Container Widths */
-    --container-mobile: 375px;
-    --container-tablet: 768px;
-    --container-desktop: 1024px;
-    --container-hd: 1440px;
-
-    /* Grid Gutters */
-    --gutter-mobile: 16px;
-    --gutter-tablet: 24px;
-    --gutter-desktop: 32px;
-    --gutter-hd: 32px;
-
-    /* Margins */
-    --margin-mobile: 24px;
-    --margin-tablet: 32px;
-    --margin-desktop: 48px;
-    --margin-hd: 120px;
-
-    /* Responsive Breakpoints */
-    --breakpoint-mobile: 375px;
-    --breakpoint-tablet: 768px;
-    --breakpoint-desktop: 1024px;
-    --breakpoint-hd: 1440px;
-
-    /* Header */
-    --mobile-header-height: 64px;
-
     /* Legacy variables for backward compatibility */
     --fontFamily: var(--font-family-noto);
     --max-width: 1100px;
@@ -256,220 +142,219 @@
     /* Updated color palette using design system */
     --paletteColor1: var(--color-blue-400);
     --paletteColor2: var(--color-blue-600);
-    --paletteColor3: var(--color-neutral-gray-700);
-    --paletteColor4: var(--color-neutral-gray-900);
+    --paletteColor3: var(--color-neutral-700);
+    --paletteColor4: var(--color-neutral-900);
     --paletteColor5: var(--color-red-400);
     --paletteColor6: var(--color-yellow-400);
-    --paletteColor7: var(--color-neutral-gray-200);
+    --paletteColor7: var(--color-neutral-200);
     --paletteColor8: var(--color-neutral-white);
     --color: var(--paletteColor3);
   }
 }
 
 @layer utilities {
-  /* Typography Utilities - Headlines Large */
-  .prose-h1-large {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h1-large);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
+  body.no-scroll {
+    overflow: hidden;
   }
+}
 
-  .prose-h2-large {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h2-large);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+/* Typography Utilities - Headlines Large */
+@utility prose-h1-large {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h1-large);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 2.4px;
+}
 
-  .prose-h3-large {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h3-large);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h2-large {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h2-large);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 2px;
+}
 
-  .prose-h4-large {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h4-large);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h3-large {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h3-large);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.6px;
+}
 
-  .prose-h5-large {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h5-large);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h4-large {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h4-large);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.4px;
+}
 
-  .prose-h6-large {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h6-large);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h5-large {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h5-large);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.1px;
+}
 
-  /* Typography Utilities - Headlines Small */
-  .prose-h1-small {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h1-small);
-    font-weight: 700;
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h6-large {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h6-large);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.9px;
+}
 
-  .prose-h2-small {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h2-small);
-    font-weight: 700;
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+/* Typography Utilities - Headlines Small */
+@utility prose-h1-small {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h1-small);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.6px;
+}
 
-  .prose-h3-small {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h3-small);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h2-small {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h2-small);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.4px;
+}
 
-  .prose-h4-small {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h4-small);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h3-small {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h3-small);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.2px;
+}
 
-  .prose-h5-small {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h5-small);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h4-small {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h4-small);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1.1px;
+}
 
-  .prose-h6-small {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-h6-small);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h5-small {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h5-small);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 1px;
+}
 
-  /* Typography Utilities - Paragraphs */
-  .prose-p1 {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p1);
-    font-weight: 500;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-h6-small {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-h6-small);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.9px;
+}
 
-  .prose-p1-bold {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p1);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+/* Typography Utilities - Paragraphs */
+@utility prose-p1 {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p1);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.8px;
+}
 
-  .prose-p2 {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p2);
-    font-weight: 500;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-p1-bold {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p1);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.8px;
+}
 
-  .prose-p2-bold {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p2);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-p2 {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p2);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.7px;
+}
 
-  .prose-p3 {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p3);
-    font-weight: 500;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-p2-bold {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p2);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.7px;
+}
 
-  .prose-p3-bold {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p3);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-p3 {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p3);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.6px;
+}
 
-  .prose-p4 {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p4);
-    font-weight: 500;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-p3-bold {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p3);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.6px;
+}
 
-  .prose-p4-bold {
-    font-family: var(--font-family-noto);
-    font-size: var(--font-size-p4);
-    font-weight: 700;
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-wide);
-  }
+@utility prose-p4 {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p4);
+  font-weight: 500;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.5px;
+}
 
-  /* Swei Marker Sans Font Variants */
-  .font-swei {
-    font-family: var(--font-family-swei);
-  }
+@utility prose-p4-bold {
+  font-family: var(--font-family-noto);
+  font-size: var(--font-size-p4);
+  font-weight: 700;
+  line-height: var(--line-height-normal);
+  letter-spacing: 0.5px;
+}
 
-  /* Theme Color Utilities */
-  .theme-red {
-    --theme-color: var(--color-red-400);
-  }
-  .theme-yellow {
-    --theme-color: var(--color-yellow-400);
-  }
-  .theme-blue {
-    --theme-color: var(--color-blue-400);
-  }
+/* Swei Marker Sans Font Variants */
+@utility font-swei {
+  font-family: var(--font-family-swei);
+}
 
-  /* Custom Scrollbar Utilities */
-  .scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-neutral-gray-300) transparent;
-  }
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-300) transparent;
 
-  .scrollbar-thin::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 6px;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background: transparent;
     border-radius: 3px;
   }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  &::-webkit-scrollbar-thumb:hover {
     background: transparent;
   }
+}
 
-  body.no-scroll {
-    overflow: hidden;
-  }
+/* Theme Color Utilities */
+@utility theme-red {
+  --theme-color: var(--color-red-400);
+}
+@utility theme-yellow {
+  --theme-color: var(--color-yellow-400);
+}
+@utility theme-blue {
+  --theme-color: var(--color-blue-400);
 }