@wavemaker/foundation-css 11.14.1-rc.6311 → 11.14.2-1.6423

package/src/tokens/web/components/switch/switch.json

@@ -36,7 +36,8 @@
             "value": "40px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls how tall switch buttons appear (segmented control buttons that allow users to toggle between different options). This determines the vertical size of each switch button.<br>CSS variable: --wm-switch-btn-height"
             }
           }
         },
@@ -44,7 +45,8 @@
           "value": "{space.1.value} {space.4.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the internal spacing inside switch buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-switch-btn-padding"
           }
         },
         "border": {
@@ -52,14 +54,16 @@
             "value": "{border.width.base.value}",
             "type": "space",
             "attributes": {
-              "subtype": "border-width"
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around switch buttons. This creates the outline that defines the button shape and makes it visible to users.<br>CSS variable: --wm-switch-btn-border-width"
             }
           },
           "style": {
             "value": "{border.style.base.value}",
             "type": "radius",
             "attributes": {
-              "subtype": "border-style"
+              "subtype": "border-style",
+              "description": "Controls the style of the border around switch buttons. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-switch-btn-border-style"
             }
           },
           "color": {
@@ -67,7 +71,8 @@
               "value": "{color.outline.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the color of the border around switch buttons. This determines the color of the outline that defines the button shape in its default/unselected state.<br>CSS variable: --wm-switch-btn-border-color"
               }
             }
           }
@@ -76,7 +81,8 @@
           "value": "{radius.pill.value}",
           "type": "radius",
           "attributes": {
-            "subtype": "radius"
+            "subtype": "radius",
+            "description": "Controls the corner rounding of switch buttons. When set to 'pill', the buttons appear with fully rounded ends, creating a pill-shaped appearance.<br>CSS variable: --wm-switch-btn-radius"
           }
         },
         "icon": {
@@ -84,7 +90,8 @@
             "value": "{icon.size.sm.value}",
             "type": "space",
             "attributes": {
-              "subtype": "icon-size"
+              "subtype": "icon-size",
+              "description": "Controls how large icons appear in switch buttons (symbols that represent different switch options). This affects the size of any icons used within the switch buttons.<br>CSS variable: --wm-switch-btn-icon-size"
             }
           }
         },
@@ -93,7 +100,8 @@
             "value": "none",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the background color of switch buttons. When set to 'none', the buttons have no background color, making them transparent.<br>CSS variable: --wm-switch-btn-background"
             }
           }
         },
@@ -102,7 +110,8 @@
             "value": "{color.on-surface.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the text color of switch buttons (the color of text content within the buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-switch-btn-color"
             }
           }
         },
@@ -110,7 +119,8 @@
           "value": "none",
           "type": "radius",
           "attributes": {
-            "subtype": "text-decoration"
+            "subtype": "text-decoration",
+            "description": "Controls the text decoration of switch buttons. 'none' removes any decorative lines, 'underline' adds a line under the text, 'overline' adds a line above the text, 'line-through' adds a line through the middle of the text.<br>CSS variable: --wm-switch-btn-text-decoration"
           }
         },
         "state": {
@@ -120,7 +130,8 @@
                 "value": "{color.on-surface.@.value}",
                 "type": "color",
                 "attributes": {
-                  "subtype": "color"
+                  "subtype": "color",
+                  "description": "Sets the color of the state layer that appears when users hover, focus, or interact with switch buttons. This creates visual feedback to show that the button is interactive and responsive to user actions.<br>CSS variable: --wm-switch-btn-state-layer-color"
                 }
               }
             },
@@ -128,7 +139,8 @@
               "value": "0",
               "type": "radius",
               "attributes": {
-                "subtype": "radius"
+                "subtype": "radius",
+                "description": "Controls the transparency of the state layer that appears during user interactions (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-switch-btn-state-layer-opacity"
               }
             }
           }
