Refactored tokens of panel components

components/lib/accordion/style/AccordionStyle.js

@@ -4,7 +4,7 @@ const theme = ({ dt }) => `
 .p-accordionpanel {
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid ${dt('accordion.content.border.color')};
+    border-bottom: 1px solid ${dt('accordion.panel.border.color')};
 }
 
 .p-accordionpanel:last-child {

components/lib/fieldset/style/FieldsetStyle.js

@@ -11,6 +11,7 @@ const theme = ({ dt }) => `
 }
 
 .p-fieldset-legend {
+    background: ${dt('fieldset.legend.background')};
     font-weight: 600;
     border-radius: 6px;
     border: 0 none;

components/lib/stepper/style/StepperStyle.js

@@ -52,7 +52,7 @@ const theme = ({ dt }) => `
     text-overflow: ellipsis;
     max-width: 100%;
     margin-left: 0.5rem;
-    color: ${dt('stepper.title.color')};
+    color: ${dt('stepper.item.title.color')};
     font-weight: 500;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
@@ -62,10 +62,10 @@ const theme = ({ dt }) => `
     align-items: center;
     justify-content: center;
     position: relative;
-    color: ${dt('stepper.marker.color')};
-    border: 1px solid ${dt('stepper.marker.border.color')};
+    color: ${dt('stepper.item.number.color')};
+    border: 1px solid ${dt('stepper.item.number.border.color')};
     border-width: 2px;
-    background: ${dt('stepper.marker.background')};
+    background: ${dt('stepper.item.number.background')};
     min-width: 2rem;
     height: 2rem;
     line-height: 2rem;
@@ -88,12 +88,12 @@ const theme = ({ dt }) => `
 }
 
 .p-stepper-item-active .p-stepper-item-number {
-    background: ${dt('stepper.marker.active.background')};
-    color: ${dt('stepper.marker.active.color')};
+    background: ${dt('stepper.item.number.active.background')};
+    color: ${dt('stepper.item.number.active.color')};
 }
 
 .p-stepper-item-active .p-stepper-item-title {
-    color: ${dt('stepper.title.active.color')};
+    color: ${dt('stepper.item.title.active.color')};
 }
 
 .p-stepper-item:not(.p-disabled):focus-visible {
@@ -102,12 +102,12 @@ const theme = ({ dt }) => `
 }
 
 .p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator {
-    background: ${dt('stepper.connector.active.background')};
+    background: ${dt('stepper.separator.active.background')};
 }
 
 .p-stepper-separator {
     flex: 1 1 0;
-    background: ${dt('stepper.connector.background')};
+    background: ${dt('stepper.separator.background')};
     width: 100%;
     height: 2px;
     margin-inline-start: 1rem;
@@ -115,11 +115,14 @@ const theme = ({ dt }) => `
 }
 
 .p-stepper-panels {
-    background: ${dt('stepper.content.background')};
-    color: ${dt('stepper.content.color')};
     padding: 0.875rem 1.125rem 1.125rem 1.125rem;
 }
 
+.p-stepper-panel-content {
+    background: ${dt('stepper.panel.content.background')};
+    color: ${dt('stepper.panel.content.color')};
+}
+
 .p-stepper-vertical .p-stepper-list {
     flex-direction: column;
 }

components/lib/tablist/style/TabListStyle.js

@@ -10,8 +10,8 @@ const classes = {
     ],
     tabs: 'p-tablist-tab-list',
     inkbar: 'p-tablist-active-bar',
-    previousButton: 'p-tablist-prev-button',
-    nextButton: 'p-tablist-next-button'
+    previousButton: 'p-tablist-prev-button p-tablist-nav-button',
+    nextButton: 'p-tablist-next-button p-tablist-nav-button'
 };
 
 export default BaseStyle.extend({

components/lib/tabs/style/TabsStyle.js

@@ -29,13 +29,12 @@ const theme = ({ dt }) => `
 .p-tablist-tab-list {
     position: relative;
     display: flex;
-    background: ${dt('tabs.nav.background')};
-    border: 1px solid ${dt('tabs.nav.border.color')};
+    background: ${dt('tabs.tab.list.background')};
+    border: 1px solid ${dt('tabs.tab.list.border.color')};
     border-width: 0 0 1px 0;
 }
 
-.p-tablist-prev-button,
-.p-tablist-next-button {
+.p-tablist-nav-button {
     all: unset;
     position: absolute;
     top: 0;
@@ -44,23 +43,21 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     justify-content: center;
-    background: ${dt('tabs.navigator.icon.background')};
-    color: ${dt('tabs.navigator.icon.color')};
+    background: ${dt('tabs.nav.button.background')};
+    color: ${dt('tabs.nav.button.color')};
     width: 2.5rem;
     transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    box-shadow: ${dt('tabs.navigator.icon.box.shadow')};
+    box-shadow: ${dt('tabs.nav.button.box.shadow')};
     cursor: pointer;
 }
 
-.p-tablist-prev-button:focus-visible,
-.p-tablist-next-button:focus-visible {
+.p-tablist-nav-button:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-tablist-prev-button:hover,
-.p-tablist-next-button:hover {
-    color: ${dt('tabs.navigator.icon.hover.color')};
+.p-tablist-nav-button:hover {
+    color: ${dt('tabs.nav.button.hover.color')};
 }
 
 .p-tablist-prev-button {
@@ -75,8 +72,8 @@ const theme = ({ dt }) => `
     cursor: pointer;
     border-style: solid;
     border-width: 0 0 1px 0;
-    border-color: transparent transparent ${dt('tabs.header.border.color')} transparent;
-    color: ${dt('tabs.header.color')};
+    border-color: transparent transparent ${dt('tabs.tab.border.color')} transparent;
+    color: ${dt('tabs.tab.color')};
     background: ${dt('tabs.nav.background')};
     padding: 1rem 1.125rem;
     font-weight: 600;
@@ -95,16 +92,16 @@ const theme = ({ dt }) => `
 }
 
 .p-tab:not(.p-tab-active):not(.p-disabled):hover {
-    color: ${dt('tabs.header.hover.color')};
+    color: ${dt('tabs.tab.hover.color')};
 }
 
 .p-tab-active {
-    color: ${dt('tabs.header.active.color')};
+    color: ${dt('tabs.tab.active.color')};
 }
 
 .p-tabpanels {
-    background: ${dt('tabs.navigator.content.background')};
-    color: ${dt('tabs.navigator.content.color')};
+    background: ${dt('tabs.tab.panel.background')};
+    color: ${dt('tabs.tab.panel.color')};
     padding: 0.875rem 1.125rem 1.125rem 1.125rem;
 }
 
@@ -114,7 +111,7 @@ const theme = ({ dt }) => `
     position: absolute;
     bottom: -1px;
     height: 1px;
-    background-color: ${dt('tabs.header.active.border.color')};
+    background-color: ${dt('tabs.tab.active.border.color')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 `;

components/lib/tabview/style/TabViewStyle.js

@@ -27,8 +27,8 @@ const theme = ({ dt }) => `
     padding: 0;
     list-style-type: none;
     flex: 1 1 auto;
-    background: ${dt('tabview.nav.background')};
-    border: 1px solid ${dt('tabview.nav.border.color')};
+    background: ${dt('tabview.tab.list.background')};
+    border: 1px solid ${dt('tabview.tab.list.border.color')};
     border-width: 0 0 1px 0;
     position: relative;
 }
@@ -43,8 +43,8 @@ const theme = ({ dt }) => `
     overflow: hidden;
     border-style: solid;
     border-width: 0 0 1px 0;
-    border-color: transparent transparent ${dt('tabview.header.border.color')} transparent;
-    color: ${dt('tabview.header.color')};
+    border-color: transparent transparent ${dt('tabview.tab.border.color')} transparent;
+    color: ${dt('tabview.tab.color')};
     padding: 1rem 1.125rem;
     font-weight: 600;
     border-top-right-radius: ${dt('rounded.base')};
@@ -60,11 +60,11 @@ const theme = ({ dt }) => `
 }
 
 .p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header {
-    color: ${dt('tabview.header.hover.color')};
+    color: ${dt('tabview.tab.hover.color')};
 }
 
 .p-tabview-tablist-item.p-highlight > .p-tabview-tab-header {
-    color: ${dt('tabview.header.active.color')};
+    color: ${dt('tabview.tab.active.color')};
 }
 
 .p-tabview-tab-title {
@@ -83,13 +83,13 @@ const theme = ({ dt }) => `
     display: flex;
     align-items: center;
     justify-content: center;
-    background: ${dt('tabview.navigator.icon.background')};
-    color: ${dt('tabview.navigator.icon.color')};
+    background: ${dt('tabview.nav.button.background')};
+    color: ${dt('tabview.nav.button.color')};
     width: 2.5rem;
     border-radius: 0;
     outline-color: transparent;
     transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    box-shadow: ${dt('tabview.navigator.icon.box.shadow')};
+    box-shadow: ${dt('tabview.nav.button.box.shadow')};
     border: none;
     cursor: pointer;
     user-select: none;
@@ -103,7 +103,7 @@ const theme = ({ dt }) => `
 
 .p-tabview-next-button:hover,
 .p-tabview-prev-button:hover {
-    color: ${dt('tabview.navigator.icon.hover.color')};
+    color: ${dt('tabview.nav.button.hover.color')};
 }
 
 .p-tabview-prev-button {
@@ -115,8 +115,8 @@ const theme = ({ dt }) => `
 }
 
 .p-tabview-panels {
-    background: ${dt('tabview.navigator.content.background')};
-    color: ${dt('tabview.navigator.content.color')};
+    background: ${dt('tabview.tab.panel.background')};
+    color: ${dt('tabview.tab.panel.color')};
     padding: 0.875rem 1.125rem 1.125rem 1.125rem;
 }
 
@@ -126,7 +126,7 @@ const theme = ({ dt }) => `
     position: absolute;
     bottom: -1px;
     height: 1px;
-    background-color: ${dt('tabview.header.active.border.color')};
+    background-color: ${dt('tabview.tab.active.border.color')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 `;

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

@@ -1,30 +1,15 @@
 export default {
-    colorScheme: {
-        light: {
-            header: {
-                background: '{surface.0}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                activeColor: '{surface.700}'
-            },
-            content: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            }
-        },
-        dark: {
-            header: {
-                background: '{surface.900}',
-                color: '{surface.400}',
-                hoverColor: '{surface.0}',
-                activeColor: '{surface.0}'
-            },
-            content: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            }
-        }
+    panel: {
+        borderColor: '{content.border.color}'
+    },
+    header: {
+        background: '{content.background}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}',
+        activeColor: '{text.color}'
+    },
+    content: {
+        background: '{content.background}',
+        color: '{text.color}'
     }
 };

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

@@ -1,22 +1,9 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                color: '{surface.700}'
-            },
-            subtitle: {
-                color: '{surface.500}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                color: '{surface.0}'
-            },
-            subtitle: {
-                color: '{surface.400}'
-            }
-        }
+    root: {
+        background: '{content.background}',
+        color: '{text.color}'
+    },
+    subtitle: {
+        color: '{text.muted.color}'
     }
 };

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

