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

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

@@ -35,7 +35,8 @@
         "value": "{space.1.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the horizontal spacing between the radio button (the circular input element) and its label text. This creates visual separation so users can easily distinguish between the clickable radio button and its descriptive text.<br>CSS variable: --wm-radiobutton-gap"
         }
       },
       "label": {
@@ -43,35 +44,40 @@
           "value": "{body.large.font-size.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-size"
+            "subtype": "font-size",
+            "description": "Controls how large the radio button label text appears (the descriptive text that appears next to the radio button). This affects the size of the text that explains what the radio option represents.<br>CSS variable: --wm-radiobutton-label-font-size"
           }
         },
         "font-family": {
           "value": "{body.large.font-family.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-family"
+            "subtype": "font-family",
+            "description": "Sets the typeface (font style) for radio button label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-radiobutton-label-font-family"
           }
         },
         "font-weight": {
           "value": "{body.large.font-weight.value}",
           "type": "font",
           "attributes": {
-            "subtype": "font-weight"
+            "subtype": "font-weight",
+            "description": "Controls how thick or bold the radio button label text appears. 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-radiobutton-label-font-weight"
           }
         },
         "line-height": {
           "value": "{body.large.line-height.value}",
           "type": "font",
           "attributes": {
-            "subtype": "line-height"
+            "subtype": "line-height",
+            "description": "Controls the vertical spacing between lines when radio button label text wraps to multiple lines. This is important when the label text is long and needs to wrap.<br>CSS variable: --wm-radiobutton-label-line-height"
           }
         },
         "letter-spacing": {
           "value": "{body.large.letter-spacing.value}",
           "type": "font",
           "attributes": {
-            "subtype": "letter-spacing"
+            "subtype": "letter-spacing",
+            "description": "Controls the horizontal spacing between individual letters in radio button label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-radiobutton-label-letter-spacing"
           }
         },
         "color": {
@@ -79,7 +85,8 @@
             "value": "{color.on-surface.@.value}",
             "type": "color",
             "attributes": {
-              "subtype": "color"
+              "subtype": "color",
+              "description": "Sets the text color of radio button labels (the descriptive text that appears next to the radio button). This should contrast well with the background for readability.<br>CSS variable: --wm-radiobutton-label-color"
             }
           }
         }
@@ -88,7 +95,8 @@
         "value": "20px",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the width and height of radio buttons (the circular input elements that users click to select options). This determines how large the actual radio button appears visually.<br>CSS variable: --wm-radiobutton-size"
         }
       },
       "indicator": {
@@ -96,7 +104,8 @@
           "value": "10px",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the size of the radio button indicator (the small dot that appears inside the radio button when it's selected). This dot is typically smaller than the radio button itself to fit nicely inside.<br>CSS variable: --wm-radiobutton-indicator-size"
           }
         }
       },
@@ -105,14 +114,16 @@
           "value": "2px",
           "type": "space",
           "attributes": {
-            "subtype": "border-width"
+            "subtype": "border-width",
+            "description": "Controls the thickness of the border around radio buttons (the circular input elements). This creates the outline that defines the radio button shape and makes it visible to users.<br>CSS variable: --wm-radiobutton-border-width"
           }
         },
         "color": {
           "value": "{color.on-surface.variant.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the color of the border around radio buttons (the circular input elements). This determines the color of the outline that defines the radio button shape in its default/unselected state.<br>CSS variable: --wm-radiobutton-border-color"
           }
         }
       },
@@ -122,21 +133,24 @@
             "value": "40px",
             "type": "space",
             "attributes": {
-              "subtype": "space"
+              "subtype": "space",
+              "description": "Controls the size of the invisible clickable area around radio buttons (the state layer). This area is larger than the visible radio button, making it easier for users to click and interact with the radio button.<br>CSS variable: --wm-radiobutton-state-layer-size"
             }
           },
           "color": {
             "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 radio buttons. This creates visual feedback to show that the radio button is interactive and responsive to user actions.<br>CSS variable: --wm-radiobutton-state-layer-color"
             }
           },
           "opacity": {
             "value": "0",
             "type": "radius",
             "attributes": {
-              "subtype": "opacity"
+              "subtype": "opacity",
+              "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-radiobutton-state-layer-opacity"
             }
           }
         }