@@ -225,5 +237,5 @@
         }
       }
     }
-    }
+  }
 }

package/src/tokens/web/components/tabs/Token.Readme.md

@@ -0,0 +1,32 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| background | Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background |
+| nav.border.width | Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width |
+| nav.border.style | Controls the style of the border around tab navigation (the section containing the tab headers). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-nav-border-style |
+| nav.border.color | Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color |
+| item.heading.height | Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height |
+| item.heading.padding | Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding |
+| item.heading.font-size | Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size |
+| item.heading.font-weight | Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight |
+| item.heading.font-family | Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family |
+| item.heading.line-height | Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height |
+| item.heading.letter-spacing | Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing |
+| item.heading.color.@ | Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color |
+| item.heading.border.width | Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width |
+| item.heading.border.style | Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style |
+| item.heading.border.color | Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color |
+| item.heading.state.layer.color | Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color |
+| item.heading.state.layer.opacity | Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity |
+| item.heading.indicator.height | Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height |
+| item.heading.indicator.width | Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width |
+| item.heading.indicator.radius | Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius |
+| item.heading.indicator.background | Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background |
+| content.background | Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background |
+| body.padding | Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding |
+| body.height | Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height |

package/src/tokens/web/components/tabs/tabs.json

@@ -29,7 +29,8 @@
         "value": "{color.surface.@.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the background color of tabs components (navigation interfaces that allow users to switch between different content sections). This is the main background color that appears behind the tab navigation and content.<br>CSS variable: --wm-tabs-background"
         }
       },
       "nav": {
@@ -38,21 +39,24 @@
             "value": "{border.width.base.value}",
             "type": "space",
             "attributes": {
-              "subtype": "border-width"
+              "subtype": "border-width",
+              "description": "Controls the thickness of the border around tab navigation (the section containing the tab headers). This creates the outline that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-width"
             }
           },
           "style": {
             "value": "{border.style.base.value}",
             "type": "radius",
             "attributes": {
-              "subtype": "border-style"
+              "subtype": "border-style",
+              "description": "Controls the style of the border around tab navigation (the section containing the tab headers). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-tabs-nav-border-style"
             }
           },
           "color": {
             "value": "{color.surface.container.highest.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the color of the border around tab navigation (the section containing the tab headers). This determines the color of the line that separates the tab headers from the content area.<br>CSS variable: --wm-tabs-nav-border-color"
             }
           }
         }
@@ -63,49 +67,56 @@
             "value": "48px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls how tall tab item headings appear (the clickable tab labels that users click to switch between different content sections). This determines the vertical size of each tab header.<br>CSS variable: --wm-tabs-item-heading-height"
             }
           },
           "padding": {
             "value": "{space.2.value} {space.6.value}",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the internal spacing inside tab item headings (the clickable tab labels that users click to switch between different content sections). This creates breathing room around the tab text and icons.<br>CSS variable: --wm-tabs-item-heading-padding"
             }
           },
           "font-size": {
             "value": "{h6.font-size.value}",
             "type": "font",
             "attributes": {
-              "subtype": "font-size"
+              "subtype": "font-size",
+              "description": "Controls how large the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). This affects the size of the tab text that users see.<br>CSS variable: --wm-tabs-item-heading-font-size"
             }
           },
           "font-weight": {
             "value": "{h6.font-weight.value}",
             "type": "font",
             "attributes": {
-              "subtype": "font-weight"
+              "subtype": "font-weight",
+              "description": "Controls how thick or bold the text appears in tab item headings (the clickable tab labels that users click to switch between different content sections). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-tabs-item-heading-font-weight"
             }
           },
           "font-family": {
             "value": "{h6.font-family.value}",
             "type": "font",
             "attributes": {
-              "subtype": "font-family"
+              "subtype": "font-family",
+              "description": "Sets the typeface (font style) for tab item headings (the clickable tab labels that users click to switch between different content sections). This determines whether the tab text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-tabs-item-heading-font-family"
             }
           },
           "line-height": {
             "value": "{h6.line-height.value}",
             "type": "font",
             "attributes": {
-              "subtype": "line-height"
+              "subtype": "line-height",
+              "description": "Controls the vertical spacing between lines when tab item headings wrap to multiple lines. This ensures proper spacing for the tab text displayed in the tab headers.<br>CSS variable: --wm-tabs-item-heading-line-height"
             }
           },
           "letter-spacing": {
             "value": "{h6.letter-spacing.value}",
             "type": "font",
             "attributes": {
-              "subtype": "letter-spacing"
+              "subtype": "letter-spacing",
+              "description": "Controls the horizontal spacing between individual characters in tab item headings (the clickable tab labels that users click to switch between different content sections). This can help make the tab text more readable and properly spaced.<br>CSS variable: --wm-tabs-item-heading-letter-spacing"
             }
           },
           "color": {
@@ -113,7 +124,8 @@
               "value": "{color.on-surface.variant.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the text color of tab item headings (the clickable tab labels that users click to switch between different content sections). This determines what color the tab text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-tabs-item-heading-color"
               }
             }
           },