@@ -1,22 +1,9 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                borderColor: '{surface.200}'
-            },
-            content: {
-                background: '{surface.0}',
-                color: '{surface.700}'
-            }
-        },
-        dark: {
-            root: {
-                borderColor: '{surface.700}'
-            },
-            content: {
-                background: '{surface.900}',
-                color: '{surface.0}'
-            }
-        }
+    root: {
+        borderColor: '{content.border.color}'
+    },
+    content: {
+        background: '{content.background}',
+        color: '{text.color}'
     }
 };

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

@@ -1,36 +1,17 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            legend: {
-                color: '{surface.700}',
-                hoverBackground: '{surface.100}',
-                hoverColor: '{surface.800}'
-            },
-            toggleIcon: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            legend: {
-                color: '{surface.0}',
-                hoverBackground: '{surface.800}',
-                hoverColor: '{surface.0}'
-            },
-            toggleIcon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}'
-            }
-        }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    legend: {
+        background: '{content.background}',
+        color: '{content.color}',
+        hoverBackground: '{content.hover.background}',
+        hoverColor: '{content.hover.color}'
+    },
+    toggleIcon: {
+        color: '{text.muted.color}',
+        hoverColor: '{text.hover.muted.color}'
     }
 };

components/lib/themes/aura/index.js