@@ -148,7 +162,8 @@
               "value": "{space.6.value}",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Controls the vertical spacing between radio button options when they are arranged in columns (stacked vertically). This creates visual separation between each radio option in a vertical list.<br>CSS variable: --wm-radiobutton-set-item-column-gap"
               }
             }
           },
@@ -157,7 +172,8 @@
               "value": "{space.2.value}",
               "type": "space",
               "attributes": {
-                "subtype": "space"
+                "subtype": "space",
+                "description": "Controls the horizontal spacing between radio button options when they are arranged in rows (side by side horizontally). This creates visual separation between each radio option in a horizontal list.<br>CSS variable: --wm-radiobutton-set-item-row-gap"
               }
             }
           }
@@ -240,4 +256,4 @@
     },
     "appearances": {}
   }
-}
+}

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

@@ -0,0 +1,14 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| gap | Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-gap |
+| cursor | Controls the mouse cursor style when hovering over rating components. 'pointer' shows a hand cursor indicating the rating is clickable, 'default' shows an arrow cursor, and 'not-allowed' shows a blocked cursor for disabled ratings.<br>CSS variable: --wm-rating-cursor |
+| icon.gap | Controls the spacing between individual rating icons (the stars in a star rating system). This creates visual separation between each star so users can easily distinguish between them.<br>CSS variable: --wm-rating-icon-gap |
+| icon.color | Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color |
+| icon.opacity | Controls the transparency of rating icons (the stars in a star rating system). Lower values make the stars more transparent, higher values make them more opaque.<br>CSS variable: --wm-rating-icon-opacity |
+| icon.size | Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size |

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

@@ -24,14 +24,16 @@
         "value": "{space.2.value}",
         "type": "space",
         "attributes": {
-          "subtype": "space"
+          "subtype": "space",
+          "description": "Controls the spacing between rating components (star rating systems where users can rate items with 1-5 stars). This creates visual separation between different rating elements.<br>CSS variable: --wm-rating-gap"
         }
       },
       "cursor": {
         "value": "pointer",
         "type": "radius",
         "attributes": {
-          "subtype": "cursor"
+          "subtype": "cursor",
+          "description": "Controls the mouse cursor style when hovering over rating components. 'pointer' shows a hand cursor indicating the rating is clickable, 'default' shows an arrow cursor, and 'not-allowed' shows a blocked cursor for disabled ratings.<br>CSS variable: --wm-rating-cursor"
         }
       },
       "icon": {
@@ -39,28 +41,32 @@
           "value": "{space.1.value}",
           "type": "space",
           "attributes": {
-            "subtype": "space"
+            "subtype": "space",
+            "description": "Controls the spacing between individual rating icons (the stars in a star rating system). This creates visual separation between each star so users can easily distinguish between them.<br>CSS variable: --wm-rating-icon-gap"
           }
         },
         "color": {
           "value": "{color.on-surface.@.value}",
           "type": "color",
           "attributes": {
-            "subtype": "color"
+            "subtype": "color",
+            "description": "Sets the color of rating icons (the stars in a star rating system). This determines what color the stars appear in when they are not selected or active.<br>CSS variable: --wm-rating-icon-color"
           }
         },
         "opacity": {
           "value": "0.38",
           "type": "radius",
           "attributes": {
-            "subtype": "opacity"
+            "subtype": "opacity",
+            "description": "Controls the transparency of rating icons (the stars in a star rating system). Lower values make the stars more transparent, higher values make them more opaque.<br>CSS variable: --wm-rating-icon-opacity"
           }
         },
         "size": {
           "value": "{icon.size.@.value}",
           "type": "space",
           "attributes": {
-            "subtype": "icon-size"
+            "subtype": "icon-size",
+            "description": "Controls how large rating icons appear (the stars in a star rating system). Larger values make the stars more prominent, smaller values make them more subtle.<br>CSS variable: --wm-rating-icon-size"
           }
         }
       },