@@ -122,21 +134,24 @@
               "value": "0px",
               "type": "space",
               "attributes": {
-                "subtype": "border-width"
+                "subtype": "border-width",
+                "description": "Controls the border width of tab item headings. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-border-width"
               }
             },
             "style": {
               "value": "{border.style.base.value}",
               "type": "radius",
               "attributes": {
-                "subtype": "border-style"
+                "subtype": "border-style",
+                "description": "Controls the border style of tab item headings. Acceptable values: solid, dashed, dotted, none.<br>CSS variable: --wm-tabs-item-heading-border-style"
               }
             },
             "color": {
               "value": "{color.border.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the border color of tab item headings.<br>CSS variable: --wm-tabs-item-heading-border-color"
               }
             }
           },
@@ -146,14 +161,16 @@
                 "value": "{color.primary.@.value}",
                 "type": "color",
                 "attributes": {
-                  "subtype": "color"
+                  "subtype": "color",
+                  "description": "Sets the color of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-color"
                 }
               },
               "opacity": {
                 "value": "0",
                 "type": "radius",
                 "attributes": {
-                  "subtype": "radius"
+                  "subtype": "radius",
+                  "description": "Controls the opacity of tab item heading state layers.<br>CSS variable: --wm-tabs-item-heading-state-layer-opacity"
                 }
               }
             }
@@ -163,28 +180,32 @@
               "value": "3px",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Controls the height of tab item heading indicators. Acceptable units: px, em, rem.<br>CSS variable: --wm-tabs-item-heading-indicator-height"
               }
             },
             "width": {
               "value": "~\"calc(100% - {space.12.value})\"",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Controls the width of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-width"
               }
             },
             "radius": {
               "value": "{radius.md.value} {radius.md.value} {radius.none.value} {radius.none.value}",
               "type": "radius",
               "attributes": {
-                "subtype": "radius"
+                "subtype": "radius",
+                "description": "Controls the border radius of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-radius"
               }
             },
             "background": {
               "value": "{color.transparent.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the background color of tab item heading indicators.<br>CSS variable: --wm-tabs-item-heading-indicator-background"
               }
             }
           }
@@ -195,7 +216,8 @@
           "value": "inherit",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the background color of tab content.<br>CSS variable: --wm-tabs-content-background"
           }
         }
       },
@@ -204,14 +226,16 @@
           "value": "{space.4.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls padding of tab body content.<br>CSS variable: --wm-tabs-body-padding"
           }
         },
         "height": {
           "value": "100px",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the height of tab body content. Acceptable units: px, em, rem, vh.<br>CSS variable: --wm-tabs-body-height"
           }
         }
       },
@@ -269,4 +293,4 @@
     },
     "appearances": {}
   }