@@ -182,6 +182,19 @@ export default {
                     floatLabelFocusColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                },
+                text: {
+                    color: '{surface.700}',
+                    hoverColor: '{surface.800}',
+                    mutedColor: '{surface.500}',
+                    hoverMutedColor: '{surface.600}'
+                },
+                content: {
+                    background: '{surface.0}',
+                    hoverBackground: '{surface.100}',
+                    borderColor: '{surface.200}',
+                    color: '{text.color}',
+                    hoverColor: '{text.hover.color}'
                 }
             },
             dark: {
@@ -228,6 +241,19 @@ export default {
                     floatLabelFocusColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                },
+                text: {
+                    color: '{surface.0}',
+                    hoverColor: '{surface.0}',
+                    mutedColor: '{surface.400}',
+                    hoverMutedColor: '{surface.300}'
+                },
+                content: {
+                    background: '{surface.900}',
+                    hoverBackground: '{surface.800}',
+                    borderColor: '{surface.700}',
+                    color: '{text.color}',
+                    hoverColor: '{text.hover.color}'
                 }
             }
         }

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

@@ -1,28 +1,7 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            headerIcon: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}',
-                hoverBackground: '{surface.100}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            headerIcon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
-            }
-        }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{text.color}'
     }
 };

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

@@ -1,24 +1,10 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            gutter: {
-                background: '{surface.200}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            gutter: {
-                background: '{surface.700}'
-            }
-        }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
+    },
+    gutter: {
+        background: '{content.border.color}'
     }
 };

components/lib/themes/aura/stepper/index.js