@@ -71,14 +77,16 @@
               "value": "1",
               "type": "radius",
               "attributes": {
-                "subtype": "opacity"
+                "subtype": "opacity",
+                "description": "Controls the transparency of active rating icons (the stars that are selected or hovered over). When set to 1, the stars are fully opaque and clearly visible.<br>CSS variable: --wm-rating-active-icon-opacity"
               }
             },
             "color": {
               "value": "{color.warning.@.value}",
               "type": "color",
               "attributes": {
-                "subtype": "color"
+                "subtype": "color",
+                "description": "Sets the color of active rating icons (the stars that are selected or hovered over). This is typically a bright color like yellow or orange to indicate the selected rating.<br>CSS variable: --wm-rating-active-icon-color"
               }
             }
           }
@@ -88,14 +96,16 @@
             "value": "default",
             "type": "radius",
             "attributes": {
-              "subtype": "cursor"
+              "subtype": "cursor",
+              "description": "Controls the mouse cursor style for disabled rating components. 'default' shows an arrow cursor indicating the rating cannot be clicked, 'not-allowed' shows a blocked cursor.<br>CSS variable: --wm-rating-disabled-cursor"
             }
           },
           "opacity": {
             "value": "1",
             "type": "radius",
             "attributes": {
-              "subtype": "opacity"
+              "subtype": "opacity",
+              "description": "Controls the transparency of disabled rating components. When set to 1, the rating appears fully opaque but non-interactive.<br>CSS variable: --wm-rating-disabled-opacity"
             }
           }
         }
@@ -103,4 +113,4 @@
     },
     "appearances": {}
   }
-}
+}

package/src/tokens/web/components/richtext-editor/Token.Readme.md

