feat:重构按钮和icon组件

2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
@@ -0,0 +1,54 @@
+# Design System Strategy: Doodle Mini
+
+## 1. Overview & Creative North Star: "The Sun-Drenched Studio"
+The creative direction for this design system is **"The Sun-Drenched Studio."** We are moving away from the cold, clinical "educational app" look and toward a space that feels like a physical, tactile craft room bathed in morning light. 
+
+Instead of a rigid, boxed-in grid, we embrace **Organic Asymmetry**. Elements should feel like they were placed on a table by hand, not snapped to a pixel-perfect wireframe. We break the "template" look by using exaggerated corner radii, overlapping "paper" layers, and a hierarchy that prioritizes warmth and play over traditional data density.
+
+## 2. Colors: Tonal Radiance
+The palette is anchored by `primary` (#6c5a00) and `primary_container` (#ffd709), creating a "Yaya Yellow" experience that is vibrant yet sophisticated.
+
+*   **The "No-Line" Rule:** Under no circumstances should 1px solid borders be used to separate content. We define boundaries exclusively through background shifts. Use `surface_container_low` (#f8f0e0) for main content areas and `surface` (#fef6e7) for the global backdrop.
+*   **Surface Hierarchy & Nesting:** Treat the UI as stacked sheets of heavy-weight construction paper.
+    *   **Level 0:** `background` (#fef6e7) – The desk surface.
+    *   **Level 1:** `surface_container` (#f0e7d6) – The worksheet base.
+    *   **Level 2:** `surface_container_lowest` (#ffffff) – Active drawing cards or "Paper" modals.
+*   **The Glass & Gradient Rule:** For navigation bars or floating tool palettes, use Glassmorphism. Apply `surface_container_low` at 80% opacity with a `20px` backdrop blur. This ensures the "sunny" background bleeds through, maintaining the "Sun-Drenched" atmosphere.
+*   **Signature Textures:** Main CTAs should not be flat. Apply a subtle linear gradient from `primary_fixed` (#ffd709) to `primary_fixed_dim` (#efc900) at a 145-degree angle to give buttons a "pillowy" 3D volume.
+
+## 3. Typography: The Friendly Guide
+We use **Plus Jakarta Sans** exclusively. Its geometric yet soft terminals provide a modern, legible, and approachable voice.
+
+*   **Display & Headlines:** Use `display-lg` (3.5rem) for "Doodle Mini" brand moments. Headlines (`headline-md`) should use a tighter letter-spacing (-0.02em) to feel "hugged" and friendly.
+*   **Body & Labels:** Use `body-lg` for all instructional text. In a children's context, readability is paramount; ensure a line height of at least 1.6x the font size.
+*   **Hierarchy as Personality:** Use `on_secondary_container` (#6d3b00) for sub-headers to provide a warm, "chocolatey" contrast against the yellow, moving away from harsh blacks.
+
+## 4. Elevation & Depth: Tonal Layering
+Depth in this system is a result of light and shadow, not lines and strokes.
+
+*   **The Layering Principle:** To lift a component, place a `surface_container_highest` (#e5dcc9) element inside a `surface_container_low` (#f8f0e0) environment. This creates a "recessed" or "elevated" feel through color value alone.
+*   **Ambient Shadows:** Use shadows sparingly. When an object "floats" (like a floating action button), use a shadow color derived from `on_surface` (#322e25) at 6% opacity, with a blur of `32px` and a Y-offset of `8px`. It should look like a soft glow, not a drop shadow.
+*   **The "Ghost Border" Fallback:** If a separator is required for accessibility in input fields, use `outline_variant` (#b3ac9f) at **15% opacity**. It should be felt, not seen.
+
+## 5. Components: Tactile & Safe
+Every component must feel "squishy" and safe to touch.
+
+*   **Buttons:** 
+    *   **Primary:** Uses `primary_container` (#ffd709) with a `full` (9999px) radius. 
+    *   **States:** On press, scale the button down to 96% size to simulate a physical "click" into the screen.
+*   **Cards & Lists:** Forbid divider lines. Separate list items using a `spacing-3` (1rem) gap and alternating background colors between `surface_container_low` and `surface_container`.
+*   **Input Fields:** Use `surface_container_highest` for the input track. Corners must be `xl` (3rem). Labels sit *above* the field in `title-sm` to ensure children can always see the context.
+*   **Selection Chips:** Use `secondary_container` (#ffc697) for selected states. The roundedness must be `full` to mimic smooth river stones.
+*   **The "Joy" Progress Bar:** A custom component for Doodle Mini. Use a thick track (`1.5rem` height) in `surface_container_highest` with the progress indicator using a gradient of `tertiary` (#006b1b) to `tertiary_fixed` (#91f78e).
+
+## 6. Do’s and Don’ts
+
+### Do:
+*   **Do** use `xl` and `full` corner radii for almost everything. Sharp corners are "scary."
+*   **Do** lean into white space. Use `spacing-12` (4rem) between major sections to let the design breathe.
+*   **Do** use `on_tertiary_container` (dark green) for success states; it feels organic and "earthy" against the yellow.
+
+### Don’t:
+*   **Don’t** use pure black (#000000). Use `on_surface` (#322e25) for all dark text to maintain the warm, sunny tone.
+*   **Don’t** use 1px dividers. If you feel you need one, use a `surface_variant` (#e5dcc9) color block that is `4px` thick with `full` rounded caps.
+*   **Don’t** crowd the interface. If a screen feels busy, increase the background "paper" size and use a scrollable layout instead of shrinking elements.