feat(unified-mobile-material-design): Complete US-102 - Definire MD3 color tokens în CSS

Implemented by Ralph autonomous loop. Iteration: 4 Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-12 09:50:55 +00:00
parent e73fac8e1d
commit 58ff6efebc
4 changed files with 196 additions and 2 deletions
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -88,8 +88,8 @@
        "Import adăugat în main.css",
        "npm run build passes"
      ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 4"
    },
    {
      "id": "US-103",
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -25,3 +25,9 @@ Mon Jan 12 09:44:54 AM UTC 2026
 [2026-01-12 09:47:52] Working on story: US-101c
 [2026-01-12 09:47:52] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_3_US-101c.log)
 [2026-01-12 09:49:15] SUCCESS: Story US-101c passed!
+[2026-01-12 09:49:15] Changes committed
+[2026-01-12 09:49:15] Progress: 3/20 stories completed
+[2026-01-12 09:49:17] === Iteration 4/100 ===
+[2026-01-12 09:49:17] Working on story: US-102
+[2026-01-12 09:49:17] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_4_US-102.log)
+[2026-01-12 09:50:55] SUCCESS: Story US-102 passed!
--- a/src/assets/css/core/md3-tokens.css
+++ b/src/assets/css/core/md3-tokens.css
@@ -0,0 +1,187 @@
+/* Material Design 3 Color Tokens - ROA2WEB */
+/*
+ * These tokens follow the MD3 naming convention: --md-sys-color-{role}
+ * They map to existing design tokens for consistency with our design system.
+ *
+ * Reference: https://m3.material.io/styles/color/system/overview
+ */
+
+:root {
+  /* ===== Primary Colors ===== */
+  /* Primary: Main brand color, used for key components like FAB, prominent buttons */
+  --md-sys-color-primary: var(--color-primary);
+  /* On-primary: Text/icons on primary color surfaces */
+  --md-sys-color-on-primary: var(--color-text-inverse);
+  /* Primary container: Background for components using primary color (chips, cards) */
+  --md-sys-color-primary-container: var(--primary-100);
+  /* On-primary-container: Text/icons on primary container */
+  --md-sys-color-on-primary-container: var(--primary-900);
+
+  /* ===== Secondary Colors ===== */
+  /* Secondary: Accent color for less prominent components */
+  --md-sys-color-secondary: var(--color-secondary);
+  /* On-secondary: Text/icons on secondary color surfaces */
+  --md-sys-color-on-secondary: var(--color-text-inverse);
+  /* Secondary container: Background for secondary components */
+  --md-sys-color-secondary-container: var(--gray-100);
+  /* On-secondary-container: Text/icons on secondary container */
+  --md-sys-color-on-secondary-container: var(--gray-900);
+
+  /* ===== Surface Colors ===== */
+  /* Surface: Background for cards, sheets, dialogs */
+  --md-sys-color-surface: var(--surface-card);
+  /* On-surface: Primary text on surface */
+  --md-sys-color-on-surface: var(--color-text);
+  /* Surface variant: Alternate surface for differentiation */
+  --md-sys-color-surface-variant: var(--surface-50);
+  /* On-surface-variant: Secondary text on surface */
+  --md-sys-color-on-surface-variant: var(--color-text-secondary);
+
+  /* ===== Background Colors ===== */
+  /* Background: The base layer behind all content */
+  --md-sys-color-background: var(--surface-ground);
+  /* On-background: Text/icons on background */
+  --md-sys-color-on-background: var(--color-text);
+
+  /* ===== Outline Colors ===== */
+  /* Outline: Borders for components like text fields, cards */
+  --md-sys-color-outline: var(--surface-border);
+  /* Outline variant: Subtle borders, dividers */
+  --md-sys-color-outline-variant: var(--color-border-light);
+
+  /* ===== Error Colors ===== */
+  /* Error: For error states and destructive actions */
+  --md-sys-color-error: var(--color-error);
+  /* On-error: Text/icons on error surfaces */
+  --md-sys-color-on-error: var(--color-text-inverse);
+  /* Error container: Background for error states */
+  --md-sys-color-error-container: var(--red-100);
+  /* On-error-container: Text on error container */
+  --md-sys-color-on-error-container: var(--red-900);
+
+  /* ===== Surface Elevation Levels (MD3 Tonal Surfaces) ===== */
+  /* Used for elevation system in MD3 instead of shadows */
+  --md-sys-color-surface-dim: var(--surface-100);
+  --md-sys-color-surface-bright: var(--surface-0);
+  --md-sys-color-surface-container-lowest: var(--surface-0);
+  --md-sys-color-surface-container-low: var(--surface-50);
+  --md-sys-color-surface-container: var(--surface-100);
+  --md-sys-color-surface-container-high: var(--surface-200);
+  --md-sys-color-surface-container-highest: var(--surface-300);
+
+  /* ===== Inverse Colors ===== */
+  /* Used for snackbars, tooltips on dark backgrounds */
+  --md-sys-color-inverse-surface: var(--surface-800);
+  --md-sys-color-inverse-on-surface: var(--surface-50);
+  --md-sys-color-inverse-primary: var(--primary-300);
+
+  /* ===== Scrim ===== */
+  /* Overlay for modals and bottom sheets */
+  --md-sys-color-scrim: rgba(0, 0, 0, 0.32);
+}
+
+/* Manual dark theme via data-theme attribute (highest priority) */
+[data-theme="dark"] {
+  /* ===== Primary Colors - Dark Mode ===== */
+  --md-sys-color-primary: var(--primary-300);
+  --md-sys-color-on-primary: var(--primary-900);
+  --md-sys-color-primary-container: var(--primary-700);
+  --md-sys-color-on-primary-container: var(--primary-100);
+
+  /* ===== Secondary Colors - Dark Mode ===== */
+  --md-sys-color-secondary: var(--gray-300);
+  --md-sys-color-on-secondary: var(--gray-900);
+  --md-sys-color-secondary-container: var(--gray-700);
+  --md-sys-color-on-secondary-container: var(--gray-100);
+
+  /* ===== Surface Colors - Dark Mode ===== */
+  --md-sys-color-surface: var(--surface-card);
+  --md-sys-color-on-surface: var(--color-text);
+  --md-sys-color-surface-variant: var(--surface-200);
+  --md-sys-color-on-surface-variant: var(--color-text-secondary);
+
+  /* ===== Background Colors - Dark Mode ===== */
+  --md-sys-color-background: var(--surface-ground);
+  --md-sys-color-on-background: var(--color-text);
+
+  /* ===== Outline Colors - Dark Mode ===== */
+  --md-sys-color-outline: var(--surface-border);
+  --md-sys-color-outline-variant: var(--surface-300);
+
+  /* ===== Error Colors - Dark Mode ===== */
+  --md-sys-color-error: var(--red-300);
+  --md-sys-color-on-error: var(--red-900);
+  --md-sys-color-error-container: var(--red-800);
+  --md-sys-color-on-error-container: var(--red-100);
+
+  /* ===== Surface Elevation Levels - Dark Mode ===== */
+  --md-sys-color-surface-dim: var(--surface-0);
+  --md-sys-color-surface-bright: var(--surface-200);
+  --md-sys-color-surface-container-lowest: var(--surface-0);
+  --md-sys-color-surface-container-low: var(--surface-50);
+  --md-sys-color-surface-container: var(--surface-100);
+  --md-sys-color-surface-container-high: var(--surface-200);
+  --md-sys-color-surface-container-highest: var(--surface-300);
+
+  /* ===== Inverse Colors - Dark Mode ===== */
+  --md-sys-color-inverse-surface: var(--surface-800);
+  --md-sys-color-inverse-on-surface: var(--surface-100);
+  --md-sys-color-inverse-primary: var(--primary-600);
+
+  /* ===== Scrim - Dark Mode ===== */
+  --md-sys-color-scrim: rgba(0, 0, 0, 0.64);
+}
+
+/* System preference dark mode (fallback when no manual theme set) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    /* ===== Primary Colors - Dark Mode ===== */
+    --md-sys-color-primary: var(--primary-300);
+    --md-sys-color-on-primary: var(--primary-900);
+    --md-sys-color-primary-container: var(--primary-700);
+    --md-sys-color-on-primary-container: var(--primary-100);
+
+    /* ===== Secondary Colors - Dark Mode ===== */
+    --md-sys-color-secondary: var(--gray-300);
+    --md-sys-color-on-secondary: var(--gray-900);
+    --md-sys-color-secondary-container: var(--gray-700);
+    --md-sys-color-on-secondary-container: var(--gray-100);
+
+    /* ===== Surface Colors - Dark Mode ===== */
+    --md-sys-color-surface: var(--surface-card);
+    --md-sys-color-on-surface: var(--color-text);
+    --md-sys-color-surface-variant: var(--surface-200);
+    --md-sys-color-on-surface-variant: var(--color-text-secondary);
+
+    /* ===== Background Colors - Dark Mode ===== */
+    --md-sys-color-background: var(--surface-ground);
+    --md-sys-color-on-background: var(--color-text);
+
+    /* ===== Outline Colors - Dark Mode ===== */
+    --md-sys-color-outline: var(--surface-border);
+    --md-sys-color-outline-variant: var(--surface-300);
+
+    /* ===== Error Colors - Dark Mode ===== */
+    --md-sys-color-error: var(--red-300);
+    --md-sys-color-on-error: var(--red-900);
+    --md-sys-color-error-container: var(--red-800);
+    --md-sys-color-on-error-container: var(--red-100);
+
+    /* ===== Surface Elevation Levels - Dark Mode ===== */
+    --md-sys-color-surface-dim: var(--surface-0);
+    --md-sys-color-surface-bright: var(--surface-200);
+    --md-sys-color-surface-container-lowest: var(--surface-0);
+    --md-sys-color-surface-container-low: var(--surface-50);
+    --md-sys-color-surface-container: var(--surface-100);
+    --md-sys-color-surface-container-high: var(--surface-200);
+    --md-sys-color-surface-container-highest: var(--surface-300);
+
+    /* ===== Inverse Colors - Dark Mode ===== */
+    --md-sys-color-inverse-surface: var(--surface-800);
+    --md-sys-color-inverse-on-surface: var(--surface-100);
+    --md-sys-color-inverse-primary: var(--primary-600);
+
+    /* ===== Scrim - Dark Mode ===== */
+    --md-sys-color-scrim: rgba(0, 0, 0, 0.64);
+  }
+}
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -9,6 +9,7 @@
 /* 1. Core Foundation */
@import "./core/variables.css";
@import "./core/tokens.css"; /* NEW - Extended design tokens */
+@import "./core/md3-tokens.css"; /* Material Design 3 color tokens */
@import "./core/reset.css";
@import "./core/typography.css";