@moving-walls/design-system 1.0.0 → 1.0.2

package/dist/index.esm.js

@@ -48193,20 +48193,51 @@ var FloatingElement = function FloatingElement(_ref8) {
 
 // Design Tokens for MW Design System
 var colors = {
-  // Primary Colors
+  // Primary Colors (Light Theme - from Figma)
   primary: {
-    50: '#eff6ff',
-    100: '#dbeafe',
-    200: '#bfdbfe',
-    300: '#93c5fd',
-    400: '#60a5fa',
-    500: '#3b82f6',
-    600: '#2563eb',
-    700: '#1d4ed8',
-    800: '#1e40af',
-    900: '#1e3a8a'
+    50: '#f0f7fc',
+    // rgb(232, 240, 247) - corrected hex to match rgb
+    100: '#b9cfe6',
+    // rgb(185, 207, 230)
+    200: '#97b8da',
+    // rgb(151, 184, 218)
+    300: '#6898c9',
+    // rgb(104, 152, 201)
+    400: '#4a84bf',
+    // rgb(74, 132, 191)
+    500: '#1d65af',
+    // rgb(29, 101, 175) - Light theme Primary-500 from Figma
+    600: '#1a5c9f',
+    // rgb(26, 92, 159)
+    700: '#15487c',
+    // rgb(21, 72, 124)
+    800: '#103860',
+    // rgb(16, 56, 96)
+    900: '#0c2a4a' // rgb(12, 42, 74)
   },
-  // Gray Scale
+  // Secondary Colors (from Figma)
+  secondary: {
+    50: '#e0f7fc',
+    // rgb(232, 247, 252)
+    100: '#c8e7f7',
+    // rgb(200, 231, 247)
+    200: '#add0f3',
+    // rgb(173, 210, 243)
+    300: '#87caed',
+    // rgb(135, 202, 237)
+    400: '#70c0e9',
+    // rgb(112, 192, 233)
+    500: '#4cb0e4',
+    // rgb(76, 176, 228)
+    600: '#45a0cf',
+    // rgb(69, 160, 207)
+    700: '#367da2',
+    // rgb(54, 125, 162)
+    800: '#2a6170',
+    // rgb(42, 97, 125)
+    900: '#204860' // rgb(32, 74, 96)
+  },
+  // Gray Scale (kept for backward compatibility, but neutral is preferred)
   gray: {
     50: '#f9fafb',
     100: '#f3f4f6',
@@ -48219,42 +48250,115 @@ var colors = {
     800: '#1f2937',
     900: '#111827'
   },
-  // Semantic Colors
+  // Success Colors (from Figma)
   success: {
-    50: '#ecfdf5',
-    100: '#d1fae5',
-    200: '#a7f3d0',
-    300: '#6ee7b7',
-    400: '#34d399',
-    500: '#10b981',
-    600: '#059669',
-    700: '#047857',
-    800: '#065f46',
-    900: '#064e3b'
+    50: '#eaf2eb',
+    // rgb(234, 242, 235)
+    100: '#bed7bf',
+    // rgb(190, 215, 191)
+    200: '#9ec3a1',
+    // rgb(154, 195, 161)
+    300: '#72bc78',
+    // rgb(114, 188, 118)
+    400: '#579756',
+    // rgb(87, 151, 91)
+    500: '#2d7632',
+    // rgb(45, 125, 50)
+    600: '#297226',
+    // rgb(41, 114, 46)
+    700: '#205024',
+    // rgb(32, 89, 36)
+    800: '#19451c',
+    // rgb(25, 69, 28)
+    900: '#133515' // rgb(19, 53, 21)
+  },
+  // Danger/Error Colors (from Figma)
+  error: {
+    50: '#f8eaea',
+    // rgb(248, 234, 234)
+    100: '#edbcbc',
+    // rgb(237, 188, 188)
+    200: '#e49c9c',
+    // rgb(228, 156, 156)
+    300: '#d86f6f',
+    // rgb(216, 111, 111)
+    400: '#d15353',
+    // rgb(209, 83, 83)
+    500: '#c52828',
+    // rgb(197, 40, 40)
+    600: '#b32424',
+    // rgb(179, 36, 36)
+    700: '#8c1c1c',
+    // rgb(140, 28, 28)
+    800: '#6c1616',
+    // rgb(108, 22, 22)
+    900: '#531111' // rgb(83, 17, 17)
   },
+  // Warning Colors (from Figma)
   warning: {
-    50: '#fffbeb',
-    100: '#fef3c7',
-    200: '#fde68a',
-    300: '#fcd34d',
-    400: '#fbbf24',
-    500: '#f59e0b',
-    600: '#d97706',
-    700: '#b45309',
-    800: '#92400e',
-    900: '#78350f'
+    50: '#fef6e9',
+    // rgb(254, 246, 233)
+    100: '#fde4bb',
+    // rgb(255, 228, 187)
+    200: '#fcd790',
+    // rgb(252, 215, 155)
+    300: '#fbc560',
+    // rgb(251, 197, 100)
+    400: '#fab951',
+    // rgb(250, 185, 81)
+    500: '#f0a825',
+    // rgb(240, 168, 37)
+    600: '#e39922',
+    // rgb(227, 153, 34)
+    700: '#b1771a',
+    // rgb(177, 119, 26)
+    800: '#995c14',
+    // rgb(137, 92, 20)
+    900: '#694710' // rgb(105, 71, 16)
   },
-  error: {
-    50: '#fef2f2',
-    100: '#fee2e2',
-    200: '#fecaca',
-    300: '#fca5a5',
-    400: '#f87171',
-    500: '#ef4444',
-    600: '#dc2626',
-    700: '#b91c1c',
-    800: '#991b1b',
-    900: '#7f1d1d'
+  // Info Colors (from Figma)
+  info: {
+    50: '#e9f3fa',
+    // rgb(230, 243, 250)
+    100: '#b0daf1',
+    // rgb(176, 218, 241)
+    200: '#84c0da',
+    // rgb(138, 200, 234)
+    300: '#55afe0',
+    // rgb(85, 175, 224)
+    400: '#34a0da',
+    // rgb(52, 160, 218)
+    500: '#0188d1',
+    // rgb(1, 136, 209)
+    600: '#017cbe',
+    // rgb(1, 124, 190)
+    700: '#016194',
+    // rgb(1, 97, 148)
+    800: '#014673',
+    // rgb(1, 75, 115)
+    900: '#003958' // rgb(0, 57, 88)
+  },
+  // Neutral Colors (from Figma)
+  neutral: {
+    50: '#f1f1f1',
+    // rgb(241, 241, 241)
+    100: '#d3d3d3',
+    // rgb(211, 211, 211)
+    200: '#bebebe',
+    // rgb(190, 190, 190)
+    300: '#a0a0a0',
+    // rgb(160, 160, 160)
+    400: '#8d8d8d',
+    // rgb(141, 141, 141)
+    500: '#717171',
+    // rgb(113, 113, 113)
+    600: '#676767',
+    // rgb(103, 103, 103)
+    700: '#505050',
+    // rgb(80, 80, 80)
+    800: '#3e3e3e',
+    // rgb(62, 62, 62)
+    900: '#2f2f2f' // rgb(47, 47, 47)
   }
 };
 var spacing = {
@@ -48414,10 +48518,50 @@ var tokens = {
 // CSS Custom Properties
 var cssVariables = {
   ':root': {
-    // Colors
+    // Primary Colors
     '--mw-primary-50': colors.primary[50],
+    '--mw-primary-100': colors.primary[100],
+    '--mw-primary-200': colors.primary[200],
+    '--mw-primary-300': colors.primary[300],
+    '--mw-primary-400': colors.primary[400],
     '--mw-primary-500': colors.primary[500],
     '--mw-primary-600': colors.primary[600],
+    '--mw-primary-700': colors.primary[700],
+    '--mw-primary-800': colors.primary[800],
+    '--mw-primary-900': colors.primary[900],
+    // Secondary Colors
+    '--mw-secondary-50': colors.secondary[50],
+    '--mw-secondary-100': colors.secondary[100],
+    '--mw-secondary-200': colors.secondary[200],
+    '--mw-secondary-300': colors.secondary[300],
+    '--mw-secondary-400': colors.secondary[400],
+    '--mw-secondary-500': colors.secondary[500],
+    '--mw-secondary-600': colors.secondary[600],
+    '--mw-secondary-700': colors.secondary[700],
+    '--mw-secondary-800': colors.secondary[800],
+    '--mw-secondary-900': colors.secondary[900],
+    // Success Colors
+    '--mw-success-50': colors.success[50],
+    '--mw-success-500': colors.success[500],
+    '--mw-success-600': colors.success[600],
+    // Error/Danger Colors
+    '--mw-error-50': colors.error[50],
+    '--mw-error-500': colors.error[500],
+    '--mw-error-600': colors.error[600],
+    // Warning Colors
+    '--mw-warning-50': colors.warning[50],
+    '--mw-warning-500': colors.warning[500],
+    '--mw-warning-600': colors.warning[600],
+    // Info Colors
+    '--mw-info-50': colors.info[50],
+    '--mw-info-500': colors.info[500],
+    '--mw-info-600': colors.info[600],
+    // Neutral Colors
+    '--mw-neutral-50': colors.neutral[50],
+    '--mw-neutral-100': colors.neutral[100],
+    '--mw-neutral-500': colors.neutral[500],
+    '--mw-neutral-900': colors.neutral[900],
+    // Gray Colors (backward compatibility)
     '--mw-gray-50': colors.gray[50],
     '--mw-gray-100': colors.gray[100],
     '--mw-gray-900': colors.gray[900],