Refactored tokens

components/lib/theme/aura/index.js

@@ -12,23 +12,7 @@ import tabview from 'primevue/theme/aura/tabview';
 import toolbar from 'primevue/theme/aura/toolbar';
 
 export default {
-    variables: {
+    primitive: {
-        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: {
         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' },
@@ -50,7 +34,25 @@ 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: {
+        fontFamily: '"Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
+        transitionDuration: '0.2s',
+        focusRing: {
+            width: '1px',
+            style: 'solid',
+            color: '{primary.500}',
+            offset: '2px'
+        },
+        borderRadius: {
+            sm: '4px',
+            base: '6px',
+            lg: '12px',
+        },
+        anchorGutter: '2px',
+        maskBackground: 'rgba(0,0,0,0.4)',
         primary: {
             50: '{emerald.50}',
             100: '{emerald.100}',
@@ -63,8 +65,6 @@ export default {
             800: '{emerald.800}',
             900: '{emerald.900}',
             950: '{emerald.950}'
-                }
-            }
         },
         colorScheme: {
             light: {

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

@@ -1,13 +1,11 @@
 export default {
     variables: {
-        common: {},
         colorScheme: {
             light: {
                 root: {
                     borderColor: '{surface.200}',
                     background: '{surface.0}',
-                    textColor: '{text.color}',
+                    textColor: '{text.color}'
-                    borderRadius: '{borderRadius}'
                 },
                 headerIcon: {
                     color: '{surface.500}',
@@ -19,8 +17,7 @@ export default {
                 root: {
                     borderColor: '{surface.700}',
                     background: '{surface.900}',
-                    textColor: '{text.color}',
+                    textColor: '{text.color}'
-                    borderRadius: '{borderRadius}'
                 },
                 headerIcon: {
                     color: '{surface.400}',
@@ -33,7 +30,7 @@ export default {
     css: `
 .p-panel {
     border: 1px solid var(--p-panel-border-color);
-    border-radius: var(--p-panel-border-radius);
+    border-radius: var(--p-border-radius-base);
     background: var(--p-panel-background);
     color: var(--p-panel-text-color);
 }
@@ -80,11 +77,11 @@ export default {
     outline-offset: var(--p-focus-ring-offset);
 }
 
-.p-panel .p-panel-content {
+.p-panel-content {
     padding: 0 1.125rem 1.125rem 1.125rem;
 }
 
-.p-panel .p-panel-footer {
+.p-panel-footer {
     padding: 0 1.125rem 1.125rem 1.125rem;
 }
     `