@@ -0,0 +1,106 @@
+<!-- AUTO-GENERATED FILE. Do not edit manually. -->
+
+# Token Reference Table
+
+This table lists all tokens for this component:
+
+| Token | Description |
+|-------|------------|
+| editor.toolbar.border.color | Sets the border color of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates the outline that defines the toolbar boundaries.<br>CSS variable: --wm-note-editor-toolbar-border-color |
+| editor.toolbar.border.style | Controls the border style of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-note-editor-toolbar-border-style |
+| editor.toolbar.border.width | Controls the border width of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This determines how thick the toolbar border appears.<br>CSS variable: --wm-note-editor-toolbar-border-width |
+| editor.toolbar.border.gap | Controls the spacing between border elements in rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates visual separation between different parts of the toolbar border.<br>CSS variable: --wm-note-editor-toolbar-border-gap |
+| editor.toolbar.background | Sets the background color of rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This is the main background color that appears behind the toolbar buttons.<br>CSS variable: --wm-note-editor-toolbar-background |
+| editor.toolbar.padding | Controls the internal spacing inside rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates breathing room around the toolbar buttons.<br>CSS variable: --wm-note-editor-toolbar-padding |
+| editor.toolbar.gap | Controls the spacing between toolbar elements in rich text editor toolbars (the top section with formatting buttons like bold, italic, and alignment tools). This creates visual separation between different toolbar button groups.<br>CSS variable: --wm-note-editor-toolbar-gap |
+| editor.border.color | Sets the color of borders around rich text editor containers (the main editing area where users type and format text). This creates the outline that defines the editor boundaries.<br>CSS variable: --wm-note-editor-border-color |
+| editor.border.style | Controls the border style of rich text editor containers (the main editing area where users type and format text). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-note-editor-border-style |
+| editor.border.width | Controls the thickness of borders around rich text editor containers (the main editing area where users type and format text). This determines how thick the editor border appears.<br>CSS variable: --wm-note-editor-border-width |
+| editor.border.radius | Controls the corner rounding of rich text editor containers (the main editing area where users type and format text). This makes the editor corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-border-radius |
+| editor.note.placeholder.pdding | Controls the internal spacing inside rich text editor placeholder text (the gray hint text that appears when the editor is empty). This creates breathing room around the placeholder text.<br>CSS variable: --wm-note-editor-placeholder-padding |
+| editor.note.code.padding | Controls the internal spacing inside code blocks in rich text editors (formatted code snippets that appear with special styling). This creates breathing room around the code content.<br>CSS variable: --wm-note-editor-code-padding |
+| editor.note.code.background | Sets the background color of code blocks in rich text editors (formatted code snippets that appear with special styling). This creates a distinct background color for code content.<br>CSS variable: --wm-note-editor-code-background |
+| editor.note.code.color | Sets the text color of code blocks in rich text editors (formatted code snippets that appear with special styling). This determines what color the code text appears in.<br>CSS variable: --wm-note-editor-code-color |
+| editor.note.code.font.size | Controls how large the text appears in code blocks in rich text editors (formatted code snippets). This affects the size of the text that users see in code blocks.<br>CSS variable: --wm-note-editor-code-font-size |
+| editor.note.code.font.weight | Controls how thick or bold the text appears in code blocks in rich text editors (formatted code snippets). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-code-font-weight |
+| editor.note.code.font.family | Sets the typeface (font style) for code blocks in rich text editors (formatted code snippets). This uses monospace fonts like Menlo and Monaco that are designed for displaying code with consistent character spacing.<br>CSS variable: --wm-note-editor-code-font-family |
+| editor.btn.group.gap | Controls the spacing between button groups in rich text editor toolbars (collections of related formatting buttons like bold, italic, underline). This creates visual separation between different button groups.<br>CSS variable: --wm-note-editor-btn-group-gap |
+| editor.btn.padding | Controls the internal spacing inside rich text editor toolbar buttons (the space between the button content and its borders). This creates breathing room around the button icons and text.<br>CSS variable: --wm-note-editor-btn-padding |
+| editor.btn.min.height | Controls the minimum height of rich text editor toolbar buttons (formatting buttons like bold, italic, and alignment tools). This ensures each button is tall enough to be easily clickable.<br>CSS variable: --wm-note-editor-btn-min-height |
+| editor.btn.width | Controls how wide rich text editor toolbar buttons appear (formatting buttons like bold, italic, and alignment tools). This determines the horizontal size of the toolbar buttons.<br>CSS variable: --wm-note-editor-btn-width |
+| editor.btn.radius | Controls the corner rounding of rich text editor toolbar buttons (formatting buttons like bold, italic, and alignment tools). This makes the button corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-btn-radius |
+| editor.dropdown.menu.background | Sets the background color of dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-note-editor-dropdown-menu-background |
+| editor.dropdown.menu.border.radius | Controls the corner rounding of dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-note-editor-dropdown-menu-border-radius |
+| editor.dropdown.menu.box.shadow | Controls the drop shadow effect around dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This creates a subtle shadow that makes the dropdown appear to float above the background.<br>CSS variable: --wm-note-editor-dropdown-menu-box-shadow |
+| editor.dropdown.menu.width | Controls how wide dropdown menus appear in rich text editors (lists of options that appear when users click on formatting buttons). This determines the horizontal size of the dropdown menu container.<br>CSS variable: --wm-note-editor-dropdown-menu-width |
+| editor.dropdown.menu.max.height | Controls the maximum height of dropdown menus in rich text editors (lists of options that appear when users click on formatting buttons). This prevents dropdowns from becoming too tall and ensures they fit within the viewport.<br>CSS variable: --wm-note-editor-dropdown-menu-max-height |
+| editor.dropdown.menu.padding | Controls the internal spacing inside dropdown menus in rich text editors (the space between the dropdown content and its borders). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-note-editor-dropdown-menu-padding |
+| editor.dropdown.menu.item.font.family | Sets the typeface (font style) for dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). This determines whether the menu item text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-note-editor-dropdown-menu-item-font-family |
+| editor.dropdown.menu.item.font.size | Controls how large the text appears in dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). This affects the size of the text that users see in the dropdown options.<br>CSS variable: --wm-note-editor-dropdown-menu-item-font-size |
+| editor.dropdown.menu.item.font.weight | Controls how thick or bold the text appears in dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-dropdown-menu-item-font-weight |
+| editor.dropdown.menu.item.line-height | Controls the vertical spacing between lines when dropdown menu item text wraps to multiple lines in rich text editors. This ensures proper spacing for the menu item text displayed in the dropdown.<br>CSS variable: --wm-note-editor-dropdown-menu-item-line-height |
+| editor.dropdown.menu.item.letter-spacing | Controls the horizontal spacing between individual characters in dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). This can help make the menu item text more readable and properly spaced.<br>CSS variable: --wm-note-editor-dropdown-menu-item-letter-spacing |
+| editor.dropdown.menu.item.color | Sets the text color of dropdown menu items in rich text editors (individual options like font sizes, colors, or formatting styles). This determines what color the menu item text appears in.<br>CSS variable: --wm-note-editor-dropdown-menu-item-color |
+| editor.dropdown.menu.item.state.layer.opacity | Controls the transparency of the state layer that appears during user interactions with dropdown menu items in rich text editors (hover, focus, active). When set to 0, the state layer is invisible. Higher values make the interaction feedback more visible.<br>CSS variable: --wm-note-editor-dropdown-menu-item-state-layer-opacity |
+| editor.pre.border.color | Sets the color of borders around preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This creates the outline that defines the preformatted text boundaries.<br>CSS variable: --wm-note-editor-pre-border-color |
+| editor.pre.border.width | Controls the thickness of borders around preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This determines how thick the preformatted text border appears.<br>CSS variable: --wm-note-editor-pre-border-width |
+| editor.pre.border.style | Controls the border style of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-note-editor-pre-border-style |
+| editor.pre.border.radius | Controls the corner rounding of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This makes the preformatted text corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-pre-border-radius |
+| editor.pre.background | Sets the background color of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This creates a distinct background color for preformatted content.<br>CSS variable: --wm-note-editor-pre-background |
+| editor.pre.padding | Controls the internal spacing inside preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This creates breathing room around the preformatted content.<br>CSS variable: --wm-note-editor-pre-padding |
+| editor.pre.font.family | Sets the typeface (font style) for preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This determines whether the preformatted text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-note-editor-pre-font-family |
+| editor.pre.font.size | Controls how large the text appears in preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This affects the size of the text that users see in preformatted content.<br>CSS variable: --wm-note-editor-pre-font-size |
+| editor.pre.font.weight | Controls how thick or bold the text appears in preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-pre-font-weight |
+| editor.pre.line-height | Controls the vertical spacing between lines in preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This ensures proper spacing for the preformatted text content.<br>CSS variable: --wm-note-editor-pre-line-height |
+| editor.pre.color | Sets the text color of preformatted text blocks in rich text editors (code snippets that preserve formatting and whitespace). This determines what color the preformatted text appears in.<br>CSS variable: --wm-note-editor-pre-color |
+| editor.blockquote.border.color | Sets the color of the left border on blockquotes in rich text editors (quoted text that appears with special indentation and styling). This creates a colored vertical line that indicates quoted content.<br>CSS variable: --wm-note-editor-blockquote-border-color |
+| editor.blockquote.border.style | Controls the border style of blockquotes in rich text editors (quoted text that appears with special indentation and styling). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-note-editor-blockquote-border-style |
+| editor.blockquote.border.width | Controls the thickness of the left border on blockquotes in rich text editors (quoted text that appears with special indentation and styling). This determines how thick the vertical border line appears.<br>CSS variable: --wm-note-editor-blockquote-border-width |
+| editor.blockquote.margin | Controls the external spacing around blockquotes in rich text editors (quoted text that appears with special indentation and styling). This creates space between the blockquote and surrounding content.<br>CSS variable: --wm-note-editor-blockquote-margin |
+| editor.blockquote.inline.padding | Controls the internal spacing inside inline blockquotes in rich text editors (quoted text that appears within a paragraph). This creates breathing room around the quoted text content.<br>CSS variable: --wm-note-editor-blockquote-inline-padding |
+| editor.blockquote.inline.block.padding | Controls the internal spacing inside block-level blockquotes in rich text editors (quoted text that appears as a separate block). This creates breathing room around the quoted text content.<br>CSS variable: --wm-note-editor-blockquote-block-padding |
+| editor.blockquote.para.dropdown.padding | Controls the internal spacing inside paragraph dropdown menus in rich text editors (formatting options that appear when users click on paragraph-related buttons). This creates breathing room around the dropdown menu items.<br>CSS variable: --wm-note-editor-para-dropdown-padding |
+| editor.blockquote.tooltip.border.color | Sets the color of borders around tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This creates the outline that defines the tooltip boundaries.<br>CSS variable: --wm-note-editor-tooltip-border-color |
+| editor.blockquote.tooltip.content.color | Sets the text color of tooltip content in rich text editors (helpful hints that appear when users hover over toolbar buttons). This determines what color the tooltip text appears in.<br>CSS variable: --wm-note-editor-tooltip-content-color |
+| editor.blockquote.tooltip.content.background | Sets the background color of tooltip content in rich text editors (helpful hints that appear when users hover over toolbar buttons). This is the main background color that appears behind the tooltip text.<br>CSS variable: --wm-note-editor-tooltip-content-background |
+| editor.blockquote.tooltip.content.padding | Controls the internal spacing inside tooltip content in rich text editors (the space between the tooltip text and its borders). This creates breathing room around the tooltip text.<br>CSS variable: --wm-note-editor-tooltip-content-padding |
+| editor.blockquote.tooltip.content.max.width | Controls the maximum width of tooltip content in rich text editors (helpful hints that appear when users hover over toolbar buttons). This prevents tooltips from becoming too wide and ensures they fit within the viewport.<br>CSS variable: --wm-note-editor-tooltip-content-max-width |
+| editor.blockquote.tooltip.arrow.border.width | Controls the thickness of the arrow border on tooltips in rich text editors (the small triangular pointer that connects the tooltip to the button). This determines how thick the arrow border appears.<br>CSS variable: --wm-note-editor-tooltip-arrow-border-width |
+| editor.blockquote.tooltip.arrow.margin | Controls the spacing around tooltip arrows in rich text editors (the small triangular pointer that connects the tooltip to the button). This creates visual separation between the arrow and surrounding elements.<br>CSS variable: --wm-note-editor-tooltip-arrow-margin |
+| editor.blockquote.tooltip.radius | Controls the corner rounding of tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This makes the tooltip corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-tooltip-radius |
+| editor.blockquote.tooltip.font.size | Controls how large the text appears in tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This affects the size of the text that users see in the tooltip.<br>CSS variable: --wm-note-editor-tooltip-font-size |
+| editor.blockquote.tooltip.font.weight | Controls how thick or bold the text appears in tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). 'normal' makes it regular weight, 'bold' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-note-editor-tooltip-font-weight |
+| editor.blockquote.tooltip.font.family | Sets the typeface (font style) for tooltips in rich text editors (helpful hints that appear when users hover over toolbar buttons). This determines whether the tooltip text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-note-editor-tooltip-font-family |
+| editor.blockquote.tooltip.padding | Controls the internal spacing inside tooltips in rich text editors (the space between the tooltip content and its borders). This creates breathing room around the tooltip text.<br>CSS variable: --wm-note-editor-tooltip-padding |
+| editor.blockquote.tooltip.margin | Controls the external spacing around tooltips in rich text editors (the space between the tooltip and surrounding elements). This creates visual separation between the tooltip and other interface elements.<br>CSS variable: --wm-note-editor-tooltip-margin |
+| editor.blockquote.color.btn.size | Controls the size of color picker buttons in rich text editors (buttons that allow users to select text colors). This determines how large the color selection buttons appear.<br>CSS variable: --wm-note-editor-color-btn-size |
+| editor.blockquote.color.reset.background | Sets the background color of the color reset button in rich text editors (button that removes color formatting and returns to default). This creates a white background for the reset button.<br>CSS variable: --wm-note-editor-color-reset-background |
+| editor.blockquote.color.select.background | Sets the background color of color selection areas in rich text editors (areas where users can pick colors for text). This creates a white background for the color selection interface.<br>CSS variable: --wm-note-editor-color-select-background |
+| editor.blockquote.color.select.btn.width | Controls how wide color selection buttons appear in rich text editors (buttons that allow users to select text colors). This determines the horizontal size of the color selection buttons.<br>CSS variable: --wm-note-editor-color-select-btn-width |
+| editor.blockquote.color.select.btn.height | Controls how tall color selection buttons appear in rich text editors (buttons that allow users to select text colors). This determines the vertical size of the color selection buttons.<br>CSS variable: --wm-note-editor-color-select-btn-height |
+| editor.blockquote.color.select.btn.min.height | Controls the minimum height of color selection buttons in rich text editors (buttons that allow users to select text colors). This ensures each button is tall enough to be easily clickable.<br>CSS variable: --wm-note-editor-color-select-btn-min-height |
+| editor.blockquote.color.dropdown.gap | Controls the spacing between elements in color picker dropdowns in rich text editors (color selection menus that appear when users click on color buttons). This creates visual separation between different color options.<br>CSS variable: --wm-note-editor-color-dropdown-gap |
+| editor.blockquote.color.dropdown.padding | Controls the internal spacing inside color picker dropdowns in rich text editors (color selection menus that appear when users click on color buttons). This creates breathing room around the color options.<br>CSS variable: --wm-note-editor-color-dropdown-padding |
+| editor.blockquote.color.palette.gap.xs | Controls the spacing between color palette items in rich text editors (small color swatches that users can click to select colors). This creates visual separation between different color options in the palette.<br>CSS variable: --wm-note-editor-color-palette-gap-xs |
+| editor.blockquote.color.row.gap | Controls the spacing between rows of color options in rich text editors (horizontal rows of color swatches that users can click to select colors). This creates visual separation between different rows of color options.<br>CSS variable: --wm-note-editor-color-row-gap |
+| editor.blockquote.palette.width | Controls how wide color palettes appear in rich text editors (color selection interfaces that show available colors). This determines the horizontal size of the color palette container.<br>CSS variable: --wm-note-editor-palette-width |
+| editor.blockquote.palette.gap | Controls the spacing between color palette items in rich text editors (color selection interfaces that show available colors). This creates visual separation between different color options in the palette.<br>CSS variable: --wm-note-editor-palette-gap |
+| editor.blockquote.dropzone.color | Sets the color of dropzone elements in rich text editors (areas where users can drag and drop files or content). This determines what color the dropzone text and borders appear in.<br>CSS variable: --wm-note-editor-dropzone-color |
+| editor.blockquote.dropzone.background | Sets the background color of dropzone elements in rich text editors (areas where users can drag and drop files or content). This creates a white background for the dropzone area.<br>CSS variable: --wm-note-editor-dropzone-background |
+| editor.blockquote.td.border.color | Sets the color of borders around table cells in rich text editors (individual cells within tables that users can create). This creates the outline that defines the table cell boundaries.<br>CSS variable: --wm-note-editor-td-border-color |
+| editor.blockquote.td.border.width | Controls the thickness of borders around table cells in rich text editors (individual cells within tables that users can create). This determines how thick the table cell borders appear.<br>CSS variable: --wm-note-editor-td-border-width |
+| editor.blockquote.td.border.style | Controls the border style of table cells in rich text editors (individual cells within tables that users can create). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, and 'none' removes the border.<br>CSS variable: --wm-note-editor-td-border-style |
+| editor.blockquote.td.padding | Controls the internal spacing inside table cells in rich text editors (individual cells within tables that users can create). This creates breathing room around the table cell content.<br>CSS variable: --wm-note-editor-td-padding |
+| editor.blockquote.popover.arrow.margin | Controls the spacing around popover arrows in rich text editors (small triangular pointers that connect popovers to their trigger elements). This creates visual separation between the arrow and surrounding elements.<br>CSS variable: --wm-note-editor-popover-arrow-margin |
+| editor.blockquote.popover.arrow.background | Sets the background color of popover arrows in rich text editors (small triangular pointers that connect popovers to their trigger elements). This creates a white background for the arrow.<br>CSS variable: --wm-note-editor-popover-arrow-background |
+| editor.blockquote.popover.margin | Controls the external spacing around popovers in rich text editors (floating panels that appear when users interact with certain elements). This creates visual separation between the popover and surrounding elements.<br>CSS variable: --wm-note-editor-popover-margin |
+| editor.blockquote.popover.background | Sets the background color of popovers in rich text editors (floating panels that appear when users interact with certain elements). This is the main background color that appears behind the popover content.<br>CSS variable: --wm-note-editor-popover-background |
+| editor.blockquote.popover.border.radius | Controls the corner rounding of popovers in rich text editors (floating panels that appear when users interact with certain elements). This makes the popover corners slightly rounded for a softer appearance.<br>CSS variable: --wm-note-editor-popover-border-radius |
+| editor.blockquote.popover.border.color | Sets the color of borders around popovers in rich text editors (floating panels that appear when users interact with certain elements). This creates the outline that defines the popover boundaries.<br>CSS variable: --wm-note-editor-popover-border-color |
+| editor.blockquote.popover.padding.@ | Controls the internal spacing inside popovers in rich text editors (floating panels that appear when users interact with certain elements). This creates breathing room around the popover content.<br>CSS variable: --wm-note-editor-popover-padding |
+| editor.blockquote.popover.padding.container | Controls the internal spacing inside popover containers in rich text editors (floating panels that appear when users interact with certain elements). This creates breathing room around the popover container content.<br>CSS variable: --wm-note-editor-popover-padding-container |
+| editor.blockquote.popover.content.color | Sets the text color of popover content in rich text editors (floating panels that appear when users interact with certain elements). This determines what color the popover text appears in.<br>CSS variable: --wm-note-editor-popover-content-color |
+| editor.blockquote.popover.content.background | Sets the background color of popover content in rich text editors (floating panels that appear when users interact with certain elements). This creates a white background for the popover content.<br>CSS variable: --wm-note-editor-popover-content-background |
+| editor.blockquote.popover.content.min.width | Controls the minimum width of popover content in rich text editors (floating panels that appear when users interact with certain elements). This ensures popovers are wide enough to display their content properly.<br>CSS variable: --wm-note-editor-popover-content-min-width |
+| editor.blockquote.popover.content.min.height | Controls the minimum height of popover content in rich text editors (floating panels that appear when users interact with certain elements). This ensures popovers are tall enough to display their content properly.<br>CSS variable: --wm-note-editor-popover-content-min-height |
+| editor.blockquote.popover.content.padding | Controls the internal spacing inside popover content in rich text editors (the space between the popover text and its borders). This creates breathing room around the popover text.<br>CSS variable: --wm-note-editor-popover-content-padding |