-}
+}

package/src/tokens/web/components/tile/Token.Readme.md

@@ -0,0 +1,13 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| padding | Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding |
+| background | Sets the background color of tile components (rectangular content blocks that hold information). This is the main background color that appears behind the tile content.<br>CSS variable: --wm-tile-background |
+| color | Sets the text color of tile components (the color of text content within rectangular content blocks). This should contrast well with the background color for readability.<br>CSS variable: --wm-tile-color |
+| radius | Controls the corner rounding of tile components (rectangular content blocks). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-radius |
+| shadow | Controls the drop shadow effect around tile components (rectangular content blocks). This creates a subtle shadow that makes the tiles appear to float above the background, giving them depth and elevation.<br>CSS variable: --wm-tile-shadow |

package/src/tokens/web/components/tile/tile.json

@@ -129,35 +129,40 @@
         "value": "{space.4.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the internal spacing inside tile components (rectangular content blocks that hold information). This creates breathing room around the tile content.<br>CSS variable: --wm-tile-padding"
         }
       },
       "background": {
         "value": "{color.surface.@.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the background color of tile components (rectangular content blocks that hold information). This is the main background color that appears behind the tile content.<br>CSS variable: --wm-tile-background"
         }
       },
       "color": {
         "value": "{color.on-surface.@.value}",
         "type": "color",
         "attributes": {
-          "subtype": "color"
+          "subtype": "color",
+          "description": "Sets the text color of tile components (the color of text content within rectangular content blocks). This should contrast well with the background color for readability.<br>CSS variable: --wm-tile-color"
         }
       },
       "radius": {
         "value": "{radius.sm.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "radius"
+          "subtype": "radius",
+          "description": "Controls the corner rounding of tile components (rectangular content blocks). This makes the tiles appear with rounded corners instead of sharp edges for a softer appearance.<br>CSS variable: --wm-tile-radius"
         }
       },
       "shadow": {
         "value": "{elevation.shadow.1.value}",
         "type": "radius",
         "attributes": {
-          "subtype": "elevation"
+          "subtype": "elevation",
+          "description": "Controls the drop shadow effect around tile components (rectangular content blocks). This creates a subtle shadow that makes the tiles appear to float above the background, giving them depth and elevation.<br>CSS variable: --wm-tile-shadow"
         }
       }
     },

package/src/tokens/web/components/time/Token.Readme.md

