New theming api redesign

components/lib/theme/aura/index.js

@@ -12,7 +12,25 @@ import tabview from 'primevue/theme/aura/tabview';
 import toolbar from 'primevue/theme/aura/toolbar';
 
 export default {
-    primitive: {
+    variables: {
+        common: {
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+            fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
+            borderRadius: '6px',
+            transitionDuration: '.2s',
+            focusRing: {
+                width: '1px',
+                style: 'solid',
+                color: '{primary.500}',
+                offset: '2px'
+            },
+            anchorGutter: '2px',
+            mask: {
+                bg: 'rgba(0,0,0,0.4)'
+            },
+            colors: {
+                white: '#ffffff',
+                black: '#000000',
                 emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
                 green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
                 lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
@@ -34,11 +52,7 @@ export default {
                 gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
                 zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
                 neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
+                stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' },
-    },
-    semantic: {
-        colorScheme: {
-            light: {
                 primary: {
                     50: '{emerald.50}',
                     100: '{emerald.100}',
@@ -51,9 +65,12 @@ export default {
                     800: '{emerald.800}',
                     900: '{emerald.900}',
                     950: '{emerald.950}'
+                }
+            }
         },
+        colorScheme: {
+            light: {
                 surface: {
-                    0: '#ffffff',
                     50: '{slate.50}',
                     100: '{slate.100}',
                     200: '{slate.200}',
@@ -66,25 +83,16 @@ export default {
                     900: '{slate.900}',
                     950: '{slate.950}'
                 },
+                primary: {
+                    color: '{primary.500}',
+                    colorInverse: '{primary.0}'
+                },
                 highlight: {
                     bg: '{primary.50}',
                     textColor: '{primary.700}'
                 }
             },
             dark: {
-                primary: {
-                    50: '{emerald.50}',
-                    100: '{emerald.100}',
-                    200: '{emerald.200}',
-                    300: '{emerald.300}',
-                    400: '{emerald.400}',
-                    500: '{emerald.500}',
-                    600: '{emerald.600}',
-                    700: '{emerald.700}',
-                    800: '{emerald.800}',
-                    900: '{emerald.900}',
-                    950: '{emerald.950}'
-                },
                 surface: {
                     0: '#ffffff',
                     50: '{zinc.50}',
@@ -99,32 +107,15 @@ export default {
                     900: '{zinc.900}',
                     950: '{zinc.950}'
                 },
+                primary: {
+                    color: '{primary.400}',
+                    colorInverse: '{surface.900}'
+                },
                 highlight: {
                     bg: 'color-mix(in srgb, {primary.400}, transparent 84%)',
                     textColor: 'rgba(255,255,255,.87)'
                 }
             }
-        },
-        common: {
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-            fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
-            borderRadius: '6px',
-            transitionDuration: '.2s',
-            focusRing: {
-                width: '1px',
-                style: 'solid',
-                color: '{primary.500}',
-                offset: '2px'
-            },
-            primary: {
-                color: 'var(--p-dark-primary-400, var(--p-primary-500))',
-                colorInverse: 'var(--p-dark-surface-900, var(--p-surface-0))',
-                colorText: 'var(--p-primary-color-inverse)'
-            },
-            anchorGutter: '2px',
-            mask: {
-                bg: 'rgba(0,0,0,0.4)'
-            }
         }
     },
     components: {

components/lib/theme/aura/panel/index.js

@@ -1,13 +1,26 @@
 export default {
     variables: {
-        light: {},
+        common: {},
-        dark: {}
+        colorScheme: {
+            light: {
+                root: {
+                    borderColor: '{surface.200}',
+                    backgroundColor: '{white}'
+                }
+            },
+            dark: {
+                root: {
+                    borderColor: '{surface.700}',
+                    backgroundColor: '{surface.0}'
+                }
+            }
+        }
     },
     css: `
 .p-panel {
-    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border: 1px solid var(--p-panel-border-color);
     border-radius: var(--p-border-radius);
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-dark-surface-900, var(--p-white));
     color: var(--p-dark-surface-0, var(--p-surface-700));
 }