@@ -1,46 +1,21 @@
 export default {
-    colorScheme: {
-        light: {
-            connector: {
-                background: '{surface.200}',
-                activeBackground: '{primary.color}'
-            },
-            title: {
-                color: '{surface.700}',
-                activeColor: '{primary.color}'
-            },
-            marker: {
-                background: '{surface.0}',
-                activeBackground: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.500}',
-                activeColor: '{primary.color}'
-            },
-            content: {
-                background: '{surface.0}',
-                color: '{surface.700}'
-            }
-        },
-        dark: {
-            connector: {
-                background: '{surface.700}',
-                activeBackground: '{primary.color}'
-            },
-            title: {
-                color: '{surface.0}',
-                activeColor: '{primary.color}'
-            },
-            marker: {
-                background: '{surface.900}',
-                activeBackground: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.400}',
-                activeColor: '{primary.color}'
-            },
-            content: {
-                background: '{surface.900}',
-                color: '{surface.0}'
-            }
-        }
+    separator: {
+        background: '{content.border.color}',
+        activeBackground: '{primary.color}'
+    },
+    itemTitle: {
+        color: '{text.color}',
+        activeColor: '{primary.color}'
+    },
+    itemNumber: {
+        background: '{content.background}',
+        activeBackground: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{text.muted.color}',
+        activeColor: '{primary.color}'
+    },
+    panelContent: {
+        background: '{content.background}',
+        color: '{content.color}'
     }
 };

components/lib/themes/aura/tabs/index.js

@@ -1,49 +1,33 @@
 export default {
+    tabList: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}'
+    },
+    tab: {
+        borderColor: '{content.border.color}',
+        activeBorderColor: '{primary.color}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}',
+        activeColor: '{primary.color}'
+    },
+    tabPanel: {
+        background: '{content.background}',
+        color: '{content.color}'
+    },
+    navButton: {
+        background: '{content.background}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}'
+    },
     colorScheme: {
         light: {
-            nav: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}'
-            },
-            header: {
-                borderColor: '{surface.200}',
-                activeBorderColor: '{primary.color}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                activeColor: '{primary.color}'
-            },
-            navigatorIcon: {
-                background: '{surface.0}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
+            navButton: {
                 boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
-            },
-            content: {
-                background: '{surface.0}',
-                color: '{surface.700}'
             }
         },
         dark: {
-            nav: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}'
-            },
-            header: {
-                borderColor: '{surface.700}',
-                activeBorderColor: '{primary.color}',
-                color: '{surface.400}',
-                hoverColor: '{surface.0}',
-                activeColor: '{primary.color}'
-            },
-            navigatorIcon: {
-                background: '{surface.900}',
-                color: '{surface.400}',
-                hoverColor: '{surface.0}',
-                boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)'
-            },
-            content: {
-                background: '{surface.900}',
-                color: '{surface.0}'
+            navButton: {
+                boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
             }
         }
     }

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

@@ -1,49 +1,33 @@
 export default {
+    tabList: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}'
+    },
+    tab: {
+        borderColor: '{content.border.color}',
+        activeBorderColor: '{primary.color}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}',
+        activeColor: '{primary.color}'
+    },
+    tabPanel: {
+        background: '{content.background}',
+        color: '{content.color}'
+    },
+    navButton: {
+        background: '{content.background}',
+        color: '{text.muted.color}',
+        hoverColor: '{text.color}'
+    },
     colorScheme: {
         light: {
-            nav: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}'
-            },
-            header: {
-                borderColor: '{surface.200}',
-                activeBorderColor: '{primary.color}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
-                activeColor: '{primary.color}'
-            },
-            navigatorIcon: {
-                background: '{surface.0}',
-                color: '{surface.500}',
-                hoverColor: '{surface.700}',
+            navButton: {
                 boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
-            },
-            content: {
-                background: '{surface.0}',
-                color: '{surface.700}'
             }
         },
         dark: {
-            nav: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}'
-            },
-            header: {
-                borderColor: '{surface.700}',
-                activeBorderColor: '{primary.color}',
-                color: '{surface.400}',
-                hoverColor: '{surface.0}',
-                activeColor: '{primary.color}'
-            },
-            navigatorIcon: {
-                background: '{surface.900}',
-                color: '{surface.400}',
-                hoverColor: '{surface.0}',
-                boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)'
-            },
-            content: {
-                background: '{surface.900}',
-                color: '{surface.0}'
+            navButton: {
+                boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
             }
         }
     }

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

@@ -1,18 +1,7 @@
 export default {
-    colorScheme: {
-        light: {
-            root: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            }
-        }
+    root: {
+        background: '{content.background}',
+        borderColor: '{content.border.color}',
+        color: '{content.color}'
     }
 };