@@ -0,0 +1,37 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| input.font-family | Sets the typeface (font style) for time picker input fields (where users enter hours, minutes, and seconds). This determines whether the time values appear in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-timepicker-input-font-family |
+| input.font-size | Controls how large the time values appear in time picker input fields (where users enter hours, minutes, and seconds). This affects the size of the time numbers that users see and interact with.<br>CSS variable: --wm-timepicker-input-font-size |
+| input.font-weight | Controls how thick or bold the time values appear in time picker input fields. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-timepicker-input-font-weight |
+| input.line-height | Controls the vertical spacing between lines when time picker input text wraps to multiple lines. This ensures proper spacing for time values displayed in the input fields.<br>CSS variable: --wm-timepicker-input-line-height |
+| input.letter-spacing | Controls the horizontal spacing between individual characters in time picker input fields. This can help make time values more readable and properly spaced.<br>CSS variable: --wm-timepicker-input-letter-spacing |
+| input.width | Controls how wide time picker input fields appear (the boxes where users enter hours, minutes, and seconds). This determines the horizontal space available for time values.<br>CSS variable: --wm-timepicker-input-width |
+| input.padding | Controls the internal spacing inside time picker input fields (the space between the time values and the field borders). This creates breathing room around the time numbers.<br>CSS variable: --wm-timepicker-input-padding |
+| input.border.width | Controls the thickness of the border around time picker input fields. This creates a bottom border to separate the time input from other elements.<br>CSS variable: --wm-timepicker-input-border-width |
+| input.border.style | Controls the style of the border around time picker input fields. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-timepicker-input-border-style |
+| input.border.color | Sets the color of the border around time picker input fields. This determines the color of the outline that defines the time input area.<br>CSS variable: --wm-timepicker-input-border-color |
+| input.border.radius | Controls the corner rounding of time picker input fields. When set to 'none', the fields have sharp corners. Higher values create more rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-input-border-radius |
+| background | Sets the background color of time picker components (the dropdown panel that appears when users click to select time). This is the main background color that appears behind the time selection interface.<br>CSS variable: --wm-timepicker-background |
+| border.radius | Controls the corner rounding of time picker components (the dropdown panel that appears when users click to select time). This makes the time picker appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-border-radius |
+| padding | Controls the internal spacing inside time picker components (the space between the time selection interface and the panel borders). This creates breathing room around the time selection controls.<br>CSS variable: --wm-timepicker-padding |
+| period.selector.border.@ | Controls the border styling of time picker period selectors (AM/PM buttons that users click to choose morning or afternoon time). This creates the outline that defines the period selector buttons.<br>CSS variable: --wm-timepicker-period-selector-border |
+| period.selector.border.radius | Controls the corner rounding of time picker period selectors (AM/PM buttons). This makes the period selector buttons appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-period-selector-border-radius |
+| period.selector.background | Sets the background color of time picker period selectors (AM/PM buttons that users click to choose morning or afternoon time). This is the main background color that appears behind the period selector buttons.<br>CSS variable: --wm-timepicker-period-selector-background |
+| period.selector.color | Sets the text color of time picker period selectors (the AM/PM text that appears on the period selector buttons). This should contrast well with the background for readability.<br>CSS variable: --wm-timepicker-period-selector-color |
+| period.selector.font-family | Sets the typeface (font style) for time picker period selectors (the AM/PM text). This determines whether the period text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-timepicker-period-selector-font-family |
+| period.selector.font-size | Controls how large the period selector text appears (the AM/PM text). This affects the size of the period text that users see and interact with.<br>CSS variable: --wm-timepicker-period-selector-font-size |
+| period.selector.font-weight | Controls how thick or bold the period selector text appears (the AM/PM text). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-timepicker-period-selector-font-weight |
+| period.selector.line-height | Controls the vertical spacing between lines when period selector text wraps to multiple lines. This ensures proper spacing for the AM/PM text displayed on the buttons.<br>CSS variable: --wm-timepicker-period-selector-line-height |
+| period.selector.letter-spacing | Controls the horizontal spacing between individual characters in period selector text (the AM/PM text). This can help make the period text more readable and properly spaced.<br>CSS variable: --wm-timepicker-period-selector-letter-spacing |
+| btn.padding | Controls the internal spacing inside time picker buttons (the space between the button content and its border). This creates breathing room around the button text and icons.<br>CSS variable: --wm-timepicker-btn-padding |
+| btn.border.radius | Controls the corner rounding of time picker buttons (navigation and control buttons in the time picker interface). This makes the buttons appear with rounded corners for a softer appearance.<br>CSS variable: --wm-timepicker-btn-border-radius |
+| btn.border.color | Sets the color of the border around time picker buttons. This determines the color of the outline that defines the button shape.<br>CSS variable: --wm-timepicker-btn-border-color |
+| btn.border.style | Controls the style of the border around time picker buttons. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots, 'none' removes the border.<br>CSS variable: --wm-timepicker-btn-border-style |
+| btn.border.width | Controls the thickness of the border around time picker buttons. When set to 0, there's no visible border. Higher values create thicker borders around the buttons.<br>CSS variable: --wm-timepicker-btn-border-width |
+| btn.background | Sets the background color of time picker buttons. When set to 'transparent', the buttons have no background color, making them transparent.<br>CSS variable: --wm-timepicker-btn-background |