Tokens for Fieldset

components/lib/fieldset/Fieldset.d.ts

@@ -82,6 +82,10 @@ export interface FieldsetPassThroughOptions {
      * Used to pass attributes to the toggle icon's DOM element.
      */
     toggleIcon?: FieldsetPassThroughOptionType;
+    /**
+     * Used to pass attributes to the legend label's DOM element.
+     */
+    toggleButton?: FieldsetPassThroughOptionType;
     /**
      * Used to pass attributes to the legend label's DOM element.
      */

components/lib/fieldset/Fieldset.vue

@@ -11,9 +11,10 @@
                     :aria-controls="id + '_content'"
                     :aria-expanded="!d_collapsed"
                     :aria-label="buttonAriaLabel"
+                    :class="cx('toggleButton')"
                     @click="toggle"
                     @keydown="onKeyDown"
-                    v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
+                    v-bind="{ ...toggleButtonProps, ...ptm('toggleButton') }"
                 >
                     <!--TODO: togglericon deprecated since v4.0-->
                     <slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">

components/lib/fieldset/style/FieldsetStyle.js

@@ -4,53 +4,55 @@ const theme = ({ dt }) => `
 .p-fieldset {
     background: ${dt('fieldset.background')};
     border: 1px solid ${dt('fieldset.border.color')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('fieldset.border.radius')};
     color: ${dt('fieldset.color')};
-    padding: 0 1.125rem 1.125rem 1.125rem;
+    padding:  ${dt('fieldset.padding')};
     margin: 0;
 }
 
 .p-fieldset-legend {
     background: ${dt('fieldset.legend.background')};
-    border-radius: 6px;
+    border-radius: ${dt('fieldset.legend.border.radius')};
-    border: 0 none;
+    border-width: ${dt('fieldset.legend.border.width')};
-    padding: 0.5rem 0.75rem;
+    border-style: solid;
-    margin-bottom: 0.375rem;
+    border-color: ${dt('fieldset.legend.border.color')};
+    padding: ${dt('fieldset.legend.padding')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
 }
 
 .p-fieldset-toggleable > .p-fieldset-legend {
     padding: 0;
 }
 
-.p-fieldset-toggleable > .p-fieldset-legend > button {
+.p-fieldset-toggle-button {
     cursor: pointer;
     user-select: none;
     overflow: hidden;
     position: relative;
     text-decoration: none;
     display: flex;
-    gap: 0.5rem;
+    gap: ${dt('fieldset.legend.gap')};
     align-items: center;
     justify-content: center;
-    padding: 0.5rem 0.75rem;
+    padding: ${dt('fieldset.legend.padding')};
     background: transparent;
-    color: ${dt('fieldset.legend.color')};
     border: 0 none;
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('fieldset.legend.border.radius')};
-    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
 }
 
 .p-fieldset-legend-label {
-    font-weight: 600;
+    font-weight: ${dt('fieldset.legend.font.weight')};
 }
 
-.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
+.p-fieldset-toggle-button:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    box-shadow: ${dt('fieldset.legend.focus.ring.shadow')};
-    outline-offset: ${dt('focus.ring.offset')};
+    outline: ${dt('fieldset.legend.focus.ring.width')} ${dt('fieldset.legend.focus.ring.style')} ${dt('fieldset.legend.focus.ring.color')};
+    outline-offset: ${dt('fieldset.legend.focus.ring.offset')};
 }
 
-.p-fieldset-toggleable > .p-fieldset-legend > a:hover {
+.p-fieldset-toggleable > .p-fieldset-legend:hover {
     color: ${dt('fieldset.legend.hover.color')};
     background: ${dt('fieldset.legend.hover.background')};
 }
@@ -60,12 +62,12 @@ const theme = ({ dt }) => `
     transition: color ${dt('transition.duration')};
 }
 
-.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggle-icon {
+.p-fieldset-toggleable > .p-fieldset-legend:hover .p-fieldset-toggle-icon {
     color: ${dt('fieldset.toggle.icon.hover.color')};
 }
 
 .p-fieldset .p-fieldset-content {
-    padding: 0;
+    padding: ${dt('fieldset.content.padding')};
 }
 `;
 
@@ -78,6 +80,7 @@ const classes = {
     ],
     legend: 'p-fieldset-legend',
     legendLabel: 'p-fieldset-legend-label',
+    toggleButton: 'p-fieldset-toggle-button',
     toggleIcon: 'p-fieldset-toggle-icon',
     contentContainer: 'p-fieldset-content-container',
     content: 'p-fieldset-content'

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

@@ -2,16 +2,34 @@ export default {
     root: {
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderRadius: '{content.border.radius}',
+        color: '{content.color}',
+        padding: '0 1.125rem 1.125rem 1.125rem'
     },
     legend: {
         background: '{content.background}',
-        color: '{content.color}',
         hoverBackground: '{content.hover.background}',
-        hoverColor: '{content.hover.color}'
+        color: '{content.color}',
+        hoverColor: '{content.hover.color}',
+        borderRadius: '{content.border.radius}',
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        padding: '0.5rem 0.75rem',
+        gap: '0.5rem',
+        fontWeight: '700',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     toggleIcon: {
         color: '{text.muted.color}',
         hoverColor: '{text.hover.muted.color}'
+    },
+    content: {
+        padding: '0'
     }
 };

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

@@ -2,16 +2,48 @@ export default {
     root: {
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderRadius: '{content.border.radius}',
+        color: '{content.color}',
+        padding: '0.75rem 1.125rem 1.125rem '
     },
     legend: {
-        background: '{content.background}',
+        borderRadius: '{content.border.radius}',
-        color: '{content.color}',
+        borderWidth: '1px',
-        hoverBackground: '{content.hover.background}',
+        borderColor: '{content.border.color}',
-        hoverColor: '{content.hover.color}'
+        padding: '0.5rem 0.75rem',
+        gap: '0.5rem',
+        fontWeight: '700',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
     },
     toggleIcon: {
         color: '{text.muted.color}',
         hoverColor: '{text.hover.muted.color}'
+    },
+    content: {
+        padding: '0'
+    },
+    colorScheme: {
+        light: {
+            legend: {
+                background: '{surface.100}',
+                hoverBackground: '{surface.200}',
+                color: '{text.color}',
+                hoverColor: '{text.hover.color}'
+            }
+        },
+        dark: {
+            legend: {
+                background: '{surface.800}',
+                hoverBackground: '{surface.700}',
+                color: '{text.color}',
+                hoverColor: '{text.hover.color}'
+            }
+        }
     }
 };