Migrated panels to component tokens

assets/styles/layout/variables/main/_dark.scss

@@ -2,8 +2,8 @@
     --primary-text-color:var(--p-primary-400);
     --primary-color: var(--p-primary-color);
     --primary-inverse-color:var(--p-primary-inverse-color);
-    --text-color: var(--p-text-color);
+    --text-color: var(--p-surface-0);
-    --text-secondary-color: var(--p-text-secondar-color);
+    --text-secondary-color: var(--p-surface-400);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
     --topbar-sticky-background:rgba(0,0,0,.3);

assets/styles/layout/variables/main/_light.scss

@@ -2,8 +2,8 @@
     --primary-text-color:var(--p-primary-600);
     --primary-color: var(--p-primary-color);
     --primary-inverse-color:var(--p-primary-inverse-color);
-    --text-color: var(--p-text-color);
+    --text-color: var(--p-surface-700);
-    --text-secondary-color: var(--p-text-secondar-color);
+    --text-secondary-color: var(--p-surface-500);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
     --glow-blend: hard-light, multiply;
     --topbar-sticky-background:rgba(255,255,255,.7);

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

@@ -1,4 +1,34 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                header: {
+                    background: '{surface.0}',
+                    textColor: '{surface.500}',
+                    textColorHover: '{surface.700}',
+                    textColorActive: '{surface.700}'
+                },
+                content: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                }
+            },
+            dark: {
+                header: {
+                    background: '{surface.900}',
+                    textColor: '{surface.400}',
+                    textColorHover: '{surface.0}',
+                    textColorActive: '{surface.0}'
+                },
+                content: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                }
+            }
+        }
+    },
     css: `
 .p-accordion-header-link {
     cursor: pointer;
@@ -9,10 +39,10 @@ export default {
     user-select: none;
     text-decoration: none;
     padding: 1.125rem 1.125rem 1.125rem 1.125rem;
-    color: var(--p-dark-surface-400, var(--p-surface-500));
+    color: var(--p-accordion-header-text-color);
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-accordion-header-background);
     font-weight: 600;
-    border-radius: var(--p-border-radius);
+    border-radius: var(--p-rounded-base);
     transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
     outline-color: transparent;
 }
@@ -26,10 +56,10 @@ export default {
     outline-offset: -2px;
 }
 .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-accordion-header-text-color-hover);
 }
 .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
-    color:  var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-accordion-header-text-color-active);
 }
 
 .p-accordion-toggle-icon {
@@ -42,12 +72,12 @@ export default {
 
 .p-accordion-content {
     padding: 0 1.125rem 1.125rem 1.125rem;
-    background:  var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-accordion-content-background);
-    color:  var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-accordion-content-text-color);
 }
 
 .p-accordion-tab {
-    border-bottom: 1px solid  var(--p-dark-surface-700, var(--p-surface-200));
+    border-bottom: 1px solid var(--p-accordion-content-border-color);
 }
 
 .p-accordion-tab:last-child {

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

@@ -1,4 +1,20 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.200}',
+                    borderColor: '{surface.0}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.700}',
+                    borderColor: '{surface.900}'
+                }
+            }
+        }
+    },
     css: `
 .p-avatar {
     display: inline-flex;
@@ -7,8 +23,8 @@ export default {
     width: 2rem;
     height: 2rem;
     font-size: 1rem;
-    background-color: var(--p-dark-surface-700, var(--p-surface-200));
+    background: var(--p-avatar-background);
-    border-radius: 6px;
+    border-radius: var(--p-rounded-base);
 }
 
 .p-avatar-image {
@@ -62,7 +78,7 @@ export default {
 }
 
 .p-avatar-group .p-avatar {
-    border: 2px solid var(--p-dark-surface-900, var(--p-surface-0));
+    border: 2px solid var(--p-avatar-border-color);
 }
     `
 };

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

@@ -1,8 +1,30 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    textColor: '{surface.700}'
+                },
+                subtitle: {
+                    textColor: '{surface.500}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    textColor: '{surface.0}'
+                },
+                subtitle: {
+                    textColor: '{surface.400}'
+                }
+            }
+        }
+    },
     css: `
 .p-card {
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-card-background);
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-card-text-color);
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
     border-radius: 12px;
     display: flex;
@@ -29,7 +51,7 @@ export default {
 
 .p-card-subtitle {
     font-weight: 400;
-    color: var(--p-dark-surface-400, var(--p-surface-500));
+    color: var(--p-card-subtitle-text-color);
 }
 `
 };

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

@@ -1,4 +1,26 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    borderColor: '{surface.200}'
+                },
+                content: {
+                    background: '{surface.0}',
+                    textColor: '{surface.700}'
+                }
+            },
+            dark: {
+                root: {
+                    borderColor: '{surface.700}'
+                },
+                content: {
+                    background: '{surface.900}',
+                    textColor: '{surface.0}'
+                }
+            }
+        }
+    },
     css: `
 .p-divider-horizontal {
     display: flex;
@@ -16,7 +38,7 @@ export default {
     left: 0;
     width: 100%;
     content: "";
-    border-top: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border-top: 1px solid var(--p-divider-border-color);
 }
 
 .p-divider-horizontal .p-divider-content {
@@ -40,7 +62,7 @@ export default {
     left: 50%;
     height: 100%;
     content: "";
-    border-left: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border-left: 1px solid var(--p-divider-border-color);
 }
 
 .p-divider.p-divider-vertical .p-divider-content {
@@ -49,7 +71,8 @@ export default {
 
 .p-divider-content {
     z-index: 1;
-    background: var(--p-dark-surface-900, var(--p-surface-0))
+    background: var(--p-divider-content-background);
+    color: var(--p-divider-content-text-color);
 }
 
 .p-divider-solid.p-divider-horizontal:before {

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

@@ -1,10 +1,46 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                legend: {
+                    backgroundHover: '{surface.100}',
+                    textColor: '{surface.700}',
+                    textColorHover: '{surface.800}'
+                },
+                toggleIcon: {
+                    color: '{surface.500}',
+                    colorHover: '{surface.600}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                legend: {
+                    backgroundHover: '{surface.800}',
+                    textColor: '{surface.0}',
+                    textColorHover: '{surface.0}'
+                },
+                toggleIcon: {
+                    color: '{surface.400}',
+                    colorHover: '{surface.300}'
+                }
+            }
+        }
+    },
     css: `
 .p-fieldset {
-    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border: 1px solid var(--p-fieldset-border-color);
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-fieldset-background);
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-fieldset-text-color);
-    border-radius: 6px;
+    border-radius: var(--p-rounded-base);
     padding: 0 1.125rem 1.125rem 1.125rem;
     margin: 0;
 }
@@ -32,8 +68,8 @@ export default {
     align-items: center;
     justify-content: center;
     padding: 0.5rem 0.75rem;
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-legend-text-color);
-    border-radius: 6px;
+    border-radius: var(--p-rounded-base);
     transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
     outline-color: transparent;
 }
@@ -44,17 +80,17 @@ export default {
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend > a:hover {
-    color: var(--p-dark-surface-0, var(--p-surface-800));
+    color: var(--p-fieldset-legend-text-color-hover);
-    background: var(--p-dark-surface-800, var(--p-surface-100));
+    background: var(--p-fieldset-legend-background-hover);
 }
 
 .p-fieldset-toggler {
-    color: var(--p-dark-surface-400, var(--p-surface-500));
+    color: var(--p-fieldset-toggle-icon-color);
     transition: color var(--p-transition-duration);
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggler {
-    color: var(--p-dark-surface-300, var(--p-surface-600));
+    color: var(--p-fieldset-toggle-icon-color-hover);
 }
 
 .p-fieldset .p-fieldset-content {

components/lib/theme/aura/index.js

@@ -13,6 +13,11 @@ import toolbar from 'primevue/theme/aura/toolbar';
 
 export default {
     primitive: {
+        rounded: {
+            sm: '4px',
+            base: '6px',
+            lg: '12px'
+        },
         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' },
@@ -46,11 +51,6 @@ export default {
             color: '{primary.500}',
             offset: '2px'
         },
-        borderRadius: {
-            sm: '4px',
-            base: '6px',
-            lg: '12px',
-        },
         anchorGutter: '2px',
         maskBackground: 'rgba(0,0,0,0.4)',
         primary: {
@@ -86,10 +86,6 @@ export default {
                     color: '{primary.500}',
                     inverseColor: '#ffffff'
                 },
-                text: {
-                    color: '{surface.700}',
-                    secondaryColor: '{surface.500}'
-                },
                 highlight: {
                     background: '{primary.50}',
                     textColor: '{primary.700}'
@@ -114,10 +110,6 @@ export default {
                     color: '{primary.400}',
                     inverseColor: '{surface.900}'
                 },
-                text: {
-                    color: '{surface.0}',
-                    secondaryColor: '{surface.400}'
-                },
                 highlight: {
                     background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
                     textColor: 'rgba(255,255,255,.87)'

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

@@ -3,9 +3,9 @@ export default {
         colorScheme: {
             light: {
                 root: {
-                    borderColor: '{surface.200}',
                     background: '{surface.0}',
-                    textColor: '{text.color}'
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
                 },
                 headerIcon: {
                     color: '{surface.500}',
@@ -15,9 +15,9 @@ export default {
             },
             dark: {
                 root: {
-                    borderColor: '{surface.700}',
                     background: '{surface.900}',
-                    textColor: '{text.color}'
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
                 },
                 headerIcon: {
                     color: '{surface.400}',
@@ -30,7 +30,7 @@ export default {
     css: `
 .p-panel {
     border: 1px solid var(--p-panel-border-color);
-    border-radius: var(--p-border-radius-base);
+    border-radius: var(--p-rounded-base);
     background: var(--p-panel-background);
     color: var(--p-panel-text-color);
 }

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

@@ -1,4 +1,18 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                bar: {
+                    background: '{surface.100}'
+                }
+            },
+            dark: {
+                bar: {
+                    background: '{surface.800}'
+                }
+            }
+        }
+    },
     css: `
 .p-scrollpanel-wrapper {
     overflow: hidden;
@@ -31,7 +45,7 @@ export default {
     opacity: 0;
     outline-color: transparent;
     transition: outline-color var(--p-transition-duration);
-    background: var(--p-dark-surface-800, var(--p-surface-100));
+    background: var(--p-scrollpanel-bar-background);
     border: 0 none;
     transition: outline-color var(--p-transition-duration), opacity var(--p-transition-duration);
 }

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

@@ -1,12 +1,36 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                gutter: {
+                    background: '{surface.200}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                },
+                gutter: {
+                    background: '{surface.700}'
+                }
+            }
+        }
+    },
     css: `
 .p-splitter {
     display: flex;
     flex-wrap: nowrap;
-    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border: 1px solid var(--p-splitter-border-color);
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-splitter-background);
-    border-radius: var(--p-border-radius);
+    border-radius: var(--p-rounded-base);
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-splitter-text-color);
 }
 
 .p-splitter-vertical {
@@ -20,11 +44,11 @@ export default {
     align-items: center;
     justify-content: center;
     z-index: 1;
-    background: var(--p-dark-surface-700, var(--p-surface-200));
+    background: var(--p-splitter-gutter-background);
 }
 
 .p-splitter-gutter-handle {
-    border-radius: var(--p-border-radius);
+    border-radius: var(--p-rounded-base);
     background: transparent;
     transition: outline-color var(--p-transition-duration);
     outline-color: transparent;

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

@@ -1,4 +1,50 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                nav: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}'
+                },
+                header: {
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.500}',
+                    textColorHover: '{surface.700}'
+                },
+                navigatorIcon: {
+                    background: '{surface.0}',
+                    color: '{surface.500}',
+                    colorHover: '{surface.700}',
+                    boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
+                },
+                content: {
+                    background: '{surface.0}',
+                    textColor: '{surface.700}'
+                }
+            },
+            dark: {
+                nav: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}'
+                },
+                header: {
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.400}',
+                    textColorHover: '{surface.0}'
+                },
+                navigatorIcon: {
+                    background: '{surface.900}',
+                    color: '{surface.400}',
+                    colorHover: '{surface.0}',
+                    boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)'
+                },
+                content: {
+                    background: '{surface.900}',
+                    textColor: '{surface.0}'
+                }
+            }
+        }
+    },
     css: `
 .p-tabview-nav-container {
     position: relative;
@@ -22,8 +68,8 @@ export default {
     padding: 0;
     list-style-type: none;
     flex: 1 1 auto;
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-tabview-nav-background);
-    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border: 1px solid var(--p-tabview-nav-border-color);
     border-width: 0 0 1px 0;
     position: relative;
 }
@@ -38,12 +84,12 @@ export default {
     overflow: hidden;
     border-style: solid;
     border-width: 0 0 1px 0;
-    border-color: transparent transparent var(--p-dark-surface-700, var(--p-surface-200)) transparent;
+    border-color: transparent transparent var(--p-tabview-header-border-color) transparent;
-    color: var(--p-dark-surface-400, var(--p-surface-500));
+    color: var(--p-tabview-header-text-color);
     padding: 1rem 1.125rem;
     font-weight: 600;
-    border-top-right-radius: var(--p-border-radius);
+    border-top-right-radius: var(--p-rounded-base);
-    border-top-left-radius: var(--p-border-radius);;
+    border-top-left-radius: var(--p-rounded-base);
     transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
     margin: 0 0 -1px 0;
     outline-color: transparent;
@@ -55,7 +101,7 @@ export default {
 }
 
 .p-tabview-header:not(.p-highlight):not(.p-disabled):hover >.p-tabview-nav-link {
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-tabview-header-text-color-hover);
 }
 
 .p-tabview-header.p-highlight > .p-tabview-nav-link {
@@ -80,13 +126,13 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-tabview-navigator-icon-background);
-    color: var(--p-dark-surface-400, var(--p-surface-500));
+    color: var(--p-tabview-navigator-icon-color);
     width: 2.5rem;
     border-radius: 0;
     outline-color: transparent;
     transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
-    box-shadow: 0px 0px 10px 50px color-mix(in srgb, var(--p-dark-surface-900, var(--p-surface-0)), transparent 50%);
+    box-shadow: var(--p-tabview-navigator-icon-box-shadow);
 }
 
 .p-tabview-nav-btn:focus-visible {
@@ -95,7 +141,7 @@ export default {
 }
 
 .p-tabview-nav-btn:hover {
-    color: var(--p-dark-surface-0, var(--p-surface-700))
+    color: var(--p-tabview-navigator-icon-color-hover);
 }
 
 .p-tabview-nav-prev {
@@ -111,9 +157,9 @@ export default {
 }
 
 .p-tabview-panels {
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-tabview-content-background);
+    color: var(--p-tabview-content-text-color);
     padding: 0.875rem 1.125rem 1.125rem 1.125rem;
-    color: var(--p-dark-surface-0, var(--p-surface-700))
 }
 
 .p-tabview-ink-bar {

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

@@ -1,4 +1,22 @@
 export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.0}'
+                }
+            }
+        }
+    },
     css: `
 .p-toolbar {
     display: flex;
@@ -6,10 +24,10 @@ export default {
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 0.75rem;
-    background: var(--p-dark-surface-900, var(--p-surface-0));
+    background: var(--p-toolbar-background);
-    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    border: 1px solid var(--p-toolbar-border-color);
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    color: var(--p-toolbar-text-color);
-    border-radius: var(--p-border-radius);
+    border-radius: var(--p-rounded-base);
     gap: 0.5rem;
 }