From 3b20ef5ea64aa23a01da5539a89e3c2e27e6776b Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Wed, 12 Jun 2024 18:05:12 +0300 Subject: [PATCH] Format fixes --- packages/themes/types/accordion/index.d.ts | 468 ++-- packages/themes/types/autocomplete/index.d.ts | 792 +++--- packages/themes/types/avatar/index.d.ts | 186 +- packages/themes/types/badge/index.d.ts | 446 ++- packages/themes/types/blockui/index.d.ts | 21 +- packages/themes/types/breadcrumb/index.d.ts | 204 +- packages/themes/types/button/index.d.ts | 2471 ++++++++--------- packages/themes/types/card/index.d.ts | 157 +- packages/themes/types/carousel/index.d.ts | 213 +- .../themes/types/cascadeselect/index.d.ts | 571 ++-- packages/themes/types/checkbox/index.d.ts | 349 ++- packages/themes/types/chip/index.d.ts | 253 +- packages/themes/types/colorpicker/index.d.ts | 211 +- .../themes/types/confirmdialog/index.d.ts | 52 +- packages/themes/types/confirmpopup/index.d.ts | 186 +- packages/themes/types/contextmenu/index.d.ts | 342 ++- packages/themes/types/datatable/index.d.ts | 1599 ++++++----- packages/themes/types/dataview/index.d.ts | 356 ++- packages/themes/types/datepicker/index.d.ts | 1065 ++++--- packages/themes/types/dialog/index.d.ts | 181 +- packages/themes/types/divider/index.d.ts | 156 +- packages/themes/types/dock/index.d.ts | 173 +- packages/themes/types/drawer/index.d.ts | 138 +- packages/themes/types/editor/index.d.ts | 289 +- packages/themes/types/fieldset/index.d.ts | 331 ++- packages/themes/types/fileupload/index.d.ts | 293 +- packages/themes/types/floatlabel/index.d.ts | 57 +- packages/themes/types/galleria/index.d.ts | 974 ++++--- packages/themes/types/iconfield/index.d.ts | 21 +- packages/themes/types/image/index.d.ts | 380 ++- .../themes/types/inlinemessage/index.d.ts | 413 ++- packages/themes/types/inplace/index.d.ts | 145 +- packages/themes/types/inputchips/index.d.ts | 313 +-- packages/themes/types/inputgroup/index.d.ts | 57 +- packages/themes/types/inputnumber/index.d.ts | 172 +- packages/themes/types/inputtext/index.d.ts | 364 ++- packages/themes/types/knob/index.d.ts | 147 +- packages/themes/types/listbox/index.d.ts | 506 ++-- packages/themes/types/megamenu/index.d.ts | 723 +++-- packages/themes/types/menu/index.d.ts | 306 +- packages/themes/types/menubar/index.d.ts | 585 ++-- packages/themes/types/message/index.d.ts | 915 +++--- packages/themes/types/metergroup/index.d.ts | 152 +- packages/themes/types/multiselect/index.d.ts | 648 +++-- packages/themes/types/orderlist/index.d.ts | 40 +- .../themes/types/organizationchart/index.d.ts | 371 ++- packages/themes/types/overlaybadge/index.d.ts | 42 +- packages/themes/types/paginator/index.d.ts | 307 +- packages/themes/types/panel/index.d.ts | 212 +- packages/themes/types/panelmenu/index.d.ts | 342 ++- packages/themes/types/password/index.d.ts | 205 +- packages/themes/types/picklist/index.d.ts | 40 +- packages/themes/types/popover/index.d.ts | 112 +- packages/themes/types/progressbar/index.d.ts | 107 +- .../themes/types/progressspinner/index.d.ts | 57 +- packages/themes/types/radiobutton/index.d.ts | 325 ++- packages/themes/types/rating/index.d.ts | 88 +- packages/themes/types/ripple/index.d.ts | 21 +- packages/themes/types/scrollpanel/index.d.ts | 135 +- packages/themes/types/select/index.d.ts | 679 +++-- packages/themes/types/selectbutton/index.d.ts | 33 +- packages/themes/types/skeleton/index.d.ts | 45 +- packages/themes/types/slider/index.d.ts | 302 +- packages/themes/types/speeddial/index.d.ts | 33 +- packages/themes/types/splitbutton/index.d.ts | 45 +- packages/themes/types/splitter/index.d.ts | 196 +- packages/themes/types/stepper/index.d.ts | 496 ++-- packages/themes/types/steps/index.d.ts | 328 ++- packages/themes/types/tabmenu/index.d.ts | 402 ++- packages/themes/types/tabs/index.d.ts | 599 ++-- packages/themes/types/tabview/index.d.ts | 205 +- packages/themes/types/tag/index.d.ts | 317 +-- packages/themes/types/terminal/index.d.ts | 119 +- packages/themes/types/textarea/index.d.ts | 270 +- packages/themes/types/tieredmenu/index.d.ts | 397 ++- packages/themes/types/timeline/index.d.ts | 232 +- packages/themes/types/toast/index.d.ts | 1104 ++++---- packages/themes/types/togglebutton/index.d.ts | 392 ++- packages/themes/types/toggleswitch/index.d.ts | 361 ++- packages/themes/types/toolbar/index.d.ts | 81 +- packages/themes/types/tooltip/index.d.ts | 93 +- packages/themes/types/tree/index.d.ts | 479 ++-- packages/themes/types/treeselect/index.d.ts | 425 ++- packages/themes/types/treetable/index.d.ts | 1061 ++++--- 84 files changed, 14378 insertions(+), 15101 deletions(-) diff --git a/packages/themes/types/accordion/index.d.ts b/packages/themes/types/accordion/index.d.ts index ae5a9444c..6b686f05f 100644 --- a/packages/themes/types/accordion/index.d.ts +++ b/packages/themes/types/accordion/index.d.ts @@ -1,4 +1,3 @@ - /** * * Accordion Design Tokens @@ -12,251 +11,242 @@ import { ColorSchemeDesignToken } from '..'; export interface AccordionDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken accordion.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken accordion.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the panel section - */ + * Used to pass tokens of the panel section + */ panel?: { - + /** + * Border width of panel + * + * @designToken accordion.panel.border.width + */ + borderWidth?: string; + /** + * Border color of panel + * + * @designToken accordion.panel.border.color + */ + borderColor?: string; + }; /** - * Border width of panel - * - * @designToken accordion.panel.border.width - */ - borderWidth?: string; - /** - * Border color of panel - * - * @designToken accordion.panel.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - - /** - * Color of header - * - * @designToken accordion.header.color - */ - color?: string; - /** - * Hover color of header - * - * @designToken accordion.header.hover.color - */ - hoverColor?: string; - /** - * Active color of header - * - * @designToken accordion.header.active.color - */ - activeColor?: string; - /** - * Padding of header - * - * @designToken accordion.header.padding - */ - padding?: string; - /** - * Font weight of header - * - * @designToken accordion.header.font.weight - */ - fontWeight?: string; - /** - * Border radius of header - * - * @designToken accordion.header.border.radius - */ - borderRadius?: string; - /** - * Border width of header - * - * @designToken accordion.header.border.width - */ - borderWidth?: string; - /** - * Border color of header - * - * @designToken accordion.header.border.color - */ - borderColor?: string; - /** - * Background of header - * - * @designToken accordion.header.background - */ - background?: string; - /** - * Hover background of header - * - * @designToken accordion.header.hover.background - */ - hoverBackground?: string; - /** - * Active background of header - * - * @designToken accordion.header.active.background - */ - activeBackground?: string; - /** - * Active hover background of header - * - * @designToken accordion.header.active.hover.background - */ - activeHoverBackground?: string; - /** - * Focus ring of header - */ - focusRing?: { - - /** - * Focus ring width of header - * - * @designToken accordion.header.focus.ring.width - */ - width?: string; - /** - * Focus ring style of header - * - * @designToken accordion.header.focus.ring.style - */ - style?: string; - /** - * Focus ring color of header - * - * @designToken accordion.header.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of header - * - * @designToken accordion.header.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of header - * - * @designToken accordion.header.focus.ring.shadow - */ - shadow?: string; + /** + * Color of header + * + * @designToken accordion.header.color + */ + color?: string; + /** + * Hover color of header + * + * @designToken accordion.header.hover.color + */ + hoverColor?: string; + /** + * Active color of header + * + * @designToken accordion.header.active.color + */ + activeColor?: string; + /** + * Padding of header + * + * @designToken accordion.header.padding + */ + padding?: string; + /** + * Font weight of header + * + * @designToken accordion.header.font.weight + */ + fontWeight?: string; + /** + * Border radius of header + * + * @designToken accordion.header.border.radius + */ + borderRadius?: string; + /** + * Border width of header + * + * @designToken accordion.header.border.width + */ + borderWidth?: string; + /** + * Border color of header + * + * @designToken accordion.header.border.color + */ + borderColor?: string; + /** + * Background of header + * + * @designToken accordion.header.background + */ + background?: string; + /** + * Hover background of header + * + * @designToken accordion.header.hover.background + */ + hoverBackground?: string; + /** + * Active background of header + * + * @designToken accordion.header.active.background + */ + activeBackground?: string; + /** + * Active hover background of header + * + * @designToken accordion.header.active.hover.background + */ + activeHoverBackground?: string; + /** + * Focus ring of header + */ + focusRing?: { + /** + * Focus ring width of header + * + * @designToken accordion.header.focus.ring.width + */ + width?: string; + /** + * Focus ring style of header + * + * @designToken accordion.header.focus.ring.style + */ + style?: string; + /** + * Focus ring color of header + * + * @designToken accordion.header.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of header + * + * @designToken accordion.header.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of header + * + * @designToken accordion.header.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Toggle icon of header + */ + toggleIcon?: { + /** + * Toggle icon color of header + * + * @designToken accordion.header.toggle.icon.color + */ + color?: string; + /** + * Toggle icon hover color of header + * + * @designToken accordion.header.toggle.icon.hover.color + */ + hoverColor?: string; + /** + * Toggle icon active color of header + * + * @designToken accordion.header.toggle.icon.active.color + */ + activeColor?: string; + /** + * Toggle icon active hover color of header + * + * @designToken accordion.header.toggle.icon.active.hover.color + */ + activeHoverColor?: string; + }; + /** + * First of header + */ + first?: { + /** + * First top border radius of header + * + * @designToken accordion.header.first.top.border.radius + */ + topBorderRadius?: string; + /** + * First border width of header + * + * @designToken accordion.header.first.border.width + */ + borderWidth?: string; + }; + /** + * Last of header + */ + last?: { + /** + * Last bottom border radius of header + * + * @designToken accordion.header.last.bottom.border.radius + */ + bottomBorderRadius?: string; + /** + * Last active bottom border radius of header + * + * @designToken accordion.header.last.active.bottom.border.radius + */ + activeBottomBorderRadius?: string; + }; }; /** - * Toggle icon of header - */ - toggleIcon?: { - - /** - * Toggle icon color of header - * - * @designToken accordion.header.toggle.icon.color - */ - color?: string; - /** - * Toggle icon hover color of header - * - * @designToken accordion.header.toggle.icon.hover.color - */ - hoverColor?: string; - /** - * Toggle icon active color of header - * - * @designToken accordion.header.toggle.icon.active.color - */ - activeColor?: string; - /** - * Toggle icon active hover color of header - * - * @designToken accordion.header.toggle.icon.active.hover.color - */ - activeHoverColor?: string; - }; - /** - * First of header - */ - first?: { - - /** - * First top border radius of header - * - * @designToken accordion.header.first.top.border.radius - */ - topBorderRadius?: string; - /** - * First border width of header - * - * @designToken accordion.header.first.border.width - */ - borderWidth?: string; - }; - /** - * Last of header - */ - last?: { - - /** - * Last bottom border radius of header - * - * @designToken accordion.header.last.bottom.border.radius - */ - bottomBorderRadius?: string; - /** - * Last active bottom border radius of header - * - * @designToken accordion.header.last.active.bottom.border.radius - */ - activeBottomBorderRadius?: string; - }; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Border width of content - * - * @designToken accordion.content.border.width - */ - borderWidth?: string; - /** - * Border color of content - * - * @designToken accordion.content.border.color - */ - borderColor?: string; - /** - * Background of content - * - * @designToken accordion.content.background - */ - background?: string; - /** - * Color of content - * - * @designToken accordion.content.color - */ - color?: string; - /** - * Padding of content - * - * @designToken accordion.content.padding - */ - padding?: string; - } + /** + * Border width of content + * + * @designToken accordion.content.border.width + */ + borderWidth?: string; + /** + * Border color of content + * + * @designToken accordion.content.border.color + */ + borderColor?: string; + /** + * Background of content + * + * @designToken accordion.content.background + */ + background?: string; + /** + * Color of content + * + * @designToken accordion.content.color + */ + color?: string; + /** + * Padding of content + * + * @designToken accordion.content.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/autocomplete/index.d.ts b/packages/themes/types/autocomplete/index.d.ts index 33c214d91..43ba010b0 100644 --- a/packages/themes/types/autocomplete/index.d.ts +++ b/packages/themes/types/autocomplete/index.d.ts @@ -1,4 +1,3 @@ - /** * * AutoComplete Design Tokens @@ -12,419 +11,408 @@ import { ColorSchemeDesignToken } from '..'; export interface AutoCompleteDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken autocomplete.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken autocomplete.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken autocomplete.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken autocomplete.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken autocomplete.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken autocomplete.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken autocomplete.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken autocomplete.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken autocomplete.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken autocomplete.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken autocomplete.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken autocomplete.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken autocomplete.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken autocomplete.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken autocomplete.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken autocomplete.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken autocomplete.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken autocomplete.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken autocomplete.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken autocomplete.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken autocomplete.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken autocomplete.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken autocomplete.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken autocomplete.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken autocomplete.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken autocomplete.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken autocomplete.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken autocomplete.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken autocomplete.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken autocomplete.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken autocomplete.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken autocomplete.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken autocomplete.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken autocomplete.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken autocomplete.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken autocomplete.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken autocomplete.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken autocomplete.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken autocomplete.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken autocomplete.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken autocomplete.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken autocomplete.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the overlay section - */ + * Used to pass tokens of the overlay section + */ overlay?: { - - /** - * Background of overlay - * - * @designToken autocomplete.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken autocomplete.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken autocomplete.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken autocomplete.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken autocomplete.overlay.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken autocomplete.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken autocomplete.list.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the option section - */ - option?: { - - /** - * Focus background of option - * - * @designToken autocomplete.option.focus.background - */ - focusBackground?: string; - /** - * Selected background of option - * - * @designToken autocomplete.option.selected.background - */ - selectedBackground?: string; - /** - * Selected focus background of option - * - * @designToken autocomplete.option.selected.focus.background - */ - selectedFocusBackground?: string; - /** - * Color of option - * - * @designToken autocomplete.option.color - */ - color?: string; - /** - * Focus color of option - * - * @designToken autocomplete.option.focus.color - */ - focusColor?: string; - /** - * Selected color of option - * - * @designToken autocomplete.option.selected.color - */ - selectedColor?: string; - /** - * Selected focus color of option - * - * @designToken autocomplete.option.selected.focus.color - */ - selectedFocusColor?: string; - /** - * Padding of option - * - * @designToken autocomplete.option.padding - */ - padding?: string; - /** - * Border radius of option - * - * @designToken autocomplete.option.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the option group section - */ - optionGroup?: { - - /** - * Background of option group - * - * @designToken autocomplete.option.group.background - */ - background?: string; - /** - * Color of option group - * - * @designToken autocomplete.option.group.color - */ - color?: string; - /** - * Font weight of option group - * - * @designToken autocomplete.option.group.font.weight - */ - fontWeight?: string; - /** - * Padding of option group - * - * @designToken autocomplete.option.group.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the dropdown section - */ - dropdown?: { - - /** - * Width of dropdown - * - * @designToken autocomplete.dropdown.width - */ - width?: string; - /** - * Border color of dropdown - * - * @designToken autocomplete.dropdown.border.color - */ - borderColor?: string; - /** - * Hover border color of dropdown - * - * @designToken autocomplete.dropdown.hover.border.color - */ - hoverBorderColor?: string; - /** - * Active border color of dropdown - * - * @designToken autocomplete.dropdown.active.border.color - */ - activeBorderColor?: string; - /** - * Border radius of dropdown - * - * @designToken autocomplete.dropdown.border.radius - */ - borderRadius?: string; - /** - * Focus ring of dropdown - */ - focusRing?: { - - /** - * Focus ring width of dropdown - * - * @designToken autocomplete.dropdown.focus.ring.width - */ - width?: string; - /** - * Focus ring style of dropdown - * - * @designToken autocomplete.dropdown.focus.ring.style - */ - style?: string; - /** - * Focus ring color of dropdown - * - * @designToken autocomplete.dropdown.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of dropdown - * - * @designToken autocomplete.dropdown.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of dropdown - * - * @designToken autocomplete.dropdown.focus.ring.shadow - */ - shadow?: string; + /** + * Background of overlay + * + * @designToken autocomplete.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken autocomplete.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken autocomplete.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken autocomplete.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken autocomplete.overlay.shadow + */ + shadow?: string; }; /** - * Background of dropdown - * - * @designToken autocomplete.dropdown.background - */ - background?: string; + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken autocomplete.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken autocomplete.list.gap + */ + gap?: string; + }; /** - * Hover background of dropdown - * - * @designToken autocomplete.dropdown.hover.background - */ - hoverBackground?: string; + * Used to pass tokens of the option section + */ + option?: { + /** + * Focus background of option + * + * @designToken autocomplete.option.focus.background + */ + focusBackground?: string; + /** + * Selected background of option + * + * @designToken autocomplete.option.selected.background + */ + selectedBackground?: string; + /** + * Selected focus background of option + * + * @designToken autocomplete.option.selected.focus.background + */ + selectedFocusBackground?: string; + /** + * Color of option + * + * @designToken autocomplete.option.color + */ + color?: string; + /** + * Focus color of option + * + * @designToken autocomplete.option.focus.color + */ + focusColor?: string; + /** + * Selected color of option + * + * @designToken autocomplete.option.selected.color + */ + selectedColor?: string; + /** + * Selected focus color of option + * + * @designToken autocomplete.option.selected.focus.color + */ + selectedFocusColor?: string; + /** + * Padding of option + * + * @designToken autocomplete.option.padding + */ + padding?: string; + /** + * Border radius of option + * + * @designToken autocomplete.option.border.radius + */ + borderRadius?: string; + }; /** - * Active background of dropdown - * - * @designToken autocomplete.dropdown.active.background - */ - activeBackground?: string; + * Used to pass tokens of the option group section + */ + optionGroup?: { + /** + * Background of option group + * + * @designToken autocomplete.option.group.background + */ + background?: string; + /** + * Color of option group + * + * @designToken autocomplete.option.group.color + */ + color?: string; + /** + * Font weight of option group + * + * @designToken autocomplete.option.group.font.weight + */ + fontWeight?: string; + /** + * Padding of option group + * + * @designToken autocomplete.option.group.padding + */ + padding?: string; + }; /** - * Color of dropdown - * - * @designToken autocomplete.dropdown.color - */ - color?: string; + * Used to pass tokens of the dropdown section + */ + dropdown?: { + /** + * Width of dropdown + * + * @designToken autocomplete.dropdown.width + */ + width?: string; + /** + * Border color of dropdown + * + * @designToken autocomplete.dropdown.border.color + */ + borderColor?: string; + /** + * Hover border color of dropdown + * + * @designToken autocomplete.dropdown.hover.border.color + */ + hoverBorderColor?: string; + /** + * Active border color of dropdown + * + * @designToken autocomplete.dropdown.active.border.color + */ + activeBorderColor?: string; + /** + * Border radius of dropdown + * + * @designToken autocomplete.dropdown.border.radius + */ + borderRadius?: string; + /** + * Focus ring of dropdown + */ + focusRing?: { + /** + * Focus ring width of dropdown + * + * @designToken autocomplete.dropdown.focus.ring.width + */ + width?: string; + /** + * Focus ring style of dropdown + * + * @designToken autocomplete.dropdown.focus.ring.style + */ + style?: string; + /** + * Focus ring color of dropdown + * + * @designToken autocomplete.dropdown.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of dropdown + * + * @designToken autocomplete.dropdown.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of dropdown + * + * @designToken autocomplete.dropdown.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Background of dropdown + * + * @designToken autocomplete.dropdown.background + */ + background?: string; + /** + * Hover background of dropdown + * + * @designToken autocomplete.dropdown.hover.background + */ + hoverBackground?: string; + /** + * Active background of dropdown + * + * @designToken autocomplete.dropdown.active.background + */ + activeBackground?: string; + /** + * Color of dropdown + * + * @designToken autocomplete.dropdown.color + */ + color?: string; + /** + * Hover color of dropdown + * + * @designToken autocomplete.dropdown.hover.color + */ + hoverColor?: string; + /** + * Active color of dropdown + * + * @designToken autocomplete.dropdown.active.color + */ + activeColor?: string; + }; /** - * Hover color of dropdown - * - * @designToken autocomplete.dropdown.hover.color - */ - hoverColor?: string; - /** - * Active color of dropdown - * - * @designToken autocomplete.dropdown.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the chip section - */ + * Used to pass tokens of the chip section + */ chip?: { - + /** + * Border radius of chip + * + * @designToken autocomplete.chip.border.radius + */ + borderRadius?: string; + }; /** - * Border radius of chip - * - * @designToken autocomplete.chip.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the empty message section - */ + * Used to pass tokens of the empty message section + */ emptyMessage?: { - - /** - * Padding of empty message - * - * @designToken autocomplete.empty.message.padding - */ - padding?: string; - } + /** + * Padding of empty message + * + * @designToken autocomplete.empty.message.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/avatar/index.d.ts b/packages/themes/types/avatar/index.d.ts index 0b451541c..093bc3c46 100644 --- a/packages/themes/types/avatar/index.d.ts +++ b/packages/themes/types/avatar/index.d.ts @@ -1,4 +1,3 @@ - /** * * Avatar Design Tokens @@ -12,107 +11,102 @@ import { ColorSchemeDesignToken } from '..'; export interface AvatarDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Width of root + * + * @designToken avatar.width + */ + width?: string; + /** + * Height of root + * + * @designToken avatar.height + */ + height?: string; + /** + * Font size of root + * + * @designToken avatar.font.size + */ + fontSize?: string; + /** + * Background of root + * + * @designToken avatar.background + */ + background?: string; + /** + * Border radius of root + * + * @designToken avatar.border.radius + */ + borderRadius?: string; + }; /** - * Width of root - * - * @designToken avatar.width - */ - width?: string; - /** - * Height of root - * - * @designToken avatar.height - */ - height?: string; - /** - * Font size of root - * - * @designToken avatar.font.size - */ - fontSize?: string; - /** - * Background of root - * - * @designToken avatar.background - */ - background?: string; - /** - * Border radius of root - * - * @designToken avatar.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the group section - */ + * Used to pass tokens of the group section + */ group?: { - + /** + * Border color of group + * + * @designToken avatar.group.border.color + */ + borderColor?: string; + /** + * Offset of group + * + * @designToken avatar.group.offset + */ + offset?: string; + }; /** - * Border color of group - * - * @designToken avatar.group.border.color - */ - borderColor?: string; - /** - * Offset of group - * - * @designToken avatar.group.offset - */ - offset?: string; - } - /** - * Used to pass tokens of the lg section - */ + * Used to pass tokens of the lg section + */ lg?: { - + /** + * Width of lg + * + * @designToken avatar.lg.width + */ + width?: string; + /** + * Height of lg + * + * @designToken avatar.lg.height + */ + height?: string; + /** + * Font size of lg + * + * @designToken avatar.lg.font.size + */ + fontSize?: string; + }; /** - * Width of lg - * - * @designToken avatar.lg.width - */ - width?: string; - /** - * Height of lg - * - * @designToken avatar.lg.height - */ - height?: string; - /** - * Font size of lg - * - * @designToken avatar.lg.font.size - */ - fontSize?: string; - } - /** - * Used to pass tokens of the xl section - */ + * Used to pass tokens of the xl section + */ xl?: { - - /** - * Width of xl - * - * @designToken avatar.xl.width - */ - width?: string; - /** - * Height of xl - * - * @designToken avatar.xl.height - */ - height?: string; - /** - * Font size of xl - * - * @designToken avatar.xl.font.size - */ - fontSize?: string; - } + /** + * Width of xl + * + * @designToken avatar.xl.width + */ + width?: string; + /** + * Height of xl + * + * @designToken avatar.xl.height + */ + height?: string; + /** + * Font size of xl + * + * @designToken avatar.xl.font.size + */ + fontSize?: string; + }; } diff --git a/packages/themes/types/badge/index.d.ts b/packages/themes/types/badge/index.d.ts index 5d25840d6..56d74a33f 100644 --- a/packages/themes/types/badge/index.d.ts +++ b/packages/themes/types/badge/index.d.ts @@ -1,4 +1,3 @@ - /** * * Badge Design Tokens @@ -12,257 +11,244 @@ import { ColorSchemeDesignToken } from '..'; export interface BadgeDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Border radius of root + * + * @designToken badge.border.radius + */ + borderRadius?: string; + /** + * Padding of root + * + * @designToken badge.padding + */ + padding?: string; + /** + * Font size of root + * + * @designToken badge.font.size + */ + fontSize?: string; + /** + * Font weight of root + * + * @designToken badge.font.weight + */ + fontWeight?: string; + /** + * Min width of root + * + * @designToken badge.min.width + */ + minWidth?: string; + /** + * Height of root + * + * @designToken badge.height + */ + height?: string; + }; /** - * Border radius of root - * - * @designToken badge.border.radius - */ - borderRadius?: string; - /** - * Padding of root - * - * @designToken badge.padding - */ - padding?: string; - /** - * Font size of root - * - * @designToken badge.font.size - */ - fontSize?: string; - /** - * Font weight of root - * - * @designToken badge.font.weight - */ - fontWeight?: string; - /** - * Min width of root - * - * @designToken badge.min.width - */ - minWidth?: string; - /** - * Height of root - * - * @designToken badge.height - */ - height?: string; - } - /** - * Used to pass tokens of the dot section - */ + * Used to pass tokens of the dot section + */ dot?: { - + /** + * Size of dot + * + * @designToken badge.dot.size + */ + size?: string; + }; /** - * Size of dot - * - * @designToken badge.dot.size - */ - size?: string; - } - /** - * Used to pass tokens of the sm section - */ + * Used to pass tokens of the sm section + */ sm?: { - + /** + * Font size of sm + * + * @designToken badge.sm.font.size + */ + fontSize?: string; + /** + * Min width of sm + * + * @designToken badge.sm.min.width + */ + minWidth?: string; + /** + * Height of sm + * + * @designToken badge.sm.height + */ + height?: string; + }; /** - * Font size of sm - * - * @designToken badge.sm.font.size - */ - fontSize?: string; - /** - * Min width of sm - * - * @designToken badge.sm.min.width - */ - minWidth?: string; - /** - * Height of sm - * - * @designToken badge.sm.height - */ - height?: string; - } - /** - * Used to pass tokens of the lg section - */ + * Used to pass tokens of the lg section + */ lg?: { - + /** + * Font size of lg + * + * @designToken badge.lg.font.size + */ + fontSize?: string; + /** + * Min width of lg + * + * @designToken badge.lg.min.width + */ + minWidth?: string; + /** + * Height of lg + * + * @designToken badge.lg.height + */ + height?: string; + }; /** - * Font size of lg - * - * @designToken badge.lg.font.size - */ - fontSize?: string; - /** - * Min width of lg - * - * @designToken badge.lg.min.width - */ - minWidth?: string; - /** - * Height of lg - * - * @designToken badge.lg.height - */ - height?: string; - } - /** - * Used to pass tokens of the xl section - */ + * Used to pass tokens of the xl section + */ xl?: { - + /** + * Font size of xl + * + * @designToken badge.xl.font.size + */ + fontSize?: string; + /** + * Min width of xl + * + * @designToken badge.xl.min.width + */ + minWidth?: string; + /** + * Height of xl + * + * @designToken badge.xl.height + */ + height?: string; + }; /** - * Font size of xl - * - * @designToken badge.xl.font.size - */ - fontSize?: string; - /** - * Min width of xl - * - * @designToken badge.xl.min.width - */ - minWidth?: string; - /** - * Height of xl - * - * @designToken badge.xl.height - */ - height?: string; - } - /** - * Used to pass tokens of the primary section - */ + * Used to pass tokens of the primary section + */ primary?: { - + /** + * Background of primary + * + * @designToken badge.primary.background + */ + background?: string; + /** + * Color of primary + * + * @designToken badge.primary.color + */ + color?: string; + }; /** - * Background of primary - * - * @designToken badge.primary.background - */ - background?: string; - /** - * Color of primary - * - * @designToken badge.primary.color - */ - color?: string; - } - /** - * Used to pass tokens of the secondary section - */ + * Used to pass tokens of the secondary section + */ secondary?: { - + /** + * Background of secondary + * + * @designToken badge.secondary.background + */ + background?: string; + /** + * Color of secondary + * + * @designToken badge.secondary.color + */ + color?: string; + }; /** - * Background of secondary - * - * @designToken badge.secondary.background - */ - background?: string; - /** - * Color of secondary - * - * @designToken badge.secondary.color - */ - color?: string; - } - /** - * Used to pass tokens of the success section - */ + * Used to pass tokens of the success section + */ success?: { - + /** + * Background of success + * + * @designToken badge.success.background + */ + background?: string; + /** + * Color of success + * + * @designToken badge.success.color + */ + color?: string; + }; /** - * Background of success - * - * @designToken badge.success.background - */ - background?: string; - /** - * Color of success - * - * @designToken badge.success.color - */ - color?: string; - } - /** - * Used to pass tokens of the info section - */ + * Used to pass tokens of the info section + */ info?: { - + /** + * Background of info + * + * @designToken badge.info.background + */ + background?: string; + /** + * Color of info + * + * @designToken badge.info.color + */ + color?: string; + }; /** - * Background of info - * - * @designToken badge.info.background - */ - background?: string; - /** - * Color of info - * - * @designToken badge.info.color - */ - color?: string; - } - /** - * Used to pass tokens of the warn section - */ + * Used to pass tokens of the warn section + */ warn?: { - + /** + * Background of warn + * + * @designToken badge.warn.background + */ + background?: string; + /** + * Color of warn + * + * @designToken badge.warn.color + */ + color?: string; + }; /** - * Background of warn - * - * @designToken badge.warn.background - */ - background?: string; - /** - * Color of warn - * - * @designToken badge.warn.color - */ - color?: string; - } - /** - * Used to pass tokens of the danger section - */ + * Used to pass tokens of the danger section + */ danger?: { - + /** + * Background of danger + * + * @designToken badge.danger.background + */ + background?: string; + /** + * Color of danger + * + * @designToken badge.danger.color + */ + color?: string; + }; /** - * Background of danger - * - * @designToken badge.danger.background - */ - background?: string; - /** - * Color of danger - * - * @designToken badge.danger.color - */ - color?: string; - } - /** - * Used to pass tokens of the contrast section - */ + * Used to pass tokens of the contrast section + */ contrast?: { - - /** - * Background of contrast - * - * @designToken badge.contrast.background - */ - background?: string; - /** - * Color of contrast - * - * @designToken badge.contrast.color - */ - color?: string; - } + /** + * Background of contrast + * + * @designToken badge.contrast.background + */ + background?: string; + /** + * Color of contrast + * + * @designToken badge.contrast.color + */ + color?: string; + }; } diff --git a/packages/themes/types/blockui/index.d.ts b/packages/themes/types/blockui/index.d.ts index 29a2ccf94..a5ee1e870 100644 --- a/packages/themes/types/blockui/index.d.ts +++ b/packages/themes/types/blockui/index.d.ts @@ -1,4 +1,3 @@ - /** * * BlockUI Design Tokens @@ -12,17 +11,15 @@ import { ColorSchemeDesignToken } from '..'; export interface BlockUIDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken blockui.border.radius - */ - borderRadius?: string; - } + /** + * Border radius of root + * + * @designToken blockui.border.radius + */ + borderRadius?: string; + }; } diff --git a/packages/themes/types/breadcrumb/index.d.ts b/packages/themes/types/breadcrumb/index.d.ts index 96b397628..2af333e22 100644 --- a/packages/themes/types/breadcrumb/index.d.ts +++ b/packages/themes/types/breadcrumb/index.d.ts @@ -1,4 +1,3 @@ - /** * * Breadcrumb Design Tokens @@ -12,113 +11,108 @@ import { ColorSchemeDesignToken } from '..'; export interface BreadcrumbDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Padding of root - * - * @designToken breadcrumb.padding - */ - padding?: string; - /** - * Background of root - * - * @designToken breadcrumb.background - */ - background?: string; - /** - * Gap of root - * - * @designToken breadcrumb.gap - */ - gap?: string; - /** - * Transition duration of root - * - * @designToken breadcrumb.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the item section - */ - item?: { - - /** - * Color of item - * - * @designToken breadcrumb.item.color - */ - color?: string; - /** - * Hover color of item - * - * @designToken breadcrumb.item.hover.color - */ - hoverColor?: string; - /** - * Icon color of item - * - * @designToken breadcrumb.item.icon.color - */ - iconColor?: string; - /** - * Border radius of item - * - * @designToken breadcrumb.item.border.radius - */ - borderRadius?: string; - /** - * Focus ring of item - */ - focusRing?: { - - /** - * Focus ring width of item - * - * @designToken breadcrumb.item.focus.ring.width - */ - width?: string; - /** - * Focus ring style of item - * - * @designToken breadcrumb.item.focus.ring.style - */ - style?: string; - /** - * Focus ring color of item - * - * @designToken breadcrumb.item.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of item - * - * @designToken breadcrumb.item.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of item - * - * @designToken breadcrumb.item.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of root + * + * @designToken breadcrumb.padding + */ + padding?: string; + /** + * Background of root + * + * @designToken breadcrumb.background + */ + background?: string; + /** + * Gap of root + * + * @designToken breadcrumb.gap + */ + gap?: string; + /** + * Transition duration of root + * + * @designToken breadcrumb.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the separator section - */ + * Used to pass tokens of the item section + */ + item?: { + /** + * Color of item + * + * @designToken breadcrumb.item.color + */ + color?: string; + /** + * Hover color of item + * + * @designToken breadcrumb.item.hover.color + */ + hoverColor?: string; + /** + * Icon color of item + * + * @designToken breadcrumb.item.icon.color + */ + iconColor?: string; + /** + * Border radius of item + * + * @designToken breadcrumb.item.border.radius + */ + borderRadius?: string; + /** + * Focus ring of item + */ + focusRing?: { + /** + * Focus ring width of item + * + * @designToken breadcrumb.item.focus.ring.width + */ + width?: string; + /** + * Focus ring style of item + * + * @designToken breadcrumb.item.focus.ring.style + */ + style?: string; + /** + * Focus ring color of item + * + * @designToken breadcrumb.item.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of item + * + * @designToken breadcrumb.item.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of item + * + * @designToken breadcrumb.item.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the separator section + */ separator?: { - - /** - * Color of separator - * - * @designToken breadcrumb.separator.color - */ - color?: string; - } + /** + * Color of separator + * + * @designToken breadcrumb.separator.color + */ + color?: string; + }; } diff --git a/packages/themes/types/button/index.d.ts b/packages/themes/types/button/index.d.ts index 512cb519f..1b51ffccb 100644 --- a/packages/themes/types/button/index.d.ts +++ b/packages/themes/types/button/index.d.ts @@ -1,4 +1,3 @@ - /** * * Button Design Tokens @@ -12,1271 +11,1229 @@ import { ColorSchemeDesignToken } from '..'; export interface ButtonDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken button.border.radius - */ - borderRadius?: string; - /** - * Rounded border radius of root - * - * @designToken button.rounded.border.radius - */ - roundedBorderRadius?: string; - /** - * Gap of root - * - * @designToken button.gap - */ - gap?: string; - /** - * Padding x of root - * - * @designToken button.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken button.padding.y - */ - paddingY?: string; - /** - * Icon only width of root - * - * @designToken button.icon.only.width - */ - iconOnlyWidth?: string; - /** - * Sm of root - */ - sm?: { - - /** - * Sm font size of root - * - * @designToken button.sm.font.size - */ - fontSize?: string; - /** - * Sm padding x of root - * - * @designToken button.sm.padding.x - */ - paddingX?: string; - /** - * Sm padding y of root - * - * @designToken button.sm.padding.y - */ - paddingY?: string; + /** + * Border radius of root + * + * @designToken button.border.radius + */ + borderRadius?: string; + /** + * Rounded border radius of root + * + * @designToken button.rounded.border.radius + */ + roundedBorderRadius?: string; + /** + * Gap of root + * + * @designToken button.gap + */ + gap?: string; + /** + * Padding x of root + * + * @designToken button.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken button.padding.y + */ + paddingY?: string; + /** + * Icon only width of root + * + * @designToken button.icon.only.width + */ + iconOnlyWidth?: string; + /** + * Sm of root + */ + sm?: { + /** + * Sm font size of root + * + * @designToken button.sm.font.size + */ + fontSize?: string; + /** + * Sm padding x of root + * + * @designToken button.sm.padding.x + */ + paddingX?: string; + /** + * Sm padding y of root + * + * @designToken button.sm.padding.y + */ + paddingY?: string; + }; + /** + * Lg of root + */ + lg?: { + /** + * Lg font size of root + * + * @designToken button.lg.font.size + */ + fontSize?: string; + /** + * Lg padding x of root + * + * @designToken button.lg.padding.x + */ + paddingX?: string; + /** + * Lg padding y of root + * + * @designToken button.lg.padding.y + */ + paddingY?: string; + }; + /** + * Label of root + */ + label?: { + /** + * Label font weight of root + * + * @designToken button.label.font.weight + */ + fontWeight?: string; + }; + /** + * Raised shadow of root + * + * @designToken button.raised.shadow + */ + raisedShadow?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken button.focus.ring.style + */ + style?: string; + /** + * Focus ring offset of root + * + * @designToken button.focus.ring.offset + */ + offset?: string; + }; + /** + * Badge size of root + * + * @designToken button.badge.size + */ + badgeSize?: string; + /** + * Transition duration of root + * + * @designToken button.transition.duration + */ + transitionDuration?: string; + /** + * Primary of root + */ + primary?: { + /** + * Primary background of root + * + * @designToken button.primary.background + */ + background?: string; + /** + * Primary hover background of root + * + * @designToken button.primary.hover.background + */ + hoverBackground?: string; + /** + * Primary active background of root + * + * @designToken button.primary.active.background + */ + activeBackground?: string; + /** + * Primary border color of root + * + * @designToken button.primary.border.color + */ + borderColor?: string; + /** + * Primary hover border color of root + * + * @designToken button.primary.hover.border.color + */ + hoverBorderColor?: string; + /** + * Primary active border color of root + * + * @designToken button.primary.active.border.color + */ + activeBorderColor?: string; + /** + * Primary color of root + * + * @designToken button.primary.color + */ + color?: string; + /** + * Primary hover color of root + * + * @designToken button.primary.hover.color + */ + hoverColor?: string; + /** + * Primary active color of root + * + * @designToken button.primary.active.color + */ + activeColor?: string; + /** + * Primary focus ring of root + */ + focusRing?: { + /** + * Primary focus ring color of root + * + * @designToken button.primary.focus.ring.color + */ + color?: string; + /** + * Primary focus ring shadow of root + * + * @designToken button.primary.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Secondary of root + */ + secondary?: { + /** + * Secondary background of root + * + * @designToken button.secondary.background + */ + background?: string; + /** + * Secondary hover background of root + * + * @designToken button.secondary.hover.background + */ + hoverBackground?: string; + /** + * Secondary active background of root + * + * @designToken button.secondary.active.background + */ + activeBackground?: string; + /** + * Secondary border color of root + * + * @designToken button.secondary.border.color + */ + borderColor?: string; + /** + * Secondary hover border color of root + * + * @designToken button.secondary.hover.border.color + */ + hoverBorderColor?: string; + /** + * Secondary active border color of root + * + * @designToken button.secondary.active.border.color + */ + activeBorderColor?: string; + /** + * Secondary color of root + * + * @designToken button.secondary.color + */ + color?: string; + /** + * Secondary hover color of root + * + * @designToken button.secondary.hover.color + */ + hoverColor?: string; + /** + * Secondary active color of root + * + * @designToken button.secondary.active.color + */ + activeColor?: string; + /** + * Secondary focus ring of root + */ + focusRing?: { + /** + * Secondary focus ring color of root + * + * @designToken button.secondary.focus.ring.color + */ + color?: string; + /** + * Secondary focus ring shadow of root + * + * @designToken button.secondary.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Info of root + */ + info?: { + /** + * Info background of root + * + * @designToken button.info.background + */ + background?: string; + /** + * Info hover background of root + * + * @designToken button.info.hover.background + */ + hoverBackground?: string; + /** + * Info active background of root + * + * @designToken button.info.active.background + */ + activeBackground?: string; + /** + * Info border color of root + * + * @designToken button.info.border.color + */ + borderColor?: string; + /** + * Info hover border color of root + * + * @designToken button.info.hover.border.color + */ + hoverBorderColor?: string; + /** + * Info active border color of root + * + * @designToken button.info.active.border.color + */ + activeBorderColor?: string; + /** + * Info color of root + * + * @designToken button.info.color + */ + color?: string; + /** + * Info hover color of root + * + * @designToken button.info.hover.color + */ + hoverColor?: string; + /** + * Info active color of root + * + * @designToken button.info.active.color + */ + activeColor?: string; + /** + * Info focus ring of root + */ + focusRing?: { + /** + * Info focus ring color of root + * + * @designToken button.info.focus.ring.color + */ + color?: string; + /** + * Info focus ring shadow of root + * + * @designToken button.info.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Success of root + */ + success?: { + /** + * Success background of root + * + * @designToken button.success.background + */ + background?: string; + /** + * Success hover background of root + * + * @designToken button.success.hover.background + */ + hoverBackground?: string; + /** + * Success active background of root + * + * @designToken button.success.active.background + */ + activeBackground?: string; + /** + * Success border color of root + * + * @designToken button.success.border.color + */ + borderColor?: string; + /** + * Success hover border color of root + * + * @designToken button.success.hover.border.color + */ + hoverBorderColor?: string; + /** + * Success active border color of root + * + * @designToken button.success.active.border.color + */ + activeBorderColor?: string; + /** + * Success color of root + * + * @designToken button.success.color + */ + color?: string; + /** + * Success hover color of root + * + * @designToken button.success.hover.color + */ + hoverColor?: string; + /** + * Success active color of root + * + * @designToken button.success.active.color + */ + activeColor?: string; + /** + * Success focus ring of root + */ + focusRing?: { + /** + * Success focus ring color of root + * + * @designToken button.success.focus.ring.color + */ + color?: string; + /** + * Success focus ring shadow of root + * + * @designToken button.success.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Warn of root + */ + warn?: { + /** + * Warn background of root + * + * @designToken button.warn.background + */ + background?: string; + /** + * Warn hover background of root + * + * @designToken button.warn.hover.background + */ + hoverBackground?: string; + /** + * Warn active background of root + * + * @designToken button.warn.active.background + */ + activeBackground?: string; + /** + * Warn border color of root + * + * @designToken button.warn.border.color + */ + borderColor?: string; + /** + * Warn hover border color of root + * + * @designToken button.warn.hover.border.color + */ + hoverBorderColor?: string; + /** + * Warn active border color of root + * + * @designToken button.warn.active.border.color + */ + activeBorderColor?: string; + /** + * Warn color of root + * + * @designToken button.warn.color + */ + color?: string; + /** + * Warn hover color of root + * + * @designToken button.warn.hover.color + */ + hoverColor?: string; + /** + * Warn active color of root + * + * @designToken button.warn.active.color + */ + activeColor?: string; + /** + * Warn focus ring of root + */ + focusRing?: { + /** + * Warn focus ring color of root + * + * @designToken button.warn.focus.ring.color + */ + color?: string; + /** + * Warn focus ring shadow of root + * + * @designToken button.warn.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Help of root + */ + help?: { + /** + * Help background of root + * + * @designToken button.help.background + */ + background?: string; + /** + * Help hover background of root + * + * @designToken button.help.hover.background + */ + hoverBackground?: string; + /** + * Help active background of root + * + * @designToken button.help.active.background + */ + activeBackground?: string; + /** + * Help border color of root + * + * @designToken button.help.border.color + */ + borderColor?: string; + /** + * Help hover border color of root + * + * @designToken button.help.hover.border.color + */ + hoverBorderColor?: string; + /** + * Help active border color of root + * + * @designToken button.help.active.border.color + */ + activeBorderColor?: string; + /** + * Help color of root + * + * @designToken button.help.color + */ + color?: string; + /** + * Help hover color of root + * + * @designToken button.help.hover.color + */ + hoverColor?: string; + /** + * Help active color of root + * + * @designToken button.help.active.color + */ + activeColor?: string; + /** + * Help focus ring of root + */ + focusRing?: { + /** + * Help focus ring color of root + * + * @designToken button.help.focus.ring.color + */ + color?: string; + /** + * Help focus ring shadow of root + * + * @designToken button.help.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Danger of root + */ + danger?: { + /** + * Danger background of root + * + * @designToken button.danger.background + */ + background?: string; + /** + * Danger hover background of root + * + * @designToken button.danger.hover.background + */ + hoverBackground?: string; + /** + * Danger active background of root + * + * @designToken button.danger.active.background + */ + activeBackground?: string; + /** + * Danger border color of root + * + * @designToken button.danger.border.color + */ + borderColor?: string; + /** + * Danger hover border color of root + * + * @designToken button.danger.hover.border.color + */ + hoverBorderColor?: string; + /** + * Danger active border color of root + * + * @designToken button.danger.active.border.color + */ + activeBorderColor?: string; + /** + * Danger color of root + * + * @designToken button.danger.color + */ + color?: string; + /** + * Danger hover color of root + * + * @designToken button.danger.hover.color + */ + hoverColor?: string; + /** + * Danger active color of root + * + * @designToken button.danger.active.color + */ + activeColor?: string; + /** + * Danger focus ring of root + */ + focusRing?: { + /** + * Danger focus ring color of root + * + * @designToken button.danger.focus.ring.color + */ + color?: string; + /** + * Danger focus ring shadow of root + * + * @designToken button.danger.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Contrast of root + */ + contrast?: { + /** + * Contrast background of root + * + * @designToken button.contrast.background + */ + background?: string; + /** + * Contrast hover background of root + * + * @designToken button.contrast.hover.background + */ + hoverBackground?: string; + /** + * Contrast active background of root + * + * @designToken button.contrast.active.background + */ + activeBackground?: string; + /** + * Contrast border color of root + * + * @designToken button.contrast.border.color + */ + borderColor?: string; + /** + * Contrast hover border color of root + * + * @designToken button.contrast.hover.border.color + */ + hoverBorderColor?: string; + /** + * Contrast active border color of root + * + * @designToken button.contrast.active.border.color + */ + activeBorderColor?: string; + /** + * Contrast color of root + * + * @designToken button.contrast.color + */ + color?: string; + /** + * Contrast hover color of root + * + * @designToken button.contrast.hover.color + */ + hoverColor?: string; + /** + * Contrast active color of root + * + * @designToken button.contrast.active.color + */ + activeColor?: string; + /** + * Contrast focus ring of root + */ + focusRing?: { + /** + * Contrast focus ring color of root + * + * @designToken button.contrast.focus.ring.color + */ + color?: string; + /** + * Contrast focus ring shadow of root + * + * @designToken button.contrast.focus.ring.shadow + */ + shadow?: string; + }; + }; }; /** - * Lg of root - */ - lg?: { - - /** - * Lg font size of root - * - * @designToken button.lg.font.size - */ - fontSize?: string; - /** - * Lg padding x of root - * - * @designToken button.lg.padding.x - */ - paddingX?: string; - /** - * Lg padding y of root - * - * @designToken button.lg.padding.y - */ - paddingY?: string; - }; - /** - * Label of root - */ - label?: { - - /** - * Label font weight of root - * - * @designToken button.label.font.weight - */ - fontWeight?: string; - }; - /** - * Raised shadow of root - * - * @designToken button.raised.shadow - */ - raisedShadow?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken button.focus.ring.style - */ - style?: string; - /** - * Focus ring offset of root - * - * @designToken button.focus.ring.offset - */ - offset?: string; - }; - /** - * Badge size of root - * - * @designToken button.badge.size - */ - badgeSize?: string; - /** - * Transition duration of root - * - * @designToken button.transition.duration - */ - transitionDuration?: string; - /** - * Primary of root - */ - primary?: { - - /** - * Primary background of root - * - * @designToken button.primary.background - */ - background?: string; - /** - * Primary hover background of root - * - * @designToken button.primary.hover.background - */ - hoverBackground?: string; - /** - * Primary active background of root - * - * @designToken button.primary.active.background - */ - activeBackground?: string; - /** - * Primary border color of root - * - * @designToken button.primary.border.color - */ - borderColor?: string; - /** - * Primary hover border color of root - * - * @designToken button.primary.hover.border.color - */ - hoverBorderColor?: string; - /** - * Primary active border color of root - * - * @designToken button.primary.active.border.color - */ - activeBorderColor?: string; - /** - * Primary color of root - * - * @designToken button.primary.color - */ - color?: string; - /** - * Primary hover color of root - * - * @designToken button.primary.hover.color - */ - hoverColor?: string; - /** - * Primary active color of root - * - * @designToken button.primary.active.color - */ - activeColor?: string; - /** - * Primary focus ring of root - */ - focusRing?: { - - /** - * Primary focus ring color of root - * - * @designToken button.primary.focus.ring.color - */ - color?: string; - /** - * Primary focus ring shadow of root - * - * @designToken button.primary.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Secondary of root - */ - secondary?: { - - /** - * Secondary background of root - * - * @designToken button.secondary.background - */ - background?: string; - /** - * Secondary hover background of root - * - * @designToken button.secondary.hover.background - */ - hoverBackground?: string; - /** - * Secondary active background of root - * - * @designToken button.secondary.active.background - */ - activeBackground?: string; - /** - * Secondary border color of root - * - * @designToken button.secondary.border.color - */ - borderColor?: string; - /** - * Secondary hover border color of root - * - * @designToken button.secondary.hover.border.color - */ - hoverBorderColor?: string; - /** - * Secondary active border color of root - * - * @designToken button.secondary.active.border.color - */ - activeBorderColor?: string; - /** - * Secondary color of root - * - * @designToken button.secondary.color - */ - color?: string; - /** - * Secondary hover color of root - * - * @designToken button.secondary.hover.color - */ - hoverColor?: string; - /** - * Secondary active color of root - * - * @designToken button.secondary.active.color - */ - activeColor?: string; - /** - * Secondary focus ring of root - */ - focusRing?: { - - /** - * Secondary focus ring color of root - * - * @designToken button.secondary.focus.ring.color - */ - color?: string; - /** - * Secondary focus ring shadow of root - * - * @designToken button.secondary.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Info of root - */ - info?: { - - /** - * Info background of root - * - * @designToken button.info.background - */ - background?: string; - /** - * Info hover background of root - * - * @designToken button.info.hover.background - */ - hoverBackground?: string; - /** - * Info active background of root - * - * @designToken button.info.active.background - */ - activeBackground?: string; - /** - * Info border color of root - * - * @designToken button.info.border.color - */ - borderColor?: string; - /** - * Info hover border color of root - * - * @designToken button.info.hover.border.color - */ - hoverBorderColor?: string; - /** - * Info active border color of root - * - * @designToken button.info.active.border.color - */ - activeBorderColor?: string; - /** - * Info color of root - * - * @designToken button.info.color - */ - color?: string; - /** - * Info hover color of root - * - * @designToken button.info.hover.color - */ - hoverColor?: string; - /** - * Info active color of root - * - * @designToken button.info.active.color - */ - activeColor?: string; - /** - * Info focus ring of root - */ - focusRing?: { - - /** - * Info focus ring color of root - * - * @designToken button.info.focus.ring.color - */ - color?: string; - /** - * Info focus ring shadow of root - * - * @designToken button.info.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Success of root - */ - success?: { - - /** - * Success background of root - * - * @designToken button.success.background - */ - background?: string; - /** - * Success hover background of root - * - * @designToken button.success.hover.background - */ - hoverBackground?: string; - /** - * Success active background of root - * - * @designToken button.success.active.background - */ - activeBackground?: string; - /** - * Success border color of root - * - * @designToken button.success.border.color - */ - borderColor?: string; - /** - * Success hover border color of root - * - * @designToken button.success.hover.border.color - */ - hoverBorderColor?: string; - /** - * Success active border color of root - * - * @designToken button.success.active.border.color - */ - activeBorderColor?: string; - /** - * Success color of root - * - * @designToken button.success.color - */ - color?: string; - /** - * Success hover color of root - * - * @designToken button.success.hover.color - */ - hoverColor?: string; - /** - * Success active color of root - * - * @designToken button.success.active.color - */ - activeColor?: string; - /** - * Success focus ring of root - */ - focusRing?: { - - /** - * Success focus ring color of root - * - * @designToken button.success.focus.ring.color - */ - color?: string; - /** - * Success focus ring shadow of root - * - * @designToken button.success.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Warn of root - */ - warn?: { - - /** - * Warn background of root - * - * @designToken button.warn.background - */ - background?: string; - /** - * Warn hover background of root - * - * @designToken button.warn.hover.background - */ - hoverBackground?: string; - /** - * Warn active background of root - * - * @designToken button.warn.active.background - */ - activeBackground?: string; - /** - * Warn border color of root - * - * @designToken button.warn.border.color - */ - borderColor?: string; - /** - * Warn hover border color of root - * - * @designToken button.warn.hover.border.color - */ - hoverBorderColor?: string; - /** - * Warn active border color of root - * - * @designToken button.warn.active.border.color - */ - activeBorderColor?: string; - /** - * Warn color of root - * - * @designToken button.warn.color - */ - color?: string; - /** - * Warn hover color of root - * - * @designToken button.warn.hover.color - */ - hoverColor?: string; - /** - * Warn active color of root - * - * @designToken button.warn.active.color - */ - activeColor?: string; - /** - * Warn focus ring of root - */ - focusRing?: { - - /** - * Warn focus ring color of root - * - * @designToken button.warn.focus.ring.color - */ - color?: string; - /** - * Warn focus ring shadow of root - * - * @designToken button.warn.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Help of root - */ - help?: { - - /** - * Help background of root - * - * @designToken button.help.background - */ - background?: string; - /** - * Help hover background of root - * - * @designToken button.help.hover.background - */ - hoverBackground?: string; - /** - * Help active background of root - * - * @designToken button.help.active.background - */ - activeBackground?: string; - /** - * Help border color of root - * - * @designToken button.help.border.color - */ - borderColor?: string; - /** - * Help hover border color of root - * - * @designToken button.help.hover.border.color - */ - hoverBorderColor?: string; - /** - * Help active border color of root - * - * @designToken button.help.active.border.color - */ - activeBorderColor?: string; - /** - * Help color of root - * - * @designToken button.help.color - */ - color?: string; - /** - * Help hover color of root - * - * @designToken button.help.hover.color - */ - hoverColor?: string; - /** - * Help active color of root - * - * @designToken button.help.active.color - */ - activeColor?: string; - /** - * Help focus ring of root - */ - focusRing?: { - - /** - * Help focus ring color of root - * - * @designToken button.help.focus.ring.color - */ - color?: string; - /** - * Help focus ring shadow of root - * - * @designToken button.help.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Danger of root - */ - danger?: { - - /** - * Danger background of root - * - * @designToken button.danger.background - */ - background?: string; - /** - * Danger hover background of root - * - * @designToken button.danger.hover.background - */ - hoverBackground?: string; - /** - * Danger active background of root - * - * @designToken button.danger.active.background - */ - activeBackground?: string; - /** - * Danger border color of root - * - * @designToken button.danger.border.color - */ - borderColor?: string; - /** - * Danger hover border color of root - * - * @designToken button.danger.hover.border.color - */ - hoverBorderColor?: string; - /** - * Danger active border color of root - * - * @designToken button.danger.active.border.color - */ - activeBorderColor?: string; - /** - * Danger color of root - * - * @designToken button.danger.color - */ - color?: string; - /** - * Danger hover color of root - * - * @designToken button.danger.hover.color - */ - hoverColor?: string; - /** - * Danger active color of root - * - * @designToken button.danger.active.color - */ - activeColor?: string; - /** - * Danger focus ring of root - */ - focusRing?: { - - /** - * Danger focus ring color of root - * - * @designToken button.danger.focus.ring.color - */ - color?: string; - /** - * Danger focus ring shadow of root - * - * @designToken button.danger.focus.ring.shadow - */ - shadow?: string; - }; - }; - /** - * Contrast of root - */ - contrast?: { - - /** - * Contrast background of root - * - * @designToken button.contrast.background - */ - background?: string; - /** - * Contrast hover background of root - * - * @designToken button.contrast.hover.background - */ - hoverBackground?: string; - /** - * Contrast active background of root - * - * @designToken button.contrast.active.background - */ - activeBackground?: string; - /** - * Contrast border color of root - * - * @designToken button.contrast.border.color - */ - borderColor?: string; - /** - * Contrast hover border color of root - * - * @designToken button.contrast.hover.border.color - */ - hoverBorderColor?: string; - /** - * Contrast active border color of root - * - * @designToken button.contrast.active.border.color - */ - activeBorderColor?: string; - /** - * Contrast color of root - * - * @designToken button.contrast.color - */ - color?: string; - /** - * Contrast hover color of root - * - * @designToken button.contrast.hover.color - */ - hoverColor?: string; - /** - * Contrast active color of root - * - * @designToken button.contrast.active.color - */ - activeColor?: string; - /** - * Contrast focus ring of root - */ - focusRing?: { - - /** - * Contrast focus ring color of root - * - * @designToken button.contrast.focus.ring.color - */ - color?: string; - /** - * Contrast focus ring shadow of root - * - * @designToken button.contrast.focus.ring.shadow - */ - shadow?: string; - }; - }; - } - /** - * Used to pass tokens of the outlined section - */ + * Used to pass tokens of the outlined section + */ outlined?: { - - /** - * Primary of outlined - */ - primary?: { - - /** - * Primary hover background of outlined - * - * @designToken button.outlined.primary.hover.background - */ - hoverBackground?: string; - /** - * Primary active background of outlined - * - * @designToken button.outlined.primary.active.background - */ - activeBackground?: string; - /** - * Primary border color of outlined - * - * @designToken button.outlined.primary.border.color - */ - borderColor?: string; - /** - * Primary color of outlined - * - * @designToken button.outlined.primary.color - */ - color?: string; + /** + * Primary of outlined + */ + primary?: { + /** + * Primary hover background of outlined + * + * @designToken button.outlined.primary.hover.background + */ + hoverBackground?: string; + /** + * Primary active background of outlined + * + * @designToken button.outlined.primary.active.background + */ + activeBackground?: string; + /** + * Primary border color of outlined + * + * @designToken button.outlined.primary.border.color + */ + borderColor?: string; + /** + * Primary color of outlined + * + * @designToken button.outlined.primary.color + */ + color?: string; + }; + /** + * Secondary of outlined + */ + secondary?: { + /** + * Secondary hover background of outlined + * + * @designToken button.outlined.secondary.hover.background + */ + hoverBackground?: string; + /** + * Secondary active background of outlined + * + * @designToken button.outlined.secondary.active.background + */ + activeBackground?: string; + /** + * Secondary border color of outlined + * + * @designToken button.outlined.secondary.border.color + */ + borderColor?: string; + /** + * Secondary color of outlined + * + * @designToken button.outlined.secondary.color + */ + color?: string; + }; + /** + * Success of outlined + */ + success?: { + /** + * Success hover background of outlined + * + * @designToken button.outlined.success.hover.background + */ + hoverBackground?: string; + /** + * Success active background of outlined + * + * @designToken button.outlined.success.active.background + */ + activeBackground?: string; + /** + * Success border color of outlined + * + * @designToken button.outlined.success.border.color + */ + borderColor?: string; + /** + * Success color of outlined + * + * @designToken button.outlined.success.color + */ + color?: string; + }; + /** + * Info of outlined + */ + info?: { + /** + * Info hover background of outlined + * + * @designToken button.outlined.info.hover.background + */ + hoverBackground?: string; + /** + * Info active background of outlined + * + * @designToken button.outlined.info.active.background + */ + activeBackground?: string; + /** + * Info border color of outlined + * + * @designToken button.outlined.info.border.color + */ + borderColor?: string; + /** + * Info color of outlined + * + * @designToken button.outlined.info.color + */ + color?: string; + }; + /** + * Warn of outlined + */ + warn?: { + /** + * Warn hover background of outlined + * + * @designToken button.outlined.warn.hover.background + */ + hoverBackground?: string; + /** + * Warn active background of outlined + * + * @designToken button.outlined.warn.active.background + */ + activeBackground?: string; + /** + * Warn border color of outlined + * + * @designToken button.outlined.warn.border.color + */ + borderColor?: string; + /** + * Warn color of outlined + * + * @designToken button.outlined.warn.color + */ + color?: string; + }; + /** + * Help of outlined + */ + help?: { + /** + * Help hover background of outlined + * + * @designToken button.outlined.help.hover.background + */ + hoverBackground?: string; + /** + * Help active background of outlined + * + * @designToken button.outlined.help.active.background + */ + activeBackground?: string; + /** + * Help border color of outlined + * + * @designToken button.outlined.help.border.color + */ + borderColor?: string; + /** + * Help color of outlined + * + * @designToken button.outlined.help.color + */ + color?: string; + }; + /** + * Danger of outlined + */ + danger?: { + /** + * Danger hover background of outlined + * + * @designToken button.outlined.danger.hover.background + */ + hoverBackground?: string; + /** + * Danger active background of outlined + * + * @designToken button.outlined.danger.active.background + */ + activeBackground?: string; + /** + * Danger border color of outlined + * + * @designToken button.outlined.danger.border.color + */ + borderColor?: string; + /** + * Danger color of outlined + * + * @designToken button.outlined.danger.color + */ + color?: string; + }; + /** + * Contrast of outlined + */ + contrast?: { + /** + * Contrast hover background of outlined + * + * @designToken button.outlined.contrast.hover.background + */ + hoverBackground?: string; + /** + * Contrast active background of outlined + * + * @designToken button.outlined.contrast.active.background + */ + activeBackground?: string; + /** + * Contrast border color of outlined + * + * @designToken button.outlined.contrast.border.color + */ + borderColor?: string; + /** + * Contrast color of outlined + * + * @designToken button.outlined.contrast.color + */ + color?: string; + }; + /** + * Plain of outlined + */ + plain?: { + /** + * Plain hover background of outlined + * + * @designToken button.outlined.plain.hover.background + */ + hoverBackground?: string; + /** + * Plain active background of outlined + * + * @designToken button.outlined.plain.active.background + */ + activeBackground?: string; + /** + * Plain border color of outlined + * + * @designToken button.outlined.plain.border.color + */ + borderColor?: string; + /** + * Plain color of outlined + * + * @designToken button.outlined.plain.color + */ + color?: string; + }; }; /** - * Secondary of outlined - */ - secondary?: { - - /** - * Secondary hover background of outlined - * - * @designToken button.outlined.secondary.hover.background - */ - hoverBackground?: string; - /** - * Secondary active background of outlined - * - * @designToken button.outlined.secondary.active.background - */ - activeBackground?: string; - /** - * Secondary border color of outlined - * - * @designToken button.outlined.secondary.border.color - */ - borderColor?: string; - /** - * Secondary color of outlined - * - * @designToken button.outlined.secondary.color - */ - color?: string; - }; - /** - * Success of outlined - */ - success?: { - - /** - * Success hover background of outlined - * - * @designToken button.outlined.success.hover.background - */ - hoverBackground?: string; - /** - * Success active background of outlined - * - * @designToken button.outlined.success.active.background - */ - activeBackground?: string; - /** - * Success border color of outlined - * - * @designToken button.outlined.success.border.color - */ - borderColor?: string; - /** - * Success color of outlined - * - * @designToken button.outlined.success.color - */ - color?: string; - }; - /** - * Info of outlined - */ - info?: { - - /** - * Info hover background of outlined - * - * @designToken button.outlined.info.hover.background - */ - hoverBackground?: string; - /** - * Info active background of outlined - * - * @designToken button.outlined.info.active.background - */ - activeBackground?: string; - /** - * Info border color of outlined - * - * @designToken button.outlined.info.border.color - */ - borderColor?: string; - /** - * Info color of outlined - * - * @designToken button.outlined.info.color - */ - color?: string; - }; - /** - * Warn of outlined - */ - warn?: { - - /** - * Warn hover background of outlined - * - * @designToken button.outlined.warn.hover.background - */ - hoverBackground?: string; - /** - * Warn active background of outlined - * - * @designToken button.outlined.warn.active.background - */ - activeBackground?: string; - /** - * Warn border color of outlined - * - * @designToken button.outlined.warn.border.color - */ - borderColor?: string; - /** - * Warn color of outlined - * - * @designToken button.outlined.warn.color - */ - color?: string; - }; - /** - * Help of outlined - */ - help?: { - - /** - * Help hover background of outlined - * - * @designToken button.outlined.help.hover.background - */ - hoverBackground?: string; - /** - * Help active background of outlined - * - * @designToken button.outlined.help.active.background - */ - activeBackground?: string; - /** - * Help border color of outlined - * - * @designToken button.outlined.help.border.color - */ - borderColor?: string; - /** - * Help color of outlined - * - * @designToken button.outlined.help.color - */ - color?: string; - }; - /** - * Danger of outlined - */ - danger?: { - - /** - * Danger hover background of outlined - * - * @designToken button.outlined.danger.hover.background - */ - hoverBackground?: string; - /** - * Danger active background of outlined - * - * @designToken button.outlined.danger.active.background - */ - activeBackground?: string; - /** - * Danger border color of outlined - * - * @designToken button.outlined.danger.border.color - */ - borderColor?: string; - /** - * Danger color of outlined - * - * @designToken button.outlined.danger.color - */ - color?: string; - }; - /** - * Contrast of outlined - */ - contrast?: { - - /** - * Contrast hover background of outlined - * - * @designToken button.outlined.contrast.hover.background - */ - hoverBackground?: string; - /** - * Contrast active background of outlined - * - * @designToken button.outlined.contrast.active.background - */ - activeBackground?: string; - /** - * Contrast border color of outlined - * - * @designToken button.outlined.contrast.border.color - */ - borderColor?: string; - /** - * Contrast color of outlined - * - * @designToken button.outlined.contrast.color - */ - color?: string; - }; - /** - * Plain of outlined - */ - plain?: { - - /** - * Plain hover background of outlined - * - * @designToken button.outlined.plain.hover.background - */ - hoverBackground?: string; - /** - * Plain active background of outlined - * - * @designToken button.outlined.plain.active.background - */ - activeBackground?: string; - /** - * Plain border color of outlined - * - * @designToken button.outlined.plain.border.color - */ - borderColor?: string; - /** - * Plain color of outlined - * - * @designToken button.outlined.plain.color - */ - color?: string; - }; - } - /** - * Used to pass tokens of the text section - */ + * Used to pass tokens of the text section + */ text?: { - - /** - * Primary of text - */ - primary?: { - - /** - * Primary hover background of text - * - * @designToken button.text.primary.hover.background - */ - hoverBackground?: string; - /** - * Primary active background of text - * - * @designToken button.text.primary.active.background - */ - activeBackground?: string; - /** - * Primary color of text - * - * @designToken button.text.primary.color - */ - color?: string; + /** + * Primary of text + */ + primary?: { + /** + * Primary hover background of text + * + * @designToken button.text.primary.hover.background + */ + hoverBackground?: string; + /** + * Primary active background of text + * + * @designToken button.text.primary.active.background + */ + activeBackground?: string; + /** + * Primary color of text + * + * @designToken button.text.primary.color + */ + color?: string; + }; + /** + * Secondary of text + */ + secondary?: { + /** + * Secondary hover background of text + * + * @designToken button.text.secondary.hover.background + */ + hoverBackground?: string; + /** + * Secondary active background of text + * + * @designToken button.text.secondary.active.background + */ + activeBackground?: string; + /** + * Secondary color of text + * + * @designToken button.text.secondary.color + */ + color?: string; + }; + /** + * Success of text + */ + success?: { + /** + * Success hover background of text + * + * @designToken button.text.success.hover.background + */ + hoverBackground?: string; + /** + * Success active background of text + * + * @designToken button.text.success.active.background + */ + activeBackground?: string; + /** + * Success color of text + * + * @designToken button.text.success.color + */ + color?: string; + }; + /** + * Info of text + */ + info?: { + /** + * Info hover background of text + * + * @designToken button.text.info.hover.background + */ + hoverBackground?: string; + /** + * Info active background of text + * + * @designToken button.text.info.active.background + */ + activeBackground?: string; + /** + * Info color of text + * + * @designToken button.text.info.color + */ + color?: string; + }; + /** + * Warn of text + */ + warn?: { + /** + * Warn hover background of text + * + * @designToken button.text.warn.hover.background + */ + hoverBackground?: string; + /** + * Warn active background of text + * + * @designToken button.text.warn.active.background + */ + activeBackground?: string; + /** + * Warn color of text + * + * @designToken button.text.warn.color + */ + color?: string; + }; + /** + * Help of text + */ + help?: { + /** + * Help hover background of text + * + * @designToken button.text.help.hover.background + */ + hoverBackground?: string; + /** + * Help active background of text + * + * @designToken button.text.help.active.background + */ + activeBackground?: string; + /** + * Help color of text + * + * @designToken button.text.help.color + */ + color?: string; + }; + /** + * Danger of text + */ + danger?: { + /** + * Danger hover background of text + * + * @designToken button.text.danger.hover.background + */ + hoverBackground?: string; + /** + * Danger active background of text + * + * @designToken button.text.danger.active.background + */ + activeBackground?: string; + /** + * Danger color of text + * + * @designToken button.text.danger.color + */ + color?: string; + }; + /** + * Plain of text + */ + plain?: { + /** + * Plain hover background of text + * + * @designToken button.text.plain.hover.background + */ + hoverBackground?: string; + /** + * Plain active background of text + * + * @designToken button.text.plain.active.background + */ + activeBackground?: string; + /** + * Plain color of text + * + * @designToken button.text.plain.color + */ + color?: string; + }; }; /** - * Secondary of text - */ - secondary?: { - - /** - * Secondary hover background of text - * - * @designToken button.text.secondary.hover.background - */ - hoverBackground?: string; - /** - * Secondary active background of text - * - * @designToken button.text.secondary.active.background - */ - activeBackground?: string; - /** - * Secondary color of text - * - * @designToken button.text.secondary.color - */ - color?: string; - }; - /** - * Success of text - */ - success?: { - - /** - * Success hover background of text - * - * @designToken button.text.success.hover.background - */ - hoverBackground?: string; - /** - * Success active background of text - * - * @designToken button.text.success.active.background - */ - activeBackground?: string; - /** - * Success color of text - * - * @designToken button.text.success.color - */ - color?: string; - }; - /** - * Info of text - */ - info?: { - - /** - * Info hover background of text - * - * @designToken button.text.info.hover.background - */ - hoverBackground?: string; - /** - * Info active background of text - * - * @designToken button.text.info.active.background - */ - activeBackground?: string; - /** - * Info color of text - * - * @designToken button.text.info.color - */ - color?: string; - }; - /** - * Warn of text - */ - warn?: { - - /** - * Warn hover background of text - * - * @designToken button.text.warn.hover.background - */ - hoverBackground?: string; - /** - * Warn active background of text - * - * @designToken button.text.warn.active.background - */ - activeBackground?: string; - /** - * Warn color of text - * - * @designToken button.text.warn.color - */ - color?: string; - }; - /** - * Help of text - */ - help?: { - - /** - * Help hover background of text - * - * @designToken button.text.help.hover.background - */ - hoverBackground?: string; - /** - * Help active background of text - * - * @designToken button.text.help.active.background - */ - activeBackground?: string; - /** - * Help color of text - * - * @designToken button.text.help.color - */ - color?: string; - }; - /** - * Danger of text - */ - danger?: { - - /** - * Danger hover background of text - * - * @designToken button.text.danger.hover.background - */ - hoverBackground?: string; - /** - * Danger active background of text - * - * @designToken button.text.danger.active.background - */ - activeBackground?: string; - /** - * Danger color of text - * - * @designToken button.text.danger.color - */ - color?: string; - }; - /** - * Plain of text - */ - plain?: { - - /** - * Plain hover background of text - * - * @designToken button.text.plain.hover.background - */ - hoverBackground?: string; - /** - * Plain active background of text - * - * @designToken button.text.plain.active.background - */ - activeBackground?: string; - /** - * Plain color of text - * - * @designToken button.text.plain.color - */ - color?: string; - }; - } - /** - * Used to pass tokens of the link section - */ + * Used to pass tokens of the link section + */ link?: { - - /** - * Color of link - * - * @designToken button.link.color - */ - color?: string; - /** - * Hover color of link - * - * @designToken button.link.hover.color - */ - hoverColor?: string; - /** - * Active color of link - * - * @designToken button.link.active.color - */ - activeColor?: string; - } + /** + * Color of link + * + * @designToken button.link.color + */ + color?: string; + /** + * Hover color of link + * + * @designToken button.link.hover.color + */ + hoverColor?: string; + /** + * Active color of link + * + * @designToken button.link.active.color + */ + activeColor?: string; + }; } diff --git a/packages/themes/types/card/index.d.ts b/packages/themes/types/card/index.d.ts index 7d12d1f90..22bdb2e32 100644 --- a/packages/themes/types/card/index.d.ts +++ b/packages/themes/types/card/index.d.ts @@ -1,4 +1,3 @@ - /** * * Card Design Tokens @@ -12,95 +11,89 @@ import { ColorSchemeDesignToken } from '..'; export interface CardDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken card.background + */ + background?: string; + /** + * Border radius of root + * + * @designToken card.border.radius + */ + borderRadius?: string; + /** + * Color of root + * + * @designToken card.color + */ + color?: string; + /** + * Shadow of root + * + * @designToken card.shadow + */ + shadow?: string; + }; /** - * Background of root - * - * @designToken card.background - */ - background?: string; - /** - * Border radius of root - * - * @designToken card.border.radius - */ - borderRadius?: string; - /** - * Color of root - * - * @designToken card.color - */ - color?: string; - /** - * Shadow of root - * - * @designToken card.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the body section - */ + * Used to pass tokens of the body section + */ body?: { - + /** + * Padding of body + * + * @designToken card.body.padding + */ + padding?: string; + /** + * Gap of body + * + * @designToken card.body.gap + */ + gap?: string; + }; /** - * Padding of body - * - * @designToken card.body.padding - */ - padding?: string; - /** - * Gap of body - * - * @designToken card.body.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the caption section - */ + * Used to pass tokens of the caption section + */ caption?: { - + /** + * Gap of caption + * + * @designToken card.caption.gap + */ + gap?: string; + }; /** - * Gap of caption - * - * @designToken card.caption.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the title section - */ + * Used to pass tokens of the title section + */ title?: { - + /** + * Font size of title + * + * @designToken card.title.font.size + */ + fontSize?: string; + /** + * Font weight of title + * + * @designToken card.title.font.weight + */ + fontWeight?: string; + }; /** - * Font size of title - * - * @designToken card.title.font.size - */ - fontSize?: string; - /** - * Font weight of title - * - * @designToken card.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the subtitle section - */ + * Used to pass tokens of the subtitle section + */ subtitle?: { - - /** - * Color of subtitle - * - * @designToken card.subtitle.color - */ - color?: string; - } + /** + * Color of subtitle + * + * @designToken card.subtitle.color + */ + color?: string; + }; } diff --git a/packages/themes/types/carousel/index.d.ts b/packages/themes/types/carousel/index.d.ts index 7b62363a8..fa0e16ae3 100644 --- a/packages/themes/types/carousel/index.d.ts +++ b/packages/themes/types/carousel/index.d.ts @@ -1,4 +1,3 @@ - /** * * Carousel Design Tokens @@ -12,119 +11,113 @@ import { ColorSchemeDesignToken } from '..'; export interface CarouselDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Indicator list of root - */ - indicatorList?: { - - /** - * Indicator list padding of root - * - * @designToken carousel.indicator.list.padding - */ - padding?: string; - /** - * Indicator list gap of root - * - * @designToken carousel.indicator.list.gap - */ - gap?: string; + /** + * Indicator list of root + */ + indicatorList?: { + /** + * Indicator list padding of root + * + * @designToken carousel.indicator.list.padding + */ + padding?: string; + /** + * Indicator list gap of root + * + * @designToken carousel.indicator.list.gap + */ + gap?: string; + }; + /** + * Indicator of root + */ + indicator?: { + /** + * Indicator width of root + * + * @designToken carousel.indicator.width + */ + width?: string; + /** + * Indicator height of root + * + * @designToken carousel.indicator.height + */ + height?: string; + /** + * Indicator border radius of root + * + * @designToken carousel.indicator.border.radius + */ + borderRadius?: string; + /** + * Indicator focus ring of root + */ + focusRing?: { + /** + * Indicator focus ring width of root + * + * @designToken carousel.indicator.focus.ring.width + */ + width?: string; + /** + * Indicator focus ring style of root + * + * @designToken carousel.indicator.focus.ring.style + */ + style?: string; + /** + * Indicator focus ring color of root + * + * @designToken carousel.indicator.focus.ring.color + */ + color?: string; + /** + * Indicator focus ring offset of root + * + * @designToken carousel.indicator.focus.ring.offset + */ + offset?: string; + /** + * Indicator focus ring shadow of root + * + * @designToken carousel.indicator.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Transition duration of root + * + * @designToken carousel.transition.duration + */ + transitionDuration?: string; }; /** - * Indicator of root - */ + * Used to pass tokens of the indicator section + */ indicator?: { - - /** - * Indicator width of root - * - * @designToken carousel.indicator.width - */ - width?: string; - /** - * Indicator height of root - * - * @designToken carousel.indicator.height - */ - height?: string; - /** - * Indicator border radius of root - * - * @designToken carousel.indicator.border.radius - */ - borderRadius?: string; - /** - * Indicator focus ring of root - */ - focusRing?: { - - /** - * Indicator focus ring width of root - * - * @designToken carousel.indicator.focus.ring.width - */ - width?: string; - /** - * Indicator focus ring style of root - * - * @designToken carousel.indicator.focus.ring.style - */ - style?: string; - /** - * Indicator focus ring color of root - * - * @designToken carousel.indicator.focus.ring.color - */ - color?: string; - /** - * Indicator focus ring offset of root - * - * @designToken carousel.indicator.focus.ring.offset - */ - offset?: string; - /** - * Indicator focus ring shadow of root - * - * @designToken carousel.indicator.focus.ring.shadow - */ - shadow?: string; + /** + * Background of indicator + * + * @designToken carousel.indicator.background + */ + background?: string; + /** + * Hover background of indicator + * + * @designToken carousel.indicator.hover.background + */ + hoverBackground?: string; + /** + * Active background of indicator + * + * @designToken carousel.indicator.active.background + */ + activeBackground?: string; }; - }; - /** - * Transition duration of root - * - * @designToken carousel.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the indicator section - */ - indicator?: { - - /** - * Background of indicator - * - * @designToken carousel.indicator.background - */ - background?: string; - /** - * Hover background of indicator - * - * @designToken carousel.indicator.hover.background - */ - hoverBackground?: string; - /** - * Active background of indicator - * - * @designToken carousel.indicator.active.background - */ - activeBackground?: string; - } } diff --git a/packages/themes/types/cascadeselect/index.d.ts b/packages/themes/types/cascadeselect/index.d.ts index 575307b52..6f5b352d4 100644 --- a/packages/themes/types/cascadeselect/index.d.ts +++ b/packages/themes/types/cascadeselect/index.d.ts @@ -1,4 +1,3 @@ - /** * * CascadeSelect Design Tokens @@ -12,299 +11,291 @@ import { ColorSchemeDesignToken } from '..'; export interface CascadeSelectDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken cascadeselect.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken cascadeselect.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken cascadeselect.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken cascadeselect.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken cascadeselect.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken cascadeselect.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken cascadeselect.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken cascadeselect.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken cascadeselect.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken cascadeselect.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken cascadeselect.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken cascadeselect.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken cascadeselect.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken cascadeselect.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken cascadeselect.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken cascadeselect.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken cascadeselect.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken cascadeselect.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken cascadeselect.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken cascadeselect.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken cascadeselect.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken cascadeselect.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken cascadeselect.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken cascadeselect.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken cascadeselect.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken cascadeselect.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken cascadeselect.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken cascadeselect.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken cascadeselect.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken cascadeselect.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken cascadeselect.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken cascadeselect.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken cascadeselect.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken cascadeselect.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken cascadeselect.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken cascadeselect.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken cascadeselect.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken cascadeselect.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken cascadeselect.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken cascadeselect.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken cascadeselect.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken cascadeselect.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the dropdown section - */ + * Used to pass tokens of the dropdown section + */ dropdown?: { - - /** - * Width of dropdown - * - * @designToken cascadeselect.dropdown.width - */ - width?: string; - /** - * Color of dropdown - * - * @designToken cascadeselect.dropdown.color - */ - color?: string; - } - /** - * Used to pass tokens of the overlay section - */ - overlay?: { - - /** - * Background of overlay - * - * @designToken cascadeselect.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken cascadeselect.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken cascadeselect.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken cascadeselect.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken cascadeselect.overlay.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken cascadeselect.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken cascadeselect.list.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the option section - */ - option?: { - - /** - * Focus background of option - * - * @designToken cascadeselect.option.focus.background - */ - focusBackground?: string; - /** - * Selected background of option - * - * @designToken cascadeselect.option.selected.background - */ - selectedBackground?: string; - /** - * Selected focus background of option - * - * @designToken cascadeselect.option.selected.focus.background - */ - selectedFocusBackground?: string; - /** - * Color of option - * - * @designToken cascadeselect.option.color - */ - color?: string; - /** - * Focus color of option - * - * @designToken cascadeselect.option.focus.color - */ - focusColor?: string; - /** - * Selected color of option - * - * @designToken cascadeselect.option.selected.color - */ - selectedColor?: string; - /** - * Selected focus color of option - * - * @designToken cascadeselect.option.selected.focus.color - */ - selectedFocusColor?: string; - /** - * Padding of option - * - * @designToken cascadeselect.option.padding - */ - padding?: string; - /** - * Border radius of option - * - * @designToken cascadeselect.option.border.radius - */ - borderRadius?: string; - /** - * Icon of option - */ - icon?: { - - /** - * Icon color of option - * - * @designToken cascadeselect.option.icon.color - */ - color?: string; - /** - * Icon focus color of option - * - * @designToken cascadeselect.option.icon.focus.color - */ - focusColor?: string; - /** - * Icon size of option - * - * @designToken cascadeselect.option.icon.size - */ - size?: string; + /** + * Width of dropdown + * + * @designToken cascadeselect.dropdown.width + */ + width?: string; + /** + * Color of dropdown + * + * @designToken cascadeselect.dropdown.color + */ + color?: string; + }; + /** + * Used to pass tokens of the overlay section + */ + overlay?: { + /** + * Background of overlay + * + * @designToken cascadeselect.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken cascadeselect.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken cascadeselect.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken cascadeselect.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken cascadeselect.overlay.shadow + */ + shadow?: string; + }; + /** + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken cascadeselect.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken cascadeselect.list.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the option section + */ + option?: { + /** + * Focus background of option + * + * @designToken cascadeselect.option.focus.background + */ + focusBackground?: string; + /** + * Selected background of option + * + * @designToken cascadeselect.option.selected.background + */ + selectedBackground?: string; + /** + * Selected focus background of option + * + * @designToken cascadeselect.option.selected.focus.background + */ + selectedFocusBackground?: string; + /** + * Color of option + * + * @designToken cascadeselect.option.color + */ + color?: string; + /** + * Focus color of option + * + * @designToken cascadeselect.option.focus.color + */ + focusColor?: string; + /** + * Selected color of option + * + * @designToken cascadeselect.option.selected.color + */ + selectedColor?: string; + /** + * Selected focus color of option + * + * @designToken cascadeselect.option.selected.focus.color + */ + selectedFocusColor?: string; + /** + * Padding of option + * + * @designToken cascadeselect.option.padding + */ + padding?: string; + /** + * Border radius of option + * + * @designToken cascadeselect.option.border.radius + */ + borderRadius?: string; + /** + * Icon of option + */ + icon?: { + /** + * Icon color of option + * + * @designToken cascadeselect.option.icon.color + */ + color?: string; + /** + * Icon focus color of option + * + * @designToken cascadeselect.option.icon.focus.color + */ + focusColor?: string; + /** + * Icon size of option + * + * @designToken cascadeselect.option.icon.size + */ + size?: string; + }; }; - } } diff --git a/packages/themes/types/checkbox/index.d.ts b/packages/themes/types/checkbox/index.d.ts index 1288e329e..9c33beb0c 100644 --- a/packages/themes/types/checkbox/index.d.ts +++ b/packages/themes/types/checkbox/index.d.ts @@ -1,4 +1,3 @@ - /** * * Checkbox Design Tokens @@ -12,185 +11,181 @@ import { ColorSchemeDesignToken } from '..'; export interface CheckboxDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken checkbox.border.radius - */ - borderRadius?: string; - /** - * Width of root - * - * @designToken checkbox.width - */ - width?: string; - /** - * Height of root - * - * @designToken checkbox.height - */ - height?: string; - /** - * Background of root - * - * @designToken checkbox.background - */ - background?: string; - /** - * Checked background of root - * - * @designToken checkbox.checked.background - */ - checkedBackground?: string; - /** - * Checked hover background of root - * - * @designToken checkbox.checked.hover.background - */ - checkedHoverBackground?: string; - /** - * Disabled background of root - * - * @designToken checkbox.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken checkbox.filled.background - */ - filledBackground?: string; - /** - * Border color of root - * - * @designToken checkbox.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken checkbox.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken checkbox.focus.border.color - */ - focusBorderColor?: string; - /** - * Checked border color of root - * - * @designToken checkbox.checked.border.color - */ - checkedBorderColor?: string; - /** - * Checked hover border color of root - * - * @designToken checkbox.checked.hover.border.color - */ - checkedHoverBorderColor?: string; - /** - * Checked focus border color of root - * - * @designToken checkbox.checked.focus.border.color - */ - checkedFocusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken checkbox.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Shadow of root - * - * @designToken checkbox.shadow - */ - shadow?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken checkbox.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken checkbox.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken checkbox.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken checkbox.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken checkbox.focus.ring.shadow - */ - shadow?: string; + /** + * Border radius of root + * + * @designToken checkbox.border.radius + */ + borderRadius?: string; + /** + * Width of root + * + * @designToken checkbox.width + */ + width?: string; + /** + * Height of root + * + * @designToken checkbox.height + */ + height?: string; + /** + * Background of root + * + * @designToken checkbox.background + */ + background?: string; + /** + * Checked background of root + * + * @designToken checkbox.checked.background + */ + checkedBackground?: string; + /** + * Checked hover background of root + * + * @designToken checkbox.checked.hover.background + */ + checkedHoverBackground?: string; + /** + * Disabled background of root + * + * @designToken checkbox.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken checkbox.filled.background + */ + filledBackground?: string; + /** + * Border color of root + * + * @designToken checkbox.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken checkbox.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken checkbox.focus.border.color + */ + focusBorderColor?: string; + /** + * Checked border color of root + * + * @designToken checkbox.checked.border.color + */ + checkedBorderColor?: string; + /** + * Checked hover border color of root + * + * @designToken checkbox.checked.hover.border.color + */ + checkedHoverBorderColor?: string; + /** + * Checked focus border color of root + * + * @designToken checkbox.checked.focus.border.color + */ + checkedFocusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken checkbox.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Shadow of root + * + * @designToken checkbox.shadow + */ + shadow?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken checkbox.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken checkbox.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken checkbox.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken checkbox.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken checkbox.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken checkbox.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken checkbox.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - - /** - * Size of icon - * - * @designToken checkbox.icon.size - */ - size?: string; - /** - * Color of icon - * - * @designToken checkbox.icon.color - */ - color?: string; - /** - * Checked color of icon - * - * @designToken checkbox.icon.checked.color - */ - checkedColor?: string; - /** - * Checked hover color of icon - * - * @designToken checkbox.icon.checked.hover.color - */ - checkedHoverColor?: string; - /** - * Disabled color of icon - * - * @designToken checkbox.icon.disabled.color - */ - disabledColor?: string; - } + /** + * Size of icon + * + * @designToken checkbox.icon.size + */ + size?: string; + /** + * Color of icon + * + * @designToken checkbox.icon.color + */ + color?: string; + /** + * Checked color of icon + * + * @designToken checkbox.icon.checked.color + */ + checkedColor?: string; + /** + * Checked hover color of icon + * + * @designToken checkbox.icon.checked.hover.color + */ + checkedHoverColor?: string; + /** + * Disabled color of icon + * + * @designToken checkbox.icon.disabled.color + */ + disabledColor?: string; + }; } diff --git a/packages/themes/types/chip/index.d.ts b/packages/themes/types/chip/index.d.ts index dd6ced302..5c6108e17 100644 --- a/packages/themes/types/chip/index.d.ts +++ b/packages/themes/types/chip/index.d.ts @@ -1,4 +1,3 @@ - /** * * Chip Design Tokens @@ -12,137 +11,131 @@ import { ColorSchemeDesignToken } from '..'; export interface ChipDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken chip.border.radius - */ - borderRadius?: string; - /** - * Padding x of root - * - * @designToken chip.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken chip.padding.y - */ - paddingY?: string; - /** - * Gap of root - * - * @designToken chip.gap - */ - gap?: string; - /** - * Transition duration of root - * - * @designToken chip.transition.duration - */ - transitionDuration?: string; - /** - * Background of root - * - * @designToken chip.background - */ - background?: string; - /** - * Color of root - * - * @designToken chip.color - */ - color?: string; - } - /** - * Used to pass tokens of the image section - */ - image?: { - - /** - * Width of image - * - * @designToken chip.image.width - */ - width?: string; - /** - * Height of image - * - * @designToken chip.image.height - */ - height?: string; - } - /** - * Used to pass tokens of the icon section - */ - icon?: { - - /** - * Size of icon - * - * @designToken chip.icon.size - */ - size?: string; - /** - * Color of icon - * - * @designToken chip.icon.color - */ - color?: string; - } - /** - * Used to pass tokens of the remove icon section - */ - removeIcon?: { - - /** - * Focus ring of remove icon - */ - focusRing?: { - - /** - * Focus ring width of remove icon - * - * @designToken chip.remove.icon.focus.ring.width - */ - width?: string; - /** - * Focus ring style of remove icon - * - * @designToken chip.remove.icon.focus.ring.style - */ - style?: string; - /** - * Focus ring color of remove icon - * - * @designToken chip.remove.icon.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of remove icon - * - * @designToken chip.remove.icon.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of remove icon - * - * @designToken chip.remove.icon.focus.ring.shadow - */ - shadow?: string; + /** + * Border radius of root + * + * @designToken chip.border.radius + */ + borderRadius?: string; + /** + * Padding x of root + * + * @designToken chip.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken chip.padding.y + */ + paddingY?: string; + /** + * Gap of root + * + * @designToken chip.gap + */ + gap?: string; + /** + * Transition duration of root + * + * @designToken chip.transition.duration + */ + transitionDuration?: string; + /** + * Background of root + * + * @designToken chip.background + */ + background?: string; + /** + * Color of root + * + * @designToken chip.color + */ + color?: string; }; /** - * Color of remove icon - * - * @designToken chip.remove.icon.color - */ - color?: string; - } + * Used to pass tokens of the image section + */ + image?: { + /** + * Width of image + * + * @designToken chip.image.width + */ + width?: string; + /** + * Height of image + * + * @designToken chip.image.height + */ + height?: string; + }; + /** + * Used to pass tokens of the icon section + */ + icon?: { + /** + * Size of icon + * + * @designToken chip.icon.size + */ + size?: string; + /** + * Color of icon + * + * @designToken chip.icon.color + */ + color?: string; + }; + /** + * Used to pass tokens of the remove icon section + */ + removeIcon?: { + /** + * Focus ring of remove icon + */ + focusRing?: { + /** + * Focus ring width of remove icon + * + * @designToken chip.remove.icon.focus.ring.width + */ + width?: string; + /** + * Focus ring style of remove icon + * + * @designToken chip.remove.icon.focus.ring.style + */ + style?: string; + /** + * Focus ring color of remove icon + * + * @designToken chip.remove.icon.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of remove icon + * + * @designToken chip.remove.icon.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of remove icon + * + * @designToken chip.remove.icon.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Color of remove icon + * + * @designToken chip.remove.icon.color + */ + color?: string; + }; } diff --git a/packages/themes/types/colorpicker/index.d.ts b/packages/themes/types/colorpicker/index.d.ts index 8ee80d4f2..f7e33992e 100644 --- a/packages/themes/types/colorpicker/index.d.ts +++ b/packages/themes/types/colorpicker/index.d.ts @@ -1,4 +1,3 @@ - /** * * ColorPicker Design Tokens @@ -12,119 +11,113 @@ import { ColorSchemeDesignToken } from '..'; export interface ColorPickerDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Transition duration of root - * - * @designToken colorpicker.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the preview section - */ - preview?: { - - /** - * Width of preview - * - * @designToken colorpicker.preview.width - */ - width?: string; - /** - * Height of preview - * - * @designToken colorpicker.preview.height - */ - height?: string; - /** - * Border radius of preview - * - * @designToken colorpicker.preview.border.radius - */ - borderRadius?: string; - /** - * Focus ring of preview - */ - focusRing?: { - - /** - * Focus ring width of preview - * - * @designToken colorpicker.preview.focus.ring.width - */ - width?: string; - /** - * Focus ring style of preview - * - * @designToken colorpicker.preview.focus.ring.style - */ - style?: string; - /** - * Focus ring color of preview - * - * @designToken colorpicker.preview.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of preview - * - * @designToken colorpicker.preview.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of preview - * - * @designToken colorpicker.preview.focus.ring.shadow - */ - shadow?: string; + /** + * Transition duration of root + * + * @designToken colorpicker.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the panel section - */ + * Used to pass tokens of the preview section + */ + preview?: { + /** + * Width of preview + * + * @designToken colorpicker.preview.width + */ + width?: string; + /** + * Height of preview + * + * @designToken colorpicker.preview.height + */ + height?: string; + /** + * Border radius of preview + * + * @designToken colorpicker.preview.border.radius + */ + borderRadius?: string; + /** + * Focus ring of preview + */ + focusRing?: { + /** + * Focus ring width of preview + * + * @designToken colorpicker.preview.focus.ring.width + */ + width?: string; + /** + * Focus ring style of preview + * + * @designToken colorpicker.preview.focus.ring.style + */ + style?: string; + /** + * Focus ring color of preview + * + * @designToken colorpicker.preview.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of preview + * + * @designToken colorpicker.preview.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of preview + * + * @designToken colorpicker.preview.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the panel section + */ panel?: { - + /** + * Shadow of panel + * + * @designToken colorpicker.panel.shadow + */ + shadow?: string; + /** + * Border radius of panel + * + * @designToken colorpicker.panel.border.radius + */ + borderRadius?: string; + /** + * Background of panel + * + * @designToken colorpicker.panel.background + */ + background?: string; + /** + * Border color of panel + * + * @designToken colorpicker.panel.border.color + */ + borderColor?: string; + }; /** - * Shadow of panel - * - * @designToken colorpicker.panel.shadow - */ - shadow?: string; - /** - * Border radius of panel - * - * @designToken colorpicker.panel.border.radius - */ - borderRadius?: string; - /** - * Background of panel - * - * @designToken colorpicker.panel.background - */ - background?: string; - /** - * Border color of panel - * - * @designToken colorpicker.panel.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the handle section - */ + * Used to pass tokens of the handle section + */ handle?: { - - /** - * Color of handle - * - * @designToken colorpicker.handle.color - */ - color?: string; - } + /** + * Color of handle + * + * @designToken colorpicker.handle.color + */ + color?: string; + }; } diff --git a/packages/themes/types/confirmdialog/index.d.ts b/packages/themes/types/confirmdialog/index.d.ts index 28e4b3d98..6212e3409 100644 --- a/packages/themes/types/confirmdialog/index.d.ts +++ b/packages/themes/types/confirmdialog/index.d.ts @@ -1,4 +1,3 @@ - /** * * ConfirmDialog Design Tokens @@ -12,35 +11,32 @@ import { ColorSchemeDesignToken } from '..'; export interface ConfirmDialogDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Size of icon + * + * @designToken confirmdialog.icon.size + */ + size?: string; + /** + * Color of icon + * + * @designToken confirmdialog.icon.color + */ + color?: string; + }; /** - * Size of icon - * - * @designToken confirmdialog.icon.size - */ - size?: string; - /** - * Color of icon - * - * @designToken confirmdialog.icon.color - */ - color?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Gap of content - * - * @designToken confirmdialog.content.gap - */ - gap?: string; - } + /** + * Gap of content + * + * @designToken confirmdialog.content.gap + */ + gap?: string; + }; } diff --git a/packages/themes/types/confirmpopup/index.d.ts b/packages/themes/types/confirmpopup/index.d.ts index aceddc98e..20e032c5e 100644 --- a/packages/themes/types/confirmpopup/index.d.ts +++ b/packages/themes/types/confirmpopup/index.d.ts @@ -1,4 +1,3 @@ - /** * * ConfirmPopup Design Tokens @@ -12,107 +11,102 @@ import { ColorSchemeDesignToken } from '..'; export interface ConfirmPopupDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken confirmpopup.background + */ + background?: string; + /** + * Border color of root + * + * @designToken confirmpopup.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken confirmpopup.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken confirmpopup.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken confirmpopup.shadow + */ + shadow?: string; + /** + * Gutter of root + * + * @designToken confirmpopup.gutter + */ + gutter?: string; + /** + * Arrow offset of root + * + * @designToken confirmpopup.arrow.offset + */ + arrowOffset?: string; + }; /** - * Background of root - * - * @designToken confirmpopup.background - */ - background?: string; - /** - * Border color of root - * - * @designToken confirmpopup.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken confirmpopup.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken confirmpopup.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken confirmpopup.shadow - */ - shadow?: string; - /** - * Gutter of root - * - * @designToken confirmpopup.gutter - */ - gutter?: string; - /** - * Arrow offset of root - * - * @designToken confirmpopup.arrow.offset - */ - arrowOffset?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Padding of content + * + * @designToken confirmpopup.content.padding + */ + padding?: string; + /** + * Gap of content + * + * @designToken confirmpopup.content.gap + */ + gap?: string; + }; /** - * Padding of content - * - * @designToken confirmpopup.content.padding - */ - padding?: string; - /** - * Gap of content - * - * @designToken confirmpopup.content.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Size of icon + * + * @designToken confirmpopup.icon.size + */ + size?: string; + /** + * Color of icon + * + * @designToken confirmpopup.icon.color + */ + color?: string; + }; /** - * Size of icon - * - * @designToken confirmpopup.icon.size - */ - size?: string; - /** - * Color of icon - * - * @designToken confirmpopup.icon.color - */ - color?: string; - } - /** - * Used to pass tokens of the footer section - */ + * Used to pass tokens of the footer section + */ footer?: { - - /** - * Gap of footer - * - * @designToken confirmpopup.footer.gap - */ - gap?: string; - /** - * Padding of footer - * - * @designToken confirmpopup.footer.padding - */ - padding?: string; - } + /** + * Gap of footer + * + * @designToken confirmpopup.footer.gap + */ + gap?: string; + /** + * Padding of footer + * + * @designToken confirmpopup.footer.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/contextmenu/index.d.ts b/packages/themes/types/contextmenu/index.d.ts index 47c178e0c..da5ea1bd0 100644 --- a/packages/themes/types/contextmenu/index.d.ts +++ b/packages/themes/types/contextmenu/index.d.ts @@ -1,4 +1,3 @@ - /** * * ContextMenu Design Tokens @@ -12,185 +11,178 @@ import { ColorSchemeDesignToken } from '..'; export interface ContextMenuDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken contextmenu.background - */ - background?: string; - /** - * Border color of root - * - * @designToken contextmenu.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken contextmenu.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken contextmenu.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken contextmenu.shadow - */ - shadow?: string; - /** - * Transition duration of root - * - * @designToken contextmenu.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken contextmenu.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken contextmenu.list.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the item section - */ - item?: { - - /** - * Focus background of item - * - * @designToken contextmenu.item.focus.background - */ - focusBackground?: string; - /** - * Active background of item - * - * @designToken contextmenu.item.active.background - */ - activeBackground?: string; - /** - * Color of item - * - * @designToken contextmenu.item.color - */ - color?: string; - /** - * Focus color of item - * - * @designToken contextmenu.item.focus.color - */ - focusColor?: string; - /** - * Active color of item - * - * @designToken contextmenu.item.active.color - */ - activeColor?: string; - /** - * Padding of item - * - * @designToken contextmenu.item.padding - */ - padding?: string; - /** - * Border radius of item - * - * @designToken contextmenu.item.border.radius - */ - borderRadius?: string; - /** - * Gap of item - * - * @designToken contextmenu.item.gap - */ - gap?: string; - /** - * Icon of item - */ - icon?: { - - /** - * Icon color of item - * - * @designToken contextmenu.item.icon.color - */ - color?: string; - /** - * Icon focus color of item - * - * @designToken contextmenu.item.icon.focus.color - */ - focusColor?: string; - /** - * Icon active color of item - * - * @designToken contextmenu.item.icon.active.color - */ - activeColor?: string; + /** + * Background of root + * + * @designToken contextmenu.background + */ + background?: string; + /** + * Border color of root + * + * @designToken contextmenu.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken contextmenu.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken contextmenu.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken contextmenu.shadow + */ + shadow?: string; + /** + * Transition duration of root + * + * @designToken contextmenu.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the submenu icon section - */ + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken contextmenu.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken contextmenu.list.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the item section + */ + item?: { + /** + * Focus background of item + * + * @designToken contextmenu.item.focus.background + */ + focusBackground?: string; + /** + * Active background of item + * + * @designToken contextmenu.item.active.background + */ + activeBackground?: string; + /** + * Color of item + * + * @designToken contextmenu.item.color + */ + color?: string; + /** + * Focus color of item + * + * @designToken contextmenu.item.focus.color + */ + focusColor?: string; + /** + * Active color of item + * + * @designToken contextmenu.item.active.color + */ + activeColor?: string; + /** + * Padding of item + * + * @designToken contextmenu.item.padding + */ + padding?: string; + /** + * Border radius of item + * + * @designToken contextmenu.item.border.radius + */ + borderRadius?: string; + /** + * Gap of item + * + * @designToken contextmenu.item.gap + */ + gap?: string; + /** + * Icon of item + */ + icon?: { + /** + * Icon color of item + * + * @designToken contextmenu.item.icon.color + */ + color?: string; + /** + * Icon focus color of item + * + * @designToken contextmenu.item.icon.focus.color + */ + focusColor?: string; + /** + * Icon active color of item + * + * @designToken contextmenu.item.icon.active.color + */ + activeColor?: string; + }; + }; + /** + * Used to pass tokens of the submenu icon section + */ submenuIcon?: { - + /** + * Size of submenu icon + * + * @designToken contextmenu.submenu.icon.size + */ + size?: string; + /** + * Color of submenu icon + * + * @designToken contextmenu.submenu.icon.color + */ + color?: string; + /** + * Focus color of submenu icon + * + * @designToken contextmenu.submenu.icon.focus.color + */ + focusColor?: string; + /** + * Active color of submenu icon + * + * @designToken contextmenu.submenu.icon.active.color + */ + activeColor?: string; + }; /** - * Size of submenu icon - * - * @designToken contextmenu.submenu.icon.size - */ - size?: string; - /** - * Color of submenu icon - * - * @designToken contextmenu.submenu.icon.color - */ - color?: string; - /** - * Focus color of submenu icon - * - * @designToken contextmenu.submenu.icon.focus.color - */ - focusColor?: string; - /** - * Active color of submenu icon - * - * @designToken contextmenu.submenu.icon.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the separator section - */ + * Used to pass tokens of the separator section + */ separator?: { - - /** - * Border color of separator - * - * @designToken contextmenu.separator.border.color - */ - borderColor?: string; - } + /** + * Border color of separator + * + * @designToken contextmenu.separator.border.color + */ + borderColor?: string; + }; } diff --git a/packages/themes/types/datatable/index.d.ts b/packages/themes/types/datatable/index.d.ts index 9695ed749..41af7dec2 100644 --- a/packages/themes/types/datatable/index.d.ts +++ b/packages/themes/types/datatable/index.d.ts @@ -1,4 +1,3 @@ - /** * * DataTable Design Tokens @@ -12,857 +11,829 @@ import { ColorSchemeDesignToken } from '..'; export interface DataTableDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken datatable.transition.duration + */ + transitionDuration?: string; + /** + * Border color of root + * + * @designToken datatable.border.color + */ + borderColor?: string; + }; /** - * Transition duration of root - * - * @designToken datatable.transition.duration - */ - transitionDuration?: string; - /** - * Border color of root - * - * @designToken datatable.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Background of header + * + * @designToken datatable.header.background + */ + background?: string; + /** + * Border color of header + * + * @designToken datatable.header.border.color + */ + borderColor?: string; + /** + * Color of header + * + * @designToken datatable.header.color + */ + color?: string; + /** + * Border width of header + * + * @designToken datatable.header.border.width + */ + borderWidth?: string; + /** + * Padding of header + * + * @designToken datatable.header.padding + */ + padding?: string; + }; /** - * Background of header - * - * @designToken datatable.header.background - */ - background?: string; - /** - * Border color of header - * - * @designToken datatable.header.border.color - */ - borderColor?: string; - /** - * Color of header - * - * @designToken datatable.header.color - */ - color?: string; - /** - * Border width of header - * - * @designToken datatable.header.border.width - */ - borderWidth?: string; - /** - * Padding of header - * - * @designToken datatable.header.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the header cell section - */ + * Used to pass tokens of the header cell section + */ headerCell?: { - - /** - * Background of header cell - * - * @designToken datatable.header.cell.background - */ - background?: string; - /** - * Hover background of header cell - * - * @designToken datatable.header.cell.hover.background - */ - hoverBackground?: string; - /** - * Selected background of header cell - * - * @designToken datatable.header.cell.selected.background - */ - selectedBackground?: string; - /** - * Border color of header cell - * - * @designToken datatable.header.cell.border.color - */ - borderColor?: string; - /** - * Color of header cell - * - * @designToken datatable.header.cell.color - */ - color?: string; - /** - * Hover color of header cell - * - * @designToken datatable.header.cell.hover.color - */ - hoverColor?: string; - /** - * Selected color of header cell - * - * @designToken datatable.header.cell.selected.color - */ - selectedColor?: string; - /** - * Gap of header cell - * - * @designToken datatable.header.cell.gap - */ - gap?: string; - /** - * Padding of header cell - * - * @designToken datatable.header.cell.padding - */ - padding?: string; - /** - * Focus ring of header cell - */ - focusRing?: { - - /** - * Focus ring width of header cell - * - * @designToken datatable.header.cell.focus.ring.width - */ - width?: string; - /** - * Focus ring style of header cell - * - * @designToken datatable.header.cell.focus.ring.style - */ - style?: string; - /** - * Focus ring color of header cell - * - * @designToken datatable.header.cell.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of header cell - * - * @designToken datatable.header.cell.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of header cell - * - * @designToken datatable.header.cell.focus.ring.shadow - */ - shadow?: string; + /** + * Background of header cell + * + * @designToken datatable.header.cell.background + */ + background?: string; + /** + * Hover background of header cell + * + * @designToken datatable.header.cell.hover.background + */ + hoverBackground?: string; + /** + * Selected background of header cell + * + * @designToken datatable.header.cell.selected.background + */ + selectedBackground?: string; + /** + * Border color of header cell + * + * @designToken datatable.header.cell.border.color + */ + borderColor?: string; + /** + * Color of header cell + * + * @designToken datatable.header.cell.color + */ + color?: string; + /** + * Hover color of header cell + * + * @designToken datatable.header.cell.hover.color + */ + hoverColor?: string; + /** + * Selected color of header cell + * + * @designToken datatable.header.cell.selected.color + */ + selectedColor?: string; + /** + * Gap of header cell + * + * @designToken datatable.header.cell.gap + */ + gap?: string; + /** + * Padding of header cell + * + * @designToken datatable.header.cell.padding + */ + padding?: string; + /** + * Focus ring of header cell + */ + focusRing?: { + /** + * Focus ring width of header cell + * + * @designToken datatable.header.cell.focus.ring.width + */ + width?: string; + /** + * Focus ring style of header cell + * + * @designToken datatable.header.cell.focus.ring.style + */ + style?: string; + /** + * Focus ring color of header cell + * + * @designToken datatable.header.cell.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of header cell + * + * @designToken datatable.header.cell.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of header cell + * + * @designToken datatable.header.cell.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the column title section - */ + * Used to pass tokens of the column title section + */ columnTitle?: { - + /** + * Font weight of column title + * + * @designToken datatable.column.title.font.weight + */ + fontWeight?: string; + }; /** - * Font weight of column title - * - * @designToken datatable.column.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the row section - */ + * Used to pass tokens of the row section + */ row?: { - - /** - * Background of row - * - * @designToken datatable.row.background - */ - background?: string; - /** - * Hover background of row - * - * @designToken datatable.row.hover.background - */ - hoverBackground?: string; - /** - * Selected background of row - * - * @designToken datatable.row.selected.background - */ - selectedBackground?: string; - /** - * Color of row - * - * @designToken datatable.row.color - */ - color?: string; - /** - * Hover color of row - * - * @designToken datatable.row.hover.color - */ - hoverColor?: string; - /** - * Selected color of row - * - * @designToken datatable.row.selected.color - */ - selectedColor?: string; - /** - * Focus ring of row - */ - focusRing?: { - - /** - * Focus ring width of row - * - * @designToken datatable.row.focus.ring.width - */ - width?: string; - /** - * Focus ring style of row - * - * @designToken datatable.row.focus.ring.style - */ - style?: string; - /** - * Focus ring color of row - * - * @designToken datatable.row.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of row - * - * @designToken datatable.row.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of row - * - * @designToken datatable.row.focus.ring.shadow - */ - shadow?: string; + /** + * Background of row + * + * @designToken datatable.row.background + */ + background?: string; + /** + * Hover background of row + * + * @designToken datatable.row.hover.background + */ + hoverBackground?: string; + /** + * Selected background of row + * + * @designToken datatable.row.selected.background + */ + selectedBackground?: string; + /** + * Color of row + * + * @designToken datatable.row.color + */ + color?: string; + /** + * Hover color of row + * + * @designToken datatable.row.hover.color + */ + hoverColor?: string; + /** + * Selected color of row + * + * @designToken datatable.row.selected.color + */ + selectedColor?: string; + /** + * Focus ring of row + */ + focusRing?: { + /** + * Focus ring width of row + * + * @designToken datatable.row.focus.ring.width + */ + width?: string; + /** + * Focus ring style of row + * + * @designToken datatable.row.focus.ring.style + */ + style?: string; + /** + * Focus ring color of row + * + * @designToken datatable.row.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of row + * + * @designToken datatable.row.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of row + * + * @designToken datatable.row.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Striped background of row + * + * @designToken datatable.row.striped.background + */ + stripedBackground?: string; }; /** - * Striped background of row - * - * @designToken datatable.row.striped.background - */ - stripedBackground?: string; - } - /** - * Used to pass tokens of the body cell section - */ + * Used to pass tokens of the body cell section + */ bodyCell?: { - + /** + * Border color of body cell + * + * @designToken datatable.body.cell.border.color + */ + borderColor?: string; + /** + * Padding of body cell + * + * @designToken datatable.body.cell.padding + */ + padding?: string; + /** + * Selected border color of body cell + * + * @designToken datatable.body.cell.selected.border.color + */ + selectedBorderColor?: string; + }; /** - * Border color of body cell - * - * @designToken datatable.body.cell.border.color - */ - borderColor?: string; - /** - * Padding of body cell - * - * @designToken datatable.body.cell.padding - */ - padding?: string; - /** - * Selected border color of body cell - * - * @designToken datatable.body.cell.selected.border.color - */ - selectedBorderColor?: string; - } - /** - * Used to pass tokens of the footer cell section - */ + * Used to pass tokens of the footer cell section + */ footerCell?: { - + /** + * Background of footer cell + * + * @designToken datatable.footer.cell.background + */ + background?: string; + /** + * Border color of footer cell + * + * @designToken datatable.footer.cell.border.color + */ + borderColor?: string; + /** + * Color of footer cell + * + * @designToken datatable.footer.cell.color + */ + color?: string; + /** + * Padding of footer cell + * + * @designToken datatable.footer.cell.padding + */ + padding?: string; + }; /** - * Background of footer cell - * - * @designToken datatable.footer.cell.background - */ - background?: string; - /** - * Border color of footer cell - * - * @designToken datatable.footer.cell.border.color - */ - borderColor?: string; - /** - * Color of footer cell - * - * @designToken datatable.footer.cell.color - */ - color?: string; - /** - * Padding of footer cell - * - * @designToken datatable.footer.cell.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the column footer section - */ + * Used to pass tokens of the column footer section + */ columnFooter?: { - + /** + * Font weight of column footer + * + * @designToken datatable.column.footer.font.weight + */ + fontWeight?: string; + }; /** - * Font weight of column footer - * - * @designToken datatable.column.footer.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the footer section - */ + * Used to pass tokens of the footer section + */ footer?: { - + /** + * Background of footer + * + * @designToken datatable.footer.background + */ + background?: string; + /** + * Border color of footer + * + * @designToken datatable.footer.border.color + */ + borderColor?: string; + /** + * Color of footer + * + * @designToken datatable.footer.color + */ + color?: string; + /** + * Border width of footer + * + * @designToken datatable.footer.border.width + */ + borderWidth?: string; + /** + * Padding of footer + * + * @designToken datatable.footer.padding + */ + padding?: string; + }; /** - * Background of footer - * - * @designToken datatable.footer.background - */ - background?: string; - /** - * Border color of footer - * - * @designToken datatable.footer.border.color - */ - borderColor?: string; - /** - * Color of footer - * - * @designToken datatable.footer.color - */ - color?: string; - /** - * Border width of footer - * - * @designToken datatable.footer.border.width - */ - borderWidth?: string; - /** - * Padding of footer - * - * @designToken datatable.footer.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the drop point color section - */ + * Used to pass tokens of the drop point color section + */ dropPointColor?: { - + /** + * 0 of drop point color + * + * @designToken datatable.drop.point.color.0 + */ + 0?: string; + /** + * 1 of drop point color + * + * @designToken datatable.drop.point.color.1 + */ + 1?: string; + /** + * 2 of drop point color + * + * @designToken datatable.drop.point.color.2 + */ + 2?: string; + /** + * 3 of drop point color + * + * @designToken datatable.drop.point.color.3 + */ + 3?: string; + /** + * 4 of drop point color + * + * @designToken datatable.drop.point.color.4 + */ + 4?: string; + /** + * 5 of drop point color + * + * @designToken datatable.drop.point.color.5 + */ + 5?: string; + /** + * 6 of drop point color + * + * @designToken datatable.drop.point.color.6 + */ + 6?: string; + /** + * 7 of drop point color + * + * @designToken datatable.drop.point.color.7 + */ + 7?: string; + /** + * 8 of drop point color + * + * @designToken datatable.drop.point.color.8 + */ + 8?: string; + /** + * 9 of drop point color + * + * @designToken datatable.drop.point.color.9 + */ + 9?: string; + /** + * 10 of drop point color + * + * @designToken datatable.drop.point.color.10 + */ + 10?: string; + /** + * 11 of drop point color + * + * @designToken datatable.drop.point.color.11 + */ + 11?: string; + /** + * 12 of drop point color + * + * @designToken datatable.drop.point.color.12 + */ + 12?: string; + /** + * 13 of drop point color + * + * @designToken datatable.drop.point.color.13 + */ + 13?: string; + /** + * 14 of drop point color + * + * @designToken datatable.drop.point.color.14 + */ + 14?: string; + }; /** - * 0 of drop point color - * - * @designToken datatable.drop.point.color.0 - */ - 0?: string; - /** - * 1 of drop point color - * - * @designToken datatable.drop.point.color.1 - */ - 1?: string; - /** - * 2 of drop point color - * - * @designToken datatable.drop.point.color.2 - */ - 2?: string; - /** - * 3 of drop point color - * - * @designToken datatable.drop.point.color.3 - */ - 3?: string; - /** - * 4 of drop point color - * - * @designToken datatable.drop.point.color.4 - */ - 4?: string; - /** - * 5 of drop point color - * - * @designToken datatable.drop.point.color.5 - */ - 5?: string; - /** - * 6 of drop point color - * - * @designToken datatable.drop.point.color.6 - */ - 6?: string; - /** - * 7 of drop point color - * - * @designToken datatable.drop.point.color.7 - */ - 7?: string; - /** - * 8 of drop point color - * - * @designToken datatable.drop.point.color.8 - */ - 8?: string; - /** - * 9 of drop point color - * - * @designToken datatable.drop.point.color.9 - */ - 9?: string; - /** - * 10 of drop point color - * - * @designToken datatable.drop.point.color.10 - */ - 10?: string; - /** - * 11 of drop point color - * - * @designToken datatable.drop.point.color.11 - */ - 11?: string; - /** - * 12 of drop point color - * - * @designToken datatable.drop.point.color.12 - */ - 12?: string; - /** - * 13 of drop point color - * - * @designToken datatable.drop.point.color.13 - */ - 13?: string; - /** - * 14 of drop point color - * - * @designToken datatable.drop.point.color.14 - */ - 14?: string; - } - /** - * Used to pass tokens of the column resizer width section - */ + * Used to pass tokens of the column resizer width section + */ columnResizerWidth?: { - + /** + * 0 of column resizer width + * + * @designToken datatable.column.resizer.width.0 + */ + 0?: string; + /** + * 1 of column resizer width + * + * @designToken datatable.column.resizer.width.1 + */ + 1?: string; + /** + * 2 of column resizer width + * + * @designToken datatable.column.resizer.width.2 + */ + 2?: string; + /** + * 3 of column resizer width + * + * @designToken datatable.column.resizer.width.3 + */ + 3?: string; + /** + * 4 of column resizer width + * + * @designToken datatable.column.resizer.width.4 + */ + 4?: string; + /** + * 5 of column resizer width + * + * @designToken datatable.column.resizer.width.5 + */ + 5?: string; + }; /** - * 0 of column resizer width - * - * @designToken datatable.column.resizer.width.0 - */ - 0?: string; - /** - * 1 of column resizer width - * - * @designToken datatable.column.resizer.width.1 - */ - 1?: string; - /** - * 2 of column resizer width - * - * @designToken datatable.column.resizer.width.2 - */ - 2?: string; - /** - * 3 of column resizer width - * - * @designToken datatable.column.resizer.width.3 - */ - 3?: string; - /** - * 4 of column resizer width - * - * @designToken datatable.column.resizer.width.4 - */ - 4?: string; - /** - * 5 of column resizer width - * - * @designToken datatable.column.resizer.width.5 - */ - 5?: string; - } - /** - * Used to pass tokens of the resize indicator section - */ + * Used to pass tokens of the resize indicator section + */ resizeIndicator?: { - + /** + * Width of resize indicator + * + * @designToken datatable.resize.indicator.width + */ + width?: string; + /** + * Color of resize indicator + * + * @designToken datatable.resize.indicator.color + */ + color?: string; + }; /** - * Width of resize indicator - * - * @designToken datatable.resize.indicator.width - */ - width?: string; - /** - * Color of resize indicator - * - * @designToken datatable.resize.indicator.color - */ - color?: string; - } - /** - * Used to pass tokens of the sort icon section - */ + * Used to pass tokens of the sort icon section + */ sortIcon?: { - + /** + * Color of sort icon + * + * @designToken datatable.sort.icon.color + */ + color?: string; + /** + * Hover color of sort icon + * + * @designToken datatable.sort.icon.hover.color + */ + hoverColor?: string; + }; /** - * Color of sort icon - * - * @designToken datatable.sort.icon.color - */ - color?: string; - /** - * Hover color of sort icon - * - * @designToken datatable.sort.icon.hover.color - */ - hoverColor?: string; - } - /** - * Used to pass tokens of the loading icon section - */ + * Used to pass tokens of the loading icon section + */ loadingIcon?: { - + /** + * Size of loading icon + * + * @designToken datatable.loading.icon.size + */ + size?: string; + }; /** - * Size of loading icon - * - * @designToken datatable.loading.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the row toggle button section - */ + * Used to pass tokens of the row toggle button section + */ rowToggleButton?: { - - /** - * Hover background of row toggle button - * - * @designToken datatable.row.toggle.button.hover.background - */ - hoverBackground?: string; - /** - * Selected hover background of row toggle button - * - * @designToken datatable.row.toggle.button.selected.hover.background - */ - selectedHoverBackground?: string; - /** - * Color of row toggle button - * - * @designToken datatable.row.toggle.button.color - */ - color?: string; - /** - * Hover color of row toggle button - * - * @designToken datatable.row.toggle.button.hover.color - */ - hoverColor?: string; - /** - * Selected hover color of row toggle button - * - * @designToken datatable.row.toggle.button.selected.hover.color - */ - selectedHoverColor?: string; - /** - * Size of row toggle button - * - * @designToken datatable.row.toggle.button.size - */ - size?: string; - /** - * Border radius of row toggle button - * - * @designToken datatable.row.toggle.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of row toggle button - */ - focusRing?: { - - /** - * Focus ring width of row toggle button - * - * @designToken datatable.row.toggle.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of row toggle button - * - * @designToken datatable.row.toggle.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of row toggle button - * - * @designToken datatable.row.toggle.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of row toggle button - * - * @designToken datatable.row.toggle.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of row toggle button - * - * @designToken datatable.row.toggle.button.focus.ring.shadow - */ - shadow?: string; + /** + * Hover background of row toggle button + * + * @designToken datatable.row.toggle.button.hover.background + */ + hoverBackground?: string; + /** + * Selected hover background of row toggle button + * + * @designToken datatable.row.toggle.button.selected.hover.background + */ + selectedHoverBackground?: string; + /** + * Color of row toggle button + * + * @designToken datatable.row.toggle.button.color + */ + color?: string; + /** + * Hover color of row toggle button + * + * @designToken datatable.row.toggle.button.hover.color + */ + hoverColor?: string; + /** + * Selected hover color of row toggle button + * + * @designToken datatable.row.toggle.button.selected.hover.color + */ + selectedHoverColor?: string; + /** + * Size of row toggle button + * + * @designToken datatable.row.toggle.button.size + */ + size?: string; + /** + * Border radius of row toggle button + * + * @designToken datatable.row.toggle.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of row toggle button + */ + focusRing?: { + /** + * Focus ring width of row toggle button + * + * @designToken datatable.row.toggle.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of row toggle button + * + * @designToken datatable.row.toggle.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of row toggle button + * + * @designToken datatable.row.toggle.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of row toggle button + * + * @designToken datatable.row.toggle.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of row toggle button + * + * @designToken datatable.row.toggle.button.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the filter section - */ + * Used to pass tokens of the filter section + */ filter?: { - - /** - * Inline gap of filter - * - * @designToken datatable.filter.inline.gap - */ - inlineGap?: string; - /** - * Overlay select of filter - */ - overlaySelect?: { - - /** - * Overlay select background of filter - * - * @designToken datatable.filter.overlay.select.background - */ - background?: string; - /** - * Overlay select border color of filter - * - * @designToken datatable.filter.overlay.select.border.color - */ - borderColor?: string; - /** - * Overlay select border radius of filter - * - * @designToken datatable.filter.overlay.select.border.radius - */ - borderRadius?: string; - /** - * Overlay select color of filter - * - * @designToken datatable.filter.overlay.select.color - */ - color?: string; - /** - * Overlay select shadow of filter - * - * @designToken datatable.filter.overlay.select.shadow - */ - shadow?: string; + /** + * Inline gap of filter + * + * @designToken datatable.filter.inline.gap + */ + inlineGap?: string; + /** + * Overlay select of filter + */ + overlaySelect?: { + /** + * Overlay select background of filter + * + * @designToken datatable.filter.overlay.select.background + */ + background?: string; + /** + * Overlay select border color of filter + * + * @designToken datatable.filter.overlay.select.border.color + */ + borderColor?: string; + /** + * Overlay select border radius of filter + * + * @designToken datatable.filter.overlay.select.border.radius + */ + borderRadius?: string; + /** + * Overlay select color of filter + * + * @designToken datatable.filter.overlay.select.color + */ + color?: string; + /** + * Overlay select shadow of filter + * + * @designToken datatable.filter.overlay.select.shadow + */ + shadow?: string; + }; + /** + * Overlay popover of filter + */ + overlayPopover?: { + /** + * Overlay popover background of filter + * + * @designToken datatable.filter.overlay.popover.background + */ + background?: string; + /** + * Overlay popover border color of filter + * + * @designToken datatable.filter.overlay.popover.border.color + */ + borderColor?: string; + /** + * Overlay popover border radius of filter + * + * @designToken datatable.filter.overlay.popover.border.radius + */ + borderRadius?: string; + /** + * Overlay popover color of filter + * + * @designToken datatable.filter.overlay.popover.color + */ + color?: string; + /** + * Overlay popover shadow of filter + * + * @designToken datatable.filter.overlay.popover.shadow + */ + shadow?: string; + /** + * Overlay popover padding of filter + * + * @designToken datatable.filter.overlay.popover.padding + */ + padding?: string; + /** + * Overlay popover gap of filter + * + * @designToken datatable.filter.overlay.popover.gap + */ + gap?: string; + }; + /** + * Rule of filter + */ + rule?: { + /** + * Rule border color of filter + * + * @designToken datatable.filter.rule.border.color + */ + borderColor?: string; + }; + /** + * Constraint list of filter + */ + constraintList?: { + /** + * Constraint list padding of filter + * + * @designToken datatable.filter.constraint.list.padding + */ + padding?: string; + /** + * Constraint list gap of filter + * + * @designToken datatable.filter.constraint.list.gap + */ + gap?: string; + }; + /** + * Constraint of filter + */ + constraint?: { + /** + * Constraint focus background of filter + * + * @designToken datatable.filter.constraint.focus.background + */ + focusBackground?: string; + /** + * Constraint selected background of filter + * + * @designToken datatable.filter.constraint.selected.background + */ + selectedBackground?: string; + /** + * Constraint selected focus background of filter + * + * @designToken datatable.filter.constraint.selected.focus.background + */ + selectedFocusBackground?: string; + /** + * Constraint color of filter + * + * @designToken datatable.filter.constraint.color + */ + color?: string; + /** + * Constraint focus color of filter + * + * @designToken datatable.filter.constraint.focus.color + */ + focusColor?: string; + /** + * Constraint selected color of filter + * + * @designToken datatable.filter.constraint.selected.color + */ + selectedColor?: string; + /** + * Constraint selected focus color of filter + * + * @designToken datatable.filter.constraint.selected.focus.color + */ + selectedFocusColor?: string; + /** + * Constraint separator of filter + */ + separator?: { + /** + * Constraint separator border color of filter + * + * @designToken datatable.filter.constraint.separator.border.color + */ + borderColor?: string; + }; + /** + * Constraint padding of filter + * + * @designToken datatable.filter.constraint.padding + */ + padding?: string; + /** + * Constraint border radius of filter + * + * @designToken datatable.filter.constraint.border.radius + */ + borderRadius?: string; + }; }; /** - * Overlay popover of filter - */ - overlayPopover?: { - - /** - * Overlay popover background of filter - * - * @designToken datatable.filter.overlay.popover.background - */ - background?: string; - /** - * Overlay popover border color of filter - * - * @designToken datatable.filter.overlay.popover.border.color - */ - borderColor?: string; - /** - * Overlay popover border radius of filter - * - * @designToken datatable.filter.overlay.popover.border.radius - */ - borderRadius?: string; - /** - * Overlay popover color of filter - * - * @designToken datatable.filter.overlay.popover.color - */ - color?: string; - /** - * Overlay popover shadow of filter - * - * @designToken datatable.filter.overlay.popover.shadow - */ - shadow?: string; - /** - * Overlay popover padding of filter - * - * @designToken datatable.filter.overlay.popover.padding - */ - padding?: string; - /** - * Overlay popover gap of filter - * - * @designToken datatable.filter.overlay.popover.gap - */ - gap?: string; - }; - /** - * Rule of filter - */ - rule?: { - - /** - * Rule border color of filter - * - * @designToken datatable.filter.rule.border.color - */ - borderColor?: string; - }; - /** - * Constraint list of filter - */ - constraintList?: { - - /** - * Constraint list padding of filter - * - * @designToken datatable.filter.constraint.list.padding - */ - padding?: string; - /** - * Constraint list gap of filter - * - * @designToken datatable.filter.constraint.list.gap - */ - gap?: string; - }; - /** - * Constraint of filter - */ - constraint?: { - - /** - * Constraint focus background of filter - * - * @designToken datatable.filter.constraint.focus.background - */ - focusBackground?: string; - /** - * Constraint selected background of filter - * - * @designToken datatable.filter.constraint.selected.background - */ - selectedBackground?: string; - /** - * Constraint selected focus background of filter - * - * @designToken datatable.filter.constraint.selected.focus.background - */ - selectedFocusBackground?: string; - /** - * Constraint color of filter - * - * @designToken datatable.filter.constraint.color - */ - color?: string; - /** - * Constraint focus color of filter - * - * @designToken datatable.filter.constraint.focus.color - */ - focusColor?: string; - /** - * Constraint selected color of filter - * - * @designToken datatable.filter.constraint.selected.color - */ - selectedColor?: string; - /** - * Constraint selected focus color of filter - * - * @designToken datatable.filter.constraint.selected.focus.color - */ - selectedFocusColor?: string; - /** - * Constraint separator of filter - */ - separator?: { - - /** - * Constraint separator border color of filter - * - * @designToken datatable.filter.constraint.separator.border.color - */ - borderColor?: string; - }; - /** - * Constraint padding of filter - * - * @designToken datatable.filter.constraint.padding - */ - padding?: string; - /** - * Constraint border radius of filter - * - * @designToken datatable.filter.constraint.border.radius - */ - borderRadius?: string; - }; - } - /** - * Used to pass tokens of the paginator top section - */ + * Used to pass tokens of the paginator top section + */ paginatorTop?: { - + /** + * Border color of paginator top + * + * @designToken datatable.paginator.top.border.color + */ + borderColor?: string; + /** + * Border width of paginator top + * + * @designToken datatable.paginator.top.border.width + */ + borderWidth?: string; + }; /** - * Border color of paginator top - * - * @designToken datatable.paginator.top.border.color - */ - borderColor?: string; - /** - * Border width of paginator top - * - * @designToken datatable.paginator.top.border.width - */ - borderWidth?: string; - } - /** - * Used to pass tokens of the paginator bottom section - */ + * Used to pass tokens of the paginator bottom section + */ paginatorBottom?: { - - /** - * Border color of paginator bottom - * - * @designToken datatable.paginator.bottom.border.color - */ - borderColor?: string; - /** - * Border width of paginator bottom - * - * @designToken datatable.paginator.bottom.border.width - */ - borderWidth?: string; - } + /** + * Border color of paginator bottom + * + * @designToken datatable.paginator.bottom.border.color + */ + borderColor?: string; + /** + * Border width of paginator bottom + * + * @designToken datatable.paginator.bottom.border.width + */ + borderWidth?: string; + }; } diff --git a/packages/themes/types/dataview/index.d.ts b/packages/themes/types/dataview/index.d.ts index 5b885016e..4d7274d7f 100644 --- a/packages/themes/types/dataview/index.d.ts +++ b/packages/themes/types/dataview/index.d.ts @@ -1,4 +1,3 @@ - /** * * DataView Design Tokens @@ -12,197 +11,190 @@ import { ColorSchemeDesignToken } from '..'; export interface DataViewDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Border color of root + * + * @designToken dataview.border.color + */ + borderColor?: string; + /** + * Border width of root + * + * @designToken dataview.border.width + */ + borderWidth?: string; + /** + * Border radius of root + * + * @designToken dataview.border.radius + */ + borderRadius?: string; + /** + * Padding of root + * + * @designToken dataview.padding + */ + padding?: string; + }; /** - * Border color of root - * - * @designToken dataview.border.color - */ - borderColor?: string; - /** - * Border width of root - * - * @designToken dataview.border.width - */ - borderWidth?: string; - /** - * Border radius of root - * - * @designToken dataview.border.radius - */ - borderRadius?: string; - /** - * Padding of root - * - * @designToken dataview.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Background of header + * + * @designToken dataview.header.background + */ + background?: string; + /** + * Color of header + * + * @designToken dataview.header.color + */ + color?: string; + /** + * Border color of header + * + * @designToken dataview.header.border.color + */ + borderColor?: string; + /** + * Border width of header + * + * @designToken dataview.header.border.width + */ + borderWidth?: string; + /** + * Padding of header + * + * @designToken dataview.header.padding + */ + padding?: string; + /** + * Border radius of header + * + * @designToken dataview.header.border.radius + */ + borderRadius?: string; + }; /** - * Background of header - * - * @designToken dataview.header.background - */ - background?: string; - /** - * Color of header - * - * @designToken dataview.header.color - */ - color?: string; - /** - * Border color of header - * - * @designToken dataview.header.border.color - */ - borderColor?: string; - /** - * Border width of header - * - * @designToken dataview.header.border.width - */ - borderWidth?: string; - /** - * Padding of header - * - * @designToken dataview.header.padding - */ - padding?: string; - /** - * Border radius of header - * - * @designToken dataview.header.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Background of content + * + * @designToken dataview.content.background + */ + background?: string; + /** + * Color of content + * + * @designToken dataview.content.color + */ + color?: string; + /** + * Border color of content + * + * @designToken dataview.content.border.color + */ + borderColor?: string; + /** + * Border width of content + * + * @designToken dataview.content.border.width + */ + borderWidth?: string; + /** + * Padding of content + * + * @designToken dataview.content.padding + */ + padding?: string; + /** + * Border radius of content + * + * @designToken dataview.content.border.radius + */ + borderRadius?: string; + }; /** - * Background of content - * - * @designToken dataview.content.background - */ - background?: string; - /** - * Color of content - * - * @designToken dataview.content.color - */ - color?: string; - /** - * Border color of content - * - * @designToken dataview.content.border.color - */ - borderColor?: string; - /** - * Border width of content - * - * @designToken dataview.content.border.width - */ - borderWidth?: string; - /** - * Padding of content - * - * @designToken dataview.content.padding - */ - padding?: string; - /** - * Border radius of content - * - * @designToken dataview.content.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the footer section - */ + * Used to pass tokens of the footer section + */ footer?: { - + /** + * Background of footer + * + * @designToken dataview.footer.background + */ + background?: string; + /** + * Color of footer + * + * @designToken dataview.footer.color + */ + color?: string; + /** + * Border color of footer + * + * @designToken dataview.footer.border.color + */ + borderColor?: string; + /** + * Border width of footer + * + * @designToken dataview.footer.border.width + */ + borderWidth?: string; + /** + * Padding of footer + * + * @designToken dataview.footer.padding + */ + padding?: string; + /** + * Border radius of footer + * + * @designToken dataview.footer.border.radius + */ + borderRadius?: string; + }; /** - * Background of footer - * - * @designToken dataview.footer.background - */ - background?: string; - /** - * Color of footer - * - * @designToken dataview.footer.color - */ - color?: string; - /** - * Border color of footer - * - * @designToken dataview.footer.border.color - */ - borderColor?: string; - /** - * Border width of footer - * - * @designToken dataview.footer.border.width - */ - borderWidth?: string; - /** - * Padding of footer - * - * @designToken dataview.footer.padding - */ - padding?: string; - /** - * Border radius of footer - * - * @designToken dataview.footer.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the paginator top section - */ + * Used to pass tokens of the paginator top section + */ paginatorTop?: { - + /** + * Border color of paginator top + * + * @designToken dataview.paginator.top.border.color + */ + borderColor?: string; + /** + * Border width of paginator top + * + * @designToken dataview.paginator.top.border.width + */ + borderWidth?: string; + }; /** - * Border color of paginator top - * - * @designToken dataview.paginator.top.border.color - */ - borderColor?: string; - /** - * Border width of paginator top - * - * @designToken dataview.paginator.top.border.width - */ - borderWidth?: string; - } - /** - * Used to pass tokens of the paginator bottom section - */ + * Used to pass tokens of the paginator bottom section + */ paginatorBottom?: { - - /** - * Border color of paginator bottom - * - * @designToken dataview.paginator.bottom.border.color - */ - borderColor?: string; - /** - * Border width of paginator bottom - * - * @designToken dataview.paginator.bottom.border.width - */ - borderWidth?: string; - } + /** + * Border color of paginator bottom + * + * @designToken dataview.paginator.bottom.border.color + */ + borderColor?: string; + /** + * Border width of paginator bottom + * + * @designToken dataview.paginator.bottom.border.width + */ + borderWidth?: string; + }; } diff --git a/packages/themes/types/datepicker/index.d.ts b/packages/themes/types/datepicker/index.d.ts index 8d64d8550..a190a6ccc 100644 --- a/packages/themes/types/datepicker/index.d.ts +++ b/packages/themes/types/datepicker/index.d.ts @@ -1,4 +1,3 @@ - /** * * DatePicker Design Tokens @@ -12,575 +11,553 @@ import { ColorSchemeDesignToken } from '..'; export interface DatePickerDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken datepicker.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken datepicker.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the panel section - */ + * Used to pass tokens of the panel section + */ panel?: { - + /** + * Background of panel + * + * @designToken datepicker.panel.background + */ + background?: string; + /** + * Border color of panel + * + * @designToken datepicker.panel.border.color + */ + borderColor?: string; + /** + * Color of panel + * + * @designToken datepicker.panel.color + */ + color?: string; + /** + * Border radius of panel + * + * @designToken datepicker.panel.border.radius + */ + borderRadius?: string; + /** + * Shadow of panel + * + * @designToken datepicker.panel.shadow + */ + shadow?: string; + /** + * Padding of panel + * + * @designToken datepicker.panel.padding + */ + padding?: string; + }; /** - * Background of panel - * - * @designToken datepicker.panel.background - */ - background?: string; - /** - * Border color of panel - * - * @designToken datepicker.panel.border.color - */ - borderColor?: string; - /** - * Color of panel - * - * @designToken datepicker.panel.color - */ - color?: string; - /** - * Border radius of panel - * - * @designToken datepicker.panel.border.radius - */ - borderRadius?: string; - /** - * Shadow of panel - * - * @designToken datepicker.panel.shadow - */ - shadow?: string; - /** - * Padding of panel - * - * @designToken datepicker.panel.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Background of header + * + * @designToken datepicker.header.background + */ + background?: string; + /** + * Border color of header + * + * @designToken datepicker.header.border.color + */ + borderColor?: string; + /** + * Color of header + * + * @designToken datepicker.header.color + */ + color?: string; + /** + * Padding of header + * + * @designToken datepicker.header.padding + */ + padding?: string; + /** + * Font weight of header + * + * @designToken datepicker.header.font.weight + */ + fontWeight?: string; + /** + * Gap of header + * + * @designToken datepicker.header.gap + */ + gap?: string; + }; /** - * Background of header - * - * @designToken datepicker.header.background - */ - background?: string; - /** - * Border color of header - * - * @designToken datepicker.header.border.color - */ - borderColor?: string; - /** - * Color of header - * - * @designToken datepicker.header.color - */ - color?: string; - /** - * Padding of header - * - * @designToken datepicker.header.padding - */ - padding?: string; - /** - * Font weight of header - * - * @designToken datepicker.header.font.weight - */ - fontWeight?: string; - /** - * Gap of header - * - * @designToken datepicker.header.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the title section - */ + * Used to pass tokens of the title section + */ title?: { - + /** + * Gap of title + * + * @designToken datepicker.title.gap + */ + gap?: string; + /** + * Font weight of title + * + * @designToken datepicker.title.font.weight + */ + fontWeight?: string; + }; /** - * Gap of title - * - * @designToken datepicker.title.gap - */ - gap?: string; - /** - * Font weight of title - * - * @designToken datepicker.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the dropdown section - */ + * Used to pass tokens of the dropdown section + */ dropdown?: { - - /** - * Width of dropdown - * - * @designToken datepicker.dropdown.width - */ - width?: string; - /** - * Border color of dropdown - * - * @designToken datepicker.dropdown.border.color - */ - borderColor?: string; - /** - * Hover border color of dropdown - * - * @designToken datepicker.dropdown.hover.border.color - */ - hoverBorderColor?: string; - /** - * Active border color of dropdown - * - * @designToken datepicker.dropdown.active.border.color - */ - activeBorderColor?: string; - /** - * Border radius of dropdown - * - * @designToken datepicker.dropdown.border.radius - */ - borderRadius?: string; - /** - * Focus ring of dropdown - */ - focusRing?: { - - /** - * Focus ring width of dropdown - * - * @designToken datepicker.dropdown.focus.ring.width - */ - width?: string; - /** - * Focus ring style of dropdown - * - * @designToken datepicker.dropdown.focus.ring.style - */ - style?: string; - /** - * Focus ring color of dropdown - * - * @designToken datepicker.dropdown.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of dropdown - * - * @designToken datepicker.dropdown.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of dropdown - * - * @designToken datepicker.dropdown.focus.ring.shadow - */ - shadow?: string; + /** + * Width of dropdown + * + * @designToken datepicker.dropdown.width + */ + width?: string; + /** + * Border color of dropdown + * + * @designToken datepicker.dropdown.border.color + */ + borderColor?: string; + /** + * Hover border color of dropdown + * + * @designToken datepicker.dropdown.hover.border.color + */ + hoverBorderColor?: string; + /** + * Active border color of dropdown + * + * @designToken datepicker.dropdown.active.border.color + */ + activeBorderColor?: string; + /** + * Border radius of dropdown + * + * @designToken datepicker.dropdown.border.radius + */ + borderRadius?: string; + /** + * Focus ring of dropdown + */ + focusRing?: { + /** + * Focus ring width of dropdown + * + * @designToken datepicker.dropdown.focus.ring.width + */ + width?: string; + /** + * Focus ring style of dropdown + * + * @designToken datepicker.dropdown.focus.ring.style + */ + style?: string; + /** + * Focus ring color of dropdown + * + * @designToken datepicker.dropdown.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of dropdown + * + * @designToken datepicker.dropdown.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of dropdown + * + * @designToken datepicker.dropdown.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Background of dropdown + * + * @designToken datepicker.dropdown.background + */ + background?: string; + /** + * Hover background of dropdown + * + * @designToken datepicker.dropdown.hover.background + */ + hoverBackground?: string; + /** + * Active background of dropdown + * + * @designToken datepicker.dropdown.active.background + */ + activeBackground?: string; + /** + * Color of dropdown + * + * @designToken datepicker.dropdown.color + */ + color?: string; + /** + * Hover color of dropdown + * + * @designToken datepicker.dropdown.hover.color + */ + hoverColor?: string; + /** + * Active color of dropdown + * + * @designToken datepicker.dropdown.active.color + */ + activeColor?: string; }; /** - * Background of dropdown - * - * @designToken datepicker.dropdown.background - */ - background?: string; - /** - * Hover background of dropdown - * - * @designToken datepicker.dropdown.hover.background - */ - hoverBackground?: string; - /** - * Active background of dropdown - * - * @designToken datepicker.dropdown.active.background - */ - activeBackground?: string; - /** - * Color of dropdown - * - * @designToken datepicker.dropdown.color - */ - color?: string; - /** - * Hover color of dropdown - * - * @designToken datepicker.dropdown.hover.color - */ - hoverColor?: string; - /** - * Active color of dropdown - * - * @designToken datepicker.dropdown.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the input icon section - */ + * Used to pass tokens of the input icon section + */ inputIcon?: { - - /** - * Color of input icon - * - * @designToken datepicker.input.icon.color - */ - color?: string; - } - /** - * Used to pass tokens of the select month section - */ - selectMonth?: { - - /** - * Hover background of select month - * - * @designToken datepicker.select.month.hover.background - */ - hoverBackground?: string; - /** - * Color of select month - * - * @designToken datepicker.select.month.color - */ - color?: string; - /** - * Hover color of select month - * - * @designToken datepicker.select.month.hover.color - */ - hoverColor?: string; - /** - * Padding of select month - * - * @designToken datepicker.select.month.padding - */ - padding?: string; - /** - * Border radius of select month - * - * @designToken datepicker.select.month.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the select year section - */ - selectYear?: { - - /** - * Hover background of select year - * - * @designToken datepicker.select.year.hover.background - */ - hoverBackground?: string; - /** - * Color of select year - * - * @designToken datepicker.select.year.color - */ - color?: string; - /** - * Hover color of select year - * - * @designToken datepicker.select.year.hover.color - */ - hoverColor?: string; - /** - * Padding of select year - * - * @designToken datepicker.select.year.padding - */ - padding?: string; - /** - * Border radius of select year - * - * @designToken datepicker.select.year.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the group section - */ - group?: { - - /** - * Border color of group - * - * @designToken datepicker.group.border.color - */ - borderColor?: string; - /** - * Gap of group - * - * @designToken datepicker.group.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the day view section - */ - dayView?: { - - /** - * Margin of day view - * - * @designToken datepicker.day.view.margin - */ - margin?: string; - } - /** - * Used to pass tokens of the week day section - */ - weekDay?: { - - /** - * Padding of week day - * - * @designToken datepicker.week.day.padding - */ - padding?: string; - /** - * Font weight of week day - * - * @designToken datepicker.week.day.font.weight - */ - fontWeight?: string; - /** - * Color of week day - * - * @designToken datepicker.week.day.color - */ - color?: string; - } - /** - * Used to pass tokens of the date section - */ - date?: { - - /** - * Hover background of date - * - * @designToken datepicker.date.hover.background - */ - hoverBackground?: string; - /** - * Selected background of date - * - * @designToken datepicker.date.selected.background - */ - selectedBackground?: string; - /** - * Color of date - * - * @designToken datepicker.date.color - */ - color?: string; - /** - * Hover color of date - * - * @designToken datepicker.date.hover.color - */ - hoverColor?: string; - /** - * Selected color of date - * - * @designToken datepicker.date.selected.color - */ - selectedColor?: string; - /** - * Width of date - * - * @designToken datepicker.date.width - */ - width?: string; - /** - * Height of date - * - * @designToken datepicker.date.height - */ - height?: string; - /** - * Border radius of date - * - * @designToken datepicker.date.border.radius - */ - borderRadius?: string; - /** - * Padding of date - * - * @designToken datepicker.date.padding - */ - padding?: string; - /** - * Focus ring of date - */ - focusRing?: { - - /** - * Focus ring width of date - * - * @designToken datepicker.date.focus.ring.width - */ - width?: string; - /** - * Focus ring style of date - * - * @designToken datepicker.date.focus.ring.style - */ - style?: string; - /** - * Focus ring color of date - * - * @designToken datepicker.date.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of date - * - * @designToken datepicker.date.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of date - * - * @designToken datepicker.date.focus.ring.shadow - */ - shadow?: string; + /** + * Color of input icon + * + * @designToken datepicker.input.icon.color + */ + color?: string; }; - } /** - * Used to pass tokens of the month view section - */ + * Used to pass tokens of the select month section + */ + selectMonth?: { + /** + * Hover background of select month + * + * @designToken datepicker.select.month.hover.background + */ + hoverBackground?: string; + /** + * Color of select month + * + * @designToken datepicker.select.month.color + */ + color?: string; + /** + * Hover color of select month + * + * @designToken datepicker.select.month.hover.color + */ + hoverColor?: string; + /** + * Padding of select month + * + * @designToken datepicker.select.month.padding + */ + padding?: string; + /** + * Border radius of select month + * + * @designToken datepicker.select.month.border.radius + */ + borderRadius?: string; + }; + /** + * Used to pass tokens of the select year section + */ + selectYear?: { + /** + * Hover background of select year + * + * @designToken datepicker.select.year.hover.background + */ + hoverBackground?: string; + /** + * Color of select year + * + * @designToken datepicker.select.year.color + */ + color?: string; + /** + * Hover color of select year + * + * @designToken datepicker.select.year.hover.color + */ + hoverColor?: string; + /** + * Padding of select year + * + * @designToken datepicker.select.year.padding + */ + padding?: string; + /** + * Border radius of select year + * + * @designToken datepicker.select.year.border.radius + */ + borderRadius?: string; + }; + /** + * Used to pass tokens of the group section + */ + group?: { + /** + * Border color of group + * + * @designToken datepicker.group.border.color + */ + borderColor?: string; + /** + * Gap of group + * + * @designToken datepicker.group.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the day view section + */ + dayView?: { + /** + * Margin of day view + * + * @designToken datepicker.day.view.margin + */ + margin?: string; + }; + /** + * Used to pass tokens of the week day section + */ + weekDay?: { + /** + * Padding of week day + * + * @designToken datepicker.week.day.padding + */ + padding?: string; + /** + * Font weight of week day + * + * @designToken datepicker.week.day.font.weight + */ + fontWeight?: string; + /** + * Color of week day + * + * @designToken datepicker.week.day.color + */ + color?: string; + }; + /** + * Used to pass tokens of the date section + */ + date?: { + /** + * Hover background of date + * + * @designToken datepicker.date.hover.background + */ + hoverBackground?: string; + /** + * Selected background of date + * + * @designToken datepicker.date.selected.background + */ + selectedBackground?: string; + /** + * Color of date + * + * @designToken datepicker.date.color + */ + color?: string; + /** + * Hover color of date + * + * @designToken datepicker.date.hover.color + */ + hoverColor?: string; + /** + * Selected color of date + * + * @designToken datepicker.date.selected.color + */ + selectedColor?: string; + /** + * Width of date + * + * @designToken datepicker.date.width + */ + width?: string; + /** + * Height of date + * + * @designToken datepicker.date.height + */ + height?: string; + /** + * Border radius of date + * + * @designToken datepicker.date.border.radius + */ + borderRadius?: string; + /** + * Padding of date + * + * @designToken datepicker.date.padding + */ + padding?: string; + /** + * Focus ring of date + */ + focusRing?: { + /** + * Focus ring width of date + * + * @designToken datepicker.date.focus.ring.width + */ + width?: string; + /** + * Focus ring style of date + * + * @designToken datepicker.date.focus.ring.style + */ + style?: string; + /** + * Focus ring color of date + * + * @designToken datepicker.date.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of date + * + * @designToken datepicker.date.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of date + * + * @designToken datepicker.date.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the month view section + */ monthView?: { - + /** + * Margin of month view + * + * @designToken datepicker.month.view.margin + */ + margin?: string; + }; /** - * Margin of month view - * - * @designToken datepicker.month.view.margin - */ - margin?: string; - } - /** - * Used to pass tokens of the month section - */ + * Used to pass tokens of the month section + */ month?: { - + /** + * Border radius of month + * + * @designToken datepicker.month.border.radius + */ + borderRadius?: string; + }; /** - * Border radius of month - * - * @designToken datepicker.month.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the year view section - */ + * Used to pass tokens of the year view section + */ yearView?: { - + /** + * Margin of year view + * + * @designToken datepicker.year.view.margin + */ + margin?: string; + }; /** - * Margin of year view - * - * @designToken datepicker.year.view.margin - */ - margin?: string; - } - /** - * Used to pass tokens of the year section - */ + * Used to pass tokens of the year section + */ year?: { - + /** + * Border radius of year + * + * @designToken datepicker.year.border.radius + */ + borderRadius?: string; + }; /** - * Border radius of year - * - * @designToken datepicker.year.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the buttonbar section - */ + * Used to pass tokens of the buttonbar section + */ buttonbar?: { - + /** + * Padding of buttonbar + * + * @designToken datepicker.buttonbar.padding + */ + padding?: string; + /** + * Border color of buttonbar + * + * @designToken datepicker.buttonbar.border.color + */ + borderColor?: string; + }; /** - * Padding of buttonbar - * - * @designToken datepicker.buttonbar.padding - */ - padding?: string; - /** - * Border color of buttonbar - * - * @designToken datepicker.buttonbar.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the time picker section - */ + * Used to pass tokens of the time picker section + */ timePicker?: { - + /** + * Padding of time picker + * + * @designToken datepicker.time.picker.padding + */ + padding?: string; + /** + * Border color of time picker + * + * @designToken datepicker.time.picker.border.color + */ + borderColor?: string; + /** + * Gap of time picker + * + * @designToken datepicker.time.picker.gap + */ + gap?: string; + /** + * Button gap of time picker + * + * @designToken datepicker.time.picker.button.gap + */ + buttonGap?: string; + }; /** - * Padding of time picker - * - * @designToken datepicker.time.picker.padding - */ - padding?: string; - /** - * Border color of time picker - * - * @designToken datepicker.time.picker.border.color - */ - borderColor?: string; - /** - * Gap of time picker - * - * @designToken datepicker.time.picker.gap - */ - gap?: string; - /** - * Button gap of time picker - * - * @designToken datepicker.time.picker.button.gap - */ - buttonGap?: string; - } - /** - * Used to pass tokens of the today section - */ + * Used to pass tokens of the today section + */ today?: { - - /** - * Background of today - * - * @designToken datepicker.today.background - */ - background?: string; - /** - * Color of today - * - * @designToken datepicker.today.color - */ - color?: string; - } + /** + * Background of today + * + * @designToken datepicker.today.background + */ + background?: string; + /** + * Color of today + * + * @designToken datepicker.today.color + */ + color?: string; + }; } diff --git a/packages/themes/types/dialog/index.d.ts b/packages/themes/types/dialog/index.d.ts index 579fd791b..48d00dcc4 100644 --- a/packages/themes/types/dialog/index.d.ts +++ b/packages/themes/types/dialog/index.d.ts @@ -1,4 +1,3 @@ - /** * * Dialog Design Tokens @@ -12,107 +11,101 @@ import { ColorSchemeDesignToken } from '..'; export interface DialogDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken dialog.background + */ + background?: string; + /** + * Border color of root + * + * @designToken dialog.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken dialog.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken dialog.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken dialog.shadow + */ + shadow?: string; + }; /** - * Background of root - * - * @designToken dialog.background - */ - background?: string; - /** - * Border color of root - * - * @designToken dialog.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken dialog.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken dialog.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken dialog.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Padding of header + * + * @designToken dialog.header.padding + */ + padding?: string; + /** + * Gap of header + * + * @designToken dialog.header.gap + */ + gap?: string; + }; /** - * Padding of header - * - * @designToken dialog.header.padding - */ - padding?: string; - /** - * Gap of header - * - * @designToken dialog.header.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the title section - */ + * Used to pass tokens of the title section + */ title?: { - + /** + * Font size of title + * + * @designToken dialog.title.font.size + */ + fontSize?: string; + /** + * Font weight of title + * + * @designToken dialog.title.font.weight + */ + fontWeight?: string; + }; /** - * Font size of title - * - * @designToken dialog.title.font.size - */ - fontSize?: string; - /** - * Font weight of title - * - * @designToken dialog.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Padding of content + * + * @designToken dialog.content.padding + */ + padding?: string; + }; /** - * Padding of content - * - * @designToken dialog.content.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the footer section - */ + * Used to pass tokens of the footer section + */ footer?: { - - /** - * Padding of footer - * - * @designToken dialog.footer.padding - */ - padding?: string; - /** - * Gap of footer - * - * @designToken dialog.footer.gap - */ - gap?: string; - } + /** + * Padding of footer + * + * @designToken dialog.footer.padding + */ + padding?: string; + /** + * Gap of footer + * + * @designToken dialog.footer.gap + */ + gap?: string; + }; } diff --git a/packages/themes/types/divider/index.d.ts b/packages/themes/types/divider/index.d.ts index fa751a7c6..aa387f30d 100644 --- a/packages/themes/types/divider/index.d.ts +++ b/packages/themes/types/divider/index.d.ts @@ -1,4 +1,3 @@ - /** * * Divider Design Tokens @@ -12,95 +11,88 @@ import { ColorSchemeDesignToken } from '..'; export interface DividerDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Border color of root + * + * @designToken divider.border.color + */ + borderColor?: string; + }; /** - * Border color of root - * - * @designToken divider.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Background of content + * + * @designToken divider.content.background + */ + background?: string; + /** + * Color of content + * + * @designToken divider.content.color + */ + color?: string; + }; /** - * Background of content - * - * @designToken divider.content.background - */ - background?: string; - /** - * Color of content - * - * @designToken divider.content.color - */ - color?: string; - } - /** - * Used to pass tokens of the horizontal section - */ + * Used to pass tokens of the horizontal section + */ horizontal?: { - - /** - * Margin of horizontal - * - * @designToken divider.horizontal.margin - */ - margin?: string; - /** - * Padding of horizontal - * - * @designToken divider.horizontal.padding - */ - padding?: string; - /** - * Content of horizontal - */ - content?: { - - /** - * Content padding of horizontal - * - * @designToken divider.horizontal.content.padding - */ - padding?: string; + /** + * Margin of horizontal + * + * @designToken divider.horizontal.margin + */ + margin?: string; + /** + * Padding of horizontal + * + * @designToken divider.horizontal.padding + */ + padding?: string; + /** + * Content of horizontal + */ + content?: { + /** + * Content padding of horizontal + * + * @designToken divider.horizontal.content.padding + */ + padding?: string; + }; }; - } /** - * Used to pass tokens of the vertical section - */ + * Used to pass tokens of the vertical section + */ vertical?: { - - /** - * Margin of vertical - * - * @designToken divider.vertical.margin - */ - margin?: string; - /** - * Padding of vertical - * - * @designToken divider.vertical.padding - */ - padding?: string; - /** - * Content of vertical - */ - content?: { - - /** - * Content padding of vertical - * - * @designToken divider.vertical.content.padding - */ - padding?: string; + /** + * Margin of vertical + * + * @designToken divider.vertical.margin + */ + margin?: string; + /** + * Padding of vertical + * + * @designToken divider.vertical.padding + */ + padding?: string; + /** + * Content of vertical + */ + content?: { + /** + * Content padding of vertical + * + * @designToken divider.vertical.content.padding + */ + padding?: string; + }; }; - } } diff --git a/packages/themes/types/dock/index.d.ts b/packages/themes/types/dock/index.d.ts index b918c2604..b929adf6b 100644 --- a/packages/themes/types/dock/index.d.ts +++ b/packages/themes/types/dock/index.d.ts @@ -1,4 +1,3 @@ - /** * * Dock Design Tokens @@ -12,95 +11,91 @@ import { ColorSchemeDesignToken } from '..'; export interface DockDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken dock.background - */ - background?: string; - /** - * Border color of root - * - * @designToken dock.border.color - */ - borderColor?: string; - /** - * Padding of root - * - * @designToken dock.padding - */ - padding?: string; - /** - * Border radius of root - * - * @designToken dock.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the item section - */ - item?: { - - /** - * Border radius of item - * - * @designToken dock.item.border.radius - */ - borderRadius?: string; - /** - * Padding of item - * - * @designToken dock.item.padding - */ - padding?: string; - /** - * Size of item - * - * @designToken dock.item.size - */ - size?: string; - /** - * Focus ring of item - */ - focusRing?: { - - /** - * Focus ring width of item - * - * @designToken dock.item.focus.ring.width - */ - width?: string; - /** - * Focus ring style of item - * - * @designToken dock.item.focus.ring.style - */ - style?: string; - /** - * Focus ring color of item - * - * @designToken dock.item.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of item - * - * @designToken dock.item.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of item - * - * @designToken dock.item.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken dock.background + */ + background?: string; + /** + * Border color of root + * + * @designToken dock.border.color + */ + borderColor?: string; + /** + * Padding of root + * + * @designToken dock.padding + */ + padding?: string; + /** + * Border radius of root + * + * @designToken dock.border.radius + */ + borderRadius?: string; + }; + /** + * Used to pass tokens of the item section + */ + item?: { + /** + * Border radius of item + * + * @designToken dock.item.border.radius + */ + borderRadius?: string; + /** + * Padding of item + * + * @designToken dock.item.padding + */ + padding?: string; + /** + * Size of item + * + * @designToken dock.item.size + */ + size?: string; + /** + * Focus ring of item + */ + focusRing?: { + /** + * Focus ring width of item + * + * @designToken dock.item.focus.ring.width + */ + width?: string; + /** + * Focus ring style of item + * + * @designToken dock.item.focus.ring.style + */ + style?: string; + /** + * Focus ring color of item + * + * @designToken dock.item.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of item + * + * @designToken dock.item.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of item + * + * @designToken dock.item.focus.ring.shadow + */ + shadow?: string; + }; }; - } } diff --git a/packages/themes/types/drawer/index.d.ts b/packages/themes/types/drawer/index.d.ts index 08dd77f24..b5032a287 100644 --- a/packages/themes/types/drawer/index.d.ts +++ b/packages/themes/types/drawer/index.d.ts @@ -1,4 +1,3 @@ - /** * * Drawer Design Tokens @@ -12,83 +11,78 @@ import { ColorSchemeDesignToken } from '..'; export interface DrawerDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken drawer.background + */ + background?: string; + /** + * Border color of root + * + * @designToken drawer.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken drawer.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken drawer.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken drawer.shadow + */ + shadow?: string; + }; /** - * Background of root - * - * @designToken drawer.background - */ - background?: string; - /** - * Border color of root - * - * @designToken drawer.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken drawer.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken drawer.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken drawer.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Padding of header + * + * @designToken drawer.header.padding + */ + padding?: string; + }; /** - * Padding of header - * - * @designToken drawer.header.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the title section - */ + * Used to pass tokens of the title section + */ title?: { - + /** + * Font size of title + * + * @designToken drawer.title.font.size + */ + fontSize?: string; + /** + * Font weight of title + * + * @designToken drawer.title.font.weight + */ + fontWeight?: string; + }; /** - * Font size of title - * - * @designToken drawer.title.font.size - */ - fontSize?: string; - /** - * Font weight of title - * - * @designToken drawer.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Padding of content - * - * @designToken drawer.content.padding - */ - padding?: string; - } + /** + * Padding of content + * + * @designToken drawer.content.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/editor/index.d.ts b/packages/themes/types/editor/index.d.ts index 089d9e26e..c24f7b29c 100644 --- a/packages/themes/types/editor/index.d.ts +++ b/packages/themes/types/editor/index.d.ts @@ -1,4 +1,3 @@ - /** * * Editor Design Tokens @@ -12,161 +11,155 @@ import { ColorSchemeDesignToken } from '..'; export interface EditorDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the toolbar section - */ + * Used to pass tokens of the toolbar section + */ toolbar?: { - + /** + * Background of toolbar + * + * @designToken editor.toolbar.background + */ + background?: string; + /** + * Border color of toolbar + * + * @designToken editor.toolbar.border.color + */ + borderColor?: string; + /** + * Border radius of toolbar + * + * @designToken editor.toolbar.border.radius + */ + borderRadius?: string; + }; /** - * Background of toolbar - * - * @designToken editor.toolbar.background - */ - background?: string; - /** - * Border color of toolbar - * - * @designToken editor.toolbar.border.color - */ - borderColor?: string; - /** - * Border radius of toolbar - * - * @designToken editor.toolbar.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the toolbar item section - */ + * Used to pass tokens of the toolbar item section + */ toolbarItem?: { - + /** + * Color of toolbar item + * + * @designToken editor.toolbar.item.color + */ + color?: string; + /** + * Hover color of toolbar item + * + * @designToken editor.toolbar.item.hover.color + */ + hoverColor?: string; + /** + * Active color of toolbar item + * + * @designToken editor.toolbar.item.active.color + */ + activeColor?: string; + }; /** - * Color of toolbar item - * - * @designToken editor.toolbar.item.color - */ - color?: string; - /** - * Hover color of toolbar item - * - * @designToken editor.toolbar.item.hover.color - */ - hoverColor?: string; - /** - * Active color of toolbar item - * - * @designToken editor.toolbar.item.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the overlay section - */ + * Used to pass tokens of the overlay section + */ overlay?: { - + /** + * Background of overlay + * + * @designToken editor.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken editor.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken editor.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken editor.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken editor.overlay.shadow + */ + shadow?: string; + /** + * Padding of overlay + * + * @designToken editor.overlay.padding + */ + padding?: string; + }; /** - * Background of overlay - * - * @designToken editor.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken editor.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken editor.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken editor.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken editor.overlay.shadow - */ - shadow?: string; - /** - * Padding of overlay - * - * @designToken editor.overlay.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the overlay option section - */ + * Used to pass tokens of the overlay option section + */ overlayOption?: { - + /** + * Focus background of overlay option + * + * @designToken editor.overlay.option.focus.background + */ + focusBackground?: string; + /** + * Color of overlay option + * + * @designToken editor.overlay.option.color + */ + color?: string; + /** + * Focus color of overlay option + * + * @designToken editor.overlay.option.focus.color + */ + focusColor?: string; + /** + * Padding of overlay option + * + * @designToken editor.overlay.option.padding + */ + padding?: string; + /** + * Border radius of overlay option + * + * @designToken editor.overlay.option.border.radius + */ + borderRadius?: string; + }; /** - * Focus background of overlay option - * - * @designToken editor.overlay.option.focus.background - */ - focusBackground?: string; - /** - * Color of overlay option - * - * @designToken editor.overlay.option.color - */ - color?: string; - /** - * Focus color of overlay option - * - * @designToken editor.overlay.option.focus.color - */ - focusColor?: string; - /** - * Padding of overlay option - * - * @designToken editor.overlay.option.padding - */ - padding?: string; - /** - * Border radius of overlay option - * - * @designToken editor.overlay.option.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Background of content - * - * @designToken editor.content.background - */ - background?: string; - /** - * Border color of content - * - * @designToken editor.content.border.color - */ - borderColor?: string; - /** - * Color of content - * - * @designToken editor.content.color - */ - color?: string; - /** - * Border radius of content - * - * @designToken editor.content.border.radius - */ - borderRadius?: string; - } + /** + * Background of content + * + * @designToken editor.content.background + */ + background?: string; + /** + * Border color of content + * + * @designToken editor.content.border.color + */ + borderColor?: string; + /** + * Color of content + * + * @designToken editor.content.color + */ + color?: string; + /** + * Border radius of content + * + * @designToken editor.content.border.radius + */ + borderRadius?: string; + }; } diff --git a/packages/themes/types/fieldset/index.d.ts b/packages/themes/types/fieldset/index.d.ts index 2aa73c1ff..00e16e822 100644 --- a/packages/themes/types/fieldset/index.d.ts +++ b/packages/themes/types/fieldset/index.d.ts @@ -1,4 +1,3 @@ - /** * * Fieldset Design Tokens @@ -12,179 +11,173 @@ import { ColorSchemeDesignToken } from '..'; export interface FieldsetDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken fieldset.background - */ - background?: string; - /** - * Border color of root - * - * @designToken fieldset.border.color - */ - borderColor?: string; - /** - * Border radius of root - * - * @designToken fieldset.border.radius - */ - borderRadius?: string; - /** - * Color of root - * - * @designToken fieldset.color - */ - color?: string; - /** - * Padding of root - * - * @designToken fieldset.padding - */ - padding?: string; - /** - * Transition duration of root - * - * @designToken fieldset.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the legend section - */ - legend?: { - - /** - * Background of legend - * - * @designToken fieldset.legend.background - */ - background?: string; - /** - * Hover background of legend - * - * @designToken fieldset.legend.hover.background - */ - hoverBackground?: string; - /** - * Color of legend - * - * @designToken fieldset.legend.color - */ - color?: string; - /** - * Hover color of legend - * - * @designToken fieldset.legend.hover.color - */ - hoverColor?: string; - /** - * Border radius of legend - * - * @designToken fieldset.legend.border.radius - */ - borderRadius?: string; - /** - * Border width of legend - * - * @designToken fieldset.legend.border.width - */ - borderWidth?: string; - /** - * Border color of legend - * - * @designToken fieldset.legend.border.color - */ - borderColor?: string; - /** - * Padding of legend - * - * @designToken fieldset.legend.padding - */ - padding?: string; - /** - * Gap of legend - * - * @designToken fieldset.legend.gap - */ - gap?: string; - /** - * Font weight of legend - * - * @designToken fieldset.legend.font.weight - */ - fontWeight?: string; - /** - * Focus ring of legend - */ - focusRing?: { - - /** - * Focus ring width of legend - * - * @designToken fieldset.legend.focus.ring.width - */ - width?: string; - /** - * Focus ring style of legend - * - * @designToken fieldset.legend.focus.ring.style - */ - style?: string; - /** - * Focus ring color of legend - * - * @designToken fieldset.legend.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of legend - * - * @designToken fieldset.legend.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of legend - * - * @designToken fieldset.legend.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken fieldset.background + */ + background?: string; + /** + * Border color of root + * + * @designToken fieldset.border.color + */ + borderColor?: string; + /** + * Border radius of root + * + * @designToken fieldset.border.radius + */ + borderRadius?: string; + /** + * Color of root + * + * @designToken fieldset.color + */ + color?: string; + /** + * Padding of root + * + * @designToken fieldset.padding + */ + padding?: string; + /** + * Transition duration of root + * + * @designToken fieldset.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the toggle icon section - */ + * Used to pass tokens of the legend section + */ + legend?: { + /** + * Background of legend + * + * @designToken fieldset.legend.background + */ + background?: string; + /** + * Hover background of legend + * + * @designToken fieldset.legend.hover.background + */ + hoverBackground?: string; + /** + * Color of legend + * + * @designToken fieldset.legend.color + */ + color?: string; + /** + * Hover color of legend + * + * @designToken fieldset.legend.hover.color + */ + hoverColor?: string; + /** + * Border radius of legend + * + * @designToken fieldset.legend.border.radius + */ + borderRadius?: string; + /** + * Border width of legend + * + * @designToken fieldset.legend.border.width + */ + borderWidth?: string; + /** + * Border color of legend + * + * @designToken fieldset.legend.border.color + */ + borderColor?: string; + /** + * Padding of legend + * + * @designToken fieldset.legend.padding + */ + padding?: string; + /** + * Gap of legend + * + * @designToken fieldset.legend.gap + */ + gap?: string; + /** + * Font weight of legend + * + * @designToken fieldset.legend.font.weight + */ + fontWeight?: string; + /** + * Focus ring of legend + */ + focusRing?: { + /** + * Focus ring width of legend + * + * @designToken fieldset.legend.focus.ring.width + */ + width?: string; + /** + * Focus ring style of legend + * + * @designToken fieldset.legend.focus.ring.style + */ + style?: string; + /** + * Focus ring color of legend + * + * @designToken fieldset.legend.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of legend + * + * @designToken fieldset.legend.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of legend + * + * @designToken fieldset.legend.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the toggle icon section + */ toggleIcon?: { - + /** + * Color of toggle icon + * + * @designToken fieldset.toggle.icon.color + */ + color?: string; + /** + * Hover color of toggle icon + * + * @designToken fieldset.toggle.icon.hover.color + */ + hoverColor?: string; + }; /** - * Color of toggle icon - * - * @designToken fieldset.toggle.icon.color - */ - color?: string; - /** - * Hover color of toggle icon - * - * @designToken fieldset.toggle.icon.hover.color - */ - hoverColor?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Padding of content - * - * @designToken fieldset.content.padding - */ - padding?: string; - } + /** + * Padding of content + * + * @designToken fieldset.content.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/fileupload/index.d.ts b/packages/themes/types/fileupload/index.d.ts index 292480b3b..15bcc60d1 100644 --- a/packages/themes/types/fileupload/index.d.ts +++ b/packages/themes/types/fileupload/index.d.ts @@ -1,4 +1,3 @@ - /** * * FileUpload Design Tokens @@ -12,161 +11,153 @@ import { ColorSchemeDesignToken } from '..'; export interface FileUploadDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken fileupload.background - */ - background?: string; - /** - * Border color of root - * - * @designToken fileupload.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken fileupload.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken fileupload.border.radius - */ - borderRadius?: string; - /** - * Transition duration of root - * - * @designToken fileupload.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the header section - */ - header?: { - - /** - * Background of header - * - * @designToken fileupload.header.background - */ - background?: string; - /** - * Color of header - * - * @designToken fileupload.header.color - */ - color?: string; - /** - * Padding of header - * - * @designToken fileupload.header.padding - */ - padding?: string; - /** - * Border width of header - * - * @designToken fileupload.header.border.width - */ - borderWidth?: string; - /** - * Border radius of header - * - * @designToken fileupload.header.border.radius - */ - borderRadius?: string; - /** - * Gap of header - * - * @designToken fileupload.header.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the content section - */ - content?: { - - /** - * Highlight border color of content - * - * @designToken fileupload.content.highlight.border.color - */ - highlightBorderColor?: string; - /** - * Padding of content - * - * @designToken fileupload.content.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the file section - */ - file?: { - - /** - * Padding of file - * - * @designToken fileupload.file.padding - */ - padding?: string; - /** - * Gap of file - * - * @designToken fileupload.file.gap - */ - gap?: string; - /** - * Border color of file - * - * @designToken fileupload.file.border.color - */ - borderColor?: string; - /** - * Info of file - */ - info?: { - - /** - * Info gap of file - * - * @designToken fileupload.file.info.gap - */ - gap?: string; + /** + * Background of root + * + * @designToken fileupload.background + */ + background?: string; + /** + * Border color of root + * + * @designToken fileupload.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken fileupload.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken fileupload.border.radius + */ + borderRadius?: string; + /** + * Transition duration of root + * + * @designToken fileupload.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the progressbar section - */ + * Used to pass tokens of the header section + */ + header?: { + /** + * Background of header + * + * @designToken fileupload.header.background + */ + background?: string; + /** + * Color of header + * + * @designToken fileupload.header.color + */ + color?: string; + /** + * Padding of header + * + * @designToken fileupload.header.padding + */ + padding?: string; + /** + * Border width of header + * + * @designToken fileupload.header.border.width + */ + borderWidth?: string; + /** + * Border radius of header + * + * @designToken fileupload.header.border.radius + */ + borderRadius?: string; + /** + * Gap of header + * + * @designToken fileupload.header.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the content section + */ + content?: { + /** + * Highlight border color of content + * + * @designToken fileupload.content.highlight.border.color + */ + highlightBorderColor?: string; + /** + * Padding of content + * + * @designToken fileupload.content.padding + */ + padding?: string; + }; + /** + * Used to pass tokens of the file section + */ + file?: { + /** + * Padding of file + * + * @designToken fileupload.file.padding + */ + padding?: string; + /** + * Gap of file + * + * @designToken fileupload.file.gap + */ + gap?: string; + /** + * Border color of file + * + * @designToken fileupload.file.border.color + */ + borderColor?: string; + /** + * Info of file + */ + info?: { + /** + * Info gap of file + * + * @designToken fileupload.file.info.gap + */ + gap?: string; + }; + }; + /** + * Used to pass tokens of the progressbar section + */ progressbar?: { - + /** + * Height of progressbar + * + * @designToken fileupload.progressbar.height + */ + height?: string; + }; /** - * Height of progressbar - * - * @designToken fileupload.progressbar.height - */ - height?: string; - } - /** - * Used to pass tokens of the basic section - */ + * Used to pass tokens of the basic section + */ basic?: { - - /** - * Gap of basic - * - * @designToken fileupload.basic.gap - */ - gap?: string; - } + /** + * Gap of basic + * + * @designToken fileupload.basic.gap + */ + gap?: string; + }; } diff --git a/packages/themes/types/floatlabel/index.d.ts b/packages/themes/types/floatlabel/index.d.ts index 5e10f7d36..d3bd1bbed 100644 --- a/packages/themes/types/floatlabel/index.d.ts +++ b/packages/themes/types/floatlabel/index.d.ts @@ -1,4 +1,3 @@ - /** * * FloatLabel Design Tokens @@ -12,35 +11,33 @@ import { ColorSchemeDesignToken } from '..'; export interface FloatLabelDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Color of root - * - * @designToken floatlabel.color - */ - color?: string; - /** - * Focus color of root - * - * @designToken floatlabel.focus.color - */ - focusColor?: string; - /** - * Invalid color of root - * - * @designToken floatlabel.invalid.color - */ - invalidColor?: string; - /** - * Transition duration of root - * - * @designToken floatlabel.transition.duration - */ - transitionDuration?: string; - } + /** + * Color of root + * + * @designToken floatlabel.color + */ + color?: string; + /** + * Focus color of root + * + * @designToken floatlabel.focus.color + */ + focusColor?: string; + /** + * Invalid color of root + * + * @designToken floatlabel.invalid.color + */ + invalidColor?: string; + /** + * Transition duration of root + * + * @designToken floatlabel.transition.duration + */ + transitionDuration?: string; + }; } diff --git a/packages/themes/types/galleria/index.d.ts b/packages/themes/types/galleria/index.d.ts index c27cf76f3..2f5905791 100644 --- a/packages/themes/types/galleria/index.d.ts +++ b/packages/themes/types/galleria/index.d.ts @@ -1,4 +1,3 @@ - /** * * Galleria Design Tokens @@ -12,527 +11,506 @@ import { ColorSchemeDesignToken } from '..'; export interface GalleriaDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Border width of root + * + * @designToken galleria.border.width + */ + borderWidth?: string; + /** + * Border color of root + * + * @designToken galleria.border.color + */ + borderColor?: string; + /** + * Border radius of root + * + * @designToken galleria.border.radius + */ + borderRadius?: string; + /** + * Transition duration of root + * + * @designToken galleria.transition.duration + */ + transitionDuration?: string; + }; /** - * Border width of root - * - * @designToken galleria.border.width - */ - borderWidth?: string; - /** - * Border color of root - * - * @designToken galleria.border.color - */ - borderColor?: string; - /** - * Border radius of root - * - * @designToken galleria.border.radius - */ - borderRadius?: string; - /** - * Transition duration of root - * - * @designToken galleria.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the nav button section - */ + * Used to pass tokens of the nav button section + */ navButton?: { - - /** - * Background of nav button - * - * @designToken galleria.nav.button.background - */ - background?: string; - /** - * Hover background of nav button - * - * @designToken galleria.nav.button.hover.background - */ - hoverBackground?: string; - /** - * Color of nav button - * - * @designToken galleria.nav.button.color - */ - color?: string; - /** - * Hover color of nav button - * - * @designToken galleria.nav.button.hover.color - */ - hoverColor?: string; - /** - * Size of nav button - * - * @designToken galleria.nav.button.size - */ - size?: string; - /** - * Gutter of nav button - * - * @designToken galleria.nav.button.gutter - */ - gutter?: string; - /** - * Prev of nav button - */ - prev?: { - - /** - * Prev border radius of nav button - * - * @designToken galleria.nav.button.prev.border.radius - */ - borderRadius?: string; + /** + * Background of nav button + * + * @designToken galleria.nav.button.background + */ + background?: string; + /** + * Hover background of nav button + * + * @designToken galleria.nav.button.hover.background + */ + hoverBackground?: string; + /** + * Color of nav button + * + * @designToken galleria.nav.button.color + */ + color?: string; + /** + * Hover color of nav button + * + * @designToken galleria.nav.button.hover.color + */ + hoverColor?: string; + /** + * Size of nav button + * + * @designToken galleria.nav.button.size + */ + size?: string; + /** + * Gutter of nav button + * + * @designToken galleria.nav.button.gutter + */ + gutter?: string; + /** + * Prev of nav button + */ + prev?: { + /** + * Prev border radius of nav button + * + * @designToken galleria.nav.button.prev.border.radius + */ + borderRadius?: string; + }; + /** + * Next of nav button + */ + next?: { + /** + * Next border radius of nav button + * + * @designToken galleria.nav.button.next.border.radius + */ + borderRadius?: string; + }; + /** + * Focus ring of nav button + */ + focusRing?: { + /** + * Focus ring width of nav button + * + * @designToken galleria.nav.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of nav button + * + * @designToken galleria.nav.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of nav button + * + * @designToken galleria.nav.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of nav button + * + * @designToken galleria.nav.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of nav button + * + * @designToken galleria.nav.button.focus.ring.shadow + */ + shadow?: string; + }; }; /** - * Next of nav button - */ - next?: { - - /** - * Next border radius of nav button - * - * @designToken galleria.nav.button.next.border.radius - */ - borderRadius?: string; - }; - /** - * Focus ring of nav button - */ - focusRing?: { - - /** - * Focus ring width of nav button - * - * @designToken galleria.nav.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of nav button - * - * @designToken galleria.nav.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of nav button - * - * @designToken galleria.nav.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of nav button - * - * @designToken galleria.nav.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of nav button - * - * @designToken galleria.nav.button.focus.ring.shadow - */ - shadow?: string; - }; - } - /** - * Used to pass tokens of the nav icon section - */ + * Used to pass tokens of the nav icon section + */ navIcon?: { - + /** + * Size of nav icon + * + * @designToken galleria.nav.icon.size + */ + size?: string; + }; /** - * Size of nav icon - * - * @designToken galleria.nav.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the thumbnails content section - */ + * Used to pass tokens of the thumbnails content section + */ thumbnailsContent?: { - + /** + * Background of thumbnails content + * + * @designToken galleria.thumbnails.content.background + */ + background?: string; + /** + * Padding of thumbnails content + * + * @designToken galleria.thumbnails.content.padding + */ + padding?: string; + }; /** - * Background of thumbnails content - * - * @designToken galleria.thumbnails.content.background - */ - background?: string; - /** - * Padding of thumbnails content - * - * @designToken galleria.thumbnails.content.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the thumbnail nav button section - */ + * Used to pass tokens of the thumbnail nav button section + */ thumbnailNavButton?: { - - /** - * Size of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.size - */ - size?: string; - /** - * Border radius of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.border.radius - */ - borderRadius?: string; - /** - * Gutter of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.gutter - */ - gutter?: string; - /** - * Focus ring of thumbnail nav button - */ - focusRing?: { - - /** - * Focus ring width of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.focus.ring.shadow - */ - shadow?: string; + /** + * Size of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.size + */ + size?: string; + /** + * Border radius of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.border.radius + */ + borderRadius?: string; + /** + * Gutter of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.gutter + */ + gutter?: string; + /** + * Focus ring of thumbnail nav button + */ + focusRing?: { + /** + * Focus ring width of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Hover background of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.hover.background + */ + hoverBackground?: string; + /** + * Color of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.color + */ + color?: string; + /** + * Hover color of thumbnail nav button + * + * @designToken galleria.thumbnail.nav.button.hover.color + */ + hoverColor?: string; }; /** - * Hover background of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.hover.background - */ - hoverBackground?: string; - /** - * Color of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.color - */ - color?: string; - /** - * Hover color of thumbnail nav button - * - * @designToken galleria.thumbnail.nav.button.hover.color - */ - hoverColor?: string; - } - /** - * Used to pass tokens of the thumbnail nav button icon section - */ + * Used to pass tokens of the thumbnail nav button icon section + */ thumbnailNavButtonIcon?: { - + /** + * Size of thumbnail nav button icon + * + * @designToken galleria.thumbnail.nav.button.icon.size + */ + size?: string; + }; /** - * Size of thumbnail nav button icon - * - * @designToken galleria.thumbnail.nav.button.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the caption section - */ + * Used to pass tokens of the caption section + */ caption?: { - + /** + * Background of caption + * + * @designToken galleria.caption.background + */ + background?: string; + /** + * Color of caption + * + * @designToken galleria.caption.color + */ + color?: string; + /** + * Padding of caption + * + * @designToken galleria.caption.padding + */ + padding?: string; + }; /** - * Background of caption - * - * @designToken galleria.caption.background - */ - background?: string; - /** - * Color of caption - * - * @designToken galleria.caption.color - */ - color?: string; - /** - * Padding of caption - * - * @designToken galleria.caption.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the indicator list section - */ + * Used to pass tokens of the indicator list section + */ indicatorList?: { - + /** + * Gap of indicator list + * + * @designToken galleria.indicator.list.gap + */ + gap?: string; + /** + * Padding of indicator list + * + * @designToken galleria.indicator.list.padding + */ + padding?: string; + }; /** - * Gap of indicator list - * - * @designToken galleria.indicator.list.gap - */ - gap?: string; - /** - * Padding of indicator list - * - * @designToken galleria.indicator.list.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the indicator button section - */ + * Used to pass tokens of the indicator button section + */ indicatorButton?: { - - /** - * Width of indicator button - * - * @designToken galleria.indicator.button.width - */ - width?: string; - /** - * Height of indicator button - * - * @designToken galleria.indicator.button.height - */ - height?: string; - /** - * Active background of indicator button - * - * @designToken galleria.indicator.button.active.background - */ - activeBackground?: string; - /** - * Border radius of indicator button - * - * @designToken galleria.indicator.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of indicator button - */ - focusRing?: { - - /** - * Focus ring width of indicator button - * - * @designToken galleria.indicator.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of indicator button - * - * @designToken galleria.indicator.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of indicator button - * - * @designToken galleria.indicator.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of indicator button - * - * @designToken galleria.indicator.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of indicator button - * - * @designToken galleria.indicator.button.focus.ring.shadow - */ - shadow?: string; + /** + * Width of indicator button + * + * @designToken galleria.indicator.button.width + */ + width?: string; + /** + * Height of indicator button + * + * @designToken galleria.indicator.button.height + */ + height?: string; + /** + * Active background of indicator button + * + * @designToken galleria.indicator.button.active.background + */ + activeBackground?: string; + /** + * Border radius of indicator button + * + * @designToken galleria.indicator.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of indicator button + */ + focusRing?: { + /** + * Focus ring width of indicator button + * + * @designToken galleria.indicator.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of indicator button + * + * @designToken galleria.indicator.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of indicator button + * + * @designToken galleria.indicator.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of indicator button + * + * @designToken galleria.indicator.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of indicator button + * + * @designToken galleria.indicator.button.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Background of indicator button + * + * @designToken galleria.indicator.button.background + */ + background?: string; + /** + * Hover background of indicator button + * + * @designToken galleria.indicator.button.hover.background + */ + hoverBackground?: string; }; /** - * Background of indicator button - * - * @designToken galleria.indicator.button.background - */ - background?: string; - /** - * Hover background of indicator button - * - * @designToken galleria.indicator.button.hover.background - */ - hoverBackground?: string; - } - /** - * Used to pass tokens of the inset indicator list section - */ + * Used to pass tokens of the inset indicator list section + */ insetIndicatorList?: { - - /** - * Background of inset indicator list - * - * @designToken galleria.inset.indicator.list.background - */ - background?: string; - } - /** - * Used to pass tokens of the inset indicator button section - */ - insetIndicatorButton?: { - - /** - * Background of inset indicator button - * - * @designToken galleria.inset.indicator.button.background - */ - background?: string; - /** - * Hover background of inset indicator button - * - * @designToken galleria.inset.indicator.button.hover.background - */ - hoverBackground?: string; - /** - * Active background of inset indicator button - * - * @designToken galleria.inset.indicator.button.active.background - */ - activeBackground?: string; - } - /** - * Used to pass tokens of the mask section - */ - mask?: { - - /** - * Background of mask - * - * @designToken galleria.mask.background - */ - background?: string; - /** - * Color of mask - * - * @designToken galleria.mask.color - */ - color?: string; - } - /** - * Used to pass tokens of the close button section - */ - closeButton?: { - - /** - * Size of close button - * - * @designToken galleria.close.button.size - */ - size?: string; - /** - * Gutter of close button - * - * @designToken galleria.close.button.gutter - */ - gutter?: string; - /** - * Background of close button - * - * @designToken galleria.close.button.background - */ - background?: string; - /** - * Hover background of close button - * - * @designToken galleria.close.button.hover.background - */ - hoverBackground?: string; - /** - * Color of close button - * - * @designToken galleria.close.button.color - */ - color?: string; - /** - * Hover color of close button - * - * @designToken galleria.close.button.hover.color - */ - hoverColor?: string; - /** - * Border radius of close button - * - * @designToken galleria.close.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of close button - */ - focusRing?: { - - /** - * Focus ring width of close button - * - * @designToken galleria.close.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of close button - * - * @designToken galleria.close.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of close button - * - * @designToken galleria.close.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of close button - * - * @designToken galleria.close.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of close button - * - * @designToken galleria.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of inset indicator list + * + * @designToken galleria.inset.indicator.list.background + */ + background?: string; }; - } /** - * Used to pass tokens of the close button icon section - */ + * Used to pass tokens of the inset indicator button section + */ + insetIndicatorButton?: { + /** + * Background of inset indicator button + * + * @designToken galleria.inset.indicator.button.background + */ + background?: string; + /** + * Hover background of inset indicator button + * + * @designToken galleria.inset.indicator.button.hover.background + */ + hoverBackground?: string; + /** + * Active background of inset indicator button + * + * @designToken galleria.inset.indicator.button.active.background + */ + activeBackground?: string; + }; + /** + * Used to pass tokens of the mask section + */ + mask?: { + /** + * Background of mask + * + * @designToken galleria.mask.background + */ + background?: string; + /** + * Color of mask + * + * @designToken galleria.mask.color + */ + color?: string; + }; + /** + * Used to pass tokens of the close button section + */ + closeButton?: { + /** + * Size of close button + * + * @designToken galleria.close.button.size + */ + size?: string; + /** + * Gutter of close button + * + * @designToken galleria.close.button.gutter + */ + gutter?: string; + /** + * Background of close button + * + * @designToken galleria.close.button.background + */ + background?: string; + /** + * Hover background of close button + * + * @designToken galleria.close.button.hover.background + */ + hoverBackground?: string; + /** + * Color of close button + * + * @designToken galleria.close.button.color + */ + color?: string; + /** + * Hover color of close button + * + * @designToken galleria.close.button.hover.color + */ + hoverColor?: string; + /** + * Border radius of close button + * + * @designToken galleria.close.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of close button + */ + focusRing?: { + /** + * Focus ring width of close button + * + * @designToken galleria.close.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of close button + * + * @designToken galleria.close.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of close button + * + * @designToken galleria.close.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of close button + * + * @designToken galleria.close.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of close button + * + * @designToken galleria.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the close button icon section + */ closeButtonIcon?: { - - /** - * Size of close button icon - * - * @designToken galleria.close.button.icon.size - */ - size?: string; - } + /** + * Size of close button icon + * + * @designToken galleria.close.button.icon.size + */ + size?: string; + }; } diff --git a/packages/themes/types/iconfield/index.d.ts b/packages/themes/types/iconfield/index.d.ts index 71571e38b..e6f33cddc 100644 --- a/packages/themes/types/iconfield/index.d.ts +++ b/packages/themes/types/iconfield/index.d.ts @@ -1,4 +1,3 @@ - /** * * IconField Design Tokens @@ -12,17 +11,15 @@ import { ColorSchemeDesignToken } from '..'; export interface IconFieldDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - - /** - * Color of icon - * - * @designToken iconfield.icon.color - */ - color?: string; - } + /** + * Color of icon + * + * @designToken iconfield.icon.color + */ + color?: string; + }; } diff --git a/packages/themes/types/image/index.d.ts b/packages/themes/types/image/index.d.ts index 3962b64c2..beba49388 100644 --- a/packages/themes/types/image/index.d.ts +++ b/packages/themes/types/image/index.d.ts @@ -1,4 +1,3 @@ - /** * * Image Design Tokens @@ -12,209 +11,200 @@ import { ColorSchemeDesignToken } from '..'; export interface ImageDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken image.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken image.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the preview section - */ + * Used to pass tokens of the preview section + */ preview?: { - - /** - * Icon of preview - */ - icon?: { - - /** - * Icon size of preview - * - * @designToken image.preview.icon.size - */ - size?: string; + /** + * Icon of preview + */ + icon?: { + /** + * Icon size of preview + * + * @designToken image.preview.icon.size + */ + size?: string; + }; + /** + * Mask of preview + */ + mask?: { + /** + * Mask background of preview + * + * @designToken image.preview.mask.background + */ + background?: string; + /** + * Mask color of preview + * + * @designToken image.preview.mask.color + */ + color?: string; + }; }; /** - * Mask of preview - */ - mask?: { - - /** - * Mask background of preview - * - * @designToken image.preview.mask.background - */ - background?: string; - /** - * Mask color of preview - * - * @designToken image.preview.mask.color - */ - color?: string; - }; - } - /** - * Used to pass tokens of the toolbar section - */ + * Used to pass tokens of the toolbar section + */ toolbar?: { - - /** - * Position of toolbar - */ - position?: { - - /** - * Position left of toolbar - * - * @designToken image.toolbar.position.left - */ - left?: string; - /** - * Position right of toolbar - * - * @designToken image.toolbar.position.right - */ - right?: string; - /** - * Position top of toolbar - * - * @designToken image.toolbar.position.top - */ - top?: string; - /** - * Position bottom of toolbar - * - * @designToken image.toolbar.position.bottom - */ - bottom?: string; + /** + * Position of toolbar + */ + position?: { + /** + * Position left of toolbar + * + * @designToken image.toolbar.position.left + */ + left?: string; + /** + * Position right of toolbar + * + * @designToken image.toolbar.position.right + */ + right?: string; + /** + * Position top of toolbar + * + * @designToken image.toolbar.position.top + */ + top?: string; + /** + * Position bottom of toolbar + * + * @designToken image.toolbar.position.bottom + */ + bottom?: string; + }; + /** + * Blur of toolbar + * + * @designToken image.toolbar.blur + */ + blur?: string; + /** + * Background of toolbar + * + * @designToken image.toolbar.background + */ + background?: string; + /** + * Border color of toolbar + * + * @designToken image.toolbar.border.color + */ + borderColor?: string; + /** + * Border width of toolbar + * + * @designToken image.toolbar.border.width + */ + borderWidth?: string; + /** + * Border radius of toolbar + * + * @designToken image.toolbar.border.radius + */ + borderRadius?: string; + /** + * Padding of toolbar + * + * @designToken image.toolbar.padding + */ + padding?: string; + /** + * Gap of toolbar + * + * @designToken image.toolbar.gap + */ + gap?: string; }; /** - * Blur of toolbar - * - * @designToken image.toolbar.blur - */ - blur?: string; - /** - * Background of toolbar - * - * @designToken image.toolbar.background - */ - background?: string; - /** - * Border color of toolbar - * - * @designToken image.toolbar.border.color - */ - borderColor?: string; - /** - * Border width of toolbar - * - * @designToken image.toolbar.border.width - */ - borderWidth?: string; - /** - * Border radius of toolbar - * - * @designToken image.toolbar.border.radius - */ - borderRadius?: string; - /** - * Padding of toolbar - * - * @designToken image.toolbar.padding - */ - padding?: string; - /** - * Gap of toolbar - * - * @designToken image.toolbar.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the action section - */ + * Used to pass tokens of the action section + */ action?: { - - /** - * Hover background of action - * - * @designToken image.action.hover.background - */ - hoverBackground?: string; - /** - * Color of action - * - * @designToken image.action.color - */ - color?: string; - /** - * Hover color of action - * - * @designToken image.action.hover.color - */ - hoverColor?: string; - /** - * Size of action - * - * @designToken image.action.size - */ - size?: string; - /** - * Icon size of action - * - * @designToken image.action.icon.size - */ - iconSize?: string; - /** - * Border radius of action - * - * @designToken image.action.border.radius - */ - borderRadius?: string; - /** - * Focus ring of action - */ - focusRing?: { - - /** - * Focus ring width of action - * - * @designToken image.action.focus.ring.width - */ - width?: string; - /** - * Focus ring style of action - * - * @designToken image.action.focus.ring.style - */ - style?: string; - /** - * Focus ring color of action - * - * @designToken image.action.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of action - * - * @designToken image.action.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of action - * - * @designToken image.action.focus.ring.shadow - */ - shadow?: string; + /** + * Hover background of action + * + * @designToken image.action.hover.background + */ + hoverBackground?: string; + /** + * Color of action + * + * @designToken image.action.color + */ + color?: string; + /** + * Hover color of action + * + * @designToken image.action.hover.color + */ + hoverColor?: string; + /** + * Size of action + * + * @designToken image.action.size + */ + size?: string; + /** + * Icon size of action + * + * @designToken image.action.icon.size + */ + iconSize?: string; + /** + * Border radius of action + * + * @designToken image.action.border.radius + */ + borderRadius?: string; + /** + * Focus ring of action + */ + focusRing?: { + /** + * Focus ring width of action + * + * @designToken image.action.focus.ring.width + */ + width?: string; + /** + * Focus ring style of action + * + * @designToken image.action.focus.ring.style + */ + style?: string; + /** + * Focus ring color of action + * + * @designToken image.action.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of action + * + * @designToken image.action.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of action + * + * @designToken image.action.focus.ring.shadow + */ + shadow?: string; + }; }; - } } diff --git a/packages/themes/types/inlinemessage/index.d.ts b/packages/themes/types/inlinemessage/index.d.ts index 9bdc1d91c..62e47e9f5 100644 --- a/packages/themes/types/inlinemessage/index.d.ts +++ b/packages/themes/types/inlinemessage/index.d.ts @@ -1,4 +1,3 @@ - /** * * InlineMessage Design Tokens @@ -12,233 +11,223 @@ import { ColorSchemeDesignToken } from '..'; export interface InlineMessageDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Padding of root + * + * @designToken inlinemessage.padding + */ + padding?: string; + /** + * Border radius of root + * + * @designToken inlinemessage.border.radius + */ + borderRadius?: string; + /** + * Gap of root + * + * @designToken inlinemessage.gap + */ + gap?: string; + }; /** - * Padding of root - * - * @designToken inlinemessage.padding - */ - padding?: string; - /** - * Border radius of root - * - * @designToken inlinemessage.border.radius - */ - borderRadius?: string; - /** - * Gap of root - * - * @designToken inlinemessage.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the text section - */ + * Used to pass tokens of the text section + */ text?: { - + /** + * Font weight of text + * + * @designToken inlinemessage.text.font.weight + */ + fontWeight?: string; + }; /** - * Font weight of text - * - * @designToken inlinemessage.text.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Size of icon + * + * @designToken inlinemessage.icon.size + */ + size?: string; + }; /** - * Size of icon - * - * @designToken inlinemessage.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the info section - */ + * Used to pass tokens of the info section + */ info?: { - + /** + * Background of info + * + * @designToken inlinemessage.info.background + */ + background?: string; + /** + * Border color of info + * + * @designToken inlinemessage.info.border.color + */ + borderColor?: string; + /** + * Color of info + * + * @designToken inlinemessage.info.color + */ + color?: string; + /** + * Shadow of info + * + * @designToken inlinemessage.info.shadow + */ + shadow?: string; + }; /** - * Background of info - * - * @designToken inlinemessage.info.background - */ - background?: string; - /** - * Border color of info - * - * @designToken inlinemessage.info.border.color - */ - borderColor?: string; - /** - * Color of info - * - * @designToken inlinemessage.info.color - */ - color?: string; - /** - * Shadow of info - * - * @designToken inlinemessage.info.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the success section - */ + * Used to pass tokens of the success section + */ success?: { - + /** + * Background of success + * + * @designToken inlinemessage.success.background + */ + background?: string; + /** + * Border color of success + * + * @designToken inlinemessage.success.border.color + */ + borderColor?: string; + /** + * Color of success + * + * @designToken inlinemessage.success.color + */ + color?: string; + /** + * Shadow of success + * + * @designToken inlinemessage.success.shadow + */ + shadow?: string; + }; /** - * Background of success - * - * @designToken inlinemessage.success.background - */ - background?: string; - /** - * Border color of success - * - * @designToken inlinemessage.success.border.color - */ - borderColor?: string; - /** - * Color of success - * - * @designToken inlinemessage.success.color - */ - color?: string; - /** - * Shadow of success - * - * @designToken inlinemessage.success.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the warn section - */ + * Used to pass tokens of the warn section + */ warn?: { - + /** + * Background of warn + * + * @designToken inlinemessage.warn.background + */ + background?: string; + /** + * Border color of warn + * + * @designToken inlinemessage.warn.border.color + */ + borderColor?: string; + /** + * Color of warn + * + * @designToken inlinemessage.warn.color + */ + color?: string; + /** + * Shadow of warn + * + * @designToken inlinemessage.warn.shadow + */ + shadow?: string; + }; /** - * Background of warn - * - * @designToken inlinemessage.warn.background - */ - background?: string; - /** - * Border color of warn - * - * @designToken inlinemessage.warn.border.color - */ - borderColor?: string; - /** - * Color of warn - * - * @designToken inlinemessage.warn.color - */ - color?: string; - /** - * Shadow of warn - * - * @designToken inlinemessage.warn.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the error section - */ + * Used to pass tokens of the error section + */ error?: { - + /** + * Background of error + * + * @designToken inlinemessage.error.background + */ + background?: string; + /** + * Border color of error + * + * @designToken inlinemessage.error.border.color + */ + borderColor?: string; + /** + * Color of error + * + * @designToken inlinemessage.error.color + */ + color?: string; + /** + * Shadow of error + * + * @designToken inlinemessage.error.shadow + */ + shadow?: string; + }; /** - * Background of error - * - * @designToken inlinemessage.error.background - */ - background?: string; - /** - * Border color of error - * - * @designToken inlinemessage.error.border.color - */ - borderColor?: string; - /** - * Color of error - * - * @designToken inlinemessage.error.color - */ - color?: string; - /** - * Shadow of error - * - * @designToken inlinemessage.error.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the secondary section - */ + * Used to pass tokens of the secondary section + */ secondary?: { - + /** + * Background of secondary + * + * @designToken inlinemessage.secondary.background + */ + background?: string; + /** + * Border color of secondary + * + * @designToken inlinemessage.secondary.border.color + */ + borderColor?: string; + /** + * Color of secondary + * + * @designToken inlinemessage.secondary.color + */ + color?: string; + /** + * Shadow of secondary + * + * @designToken inlinemessage.secondary.shadow + */ + shadow?: string; + }; /** - * Background of secondary - * - * @designToken inlinemessage.secondary.background - */ - background?: string; - /** - * Border color of secondary - * - * @designToken inlinemessage.secondary.border.color - */ - borderColor?: string; - /** - * Color of secondary - * - * @designToken inlinemessage.secondary.color - */ - color?: string; - /** - * Shadow of secondary - * - * @designToken inlinemessage.secondary.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the contrast section - */ + * Used to pass tokens of the contrast section + */ contrast?: { - - /** - * Background of contrast - * - * @designToken inlinemessage.contrast.background - */ - background?: string; - /** - * Border color of contrast - * - * @designToken inlinemessage.contrast.border.color - */ - borderColor?: string; - /** - * Color of contrast - * - * @designToken inlinemessage.contrast.color - */ - color?: string; - /** - * Shadow of contrast - * - * @designToken inlinemessage.contrast.shadow - */ - shadow?: string; - } + /** + * Background of contrast + * + * @designToken inlinemessage.contrast.background + */ + background?: string; + /** + * Border color of contrast + * + * @designToken inlinemessage.contrast.border.color + */ + borderColor?: string; + /** + * Color of contrast + * + * @designToken inlinemessage.contrast.color + */ + color?: string; + /** + * Shadow of contrast + * + * @designToken inlinemessage.contrast.shadow + */ + shadow?: string; + }; } diff --git a/packages/themes/types/inplace/index.d.ts b/packages/themes/types/inplace/index.d.ts index d01a6b0f2..74ff81ab9 100644 --- a/packages/themes/types/inplace/index.d.ts +++ b/packages/themes/types/inplace/index.d.ts @@ -1,4 +1,3 @@ - /** * * Inplace Design Tokens @@ -12,83 +11,79 @@ import { ColorSchemeDesignToken } from '..'; export interface InplaceDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Padding of root - * - * @designToken inplace.padding - */ - padding?: string; - /** - * Border radius of root - * - * @designToken inplace.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken inplace.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken inplace.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken inplace.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken inplace.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken inplace.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of root + * + * @designToken inplace.padding + */ + padding?: string; + /** + * Border radius of root + * + * @designToken inplace.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken inplace.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken inplace.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken inplace.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken inplace.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken inplace.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken inplace.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken inplace.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the display section - */ + * Used to pass tokens of the display section + */ display?: { - - /** - * Hover background of display - * - * @designToken inplace.display.hover.background - */ - hoverBackground?: string; - /** - * Hover color of display - * - * @designToken inplace.display.hover.color - */ - hoverColor?: string; - } + /** + * Hover background of display + * + * @designToken inplace.display.hover.background + */ + hoverBackground?: string; + /** + * Hover color of display + * + * @designToken inplace.display.hover.color + */ + hoverColor?: string; + }; } diff --git a/packages/themes/types/inputchips/index.d.ts b/packages/themes/types/inputchips/index.d.ts index 1e08e44c2..b698acb1a 100644 --- a/packages/themes/types/inputchips/index.d.ts +++ b/packages/themes/types/inputchips/index.d.ts @@ -1,4 +1,3 @@ - /** * * InputChips Design Tokens @@ -12,167 +11,163 @@ import { ColorSchemeDesignToken } from '..'; export interface InputChipsDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken inputchips.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken inputchips.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken inputchips.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken inputchips.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken inputchips.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken inputchips.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken inputchips.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken inputchips.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken inputchips.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken inputchips.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken inputchips.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken inputchips.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken inputchips.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken inputchips.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken inputchips.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken inputchips.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken inputchips.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken inputchips.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken inputchips.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken inputchips.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken inputchips.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken inputchips.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken inputchips.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken inputchips.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken inputchips.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken inputchips.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken inputchips.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken inputchips.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken inputchips.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken inputchips.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken inputchips.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken inputchips.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken inputchips.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken inputchips.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken inputchips.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken inputchips.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken inputchips.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken inputchips.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken inputchips.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken inputchips.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken inputchips.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken inputchips.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the chip section - */ + * Used to pass tokens of the chip section + */ chip?: { - - /** - * Border radius of chip - * - * @designToken inputchips.chip.border.radius - */ - borderRadius?: string; - /** - * Focus background of chip - * - * @designToken inputchips.chip.focus.background - */ - focusBackground?: string; - /** - * Color of chip - * - * @designToken inputchips.chip.color - */ - color?: string; - } + /** + * Border radius of chip + * + * @designToken inputchips.chip.border.radius + */ + borderRadius?: string; + /** + * Focus background of chip + * + * @designToken inputchips.chip.focus.background + */ + focusBackground?: string; + /** + * Color of chip + * + * @designToken inputchips.chip.color + */ + color?: string; + }; } diff --git a/packages/themes/types/inputgroup/index.d.ts b/packages/themes/types/inputgroup/index.d.ts index 45e17e6f4..5f2286507 100644 --- a/packages/themes/types/inputgroup/index.d.ts +++ b/packages/themes/types/inputgroup/index.d.ts @@ -1,4 +1,3 @@ - /** * * InputGroup Design Tokens @@ -12,35 +11,33 @@ import { ColorSchemeDesignToken } from '..'; export interface InputGroupDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the addon section - */ + * Used to pass tokens of the addon section + */ addon?: { - - /** - * Background of addon - * - * @designToken inputgroup.addon.background - */ - background?: string; - /** - * Border color of addon - * - * @designToken inputgroup.addon.border.color - */ - borderColor?: string; - /** - * Color of addon - * - * @designToken inputgroup.addon.color - */ - color?: string; - /** - * Border radius of addon - * - * @designToken inputgroup.addon.border.radius - */ - borderRadius?: string; - } + /** + * Background of addon + * + * @designToken inputgroup.addon.background + */ + background?: string; + /** + * Border color of addon + * + * @designToken inputgroup.addon.border.color + */ + borderColor?: string; + /** + * Color of addon + * + * @designToken inputgroup.addon.color + */ + color?: string; + /** + * Border radius of addon + * + * @designToken inputgroup.addon.border.radius + */ + borderRadius?: string; + }; } diff --git a/packages/themes/types/inputnumber/index.d.ts b/packages/themes/types/inputnumber/index.d.ts index 7279db836..411c08661 100644 --- a/packages/themes/types/inputnumber/index.d.ts +++ b/packages/themes/types/inputnumber/index.d.ts @@ -1,4 +1,3 @@ - /** * * InputNumber Design Tokens @@ -12,95 +11,92 @@ import { ColorSchemeDesignToken } from '..'; export interface InputNumberDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken inputnumber.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken inputnumber.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the button section - */ + * Used to pass tokens of the button section + */ button?: { - - /** - * Width of button - * - * @designToken inputnumber.button.width - */ - width?: string; - /** - * Border radius of button - * - * @designToken inputnumber.button.border.radius - */ - borderRadius?: string; - /** - * Vertical padding of button - * - * @designToken inputnumber.button.vertical.padding - */ - verticalPadding?: string; - /** - * Background of button - * - * @designToken inputnumber.button.background - */ - background?: string; - /** - * Hover background of button - * - * @designToken inputnumber.button.hover.background - */ - hoverBackground?: string; - /** - * Active background of button - * - * @designToken inputnumber.button.active.background - */ - activeBackground?: string; - /** - * Border color of button - * - * @designToken inputnumber.button.border.color - */ - borderColor?: string; - /** - * Hover border color of button - * - * @designToken inputnumber.button.hover.border.color - */ - hoverBorderColor?: string; - /** - * Active border color of button - * - * @designToken inputnumber.button.active.border.color - */ - activeBorderColor?: string; - /** - * Color of button - * - * @designToken inputnumber.button.color - */ - color?: string; - /** - * Hover color of button - * - * @designToken inputnumber.button.hover.color - */ - hoverColor?: string; - /** - * Active color of button - * - * @designToken inputnumber.button.active.color - */ - activeColor?: string; - } + /** + * Width of button + * + * @designToken inputnumber.button.width + */ + width?: string; + /** + * Border radius of button + * + * @designToken inputnumber.button.border.radius + */ + borderRadius?: string; + /** + * Vertical padding of button + * + * @designToken inputnumber.button.vertical.padding + */ + verticalPadding?: string; + /** + * Background of button + * + * @designToken inputnumber.button.background + */ + background?: string; + /** + * Hover background of button + * + * @designToken inputnumber.button.hover.background + */ + hoverBackground?: string; + /** + * Active background of button + * + * @designToken inputnumber.button.active.background + */ + activeBackground?: string; + /** + * Border color of button + * + * @designToken inputnumber.button.border.color + */ + borderColor?: string; + /** + * Hover border color of button + * + * @designToken inputnumber.button.hover.border.color + */ + hoverBorderColor?: string; + /** + * Active border color of button + * + * @designToken inputnumber.button.active.border.color + */ + activeBorderColor?: string; + /** + * Color of button + * + * @designToken inputnumber.button.color + */ + color?: string; + /** + * Hover color of button + * + * @designToken inputnumber.button.hover.color + */ + hoverColor?: string; + /** + * Active color of button + * + * @designToken inputnumber.button.active.color + */ + activeColor?: string; + }; } diff --git a/packages/themes/types/inputtext/index.d.ts b/packages/themes/types/inputtext/index.d.ts index 29b68417d..cc6f34657 100644 --- a/packages/themes/types/inputtext/index.d.ts +++ b/packages/themes/types/inputtext/index.d.ts @@ -1,4 +1,3 @@ - /** * * InputText Design Tokens @@ -12,191 +11,186 @@ import { ColorSchemeDesignToken } from '..'; export interface InputTextDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken inputtext.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken inputtext.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken inputtext.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken inputtext.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken inputtext.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken inputtext.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken inputtext.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken inputtext.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken inputtext.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken inputtext.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken inputtext.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken inputtext.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken inputtext.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken inputtext.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken inputtext.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken inputtext.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken inputtext.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken inputtext.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken inputtext.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken inputtext.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken inputtext.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken inputtext.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken inputtext.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken inputtext.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken inputtext.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken inputtext.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken inputtext.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken inputtext.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken inputtext.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken inputtext.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken inputtext.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken inputtext.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken inputtext.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken inputtext.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken inputtext.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken inputtext.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken inputtext.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken inputtext.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken inputtext.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken inputtext.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken inputtext.transition.duration + */ + transitionDuration?: string; + /** + * Sm of root + */ + sm?: { + /** + * Sm font size of root + * + * @designToken inputtext.sm.font.size + */ + fontSize?: string; + /** + * Sm padding x of root + * + * @designToken inputtext.sm.padding.x + */ + paddingX?: string; + /** + * Sm padding y of root + * + * @designToken inputtext.sm.padding.y + */ + paddingY?: string; + }; + /** + * Lg of root + */ + lg?: { + /** + * Lg font size of root + * + * @designToken inputtext.lg.font.size + */ + fontSize?: string; + /** + * Lg padding x of root + * + * @designToken inputtext.lg.padding.x + */ + paddingX?: string; + /** + * Lg padding y of root + * + * @designToken inputtext.lg.padding.y + */ + paddingY?: string; + }; }; - /** - * Transition duration of root - * - * @designToken inputtext.transition.duration - */ - transitionDuration?: string; - /** - * Sm of root - */ - sm?: { - - /** - * Sm font size of root - * - * @designToken inputtext.sm.font.size - */ - fontSize?: string; - /** - * Sm padding x of root - * - * @designToken inputtext.sm.padding.x - */ - paddingX?: string; - /** - * Sm padding y of root - * - * @designToken inputtext.sm.padding.y - */ - paddingY?: string; - }; - /** - * Lg of root - */ - lg?: { - - /** - * Lg font size of root - * - * @designToken inputtext.lg.font.size - */ - fontSize?: string; - /** - * Lg padding x of root - * - * @designToken inputtext.lg.padding.x - */ - paddingX?: string; - /** - * Lg padding y of root - * - * @designToken inputtext.lg.padding.y - */ - paddingY?: string; - }; - } } diff --git a/packages/themes/types/knob/index.d.ts b/packages/themes/types/knob/index.d.ts index 00d354b09..f6e9a43d6 100644 --- a/packages/themes/types/knob/index.d.ts +++ b/packages/themes/types/knob/index.d.ts @@ -1,4 +1,3 @@ - /** * * Knob Design Tokens @@ -12,89 +11,83 @@ import { ColorSchemeDesignToken } from '..'; export interface KnobDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Transition duration of root - * - * @designToken knob.transition.duration - */ - transitionDuration?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken knob.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken knob.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken knob.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken knob.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken knob.focus.ring.shadow - */ - shadow?: string; + /** + * Transition duration of root + * + * @designToken knob.transition.duration + */ + transitionDuration?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken knob.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken knob.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken knob.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken knob.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken knob.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the value section - */ + * Used to pass tokens of the value section + */ value?: { - + /** + * Background of value + * + * @designToken knob.value.background + */ + background?: string; + }; /** - * Background of value - * - * @designToken knob.value.background - */ - background?: string; - } - /** - * Used to pass tokens of the range section - */ + * Used to pass tokens of the range section + */ range?: { - + /** + * Background of range + * + * @designToken knob.range.background + */ + background?: string; + }; /** - * Background of range - * - * @designToken knob.range.background - */ - background?: string; - } - /** - * Used to pass tokens of the text section - */ + * Used to pass tokens of the text section + */ text?: { - - /** - * Color of text - * - * @designToken knob.text.color - */ - color?: string; - } + /** + * Color of text + * + * @designToken knob.text.color + */ + color?: string; + }; } diff --git a/packages/themes/types/listbox/index.d.ts b/packages/themes/types/listbox/index.d.ts index dfbb5aefa..b9f6ef4b9 100644 --- a/packages/themes/types/listbox/index.d.ts +++ b/packages/themes/types/listbox/index.d.ts @@ -1,4 +1,3 @@ - /** * * Listbox Design Tokens @@ -12,275 +11,266 @@ import { ColorSchemeDesignToken } from '..'; export interface ListboxDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken listbox.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken listbox.disabled.background - */ - disabledBackground?: string; - /** - * Border color of root - * - * @designToken listbox.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken listbox.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken listbox.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken listbox.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken listbox.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken listbox.disabled.color - */ - disabledColor?: string; - /** - * Shadow of root - * - * @designToken listbox.shadow - */ - shadow?: string; - /** - * Border radius of root - * - * @designToken listbox.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken listbox.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken listbox.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken listbox.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken listbox.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken listbox.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken listbox.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken listbox.disabled.background + */ + disabledBackground?: string; + /** + * Border color of root + * + * @designToken listbox.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken listbox.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken listbox.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken listbox.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken listbox.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken listbox.disabled.color + */ + disabledColor?: string; + /** + * Shadow of root + * + * @designToken listbox.shadow + */ + shadow?: string; + /** + * Border radius of root + * + * @designToken listbox.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken listbox.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken listbox.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken listbox.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken listbox.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken listbox.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken listbox.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken listbox.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the list section - */ + * Used to pass tokens of the list section + */ list?: { - - /** - * Padding of list - * - * @designToken listbox.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken listbox.list.gap - */ - gap?: string; - /** - * Header of list - */ - header?: { - - /** - * Header padding of list - * - * @designToken listbox.list.header.padding - */ - padding?: string; + /** + * Padding of list + * + * @designToken listbox.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken listbox.list.gap + */ + gap?: string; + /** + * Header of list + */ + header?: { + /** + * Header padding of list + * + * @designToken listbox.list.header.padding + */ + padding?: string; + }; }; - } /** - * Used to pass tokens of the option section - */ + * Used to pass tokens of the option section + */ option?: { - + /** + * Focus background of option + * + * @designToken listbox.option.focus.background + */ + focusBackground?: string; + /** + * Selected background of option + * + * @designToken listbox.option.selected.background + */ + selectedBackground?: string; + /** + * Selected focus background of option + * + * @designToken listbox.option.selected.focus.background + */ + selectedFocusBackground?: string; + /** + * Color of option + * + * @designToken listbox.option.color + */ + color?: string; + /** + * Focus color of option + * + * @designToken listbox.option.focus.color + */ + focusColor?: string; + /** + * Selected color of option + * + * @designToken listbox.option.selected.color + */ + selectedColor?: string; + /** + * Selected focus color of option + * + * @designToken listbox.option.selected.focus.color + */ + selectedFocusColor?: string; + /** + * Padding of option + * + * @designToken listbox.option.padding + */ + padding?: string; + /** + * Border radius of option + * + * @designToken listbox.option.border.radius + */ + borderRadius?: string; + /** + * Striped background of option + * + * @designToken listbox.option.striped.background + */ + stripedBackground?: string; + }; /** - * Focus background of option - * - * @designToken listbox.option.focus.background - */ - focusBackground?: string; - /** - * Selected background of option - * - * @designToken listbox.option.selected.background - */ - selectedBackground?: string; - /** - * Selected focus background of option - * - * @designToken listbox.option.selected.focus.background - */ - selectedFocusBackground?: string; - /** - * Color of option - * - * @designToken listbox.option.color - */ - color?: string; - /** - * Focus color of option - * - * @designToken listbox.option.focus.color - */ - focusColor?: string; - /** - * Selected color of option - * - * @designToken listbox.option.selected.color - */ - selectedColor?: string; - /** - * Selected focus color of option - * - * @designToken listbox.option.selected.focus.color - */ - selectedFocusColor?: string; - /** - * Padding of option - * - * @designToken listbox.option.padding - */ - padding?: string; - /** - * Border radius of option - * - * @designToken listbox.option.border.radius - */ - borderRadius?: string; - /** - * Striped background of option - * - * @designToken listbox.option.striped.background - */ - stripedBackground?: string; - } - /** - * Used to pass tokens of the option group section - */ + * Used to pass tokens of the option group section + */ optionGroup?: { - + /** + * Background of option group + * + * @designToken listbox.option.group.background + */ + background?: string; + /** + * Color of option group + * + * @designToken listbox.option.group.color + */ + color?: string; + /** + * Font weight of option group + * + * @designToken listbox.option.group.font.weight + */ + fontWeight?: string; + /** + * Padding of option group + * + * @designToken listbox.option.group.padding + */ + padding?: string; + }; /** - * Background of option group - * - * @designToken listbox.option.group.background - */ - background?: string; - /** - * Color of option group - * - * @designToken listbox.option.group.color - */ - color?: string; - /** - * Font weight of option group - * - * @designToken listbox.option.group.font.weight - */ - fontWeight?: string; - /** - * Padding of option group - * - * @designToken listbox.option.group.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the checkmark section - */ + * Used to pass tokens of the checkmark section + */ checkmark?: { - + /** + * Color of checkmark + * + * @designToken listbox.checkmark.color + */ + color?: string; + /** + * Gutter start of checkmark + * + * @designToken listbox.checkmark.gutter.start + */ + gutterStart?: string; + /** + * Gutter end of checkmark + * + * @designToken listbox.checkmark.gutter.end + */ + gutterEnd?: string; + }; /** - * Color of checkmark - * - * @designToken listbox.checkmark.color - */ - color?: string; - /** - * Gutter start of checkmark - * - * @designToken listbox.checkmark.gutter.start - */ - gutterStart?: string; - /** - * Gutter end of checkmark - * - * @designToken listbox.checkmark.gutter.end - */ - gutterEnd?: string; - } - /** - * Used to pass tokens of the empty message section - */ + * Used to pass tokens of the empty message section + */ emptyMessage?: { - - /** - * Padding of empty message - * - * @designToken listbox.empty.message.padding - */ - padding?: string; - } + /** + * Padding of empty message + * + * @designToken listbox.empty.message.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/megamenu/index.d.ts b/packages/themes/types/megamenu/index.d.ts index 6b2a392bd..ae86c6a28 100644 --- a/packages/themes/types/megamenu/index.d.ts +++ b/packages/themes/types/megamenu/index.d.ts @@ -1,4 +1,3 @@ - /** * * MegaMenu Design Tokens @@ -12,383 +11,369 @@ import { ColorSchemeDesignToken } from '..'; export interface MegaMenuDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken megamenu.background - */ - background?: string; - /** - * Border color of root - * - * @designToken megamenu.border.color - */ - borderColor?: string; - /** - * Border radius of root - * - * @designToken megamenu.border.radius - */ - borderRadius?: string; - /** - * Color of root - * - * @designToken megamenu.color - */ - color?: string; - /** - * Gap of root - * - * @designToken megamenu.gap - */ - gap?: string; - /** - * Vertical orientation of root - */ - verticalOrientation?: { - - /** - * Vertical orientation padding of root - * - * @designToken megamenu.vertical.orientation.padding - */ - padding?: string; - /** - * Vertical orientation gap of root - * - * @designToken megamenu.vertical.orientation.gap - */ - gap?: string; + /** + * Background of root + * + * @designToken megamenu.background + */ + background?: string; + /** + * Border color of root + * + * @designToken megamenu.border.color + */ + borderColor?: string; + /** + * Border radius of root + * + * @designToken megamenu.border.radius + */ + borderRadius?: string; + /** + * Color of root + * + * @designToken megamenu.color + */ + color?: string; + /** + * Gap of root + * + * @designToken megamenu.gap + */ + gap?: string; + /** + * Vertical orientation of root + */ + verticalOrientation?: { + /** + * Vertical orientation padding of root + * + * @designToken megamenu.vertical.orientation.padding + */ + padding?: string; + /** + * Vertical orientation gap of root + * + * @designToken megamenu.vertical.orientation.gap + */ + gap?: string; + }; + /** + * Horizontal orientation of root + */ + horizontalOrientation?: { + /** + * Horizontal orientation padding of root + * + * @designToken megamenu.horizontal.orientation.padding + */ + padding?: string; + }; + /** + * Transition duration of root + * + * @designToken megamenu.transition.duration + */ + transitionDuration?: string; }; /** - * Horizontal orientation of root - */ - horizontalOrientation?: { - - /** - * Horizontal orientation padding of root - * - * @designToken megamenu.horizontal.orientation.padding - */ - padding?: string; - }; - /** - * Transition duration of root - * - * @designToken megamenu.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the base item section - */ + * Used to pass tokens of the base item section + */ baseItem?: { - + /** + * Border radius of base item + * + * @designToken megamenu.base.item.border.radius + */ + borderRadius?: string; + /** + * Padding of base item + * + * @designToken megamenu.base.item.padding + */ + padding?: string; + }; /** - * Border radius of base item - * - * @designToken megamenu.base.item.border.radius - */ - borderRadius?: string; - /** - * Padding of base item - * - * @designToken megamenu.base.item.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the item section - */ + * Used to pass tokens of the item section + */ item?: { - - /** - * Focus background of item - * - * @designToken megamenu.item.focus.background - */ - focusBackground?: string; - /** - * Active background of item - * - * @designToken megamenu.item.active.background - */ - activeBackground?: string; - /** - * Color of item - * - * @designToken megamenu.item.color - */ - color?: string; - /** - * Focus color of item - * - * @designToken megamenu.item.focus.color - */ - focusColor?: string; - /** - * Active color of item - * - * @designToken megamenu.item.active.color - */ - activeColor?: string; - /** - * Padding of item - * - * @designToken megamenu.item.padding - */ - padding?: string; - /** - * Border radius of item - * - * @designToken megamenu.item.border.radius - */ - borderRadius?: string; - /** - * Gap of item - * - * @designToken megamenu.item.gap - */ - gap?: string; - /** - * Icon of item - */ - icon?: { - - /** - * Icon color of item - * - * @designToken megamenu.item.icon.color - */ - color?: string; - /** - * Icon focus color of item - * - * @designToken megamenu.item.icon.focus.color - */ - focusColor?: string; - /** - * Icon active color of item - * - * @designToken megamenu.item.icon.active.color - */ - activeColor?: string; + /** + * Focus background of item + * + * @designToken megamenu.item.focus.background + */ + focusBackground?: string; + /** + * Active background of item + * + * @designToken megamenu.item.active.background + */ + activeBackground?: string; + /** + * Color of item + * + * @designToken megamenu.item.color + */ + color?: string; + /** + * Focus color of item + * + * @designToken megamenu.item.focus.color + */ + focusColor?: string; + /** + * Active color of item + * + * @designToken megamenu.item.active.color + */ + activeColor?: string; + /** + * Padding of item + * + * @designToken megamenu.item.padding + */ + padding?: string; + /** + * Border radius of item + * + * @designToken megamenu.item.border.radius + */ + borderRadius?: string; + /** + * Gap of item + * + * @designToken megamenu.item.gap + */ + gap?: string; + /** + * Icon of item + */ + icon?: { + /** + * Icon color of item + * + * @designToken megamenu.item.icon.color + */ + color?: string; + /** + * Icon focus color of item + * + * @designToken megamenu.item.icon.focus.color + */ + focusColor?: string; + /** + * Icon active color of item + * + * @designToken megamenu.item.icon.active.color + */ + activeColor?: string; + }; }; - } /** - * Used to pass tokens of the overlay section - */ + * Used to pass tokens of the overlay section + */ overlay?: { - - /** - * Padding of overlay - * - * @designToken megamenu.overlay.padding - */ - padding?: string; - /** - * Background of overlay - * - * @designToken megamenu.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken megamenu.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken megamenu.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken megamenu.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken megamenu.overlay.shadow - */ - shadow?: string; - /** - * Gap of overlay - * - * @designToken megamenu.overlay.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the submenu section - */ - submenu?: { - - /** - * Padding of submenu - * - * @designToken megamenu.submenu.padding - */ - padding?: string; - /** - * Gap of submenu - * - * @designToken megamenu.submenu.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the submenu label section - */ - submenuLabel?: { - - /** - * Padding of submenu label - * - * @designToken megamenu.submenu.label.padding - */ - padding?: string; - /** - * Font weight of submenu label - * - * @designToken megamenu.submenu.label.font.weight - */ - fontWeight?: string; - /** - * Background of submenu label - * - * @designToken megamenu.submenu.label.background - */ - background?: string; - /** - * Color of submenu label - * - * @designToken megamenu.submenu.label.color - */ - color?: string; - } - /** - * Used to pass tokens of the submenu icon section - */ - submenuIcon?: { - - /** - * Size of submenu icon - * - * @designToken megamenu.submenu.icon.size - */ - size?: string; - /** - * Color of submenu icon - * - * @designToken megamenu.submenu.icon.color - */ - color?: string; - /** - * Focus color of submenu icon - * - * @designToken megamenu.submenu.icon.focus.color - */ - focusColor?: string; - /** - * Active color of submenu icon - * - * @designToken megamenu.submenu.icon.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the separator section - */ - separator?: { - - /** - * Border color of separator - * - * @designToken megamenu.separator.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the mobile button section - */ - mobileButton?: { - - /** - * Border radius of mobile button - * - * @designToken megamenu.mobile.button.border.radius - */ - borderRadius?: string; - /** - * Size of mobile button - * - * @designToken megamenu.mobile.button.size - */ - size?: string; - /** - * Color of mobile button - * - * @designToken megamenu.mobile.button.color - */ - color?: string; - /** - * Hover color of mobile button - * - * @designToken megamenu.mobile.button.hover.color - */ - hoverColor?: string; - /** - * Hover background of mobile button - * - * @designToken megamenu.mobile.button.hover.background - */ - hoverBackground?: string; - /** - * Focus ring of mobile button - */ - focusRing?: { - - /** - * Focus ring width of mobile button - * - * @designToken megamenu.mobile.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of mobile button - * - * @designToken megamenu.mobile.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of mobile button - * - * @designToken megamenu.mobile.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of mobile button - * - * @designToken megamenu.mobile.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of mobile button - * - * @designToken megamenu.mobile.button.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of overlay + * + * @designToken megamenu.overlay.padding + */ + padding?: string; + /** + * Background of overlay + * + * @designToken megamenu.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken megamenu.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken megamenu.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken megamenu.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken megamenu.overlay.shadow + */ + shadow?: string; + /** + * Gap of overlay + * + * @designToken megamenu.overlay.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the submenu section + */ + submenu?: { + /** + * Padding of submenu + * + * @designToken megamenu.submenu.padding + */ + padding?: string; + /** + * Gap of submenu + * + * @designToken megamenu.submenu.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the submenu label section + */ + submenuLabel?: { + /** + * Padding of submenu label + * + * @designToken megamenu.submenu.label.padding + */ + padding?: string; + /** + * Font weight of submenu label + * + * @designToken megamenu.submenu.label.font.weight + */ + fontWeight?: string; + /** + * Background of submenu label + * + * @designToken megamenu.submenu.label.background + */ + background?: string; + /** + * Color of submenu label + * + * @designToken megamenu.submenu.label.color + */ + color?: string; + }; + /** + * Used to pass tokens of the submenu icon section + */ + submenuIcon?: { + /** + * Size of submenu icon + * + * @designToken megamenu.submenu.icon.size + */ + size?: string; + /** + * Color of submenu icon + * + * @designToken megamenu.submenu.icon.color + */ + color?: string; + /** + * Focus color of submenu icon + * + * @designToken megamenu.submenu.icon.focus.color + */ + focusColor?: string; + /** + * Active color of submenu icon + * + * @designToken megamenu.submenu.icon.active.color + */ + activeColor?: string; + }; + /** + * Used to pass tokens of the separator section + */ + separator?: { + /** + * Border color of separator + * + * @designToken megamenu.separator.border.color + */ + borderColor?: string; + }; + /** + * Used to pass tokens of the mobile button section + */ + mobileButton?: { + /** + * Border radius of mobile button + * + * @designToken megamenu.mobile.button.border.radius + */ + borderRadius?: string; + /** + * Size of mobile button + * + * @designToken megamenu.mobile.button.size + */ + size?: string; + /** + * Color of mobile button + * + * @designToken megamenu.mobile.button.color + */ + color?: string; + /** + * Hover color of mobile button + * + * @designToken megamenu.mobile.button.hover.color + */ + hoverColor?: string; + /** + * Hover background of mobile button + * + * @designToken megamenu.mobile.button.hover.background + */ + hoverBackground?: string; + /** + * Focus ring of mobile button + */ + focusRing?: { + /** + * Focus ring width of mobile button + * + * @designToken megamenu.mobile.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of mobile button + * + * @designToken megamenu.mobile.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of mobile button + * + * @designToken megamenu.mobile.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of mobile button + * + * @designToken megamenu.mobile.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of mobile button + * + * @designToken megamenu.mobile.button.focus.ring.shadow + */ + shadow?: string; + }; }; - } } diff --git a/packages/themes/types/menu/index.d.ts b/packages/themes/types/menu/index.d.ts index f84ac1ba8..dc8abc830 100644 --- a/packages/themes/types/menu/index.d.ts +++ b/packages/themes/types/menu/index.d.ts @@ -1,4 +1,3 @@ - /** * * Menu Design Tokens @@ -12,167 +11,160 @@ import { ColorSchemeDesignToken } from '..'; export interface MenuDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken menu.background - */ - background?: string; - /** - * Border color of root - * - * @designToken menu.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken menu.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken menu.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken menu.shadow - */ - shadow?: string; - /** - * Transition duration of root - * - * @designToken menu.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken menu.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken menu.list.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the item section - */ - item?: { - - /** - * Focus background of item - * - * @designToken menu.item.focus.background - */ - focusBackground?: string; - /** - * Color of item - * - * @designToken menu.item.color - */ - color?: string; - /** - * Focus color of item - * - * @designToken menu.item.focus.color - */ - focusColor?: string; - /** - * Padding of item - * - * @designToken menu.item.padding - */ - padding?: string; - /** - * Border radius of item - * - * @designToken menu.item.border.radius - */ - borderRadius?: string; - /** - * Gap of item - * - * @designToken menu.item.gap - */ - gap?: string; - /** - * Icon of item - */ - icon?: { - - /** - * Icon color of item - * - * @designToken menu.item.icon.color - */ - color?: string; - /** - * Icon focus color of item - * - * @designToken menu.item.icon.focus.color - */ - focusColor?: string; + /** + * Background of root + * + * @designToken menu.background + */ + background?: string; + /** + * Border color of root + * + * @designToken menu.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken menu.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken menu.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken menu.shadow + */ + shadow?: string; + /** + * Transition duration of root + * + * @designToken menu.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the submenu label section - */ + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken menu.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken menu.list.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the item section + */ + item?: { + /** + * Focus background of item + * + * @designToken menu.item.focus.background + */ + focusBackground?: string; + /** + * Color of item + * + * @designToken menu.item.color + */ + color?: string; + /** + * Focus color of item + * + * @designToken menu.item.focus.color + */ + focusColor?: string; + /** + * Padding of item + * + * @designToken menu.item.padding + */ + padding?: string; + /** + * Border radius of item + * + * @designToken menu.item.border.radius + */ + borderRadius?: string; + /** + * Gap of item + * + * @designToken menu.item.gap + */ + gap?: string; + /** + * Icon of item + */ + icon?: { + /** + * Icon color of item + * + * @designToken menu.item.icon.color + */ + color?: string; + /** + * Icon focus color of item + * + * @designToken menu.item.icon.focus.color + */ + focusColor?: string; + }; + }; + /** + * Used to pass tokens of the submenu label section + */ submenuLabel?: { - + /** + * Padding of submenu label + * + * @designToken menu.submenu.label.padding + */ + padding?: string; + /** + * Font weight of submenu label + * + * @designToken menu.submenu.label.font.weight + */ + fontWeight?: string; + /** + * Background of submenu label + * + * @designToken menu.submenu.label.background + */ + background?: string; + /** + * Color of submenu label + * + * @designToken menu.submenu.label.color + */ + color?: string; + }; /** - * Padding of submenu label - * - * @designToken menu.submenu.label.padding - */ - padding?: string; - /** - * Font weight of submenu label - * - * @designToken menu.submenu.label.font.weight - */ - fontWeight?: string; - /** - * Background of submenu label - * - * @designToken menu.submenu.label.background - */ - background?: string; - /** - * Color of submenu label - * - * @designToken menu.submenu.label.color - */ - color?: string; - } - /** - * Used to pass tokens of the separator section - */ + * Used to pass tokens of the separator section + */ separator?: { - - /** - * Border color of separator - * - * @designToken menu.separator.border.color - */ - borderColor?: string; - } + /** + * Border color of separator + * + * @designToken menu.separator.border.color + */ + borderColor?: string; + }; } diff --git a/packages/themes/types/menubar/index.d.ts b/packages/themes/types/menubar/index.d.ts index 029268b30..a6f84e559 100644 --- a/packages/themes/types/menubar/index.d.ts +++ b/packages/themes/types/menubar/index.d.ts @@ -1,4 +1,3 @@ - /** * * Menubar Design Tokens @@ -12,311 +11,301 @@ import { ColorSchemeDesignToken } from '..'; export interface MenubarDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken menubar.background + */ + background?: string; + /** + * Border color of root + * + * @designToken menubar.border.color + */ + borderColor?: string; + /** + * Border radius of root + * + * @designToken menubar.border.radius + */ + borderRadius?: string; + /** + * Color of root + * + * @designToken menubar.color + */ + color?: string; + /** + * Gap of root + * + * @designToken menubar.gap + */ + gap?: string; + /** + * Padding of root + * + * @designToken menubar.padding + */ + padding?: string; + /** + * Transition duration of root + * + * @designToken menubar.transition.duration + */ + transitionDuration?: string; + }; /** - * Background of root - * - * @designToken menubar.background - */ - background?: string; - /** - * Border color of root - * - * @designToken menubar.border.color - */ - borderColor?: string; - /** - * Border radius of root - * - * @designToken menubar.border.radius - */ - borderRadius?: string; - /** - * Color of root - * - * @designToken menubar.color - */ - color?: string; - /** - * Gap of root - * - * @designToken menubar.gap - */ - gap?: string; - /** - * Padding of root - * - * @designToken menubar.padding - */ - padding?: string; - /** - * Transition duration of root - * - * @designToken menubar.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the base item section - */ + * Used to pass tokens of the base item section + */ baseItem?: { - + /** + * Border radius of base item + * + * @designToken menubar.base.item.border.radius + */ + borderRadius?: string; + /** + * Padding of base item + * + * @designToken menubar.base.item.padding + */ + padding?: string; + }; /** - * Border radius of base item - * - * @designToken menubar.base.item.border.radius - */ - borderRadius?: string; - /** - * Padding of base item - * - * @designToken menubar.base.item.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the item section - */ + * Used to pass tokens of the item section + */ item?: { - - /** - * Focus background of item - * - * @designToken menubar.item.focus.background - */ - focusBackground?: string; - /** - * Active background of item - * - * @designToken menubar.item.active.background - */ - activeBackground?: string; - /** - * Color of item - * - * @designToken menubar.item.color - */ - color?: string; - /** - * Focus color of item - * - * @designToken menubar.item.focus.color - */ - focusColor?: string; - /** - * Active color of item - * - * @designToken menubar.item.active.color - */ - activeColor?: string; - /** - * Padding of item - * - * @designToken menubar.item.padding - */ - padding?: string; - /** - * Border radius of item - * - * @designToken menubar.item.border.radius - */ - borderRadius?: string; - /** - * Gap of item - * - * @designToken menubar.item.gap - */ - gap?: string; - /** - * Icon of item - */ - icon?: { - - /** - * Icon color of item - * - * @designToken menubar.item.icon.color - */ - color?: string; - /** - * Icon focus color of item - * - * @designToken menubar.item.icon.focus.color - */ - focusColor?: string; - /** - * Icon active color of item - * - * @designToken menubar.item.icon.active.color - */ - activeColor?: string; + /** + * Focus background of item + * + * @designToken menubar.item.focus.background + */ + focusBackground?: string; + /** + * Active background of item + * + * @designToken menubar.item.active.background + */ + activeBackground?: string; + /** + * Color of item + * + * @designToken menubar.item.color + */ + color?: string; + /** + * Focus color of item + * + * @designToken menubar.item.focus.color + */ + focusColor?: string; + /** + * Active color of item + * + * @designToken menubar.item.active.color + */ + activeColor?: string; + /** + * Padding of item + * + * @designToken menubar.item.padding + */ + padding?: string; + /** + * Border radius of item + * + * @designToken menubar.item.border.radius + */ + borderRadius?: string; + /** + * Gap of item + * + * @designToken menubar.item.gap + */ + gap?: string; + /** + * Icon of item + */ + icon?: { + /** + * Icon color of item + * + * @designToken menubar.item.icon.color + */ + color?: string; + /** + * Icon focus color of item + * + * @designToken menubar.item.icon.focus.color + */ + focusColor?: string; + /** + * Icon active color of item + * + * @designToken menubar.item.icon.active.color + */ + activeColor?: string; + }; }; - } /** - * Used to pass tokens of the submenu section - */ + * Used to pass tokens of the submenu section + */ submenu?: { - - /** - * Padding of submenu - * - * @designToken menubar.submenu.padding - */ - padding?: string; - /** - * Gap of submenu - * - * @designToken menubar.submenu.gap - */ - gap?: string; - /** - * Background of submenu - * - * @designToken menubar.submenu.background - */ - background?: string; - /** - * Border color of submenu - * - * @designToken menubar.submenu.border.color - */ - borderColor?: string; - /** - * Border radius of submenu - * - * @designToken menubar.submenu.border.radius - */ - borderRadius?: string; - /** - * Shadow of submenu - * - * @designToken menubar.submenu.shadow - */ - shadow?: string; - /** - * Mobile indent of submenu - * - * @designToken menubar.submenu.mobile.indent - */ - mobileIndent?: string; - } - /** - * Used to pass tokens of the submenu icon section - */ - submenuIcon?: { - - /** - * Size of submenu icon - * - * @designToken menubar.submenu.icon.size - */ - size?: string; - /** - * Color of submenu icon - * - * @designToken menubar.submenu.icon.color - */ - color?: string; - /** - * Focus color of submenu icon - * - * @designToken menubar.submenu.icon.focus.color - */ - focusColor?: string; - /** - * Active color of submenu icon - * - * @designToken menubar.submenu.icon.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the separator section - */ - separator?: { - - /** - * Border color of separator - * - * @designToken menubar.separator.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the mobile button section - */ - mobileButton?: { - - /** - * Border radius of mobile button - * - * @designToken menubar.mobile.button.border.radius - */ - borderRadius?: string; - /** - * Size of mobile button - * - * @designToken menubar.mobile.button.size - */ - size?: string; - /** - * Color of mobile button - * - * @designToken menubar.mobile.button.color - */ - color?: string; - /** - * Hover color of mobile button - * - * @designToken menubar.mobile.button.hover.color - */ - hoverColor?: string; - /** - * Hover background of mobile button - * - * @designToken menubar.mobile.button.hover.background - */ - hoverBackground?: string; - /** - * Focus ring of mobile button - */ - focusRing?: { - - /** - * Focus ring width of mobile button - * - * @designToken menubar.mobile.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of mobile button - * - * @designToken menubar.mobile.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of mobile button - * - * @designToken menubar.mobile.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of mobile button - * - * @designToken menubar.mobile.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of mobile button - * - * @designToken menubar.mobile.button.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of submenu + * + * @designToken menubar.submenu.padding + */ + padding?: string; + /** + * Gap of submenu + * + * @designToken menubar.submenu.gap + */ + gap?: string; + /** + * Background of submenu + * + * @designToken menubar.submenu.background + */ + background?: string; + /** + * Border color of submenu + * + * @designToken menubar.submenu.border.color + */ + borderColor?: string; + /** + * Border radius of submenu + * + * @designToken menubar.submenu.border.radius + */ + borderRadius?: string; + /** + * Shadow of submenu + * + * @designToken menubar.submenu.shadow + */ + shadow?: string; + /** + * Mobile indent of submenu + * + * @designToken menubar.submenu.mobile.indent + */ + mobileIndent?: string; + }; + /** + * Used to pass tokens of the submenu icon section + */ + submenuIcon?: { + /** + * Size of submenu icon + * + * @designToken menubar.submenu.icon.size + */ + size?: string; + /** + * Color of submenu icon + * + * @designToken menubar.submenu.icon.color + */ + color?: string; + /** + * Focus color of submenu icon + * + * @designToken menubar.submenu.icon.focus.color + */ + focusColor?: string; + /** + * Active color of submenu icon + * + * @designToken menubar.submenu.icon.active.color + */ + activeColor?: string; + }; + /** + * Used to pass tokens of the separator section + */ + separator?: { + /** + * Border color of separator + * + * @designToken menubar.separator.border.color + */ + borderColor?: string; + }; + /** + * Used to pass tokens of the mobile button section + */ + mobileButton?: { + /** + * Border radius of mobile button + * + * @designToken menubar.mobile.button.border.radius + */ + borderRadius?: string; + /** + * Size of mobile button + * + * @designToken menubar.mobile.button.size + */ + size?: string; + /** + * Color of mobile button + * + * @designToken menubar.mobile.button.color + */ + color?: string; + /** + * Hover color of mobile button + * + * @designToken menubar.mobile.button.hover.color + */ + hoverColor?: string; + /** + * Hover background of mobile button + * + * @designToken menubar.mobile.button.hover.background + */ + hoverBackground?: string; + /** + * Focus ring of mobile button + */ + focusRing?: { + /** + * Focus ring width of mobile button + * + * @designToken menubar.mobile.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of mobile button + * + * @designToken menubar.mobile.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of mobile button + * + * @designToken menubar.mobile.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of mobile button + * + * @designToken menubar.mobile.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of mobile button + * + * @designToken menubar.mobile.button.focus.ring.shadow + */ + shadow?: string; + }; }; - } } diff --git a/packages/themes/types/message/index.d.ts b/packages/themes/types/message/index.d.ts index 9863c186f..f24dfa0a4 100644 --- a/packages/themes/types/message/index.d.ts +++ b/packages/themes/types/message/index.d.ts @@ -1,4 +1,3 @@ - /** * * Message Design Tokens @@ -12,503 +11,477 @@ import { ColorSchemeDesignToken } from '..'; export interface MessageDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Margin of root + * + * @designToken message.margin + */ + margin?: string; + /** + * Border radius of root + * + * @designToken message.border.radius + */ + borderRadius?: string; + /** + * Border width of root + * + * @designToken message.border.width + */ + borderWidth?: string; + /** + * Transition duration of root + * + * @designToken message.transition.duration + */ + transitionDuration?: string; + }; /** - * Margin of root - * - * @designToken message.margin - */ - margin?: string; - /** - * Border radius of root - * - * @designToken message.border.radius - */ - borderRadius?: string; - /** - * Border width of root - * - * @designToken message.border.width - */ - borderWidth?: string; - /** - * Transition duration of root - * - * @designToken message.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Padding of content + * + * @designToken message.content.padding + */ + padding?: string; + /** + * Gap of content + * + * @designToken message.content.gap + */ + gap?: string; + }; /** - * Padding of content - * - * @designToken message.content.padding - */ - padding?: string; - /** - * Gap of content - * - * @designToken message.content.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the text section - */ + * Used to pass tokens of the text section + */ text?: { - + /** + * Font size of text + * + * @designToken message.text.font.size + */ + fontSize?: string; + /** + * Font weight of text + * + * @designToken message.text.font.weight + */ + fontWeight?: string; + }; /** - * Font size of text - * - * @designToken message.text.font.size - */ - fontSize?: string; - /** - * Font weight of text - * - * @designToken message.text.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - - /** - * Size of icon - * - * @designToken message.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the close button section - */ - closeButton?: { - - /** - * Width of close button - * - * @designToken message.close.button.width - */ - width?: string; - /** - * Height of close button - * - * @designToken message.close.button.height - */ - height?: string; - /** - * Border radius of close button - * - * @designToken message.close.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of close button - */ - focusRing?: { - - /** - * Focus ring width of close button - * - * @designToken message.close.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of close button - * - * @designToken message.close.button.focus.ring.style - */ - style?: string; - /** - * Focus ring offset of close button - * - * @designToken message.close.button.focus.ring.offset - */ - offset?: string; + /** + * Size of icon + * + * @designToken message.icon.size + */ + size?: string; }; - } /** - * Used to pass tokens of the close icon section - */ + * Used to pass tokens of the close button section + */ + closeButton?: { + /** + * Width of close button + * + * @designToken message.close.button.width + */ + width?: string; + /** + * Height of close button + * + * @designToken message.close.button.height + */ + height?: string; + /** + * Border radius of close button + * + * @designToken message.close.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of close button + */ + focusRing?: { + /** + * Focus ring width of close button + * + * @designToken message.close.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of close button + * + * @designToken message.close.button.focus.ring.style + */ + style?: string; + /** + * Focus ring offset of close button + * + * @designToken message.close.button.focus.ring.offset + */ + offset?: string; + }; + }; + /** + * Used to pass tokens of the close icon section + */ closeIcon?: { - + /** + * Size of close icon + * + * @designToken message.close.icon.size + */ + size?: string; + }; /** - * Size of close icon - * - * @designToken message.close.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the info section - */ + * Used to pass tokens of the info section + */ info?: { - - /** - * Background of info - * - * @designToken message.info.background - */ - background?: string; - /** - * Border color of info - * - * @designToken message.info.border.color - */ - borderColor?: string; - /** - * Color of info - * - * @designToken message.info.color - */ - color?: string; - /** - * Shadow of info - * - * @designToken message.info.shadow - */ - shadow?: string; - /** - * Close button of info - */ - closeButton?: { - - /** - * Close button hover background of info - * - * @designToken message.info.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of info - */ - focusRing?: { - - /** - * Close button focus ring color of info - * - * @designToken message.info.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of info - * - * @designToken message.info.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of info + * + * @designToken message.info.background + */ + background?: string; + /** + * Border color of info + * + * @designToken message.info.border.color + */ + borderColor?: string; + /** + * Color of info + * + * @designToken message.info.color + */ + color?: string; + /** + * Shadow of info + * + * @designToken message.info.shadow + */ + shadow?: string; + /** + * Close button of info + */ + closeButton?: { + /** + * Close button hover background of info + * + * @designToken message.info.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of info + */ + focusRing?: { + /** + * Close button focus ring color of info + * + * @designToken message.info.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of info + * + * @designToken message.info.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the success section - */ + * Used to pass tokens of the success section + */ success?: { - - /** - * Background of success - * - * @designToken message.success.background - */ - background?: string; - /** - * Border color of success - * - * @designToken message.success.border.color - */ - borderColor?: string; - /** - * Color of success - * - * @designToken message.success.color - */ - color?: string; - /** - * Shadow of success - * - * @designToken message.success.shadow - */ - shadow?: string; - /** - * Close button of success - */ - closeButton?: { - - /** - * Close button hover background of success - * - * @designToken message.success.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of success - */ - focusRing?: { - - /** - * Close button focus ring color of success - * - * @designToken message.success.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of success - * - * @designToken message.success.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of success + * + * @designToken message.success.background + */ + background?: string; + /** + * Border color of success + * + * @designToken message.success.border.color + */ + borderColor?: string; + /** + * Color of success + * + * @designToken message.success.color + */ + color?: string; + /** + * Shadow of success + * + * @designToken message.success.shadow + */ + shadow?: string; + /** + * Close button of success + */ + closeButton?: { + /** + * Close button hover background of success + * + * @designToken message.success.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of success + */ + focusRing?: { + /** + * Close button focus ring color of success + * + * @designToken message.success.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of success + * + * @designToken message.success.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the warn section - */ + * Used to pass tokens of the warn section + */ warn?: { - - /** - * Background of warn - * - * @designToken message.warn.background - */ - background?: string; - /** - * Border color of warn - * - * @designToken message.warn.border.color - */ - borderColor?: string; - /** - * Color of warn - * - * @designToken message.warn.color - */ - color?: string; - /** - * Shadow of warn - * - * @designToken message.warn.shadow - */ - shadow?: string; - /** - * Close button of warn - */ - closeButton?: { - - /** - * Close button hover background of warn - * - * @designToken message.warn.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of warn - */ - focusRing?: { - - /** - * Close button focus ring color of warn - * - * @designToken message.warn.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of warn - * - * @designToken message.warn.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of warn + * + * @designToken message.warn.background + */ + background?: string; + /** + * Border color of warn + * + * @designToken message.warn.border.color + */ + borderColor?: string; + /** + * Color of warn + * + * @designToken message.warn.color + */ + color?: string; + /** + * Shadow of warn + * + * @designToken message.warn.shadow + */ + shadow?: string; + /** + * Close button of warn + */ + closeButton?: { + /** + * Close button hover background of warn + * + * @designToken message.warn.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of warn + */ + focusRing?: { + /** + * Close button focus ring color of warn + * + * @designToken message.warn.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of warn + * + * @designToken message.warn.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the error section - */ + * Used to pass tokens of the error section + */ error?: { - - /** - * Background of error - * - * @designToken message.error.background - */ - background?: string; - /** - * Border color of error - * - * @designToken message.error.border.color - */ - borderColor?: string; - /** - * Color of error - * - * @designToken message.error.color - */ - color?: string; - /** - * Shadow of error - * - * @designToken message.error.shadow - */ - shadow?: string; - /** - * Close button of error - */ - closeButton?: { - - /** - * Close button hover background of error - * - * @designToken message.error.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of error - */ - focusRing?: { - - /** - * Close button focus ring color of error - * - * @designToken message.error.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of error - * - * @designToken message.error.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of error + * + * @designToken message.error.background + */ + background?: string; + /** + * Border color of error + * + * @designToken message.error.border.color + */ + borderColor?: string; + /** + * Color of error + * + * @designToken message.error.color + */ + color?: string; + /** + * Shadow of error + * + * @designToken message.error.shadow + */ + shadow?: string; + /** + * Close button of error + */ + closeButton?: { + /** + * Close button hover background of error + * + * @designToken message.error.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of error + */ + focusRing?: { + /** + * Close button focus ring color of error + * + * @designToken message.error.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of error + * + * @designToken message.error.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the secondary section - */ + * Used to pass tokens of the secondary section + */ secondary?: { - - /** - * Background of secondary - * - * @designToken message.secondary.background - */ - background?: string; - /** - * Border color of secondary - * - * @designToken message.secondary.border.color - */ - borderColor?: string; - /** - * Color of secondary - * - * @designToken message.secondary.color - */ - color?: string; - /** - * Shadow of secondary - * - * @designToken message.secondary.shadow - */ - shadow?: string; - /** - * Close button of secondary - */ - closeButton?: { - - /** - * Close button hover background of secondary - * - * @designToken message.secondary.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of secondary - */ - focusRing?: { - - /** - * Close button focus ring color of secondary - * - * @designToken message.secondary.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of secondary - * - * @designToken message.secondary.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of secondary + * + * @designToken message.secondary.background + */ + background?: string; + /** + * Border color of secondary + * + * @designToken message.secondary.border.color + */ + borderColor?: string; + /** + * Color of secondary + * + * @designToken message.secondary.color + */ + color?: string; + /** + * Shadow of secondary + * + * @designToken message.secondary.shadow + */ + shadow?: string; + /** + * Close button of secondary + */ + closeButton?: { + /** + * Close button hover background of secondary + * + * @designToken message.secondary.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of secondary + */ + focusRing?: { + /** + * Close button focus ring color of secondary + * + * @designToken message.secondary.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of secondary + * + * @designToken message.secondary.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the contrast section - */ + * Used to pass tokens of the contrast section + */ contrast?: { - - /** - * Background of contrast - * - * @designToken message.contrast.background - */ - background?: string; - /** - * Border color of contrast - * - * @designToken message.contrast.border.color - */ - borderColor?: string; - /** - * Color of contrast - * - * @designToken message.contrast.color - */ - color?: string; - /** - * Shadow of contrast - * - * @designToken message.contrast.shadow - */ - shadow?: string; - /** - * Close button of contrast - */ - closeButton?: { - - /** - * Close button hover background of contrast - * - * @designToken message.contrast.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of contrast - */ - focusRing?: { - - /** - * Close button focus ring color of contrast - * - * @designToken message.contrast.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of contrast - * - * @designToken message.contrast.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of contrast + * + * @designToken message.contrast.background + */ + background?: string; + /** + * Border color of contrast + * + * @designToken message.contrast.border.color + */ + borderColor?: string; + /** + * Color of contrast + * + * @designToken message.contrast.color + */ + color?: string; + /** + * Shadow of contrast + * + * @designToken message.contrast.shadow + */ + shadow?: string; + /** + * Close button of contrast + */ + closeButton?: { + /** + * Close button hover background of contrast + * + * @designToken message.contrast.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of contrast + */ + focusRing?: { + /** + * Close button focus ring color of contrast + * + * @designToken message.contrast.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of contrast + * + * @designToken message.contrast.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } } diff --git a/packages/themes/types/metergroup/index.d.ts b/packages/themes/types/metergroup/index.d.ts index 963efa392..54940b6d4 100644 --- a/packages/themes/types/metergroup/index.d.ts +++ b/packages/themes/types/metergroup/index.d.ts @@ -1,4 +1,3 @@ - /** * * MeterGroup Design Tokens @@ -12,95 +11,88 @@ import { ColorSchemeDesignToken } from '..'; export interface MeterGroupDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Border radius of root + * + * @designToken metergroup.border.radius + */ + borderRadius?: string; + /** + * Gap of root + * + * @designToken metergroup.gap + */ + gap?: string; + }; /** - * Border radius of root - * - * @designToken metergroup.border.radius - */ - borderRadius?: string; - /** - * Gap of root - * - * @designToken metergroup.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the meters section - */ + * Used to pass tokens of the meters section + */ meters?: { - + /** + * Background of meters + * + * @designToken metergroup.meters.background + */ + background?: string; + /** + * Size of meters + * + * @designToken metergroup.meters.size + */ + size?: string; + }; /** - * Background of meters - * - * @designToken metergroup.meters.background - */ - background?: string; - /** - * Size of meters - * - * @designToken metergroup.meters.size - */ - size?: string; - } - /** - * Used to pass tokens of the label section - */ + * Used to pass tokens of the label section + */ label?: { - + /** + * Gap of label + * + * @designToken metergroup.label.gap + */ + gap?: string; + }; /** - * Gap of label - * - * @designToken metergroup.label.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the label marker section - */ + * Used to pass tokens of the label marker section + */ labelMarker?: { - + /** + * Size of label marker + * + * @designToken metergroup.label.marker.size + */ + size?: string; + }; /** - * Size of label marker - * - * @designToken metergroup.label.marker.size - */ - size?: string; - } - /** - * Used to pass tokens of the label icon section - */ + * Used to pass tokens of the label icon section + */ labelIcon?: { - + /** + * Size of label icon + * + * @designToken metergroup.label.icon.size + */ + size?: string; + }; /** - * Size of label icon - * - * @designToken metergroup.label.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the label list section - */ + * Used to pass tokens of the label list section + */ labelList?: { - - /** - * Vertical gap of label list - * - * @designToken metergroup.label.list.vertical.gap - */ - verticalGap?: string; - /** - * Horizontal gap of label list - * - * @designToken metergroup.label.list.horizontal.gap - */ - horizontalGap?: string; - } + /** + * Vertical gap of label list + * + * @designToken metergroup.label.list.vertical.gap + */ + verticalGap?: string; + /** + * Horizontal gap of label list + * + * @designToken metergroup.label.list.horizontal.gap + */ + horizontalGap?: string; + }; } diff --git a/packages/themes/types/multiselect/index.d.ts b/packages/themes/types/multiselect/index.d.ts index 20eabecc2..dbf043040 100644 --- a/packages/themes/types/multiselect/index.d.ts +++ b/packages/themes/types/multiselect/index.d.ts @@ -1,4 +1,3 @@ - /** * * MultiSelect Design Tokens @@ -12,347 +11,336 @@ import { ColorSchemeDesignToken } from '..'; export interface MultiSelectDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken multiselect.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken multiselect.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken multiselect.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken multiselect.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken multiselect.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken multiselect.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken multiselect.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken multiselect.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken multiselect.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken multiselect.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken multiselect.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken multiselect.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken multiselect.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken multiselect.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken multiselect.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken multiselect.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken multiselect.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken multiselect.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken multiselect.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken multiselect.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken multiselect.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken multiselect.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken multiselect.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken multiselect.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken multiselect.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken multiselect.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken multiselect.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken multiselect.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken multiselect.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken multiselect.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken multiselect.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken multiselect.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken multiselect.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken multiselect.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken multiselect.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken multiselect.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken multiselect.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken multiselect.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken multiselect.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken multiselect.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken multiselect.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken multiselect.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the dropdown section - */ + * Used to pass tokens of the dropdown section + */ dropdown?: { - - /** - * Width of dropdown - * - * @designToken multiselect.dropdown.width - */ - width?: string; - /** - * Color of dropdown - * - * @designToken multiselect.dropdown.color - */ - color?: string; - } - /** - * Used to pass tokens of the overlay section - */ - overlay?: { - - /** - * Background of overlay - * - * @designToken multiselect.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken multiselect.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken multiselect.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken multiselect.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken multiselect.overlay.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken multiselect.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken multiselect.list.gap - */ - gap?: string; - /** - * Header of list - */ - header?: { - - /** - * Header padding of list - * - * @designToken multiselect.list.header.padding - */ - padding?: string; + /** + * Width of dropdown + * + * @designToken multiselect.dropdown.width + */ + width?: string; + /** + * Color of dropdown + * + * @designToken multiselect.dropdown.color + */ + color?: string; }; - } /** - * Used to pass tokens of the option section - */ + * Used to pass tokens of the overlay section + */ + overlay?: { + /** + * Background of overlay + * + * @designToken multiselect.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken multiselect.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken multiselect.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken multiselect.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken multiselect.overlay.shadow + */ + shadow?: string; + }; + /** + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken multiselect.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken multiselect.list.gap + */ + gap?: string; + /** + * Header of list + */ + header?: { + /** + * Header padding of list + * + * @designToken multiselect.list.header.padding + */ + padding?: string; + }; + }; + /** + * Used to pass tokens of the option section + */ option?: { - + /** + * Focus background of option + * + * @designToken multiselect.option.focus.background + */ + focusBackground?: string; + /** + * Selected background of option + * + * @designToken multiselect.option.selected.background + */ + selectedBackground?: string; + /** + * Selected focus background of option + * + * @designToken multiselect.option.selected.focus.background + */ + selectedFocusBackground?: string; + /** + * Color of option + * + * @designToken multiselect.option.color + */ + color?: string; + /** + * Focus color of option + * + * @designToken multiselect.option.focus.color + */ + focusColor?: string; + /** + * Selected color of option + * + * @designToken multiselect.option.selected.color + */ + selectedColor?: string; + /** + * Selected focus color of option + * + * @designToken multiselect.option.selected.focus.color + */ + selectedFocusColor?: string; + /** + * Padding of option + * + * @designToken multiselect.option.padding + */ + padding?: string; + /** + * Border radius of option + * + * @designToken multiselect.option.border.radius + */ + borderRadius?: string; + /** + * Gap of option + * + * @designToken multiselect.option.gap + */ + gap?: string; + }; /** - * Focus background of option - * - * @designToken multiselect.option.focus.background - */ - focusBackground?: string; - /** - * Selected background of option - * - * @designToken multiselect.option.selected.background - */ - selectedBackground?: string; - /** - * Selected focus background of option - * - * @designToken multiselect.option.selected.focus.background - */ - selectedFocusBackground?: string; - /** - * Color of option - * - * @designToken multiselect.option.color - */ - color?: string; - /** - * Focus color of option - * - * @designToken multiselect.option.focus.color - */ - focusColor?: string; - /** - * Selected color of option - * - * @designToken multiselect.option.selected.color - */ - selectedColor?: string; - /** - * Selected focus color of option - * - * @designToken multiselect.option.selected.focus.color - */ - selectedFocusColor?: string; - /** - * Padding of option - * - * @designToken multiselect.option.padding - */ - padding?: string; - /** - * Border radius of option - * - * @designToken multiselect.option.border.radius - */ - borderRadius?: string; - /** - * Gap of option - * - * @designToken multiselect.option.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the option group section - */ + * Used to pass tokens of the option group section + */ optionGroup?: { - + /** + * Background of option group + * + * @designToken multiselect.option.group.background + */ + background?: string; + /** + * Color of option group + * + * @designToken multiselect.option.group.color + */ + color?: string; + /** + * Font weight of option group + * + * @designToken multiselect.option.group.font.weight + */ + fontWeight?: string; + /** + * Padding of option group + * + * @designToken multiselect.option.group.padding + */ + padding?: string; + }; /** - * Background of option group - * - * @designToken multiselect.option.group.background - */ - background?: string; - /** - * Color of option group - * - * @designToken multiselect.option.group.color - */ - color?: string; - /** - * Font weight of option group - * - * @designToken multiselect.option.group.font.weight - */ - fontWeight?: string; - /** - * Padding of option group - * - * @designToken multiselect.option.group.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the chip section - */ + * Used to pass tokens of the chip section + */ chip?: { - + /** + * Border radius of chip + * + * @designToken multiselect.chip.border.radius + */ + borderRadius?: string; + }; /** - * Border radius of chip - * - * @designToken multiselect.chip.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the empty message section - */ + * Used to pass tokens of the empty message section + */ emptyMessage?: { - - /** - * Padding of empty message - * - * @designToken multiselect.empty.message.padding - */ - padding?: string; - } + /** + * Padding of empty message + * + * @designToken multiselect.empty.message.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/orderlist/index.d.ts b/packages/themes/types/orderlist/index.d.ts index 8c9cdae69..1f2b018e0 100644 --- a/packages/themes/types/orderlist/index.d.ts +++ b/packages/themes/types/orderlist/index.d.ts @@ -1,4 +1,3 @@ - /** * * OrderList Design Tokens @@ -12,29 +11,26 @@ import { ColorSchemeDesignToken } from '..'; export interface OrderListDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Gap of root + * + * @designToken orderlist.gap + */ + gap?: string; + }; /** - * Gap of root - * - * @designToken orderlist.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the controls section - */ + * Used to pass tokens of the controls section + */ controls?: { - - /** - * Gap of controls - * - * @designToken orderlist.controls.gap - */ - gap?: string; - } + /** + * Gap of controls + * + * @designToken orderlist.controls.gap + */ + gap?: string; + }; } diff --git a/packages/themes/types/organizationchart/index.d.ts b/packages/themes/types/organizationchart/index.d.ts index 964ab7d90..20b4b479c 100644 --- a/packages/themes/types/organizationchart/index.d.ts +++ b/packages/themes/types/organizationchart/index.d.ts @@ -1,4 +1,3 @@ - /** * * OrganizationChart Design Tokens @@ -12,197 +11,191 @@ import { ColorSchemeDesignToken } from '..'; export interface OrganizationChartDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Gutter of root - * - * @designToken organizationchart.gutter - */ - gutter?: string; - /** - * Transition duration of root - * - * @designToken organizationchart.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the node section - */ - node?: { - - /** - * Background of node - * - * @designToken organizationchart.node.background - */ - background?: string; - /** - * Hover background of node - * - * @designToken organizationchart.node.hover.background - */ - hoverBackground?: string; - /** - * Selected background of node - * - * @designToken organizationchart.node.selected.background - */ - selectedBackground?: string; - /** - * Border color of node - * - * @designToken organizationchart.node.border.color - */ - borderColor?: string; - /** - * Color of node - * - * @designToken organizationchart.node.color - */ - color?: string; - /** - * Selected color of node - * - * @designToken organizationchart.node.selected.color - */ - selectedColor?: string; - /** - * Hover color of node - * - * @designToken organizationchart.node.hover.color - */ - hoverColor?: string; - /** - * Padding of node - * - * @designToken organizationchart.node.padding - */ - padding?: string; - /** - * Toggleable padding of node - * - * @designToken organizationchart.node.toggleable.padding - */ - toggleablePadding?: string; - /** - * Border radius of node - * - * @designToken organizationchart.node.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the node toggle button section - */ - nodeToggleButton?: { - - /** - * Background of node toggle button - * - * @designToken organizationchart.node.toggle.button.background - */ - background?: string; - /** - * Hover background of node toggle button - * - * @designToken organizationchart.node.toggle.button.hover.background - */ - hoverBackground?: string; - /** - * Border color of node toggle button - * - * @designToken organizationchart.node.toggle.button.border.color - */ - borderColor?: string; - /** - * Color of node toggle button - * - * @designToken organizationchart.node.toggle.button.color - */ - color?: string; - /** - * Hover color of node toggle button - * - * @designToken organizationchart.node.toggle.button.hover.color - */ - hoverColor?: string; - /** - * Size of node toggle button - * - * @designToken organizationchart.node.toggle.button.size - */ - size?: string; - /** - * Border radius of node toggle button - * - * @designToken organizationchart.node.toggle.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of node toggle button - */ - focusRing?: { - - /** - * Focus ring width of node toggle button - * - * @designToken organizationchart.node.toggle.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of node toggle button - * - * @designToken organizationchart.node.toggle.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of node toggle button - * - * @designToken organizationchart.node.toggle.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of node toggle button - * - * @designToken organizationchart.node.toggle.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of node toggle button - * - * @designToken organizationchart.node.toggle.button.focus.ring.shadow - */ - shadow?: string; + /** + * Gutter of root + * + * @designToken organizationchart.gutter + */ + gutter?: string; + /** + * Transition duration of root + * + * @designToken organizationchart.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the connector section - */ + * Used to pass tokens of the node section + */ + node?: { + /** + * Background of node + * + * @designToken organizationchart.node.background + */ + background?: string; + /** + * Hover background of node + * + * @designToken organizationchart.node.hover.background + */ + hoverBackground?: string; + /** + * Selected background of node + * + * @designToken organizationchart.node.selected.background + */ + selectedBackground?: string; + /** + * Border color of node + * + * @designToken organizationchart.node.border.color + */ + borderColor?: string; + /** + * Color of node + * + * @designToken organizationchart.node.color + */ + color?: string; + /** + * Selected color of node + * + * @designToken organizationchart.node.selected.color + */ + selectedColor?: string; + /** + * Hover color of node + * + * @designToken organizationchart.node.hover.color + */ + hoverColor?: string; + /** + * Padding of node + * + * @designToken organizationchart.node.padding + */ + padding?: string; + /** + * Toggleable padding of node + * + * @designToken organizationchart.node.toggleable.padding + */ + toggleablePadding?: string; + /** + * Border radius of node + * + * @designToken organizationchart.node.border.radius + */ + borderRadius?: string; + }; + /** + * Used to pass tokens of the node toggle button section + */ + nodeToggleButton?: { + /** + * Background of node toggle button + * + * @designToken organizationchart.node.toggle.button.background + */ + background?: string; + /** + * Hover background of node toggle button + * + * @designToken organizationchart.node.toggle.button.hover.background + */ + hoverBackground?: string; + /** + * Border color of node toggle button + * + * @designToken organizationchart.node.toggle.button.border.color + */ + borderColor?: string; + /** + * Color of node toggle button + * + * @designToken organizationchart.node.toggle.button.color + */ + color?: string; + /** + * Hover color of node toggle button + * + * @designToken organizationchart.node.toggle.button.hover.color + */ + hoverColor?: string; + /** + * Size of node toggle button + * + * @designToken organizationchart.node.toggle.button.size + */ + size?: string; + /** + * Border radius of node toggle button + * + * @designToken organizationchart.node.toggle.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of node toggle button + */ + focusRing?: { + /** + * Focus ring width of node toggle button + * + * @designToken organizationchart.node.toggle.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of node toggle button + * + * @designToken organizationchart.node.toggle.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of node toggle button + * + * @designToken organizationchart.node.toggle.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of node toggle button + * + * @designToken organizationchart.node.toggle.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of node toggle button + * + * @designToken organizationchart.node.toggle.button.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the connector section + */ connector?: { - - /** - * Color of connector - * - * @designToken organizationchart.connector.color - */ - color?: string; - /** - * Border radius of connector - * - * @designToken organizationchart.connector.border.radius - */ - borderRadius?: string; - /** - * Height of connector - * - * @designToken organizationchart.connector.height - */ - height?: string; - } + /** + * Color of connector + * + * @designToken organizationchart.connector.color + */ + color?: string; + /** + * Border radius of connector + * + * @designToken organizationchart.connector.border.radius + */ + borderRadius?: string; + /** + * Height of connector + * + * @designToken organizationchart.connector.height + */ + height?: string; + }; } diff --git a/packages/themes/types/overlaybadge/index.d.ts b/packages/themes/types/overlaybadge/index.d.ts index 7e1a82cea..9d4446a81 100644 --- a/packages/themes/types/overlaybadge/index.d.ts +++ b/packages/themes/types/overlaybadge/index.d.ts @@ -1,4 +1,3 @@ - /** * * OverlayBadge Design Tokens @@ -12,29 +11,26 @@ import { ColorSchemeDesignToken } from '..'; export interface OverlayBadgeDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Outline of root - */ - outline?: { - - /** - * Outline width of root - * - * @designToken overlaybadge.outline.width - */ - width?: string; - /** - * Outline color of root - * - * @designToken overlaybadge.outline.color - */ - color?: string; + /** + * Outline of root + */ + outline?: { + /** + * Outline width of root + * + * @designToken overlaybadge.outline.width + */ + width?: string; + /** + * Outline color of root + * + * @designToken overlaybadge.outline.color + */ + color?: string; + }; }; - } } diff --git a/packages/themes/types/paginator/index.d.ts b/packages/themes/types/paginator/index.d.ts index 689fe634b..593617375 100644 --- a/packages/themes/types/paginator/index.d.ts +++ b/packages/themes/types/paginator/index.d.ts @@ -1,4 +1,3 @@ - /** * * Paginator Design Tokens @@ -12,167 +11,161 @@ import { ColorSchemeDesignToken } from '..'; export interface PaginatorDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Padding of root - * - * @designToken paginator.padding - */ - padding?: string; - /** - * Gap of root - * - * @designToken paginator.gap - */ - gap?: string; - /** - * Border radius of root - * - * @designToken paginator.border.radius - */ - borderRadius?: string; - /** - * Background of root - * - * @designToken paginator.background - */ - background?: string; - /** - * Color of root - * - * @designToken paginator.color - */ - color?: string; - /** - * Transition duration of root - * - * @designToken paginator.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the nav button section - */ - navButton?: { - - /** - * Background of nav button - * - * @designToken paginator.nav.button.background - */ - background?: string; - /** - * Hover background of nav button - * - * @designToken paginator.nav.button.hover.background - */ - hoverBackground?: string; - /** - * Selected background of nav button - * - * @designToken paginator.nav.button.selected.background - */ - selectedBackground?: string; - /** - * Color of nav button - * - * @designToken paginator.nav.button.color - */ - color?: string; - /** - * Hover color of nav button - * - * @designToken paginator.nav.button.hover.color - */ - hoverColor?: string; - /** - * Selected color of nav button - * - * @designToken paginator.nav.button.selected.color - */ - selectedColor?: string; - /** - * Width of nav button - * - * @designToken paginator.nav.button.width - */ - width?: string; - /** - * Height of nav button - * - * @designToken paginator.nav.button.height - */ - height?: string; - /** - * Border radius of nav button - * - * @designToken paginator.nav.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of nav button - */ - focusRing?: { - - /** - * Focus ring width of nav button - * - * @designToken paginator.nav.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of nav button - * - * @designToken paginator.nav.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of nav button - * - * @designToken paginator.nav.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of nav button - * - * @designToken paginator.nav.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of nav button - * - * @designToken paginator.nav.button.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of root + * + * @designToken paginator.padding + */ + padding?: string; + /** + * Gap of root + * + * @designToken paginator.gap + */ + gap?: string; + /** + * Border radius of root + * + * @designToken paginator.border.radius + */ + borderRadius?: string; + /** + * Background of root + * + * @designToken paginator.background + */ + background?: string; + /** + * Color of root + * + * @designToken paginator.color + */ + color?: string; + /** + * Transition duration of root + * + * @designToken paginator.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the current page report section - */ + * Used to pass tokens of the nav button section + */ + navButton?: { + /** + * Background of nav button + * + * @designToken paginator.nav.button.background + */ + background?: string; + /** + * Hover background of nav button + * + * @designToken paginator.nav.button.hover.background + */ + hoverBackground?: string; + /** + * Selected background of nav button + * + * @designToken paginator.nav.button.selected.background + */ + selectedBackground?: string; + /** + * Color of nav button + * + * @designToken paginator.nav.button.color + */ + color?: string; + /** + * Hover color of nav button + * + * @designToken paginator.nav.button.hover.color + */ + hoverColor?: string; + /** + * Selected color of nav button + * + * @designToken paginator.nav.button.selected.color + */ + selectedColor?: string; + /** + * Width of nav button + * + * @designToken paginator.nav.button.width + */ + width?: string; + /** + * Height of nav button + * + * @designToken paginator.nav.button.height + */ + height?: string; + /** + * Border radius of nav button + * + * @designToken paginator.nav.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of nav button + */ + focusRing?: { + /** + * Focus ring width of nav button + * + * @designToken paginator.nav.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of nav button + * + * @designToken paginator.nav.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of nav button + * + * @designToken paginator.nav.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of nav button + * + * @designToken paginator.nav.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of nav button + * + * @designToken paginator.nav.button.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the current page report section + */ currentPageReport?: { - + /** + * Color of current page report + * + * @designToken paginator.current.page.report.color + */ + color?: string; + }; /** - * Color of current page report - * - * @designToken paginator.current.page.report.color - */ - color?: string; - } - /** - * Used to pass tokens of the jump to page input section - */ + * Used to pass tokens of the jump to page input section + */ jumpToPageInput?: { - - /** - * Max width of jump to page input - * - * @designToken paginator.jump.to.page.input.max.width - */ - maxWidth?: string; - } + /** + * Max width of jump to page input + * + * @designToken paginator.jump.to.page.input.max.width + */ + maxWidth?: string; + }; } diff --git a/packages/themes/types/panel/index.d.ts b/packages/themes/types/panel/index.d.ts index d09ce519e..e066f6fd8 100644 --- a/packages/themes/types/panel/index.d.ts +++ b/packages/themes/types/panel/index.d.ts @@ -1,4 +1,3 @@ - /** * * Panel Design Tokens @@ -12,125 +11,118 @@ import { ColorSchemeDesignToken } from '..'; export interface PanelDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken panel.background + */ + background?: string; + /** + * Border color of root + * + * @designToken panel.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken panel.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken panel.border.radius + */ + borderRadius?: string; + }; /** - * Background of root - * - * @designToken panel.background - */ - background?: string; - /** - * Border color of root - * - * @designToken panel.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken panel.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken panel.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Background of header + * + * @designToken panel.header.background + */ + background?: string; + /** + * Color of header + * + * @designToken panel.header.color + */ + color?: string; + /** + * Padding of header + * + * @designToken panel.header.padding + */ + padding?: string; + /** + * Border color of header + * + * @designToken panel.header.border.color + */ + borderColor?: string; + /** + * Border width of header + * + * @designToken panel.header.border.width + */ + borderWidth?: string; + /** + * Border radius of header + * + * @designToken panel.header.border.radius + */ + borderRadius?: string; + }; /** - * Background of header - * - * @designToken panel.header.background - */ - background?: string; - /** - * Color of header - * - * @designToken panel.header.color - */ - color?: string; - /** - * Padding of header - * - * @designToken panel.header.padding - */ - padding?: string; - /** - * Border color of header - * - * @designToken panel.header.border.color - */ - borderColor?: string; - /** - * Border width of header - * - * @designToken panel.header.border.width - */ - borderWidth?: string; - /** - * Border radius of header - * - * @designToken panel.header.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the toggleable header section - */ + * Used to pass tokens of the toggleable header section + */ toggleableHeader?: { - + /** + * Padding of toggleable header + * + * @designToken panel.toggleable.header.padding + */ + padding?: string; + }; /** - * Padding of toggleable header - * - * @designToken panel.toggleable.header.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the title section - */ + * Used to pass tokens of the title section + */ title?: { - + /** + * Font weight of title + * + * @designToken panel.title.font.weight + */ + fontWeight?: string; + }; /** - * Font weight of title - * - * @designToken panel.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Padding of content + * + * @designToken panel.content.padding + */ + padding?: string; + }; /** - * Padding of content - * - * @designToken panel.content.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the footer section - */ + * Used to pass tokens of the footer section + */ footer?: { - - /** - * Padding of footer - * - * @designToken panel.footer.padding - */ - padding?: string; - } + /** + * Padding of footer + * + * @designToken panel.footer.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/panelmenu/index.d.ts b/packages/themes/types/panelmenu/index.d.ts index 91b2e8e17..8607c3578 100644 --- a/packages/themes/types/panelmenu/index.d.ts +++ b/packages/themes/types/panelmenu/index.d.ts @@ -1,4 +1,3 @@ - /** * * PanelMenu Design Tokens @@ -12,191 +11,182 @@ import { ColorSchemeDesignToken } from '..'; export interface PanelMenuDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Gap of root + * + * @designToken panelmenu.gap + */ + gap?: string; + /** + * Transition duration of root + * + * @designToken panelmenu.transition.duration + */ + transitionDuration?: string; + }; /** - * Gap of root - * - * @designToken panelmenu.gap - */ - gap?: string; - /** - * Transition duration of root - * - * @designToken panelmenu.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the panel section - */ + * Used to pass tokens of the panel section + */ panel?: { - - /** - * Background of panel - * - * @designToken panelmenu.panel.background - */ - background?: string; - /** - * Border color of panel - * - * @designToken panelmenu.panel.border.color - */ - borderColor?: string; - /** - * Border width of panel - * - * @designToken panelmenu.panel.border.width - */ - borderWidth?: string; - /** - * Color of panel - * - * @designToken panelmenu.panel.color - */ - color?: string; - /** - * Padding of panel - * - * @designToken panelmenu.panel.padding - */ - padding?: string; - /** - * Border radius of panel - * - * @designToken panelmenu.panel.border.radius - */ - borderRadius?: string; - /** - * First of panel - */ - first?: { - - /** - * First border width of panel - * - * @designToken panelmenu.panel.first.border.width - */ - borderWidth?: string; - /** - * First top border radius of panel - * - * @designToken panelmenu.panel.first.top.border.radius - */ - topBorderRadius?: string; + /** + * Background of panel + * + * @designToken panelmenu.panel.background + */ + background?: string; + /** + * Border color of panel + * + * @designToken panelmenu.panel.border.color + */ + borderColor?: string; + /** + * Border width of panel + * + * @designToken panelmenu.panel.border.width + */ + borderWidth?: string; + /** + * Color of panel + * + * @designToken panelmenu.panel.color + */ + color?: string; + /** + * Padding of panel + * + * @designToken panelmenu.panel.padding + */ + padding?: string; + /** + * Border radius of panel + * + * @designToken panelmenu.panel.border.radius + */ + borderRadius?: string; + /** + * First of panel + */ + first?: { + /** + * First border width of panel + * + * @designToken panelmenu.panel.first.border.width + */ + borderWidth?: string; + /** + * First top border radius of panel + * + * @designToken panelmenu.panel.first.top.border.radius + */ + topBorderRadius?: string; + }; + /** + * Last of panel + */ + last?: { + /** + * Last border width of panel + * + * @designToken panelmenu.panel.last.border.width + */ + borderWidth?: string; + /** + * Last bottom border radius of panel + * + * @designToken panelmenu.panel.last.bottom.border.radius + */ + bottomBorderRadius?: string; + }; }; /** - * Last of panel - */ - last?: { - - /** - * Last border width of panel - * - * @designToken panelmenu.panel.last.border.width - */ - borderWidth?: string; - /** - * Last bottom border radius of panel - * - * @designToken panelmenu.panel.last.bottom.border.radius - */ - bottomBorderRadius?: string; - }; - } - /** - * Used to pass tokens of the item section - */ + * Used to pass tokens of the item section + */ item?: { - - /** - * Focus background of item - * - * @designToken panelmenu.item.focus.background - */ - focusBackground?: string; - /** - * Color of item - * - * @designToken panelmenu.item.color - */ - color?: string; - /** - * Focus color of item - * - * @designToken panelmenu.item.focus.color - */ - focusColor?: string; - /** - * Gap of item - * - * @designToken panelmenu.item.gap - */ - gap?: string; - /** - * Padding of item - * - * @designToken panelmenu.item.padding - */ - padding?: string; - /** - * Border radius of item - * - * @designToken panelmenu.item.border.radius - */ - borderRadius?: string; - /** - * Icon of item - */ - icon?: { - - /** - * Icon color of item - * - * @designToken panelmenu.item.icon.color - */ - color?: string; - /** - * Icon focus color of item - * - * @designToken panelmenu.item.icon.focus.color - */ - focusColor?: string; + /** + * Focus background of item + * + * @designToken panelmenu.item.focus.background + */ + focusBackground?: string; + /** + * Color of item + * + * @designToken panelmenu.item.color + */ + color?: string; + /** + * Focus color of item + * + * @designToken panelmenu.item.focus.color + */ + focusColor?: string; + /** + * Gap of item + * + * @designToken panelmenu.item.gap + */ + gap?: string; + /** + * Padding of item + * + * @designToken panelmenu.item.padding + */ + padding?: string; + /** + * Border radius of item + * + * @designToken panelmenu.item.border.radius + */ + borderRadius?: string; + /** + * Icon of item + */ + icon?: { + /** + * Icon color of item + * + * @designToken panelmenu.item.icon.color + */ + color?: string; + /** + * Icon focus color of item + * + * @designToken panelmenu.item.icon.focus.color + */ + focusColor?: string; + }; }; - } /** - * Used to pass tokens of the submenu section - */ + * Used to pass tokens of the submenu section + */ submenu?: { - + /** + * Indent of submenu + * + * @designToken panelmenu.submenu.indent + */ + indent?: string; + }; /** - * Indent of submenu - * - * @designToken panelmenu.submenu.indent - */ - indent?: string; - } - /** - * Used to pass tokens of the submenu icon section - */ + * Used to pass tokens of the submenu icon section + */ submenuIcon?: { - - /** - * Color of submenu icon - * - * @designToken panelmenu.submenu.icon.color - */ - color?: string; - /** - * Focus color of submenu icon - * - * @designToken panelmenu.submenu.icon.focus.color - */ - focusColor?: string; - } + /** + * Color of submenu icon + * + * @designToken panelmenu.submenu.icon.color + */ + color?: string; + /** + * Focus color of submenu icon + * + * @designToken panelmenu.submenu.icon.focus.color + */ + focusColor?: string; + }; } diff --git a/packages/themes/types/password/index.d.ts b/packages/themes/types/password/index.d.ts index 06d8b5c6f..0625fee2a 100644 --- a/packages/themes/types/password/index.d.ts +++ b/packages/themes/types/password/index.d.ts @@ -1,4 +1,3 @@ - /** * * Password Design Tokens @@ -12,119 +11,113 @@ import { ColorSchemeDesignToken } from '..'; export interface PasswordDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the meter section - */ + * Used to pass tokens of the meter section + */ meter?: { - + /** + * Background of meter + * + * @designToken password.meter.background + */ + background?: string; + /** + * Border radius of meter + * + * @designToken password.meter.border.radius + */ + borderRadius?: string; + /** + * Height of meter + * + * @designToken password.meter.height + */ + height?: string; + }; /** - * Background of meter - * - * @designToken password.meter.background - */ - background?: string; - /** - * Border radius of meter - * - * @designToken password.meter.border.radius - */ - borderRadius?: string; - /** - * Height of meter - * - * @designToken password.meter.height - */ - height?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Color of icon + * + * @designToken password.icon.color + */ + color?: string; + }; /** - * Color of icon - * - * @designToken password.icon.color - */ - color?: string; - } - /** - * Used to pass tokens of the overlay section - */ + * Used to pass tokens of the overlay section + */ overlay?: { - + /** + * Background of overlay + * + * @designToken password.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken password.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken password.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken password.overlay.color + */ + color?: string; + /** + * Padding of overlay + * + * @designToken password.overlay.padding + */ + padding?: string; + /** + * Shadow of overlay + * + * @designToken password.overlay.shadow + */ + shadow?: string; + }; /** - * Background of overlay - * - * @designToken password.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken password.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken password.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken password.overlay.color - */ - color?: string; - /** - * Padding of overlay - * - * @designToken password.overlay.padding - */ - padding?: string; - /** - * Shadow of overlay - * - * @designToken password.overlay.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Gap of content + * + * @designToken password.content.gap + */ + gap?: string; + }; /** - * Gap of content - * - * @designToken password.content.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the strength section - */ + * Used to pass tokens of the strength section + */ strength?: { - - /** - * Weak background of strength - * - * @designToken password.strength.weak.background - */ - weakBackground?: string; - /** - * Medium background of strength - * - * @designToken password.strength.medium.background - */ - mediumBackground?: string; - /** - * Strong background of strength - * - * @designToken password.strength.strong.background - */ - strongBackground?: string; - } + /** + * Weak background of strength + * + * @designToken password.strength.weak.background + */ + weakBackground?: string; + /** + * Medium background of strength + * + * @designToken password.strength.medium.background + */ + mediumBackground?: string; + /** + * Strong background of strength + * + * @designToken password.strength.strong.background + */ + strongBackground?: string; + }; } diff --git a/packages/themes/types/picklist/index.d.ts b/packages/themes/types/picklist/index.d.ts index d9ed671c2..f01be8f64 100644 --- a/packages/themes/types/picklist/index.d.ts +++ b/packages/themes/types/picklist/index.d.ts @@ -1,4 +1,3 @@ - /** * * PickList Design Tokens @@ -12,29 +11,26 @@ import { ColorSchemeDesignToken } from '..'; export interface PickListDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Gap of root + * + * @designToken picklist.gap + */ + gap?: string; + }; /** - * Gap of root - * - * @designToken picklist.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the controls section - */ + * Used to pass tokens of the controls section + */ controls?: { - - /** - * Gap of controls - * - * @designToken picklist.controls.gap - */ - gap?: string; - } + /** + * Gap of controls + * + * @designToken picklist.controls.gap + */ + gap?: string; + }; } diff --git a/packages/themes/types/popover/index.d.ts b/packages/themes/types/popover/index.d.ts index bb869e855..9444b0c93 100644 --- a/packages/themes/types/popover/index.d.ts +++ b/packages/themes/types/popover/index.d.ts @@ -1,4 +1,3 @@ - /** * * Popover Design Tokens @@ -12,65 +11,62 @@ import { ColorSchemeDesignToken } from '..'; export interface PopoverDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken popover.background + */ + background?: string; + /** + * Border color of root + * + * @designToken popover.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken popover.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken popover.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken popover.shadow + */ + shadow?: string; + /** + * Gutter of root + * + * @designToken popover.gutter + */ + gutter?: string; + /** + * Arrow offset of root + * + * @designToken popover.arrow.offset + */ + arrowOffset?: string; + }; /** - * Background of root - * - * @designToken popover.background - */ - background?: string; - /** - * Border color of root - * - * @designToken popover.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken popover.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken popover.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken popover.shadow - */ - shadow?: string; - /** - * Gutter of root - * - * @designToken popover.gutter - */ - gutter?: string; - /** - * Arrow offset of root - * - * @designToken popover.arrow.offset - */ - arrowOffset?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Padding of content - * - * @designToken popover.content.padding - */ - padding?: string; - } + /** + * Padding of content + * + * @designToken popover.content.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/progressbar/index.d.ts b/packages/themes/types/progressbar/index.d.ts index d406de1ff..a96187b81 100644 --- a/packages/themes/types/progressbar/index.d.ts +++ b/packages/themes/types/progressbar/index.d.ts @@ -1,4 +1,3 @@ - /** * * ProgressBar Design Tokens @@ -12,65 +11,61 @@ import { ColorSchemeDesignToken } from '..'; export interface ProgressBarDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken progressbar.background + */ + background?: string; + /** + * Border radius of root + * + * @designToken progressbar.border.radius + */ + borderRadius?: string; + /** + * Height of root + * + * @designToken progressbar.height + */ + height?: string; + }; /** - * Background of root - * - * @designToken progressbar.background - */ - background?: string; - /** - * Border radius of root - * - * @designToken progressbar.border.radius - */ - borderRadius?: string; - /** - * Height of root - * - * @designToken progressbar.height - */ - height?: string; - } - /** - * Used to pass tokens of the value section - */ + * Used to pass tokens of the value section + */ value?: { - + /** + * Background of value + * + * @designToken progressbar.value.background + */ + background?: string; + }; /** - * Background of value - * - * @designToken progressbar.value.background - */ - background?: string; - } - /** - * Used to pass tokens of the label section - */ + * Used to pass tokens of the label section + */ label?: { - - /** - * Color of label - * - * @designToken progressbar.label.color - */ - color?: string; - /** - * Font size of label - * - * @designToken progressbar.label.font.size - */ - fontSize?: string; - /** - * Font weight of label - * - * @designToken progressbar.label.font.weight - */ - fontWeight?: string; - } + /** + * Color of label + * + * @designToken progressbar.label.color + */ + color?: string; + /** + * Font size of label + * + * @designToken progressbar.label.font.size + */ + fontSize?: string; + /** + * Font weight of label + * + * @designToken progressbar.label.font.weight + */ + fontWeight?: string; + }; } diff --git a/packages/themes/types/progressspinner/index.d.ts b/packages/themes/types/progressspinner/index.d.ts index fb30a52ca..02185e3da 100644 --- a/packages/themes/types/progressspinner/index.d.ts +++ b/packages/themes/types/progressspinner/index.d.ts @@ -1,4 +1,3 @@ - /** * * ProgressSpinner Design Tokens @@ -12,35 +11,33 @@ import { ColorSchemeDesignToken } from '..'; export interface ProgressSpinnerDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Color.1 of root - * - * @designToken progressspinner.color.1 - */ - 'color.1'?: string; - /** - * Color.2 of root - * - * @designToken progressspinner.color.2 - */ - 'color.2'?: string; - /** - * Color.3 of root - * - * @designToken progressspinner.color.3 - */ - 'color.3'?: string; - /** - * Color.4 of root - * - * @designToken progressspinner.color.4 - */ - 'color.4'?: string; - } + /** + * Color.1 of root + * + * @designToken progressspinner.color.1 + */ + 'color.1'?: string; + /** + * Color.2 of root + * + * @designToken progressspinner.color.2 + */ + 'color.2'?: string; + /** + * Color.3 of root + * + * @designToken progressspinner.color.3 + */ + 'color.3'?: string; + /** + * Color.4 of root + * + * @designToken progressspinner.color.4 + */ + 'color.4'?: string; + }; } diff --git a/packages/themes/types/radiobutton/index.d.ts b/packages/themes/types/radiobutton/index.d.ts index 5082fea7d..77d3ee36e 100644 --- a/packages/themes/types/radiobutton/index.d.ts +++ b/packages/themes/types/radiobutton/index.d.ts @@ -1,4 +1,3 @@ - /** * * RadioButton Design Tokens @@ -12,173 +11,169 @@ import { ColorSchemeDesignToken } from '..'; export interface RadioButtonDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Width of root - * - * @designToken radiobutton.width - */ - width?: string; - /** - * Height of root - * - * @designToken radiobutton.height - */ - height?: string; - /** - * Background of root - * - * @designToken radiobutton.background - */ - background?: string; - /** - * Checked background of root - * - * @designToken radiobutton.checked.background - */ - checkedBackground?: string; - /** - * Checked hover background of root - * - * @designToken radiobutton.checked.hover.background - */ - checkedHoverBackground?: string; - /** - * Disabled background of root - * - * @designToken radiobutton.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken radiobutton.filled.background - */ - filledBackground?: string; - /** - * Border color of root - * - * @designToken radiobutton.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken radiobutton.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken radiobutton.focus.border.color - */ - focusBorderColor?: string; - /** - * Checked border color of root - * - * @designToken radiobutton.checked.border.color - */ - checkedBorderColor?: string; - /** - * Checked hover border color of root - * - * @designToken radiobutton.checked.hover.border.color - */ - checkedHoverBorderColor?: string; - /** - * Checked focus border color of root - * - * @designToken radiobutton.checked.focus.border.color - */ - checkedFocusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken radiobutton.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Shadow of root - * - * @designToken radiobutton.shadow - */ - shadow?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken radiobutton.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken radiobutton.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken radiobutton.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken radiobutton.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken radiobutton.focus.ring.shadow - */ - shadow?: string; + /** + * Width of root + * + * @designToken radiobutton.width + */ + width?: string; + /** + * Height of root + * + * @designToken radiobutton.height + */ + height?: string; + /** + * Background of root + * + * @designToken radiobutton.background + */ + background?: string; + /** + * Checked background of root + * + * @designToken radiobutton.checked.background + */ + checkedBackground?: string; + /** + * Checked hover background of root + * + * @designToken radiobutton.checked.hover.background + */ + checkedHoverBackground?: string; + /** + * Disabled background of root + * + * @designToken radiobutton.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken radiobutton.filled.background + */ + filledBackground?: string; + /** + * Border color of root + * + * @designToken radiobutton.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken radiobutton.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken radiobutton.focus.border.color + */ + focusBorderColor?: string; + /** + * Checked border color of root + * + * @designToken radiobutton.checked.border.color + */ + checkedBorderColor?: string; + /** + * Checked hover border color of root + * + * @designToken radiobutton.checked.hover.border.color + */ + checkedHoverBorderColor?: string; + /** + * Checked focus border color of root + * + * @designToken radiobutton.checked.focus.border.color + */ + checkedFocusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken radiobutton.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Shadow of root + * + * @designToken radiobutton.shadow + */ + shadow?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken radiobutton.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken radiobutton.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken radiobutton.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken radiobutton.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken radiobutton.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken radiobutton.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken radiobutton.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - - /** - * Size of icon - * - * @designToken radiobutton.icon.size - */ - size?: string; - /** - * Checked color of icon - * - * @designToken radiobutton.icon.checked.color - */ - checkedColor?: string; - /** - * Checked hover color of icon - * - * @designToken radiobutton.icon.checked.hover.color - */ - checkedHoverColor?: string; - /** - * Disabled color of icon - * - * @designToken radiobutton.icon.disabled.color - */ - disabledColor?: string; - } + /** + * Size of icon + * + * @designToken radiobutton.icon.size + */ + size?: string; + /** + * Checked color of icon + * + * @designToken radiobutton.icon.checked.color + */ + checkedColor?: string; + /** + * Checked hover color of icon + * + * @designToken radiobutton.icon.checked.hover.color + */ + checkedHoverColor?: string; + /** + * Disabled color of icon + * + * @designToken radiobutton.icon.disabled.color + */ + disabledColor?: string; + }; } diff --git a/packages/themes/types/rating/index.d.ts b/packages/themes/types/rating/index.d.ts index da2bfff82..4bc1a4e33 100644 --- a/packages/themes/types/rating/index.d.ts +++ b/packages/themes/types/rating/index.d.ts @@ -1,4 +1,3 @@ - /** * * Rating Design Tokens @@ -12,53 +11,50 @@ import { ColorSchemeDesignToken } from '..'; export interface RatingDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Gap of root + * + * @designToken rating.gap + */ + gap?: string; + /** + * Transition duration of root + * + * @designToken rating.transition.duration + */ + transitionDuration?: string; + }; /** - * Gap of root - * - * @designToken rating.gap - */ - gap?: string; - /** - * Transition duration of root - * - * @designToken rating.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - - /** - * Size of icon - * - * @designToken rating.icon.size - */ - size?: string; - /** - * Color of icon - * - * @designToken rating.icon.color - */ - color?: string; - /** - * Hover color of icon - * - * @designToken rating.icon.hover.color - */ - hoverColor?: string; - /** - * Active color of icon - * - * @designToken rating.icon.active.color - */ - activeColor?: string; - } + /** + * Size of icon + * + * @designToken rating.icon.size + */ + size?: string; + /** + * Color of icon + * + * @designToken rating.icon.color + */ + color?: string; + /** + * Hover color of icon + * + * @designToken rating.icon.hover.color + */ + hoverColor?: string; + /** + * Active color of icon + * + * @designToken rating.icon.active.color + */ + activeColor?: string; + }; } diff --git a/packages/themes/types/ripple/index.d.ts b/packages/themes/types/ripple/index.d.ts index 9309db5b7..7c7abaa4c 100644 --- a/packages/themes/types/ripple/index.d.ts +++ b/packages/themes/types/ripple/index.d.ts @@ -1,4 +1,3 @@ - /** * * Ripple Design Tokens @@ -12,17 +11,15 @@ import { ColorSchemeDesignToken } from '..'; export interface RippleDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken ripple.background - */ - background?: string; - } + /** + * Background of root + * + * @designToken ripple.background + */ + background?: string; + }; } diff --git a/packages/themes/types/scrollpanel/index.d.ts b/packages/themes/types/scrollpanel/index.d.ts index 84421faec..401ecbb6e 100644 --- a/packages/themes/types/scrollpanel/index.d.ts +++ b/packages/themes/types/scrollpanel/index.d.ts @@ -1,4 +1,3 @@ - /** * * ScrollPanel Design Tokens @@ -12,77 +11,73 @@ import { ColorSchemeDesignToken } from '..'; export interface ScrollPanelDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Transition duration of root - * - * @designToken scrollpanel.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the bar section - */ - bar?: { - - /** - * Size of bar - * - * @designToken scrollpanel.bar.size - */ - size?: string; - /** - * Border radius of bar - * - * @designToken scrollpanel.bar.border.radius - */ - borderRadius?: string; - /** - * Focus ring of bar - */ - focusRing?: { - - /** - * Focus ring width of bar - * - * @designToken scrollpanel.bar.focus.ring.width - */ - width?: string; - /** - * Focus ring style of bar - * - * @designToken scrollpanel.bar.focus.ring.style - */ - style?: string; - /** - * Focus ring color of bar - * - * @designToken scrollpanel.bar.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of bar - * - * @designToken scrollpanel.bar.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of bar - * - * @designToken scrollpanel.bar.focus.ring.shadow - */ - shadow?: string; + /** + * Transition duration of root + * + * @designToken scrollpanel.transition.duration + */ + transitionDuration?: string; }; /** - * Background of bar - * - * @designToken scrollpanel.bar.background - */ - background?: string; - } + * Used to pass tokens of the bar section + */ + bar?: { + /** + * Size of bar + * + * @designToken scrollpanel.bar.size + */ + size?: string; + /** + * Border radius of bar + * + * @designToken scrollpanel.bar.border.radius + */ + borderRadius?: string; + /** + * Focus ring of bar + */ + focusRing?: { + /** + * Focus ring width of bar + * + * @designToken scrollpanel.bar.focus.ring.width + */ + width?: string; + /** + * Focus ring style of bar + * + * @designToken scrollpanel.bar.focus.ring.style + */ + style?: string; + /** + * Focus ring color of bar + * + * @designToken scrollpanel.bar.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of bar + * + * @designToken scrollpanel.bar.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of bar + * + * @designToken scrollpanel.bar.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Background of bar + * + * @designToken scrollpanel.bar.background + */ + background?: string; + }; } diff --git a/packages/themes/types/select/index.d.ts b/packages/themes/types/select/index.d.ts index dd6f85069..e40156879 100644 --- a/packages/themes/types/select/index.d.ts +++ b/packages/themes/types/select/index.d.ts @@ -1,4 +1,3 @@ - /** * * Select Design Tokens @@ -12,365 +11,353 @@ import { ColorSchemeDesignToken } from '..'; export interface SelectDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken select.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken select.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken select.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken select.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken select.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken select.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken select.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken select.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken select.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken select.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken select.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken select.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken select.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken select.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken select.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken select.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken select.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken select.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken select.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken select.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken select.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken select.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken select.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken select.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken select.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken select.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken select.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken select.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken select.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken select.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken select.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken select.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken select.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken select.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken select.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken select.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken select.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken select.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken select.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken select.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken select.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken select.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the dropdown section - */ + * Used to pass tokens of the dropdown section + */ dropdown?: { - - /** - * Width of dropdown - * - * @designToken select.dropdown.width - */ - width?: string; - /** - * Color of dropdown - * - * @designToken select.dropdown.color - */ - color?: string; - } - /** - * Used to pass tokens of the overlay section - */ - overlay?: { - - /** - * Background of overlay - * - * @designToken select.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken select.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken select.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken select.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken select.overlay.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken select.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken select.list.gap - */ - gap?: string; - /** - * Header of list - */ - header?: { - - /** - * Header padding of list - * - * @designToken select.list.header.padding - */ - padding?: string; + /** + * Width of dropdown + * + * @designToken select.dropdown.width + */ + width?: string; + /** + * Color of dropdown + * + * @designToken select.dropdown.color + */ + color?: string; }; - } /** - * Used to pass tokens of the option section - */ + * Used to pass tokens of the overlay section + */ + overlay?: { + /** + * Background of overlay + * + * @designToken select.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken select.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken select.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken select.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken select.overlay.shadow + */ + shadow?: string; + }; + /** + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken select.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken select.list.gap + */ + gap?: string; + /** + * Header of list + */ + header?: { + /** + * Header padding of list + * + * @designToken select.list.header.padding + */ + padding?: string; + }; + }; + /** + * Used to pass tokens of the option section + */ option?: { - + /** + * Focus background of option + * + * @designToken select.option.focus.background + */ + focusBackground?: string; + /** + * Selected background of option + * + * @designToken select.option.selected.background + */ + selectedBackground?: string; + /** + * Selected focus background of option + * + * @designToken select.option.selected.focus.background + */ + selectedFocusBackground?: string; + /** + * Color of option + * + * @designToken select.option.color + */ + color?: string; + /** + * Focus color of option + * + * @designToken select.option.focus.color + */ + focusColor?: string; + /** + * Selected color of option + * + * @designToken select.option.selected.color + */ + selectedColor?: string; + /** + * Selected focus color of option + * + * @designToken select.option.selected.focus.color + */ + selectedFocusColor?: string; + /** + * Padding of option + * + * @designToken select.option.padding + */ + padding?: string; + /** + * Border radius of option + * + * @designToken select.option.border.radius + */ + borderRadius?: string; + }; /** - * Focus background of option - * - * @designToken select.option.focus.background - */ - focusBackground?: string; - /** - * Selected background of option - * - * @designToken select.option.selected.background - */ - selectedBackground?: string; - /** - * Selected focus background of option - * - * @designToken select.option.selected.focus.background - */ - selectedFocusBackground?: string; - /** - * Color of option - * - * @designToken select.option.color - */ - color?: string; - /** - * Focus color of option - * - * @designToken select.option.focus.color - */ - focusColor?: string; - /** - * Selected color of option - * - * @designToken select.option.selected.color - */ - selectedColor?: string; - /** - * Selected focus color of option - * - * @designToken select.option.selected.focus.color - */ - selectedFocusColor?: string; - /** - * Padding of option - * - * @designToken select.option.padding - */ - padding?: string; - /** - * Border radius of option - * - * @designToken select.option.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the option group section - */ + * Used to pass tokens of the option group section + */ optionGroup?: { - + /** + * Background of option group + * + * @designToken select.option.group.background + */ + background?: string; + /** + * Color of option group + * + * @designToken select.option.group.color + */ + color?: string; + /** + * Font weight of option group + * + * @designToken select.option.group.font.weight + */ + fontWeight?: string; + /** + * Padding of option group + * + * @designToken select.option.group.padding + */ + padding?: string; + }; /** - * Background of option group - * - * @designToken select.option.group.background - */ - background?: string; - /** - * Color of option group - * - * @designToken select.option.group.color - */ - color?: string; - /** - * Font weight of option group - * - * @designToken select.option.group.font.weight - */ - fontWeight?: string; - /** - * Padding of option group - * - * @designToken select.option.group.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the clear icon section - */ + * Used to pass tokens of the clear icon section + */ clearIcon?: { - + /** + * Color of clear icon + * + * @designToken select.clear.icon.color + */ + color?: string; + }; /** - * Color of clear icon - * - * @designToken select.clear.icon.color - */ - color?: string; - } - /** - * Used to pass tokens of the checkmark section - */ + * Used to pass tokens of the checkmark section + */ checkmark?: { - + /** + * Color of checkmark + * + * @designToken select.checkmark.color + */ + color?: string; + /** + * Gutter start of checkmark + * + * @designToken select.checkmark.gutter.start + */ + gutterStart?: string; + /** + * Gutter end of checkmark + * + * @designToken select.checkmark.gutter.end + */ + gutterEnd?: string; + }; /** - * Color of checkmark - * - * @designToken select.checkmark.color - */ - color?: string; - /** - * Gutter start of checkmark - * - * @designToken select.checkmark.gutter.start - */ - gutterStart?: string; - /** - * Gutter end of checkmark - * - * @designToken select.checkmark.gutter.end - */ - gutterEnd?: string; - } - /** - * Used to pass tokens of the empty message section - */ + * Used to pass tokens of the empty message section + */ emptyMessage?: { - - /** - * Padding of empty message - * - * @designToken select.empty.message.padding - */ - padding?: string; - } + /** + * Padding of empty message + * + * @designToken select.empty.message.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/selectbutton/index.d.ts b/packages/themes/types/selectbutton/index.d.ts index 5707edf2d..6d04bd05a 100644 --- a/packages/themes/types/selectbutton/index.d.ts +++ b/packages/themes/types/selectbutton/index.d.ts @@ -1,4 +1,3 @@ - /** * * SelectButton Design Tokens @@ -12,23 +11,21 @@ import { ColorSchemeDesignToken } from '..'; export interface SelectButtonDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken selectbutton.border.radius - */ - borderRadius?: string; - /** - * Invalid border color of root - * - * @designToken selectbutton.invalid.border.color - */ - invalidBorderColor?: string; - } + /** + * Border radius of root + * + * @designToken selectbutton.border.radius + */ + borderRadius?: string; + /** + * Invalid border color of root + * + * @designToken selectbutton.invalid.border.color + */ + invalidBorderColor?: string; + }; } diff --git a/packages/themes/types/skeleton/index.d.ts b/packages/themes/types/skeleton/index.d.ts index eb7de2ec6..0ad0c0ded 100644 --- a/packages/themes/types/skeleton/index.d.ts +++ b/packages/themes/types/skeleton/index.d.ts @@ -1,4 +1,3 @@ - /** * * Skeleton Design Tokens @@ -12,29 +11,27 @@ import { ColorSchemeDesignToken } from '..'; export interface SkeletonDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken skeleton.border.radius - */ - borderRadius?: string; - /** - * Background of root - * - * @designToken skeleton.background - */ - background?: string; - /** - * Animation background of root - * - * @designToken skeleton.animation.background - */ - animationBackground?: string; - } + /** + * Border radius of root + * + * @designToken skeleton.border.radius + */ + borderRadius?: string; + /** + * Background of root + * + * @designToken skeleton.background + */ + background?: string; + /** + * Animation background of root + * + * @designToken skeleton.animation.background + */ + animationBackground?: string; + }; } diff --git a/packages/themes/types/slider/index.d.ts b/packages/themes/types/slider/index.d.ts index 51de00598..3723fd9d1 100644 --- a/packages/themes/types/slider/index.d.ts +++ b/packages/themes/types/slider/index.d.ts @@ -1,4 +1,3 @@ - /** * * Slider Design Tokens @@ -12,167 +11,160 @@ import { ColorSchemeDesignToken } from '..'; export interface SliderDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken slider.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken slider.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the track section - */ + * Used to pass tokens of the track section + */ track?: { - + /** + * Background of track + * + * @designToken slider.track.background + */ + background?: string; + /** + * Border radius of track + * + * @designToken slider.track.border.radius + */ + borderRadius?: string; + /** + * Size of track + * + * @designToken slider.track.size + */ + size?: string; + }; /** - * Background of track - * - * @designToken slider.track.background - */ - background?: string; - /** - * Border radius of track - * - * @designToken slider.track.border.radius - */ - borderRadius?: string; - /** - * Size of track - * - * @designToken slider.track.size - */ - size?: string; - } - /** - * Used to pass tokens of the range section - */ + * Used to pass tokens of the range section + */ range?: { - + /** + * Background of range + * + * @designToken slider.range.background + */ + background?: string; + }; /** - * Background of range - * - * @designToken slider.range.background - */ - background?: string; - } - /** - * Used to pass tokens of the handle section - */ + * Used to pass tokens of the handle section + */ handle?: { - - /** - * Width of handle - * - * @designToken slider.handle.width - */ - width?: string; - /** - * Height of handle - * - * @designToken slider.handle.height - */ - height?: string; - /** - * Border radius of handle - * - * @designToken slider.handle.border.radius - */ - borderRadius?: string; - /** - * Background of handle - * - * @designToken slider.handle.background - */ - background?: string; - /** - * Hover background of handle - * - * @designToken slider.handle.hover.background - */ - hoverBackground?: string; - /** - * Content of handle - */ - content?: { - - /** - * Content border radius of handle - * - * @designToken slider.handle.content.border.radius - */ - borderRadius?: string; - /** - * Content hover background of handle - * - * @designToken slider.handle.content.hover.background - */ - hoverBackground?: string; - /** - * Content width of handle - * - * @designToken slider.handle.content.width - */ - width?: string; - /** - * Content height of handle - * - * @designToken slider.handle.content.height - */ - height?: string; - /** - * Content shadow of handle - * - * @designToken slider.handle.content.shadow - */ - shadow?: string; + /** + * Width of handle + * + * @designToken slider.handle.width + */ + width?: string; + /** + * Height of handle + * + * @designToken slider.handle.height + */ + height?: string; + /** + * Border radius of handle + * + * @designToken slider.handle.border.radius + */ + borderRadius?: string; + /** + * Background of handle + * + * @designToken slider.handle.background + */ + background?: string; + /** + * Hover background of handle + * + * @designToken slider.handle.hover.background + */ + hoverBackground?: string; + /** + * Content of handle + */ + content?: { + /** + * Content border radius of handle + * + * @designToken slider.handle.content.border.radius + */ + borderRadius?: string; + /** + * Content hover background of handle + * + * @designToken slider.handle.content.hover.background + */ + hoverBackground?: string; + /** + * Content width of handle + * + * @designToken slider.handle.content.width + */ + width?: string; + /** + * Content height of handle + * + * @designToken slider.handle.content.height + */ + height?: string; + /** + * Content shadow of handle + * + * @designToken slider.handle.content.shadow + */ + shadow?: string; + }; + /** + * Focus ring of handle + */ + focusRing?: { + /** + * Focus ring width of handle + * + * @designToken slider.handle.focus.ring.width + */ + width?: string; + /** + * Focus ring style of handle + * + * @designToken slider.handle.focus.ring.style + */ + style?: string; + /** + * Focus ring color of handle + * + * @designToken slider.handle.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of handle + * + * @designToken slider.handle.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of handle + * + * @designToken slider.handle.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Content background of handle + * + * @designToken slider.handle.content.background + */ + contentBackground?: string; }; - /** - * Focus ring of handle - */ - focusRing?: { - - /** - * Focus ring width of handle - * - * @designToken slider.handle.focus.ring.width - */ - width?: string; - /** - * Focus ring style of handle - * - * @designToken slider.handle.focus.ring.style - */ - style?: string; - /** - * Focus ring color of handle - * - * @designToken slider.handle.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of handle - * - * @designToken slider.handle.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of handle - * - * @designToken slider.handle.focus.ring.shadow - */ - shadow?: string; - }; - /** - * Content background of handle - * - * @designToken slider.handle.content.background - */ - contentBackground?: string; - } } diff --git a/packages/themes/types/speeddial/index.d.ts b/packages/themes/types/speeddial/index.d.ts index 0a75be4c9..7c5ea1ee2 100644 --- a/packages/themes/types/speeddial/index.d.ts +++ b/packages/themes/types/speeddial/index.d.ts @@ -1,4 +1,3 @@ - /** * * SpeedDial Design Tokens @@ -12,23 +11,21 @@ import { ColorSchemeDesignToken } from '..'; export interface SpeedDialDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Gap of root - * - * @designToken speeddial.gap - */ - gap?: string; - /** - * Transition duration of root - * - * @designToken speeddial.transition.duration - */ - transitionDuration?: string; - } + /** + * Gap of root + * + * @designToken speeddial.gap + */ + gap?: string; + /** + * Transition duration of root + * + * @designToken speeddial.transition.duration + */ + transitionDuration?: string; + }; } diff --git a/packages/themes/types/splitbutton/index.d.ts b/packages/themes/types/splitbutton/index.d.ts index 6efc58ae2..a7be1086b 100644 --- a/packages/themes/types/splitbutton/index.d.ts +++ b/packages/themes/types/splitbutton/index.d.ts @@ -1,4 +1,3 @@ - /** * * SplitButton Design Tokens @@ -12,29 +11,27 @@ import { ColorSchemeDesignToken } from '..'; export interface SplitButtonDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Border radius of root - * - * @designToken splitbutton.border.radius - */ - borderRadius?: string; - /** - * Rounded border radius of root - * - * @designToken splitbutton.rounded.border.radius - */ - roundedBorderRadius?: string; - /** - * Raised shadow of root - * - * @designToken splitbutton.raised.shadow - */ - raisedShadow?: string; - } + /** + * Border radius of root + * + * @designToken splitbutton.border.radius + */ + borderRadius?: string; + /** + * Rounded border radius of root + * + * @designToken splitbutton.rounded.border.radius + */ + roundedBorderRadius?: string; + /** + * Raised shadow of root + * + * @designToken splitbutton.raised.shadow + */ + raisedShadow?: string; + }; } diff --git a/packages/themes/types/splitter/index.d.ts b/packages/themes/types/splitter/index.d.ts index d5442aeee..d78aa5a0a 100644 --- a/packages/themes/types/splitter/index.d.ts +++ b/packages/themes/types/splitter/index.d.ts @@ -1,4 +1,3 @@ - /** * * Splitter Design Tokens @@ -12,107 +11,102 @@ import { ColorSchemeDesignToken } from '..'; export interface SplitterDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken splitter.background - */ - background?: string; - /** - * Border color of root - * - * @designToken splitter.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken splitter.color - */ - color?: string; - /** - * Transition duration of root - * - * @designToken splitter.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the gutter section - */ - gutter?: { - - /** - * Background of gutter - * - * @designToken splitter.gutter.background - */ - background?: string; - } - /** - * Used to pass tokens of the handle section - */ - handle?: { - - /** - * Size of handle - * - * @designToken splitter.handle.size - */ - size?: string; - /** - * Background of handle - * - * @designToken splitter.handle.background - */ - background?: string; - /** - * Border radius of handle - * - * @designToken splitter.handle.border.radius - */ - borderRadius?: string; - /** - * Focus ring of handle - */ - focusRing?: { - - /** - * Focus ring width of handle - * - * @designToken splitter.handle.focus.ring.width - */ - width?: string; - /** - * Focus ring style of handle - * - * @designToken splitter.handle.focus.ring.style - */ - style?: string; - /** - * Focus ring color of handle - * - * @designToken splitter.handle.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of handle - * - * @designToken splitter.handle.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of handle - * - * @designToken splitter.handle.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken splitter.background + */ + background?: string; + /** + * Border color of root + * + * @designToken splitter.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken splitter.color + */ + color?: string; + /** + * Transition duration of root + * + * @designToken splitter.transition.duration + */ + transitionDuration?: string; + }; + /** + * Used to pass tokens of the gutter section + */ + gutter?: { + /** + * Background of gutter + * + * @designToken splitter.gutter.background + */ + background?: string; + }; + /** + * Used to pass tokens of the handle section + */ + handle?: { + /** + * Size of handle + * + * @designToken splitter.handle.size + */ + size?: string; + /** + * Background of handle + * + * @designToken splitter.handle.background + */ + background?: string; + /** + * Border radius of handle + * + * @designToken splitter.handle.border.radius + */ + borderRadius?: string; + /** + * Focus ring of handle + */ + focusRing?: { + /** + * Focus ring width of handle + * + * @designToken splitter.handle.focus.ring.width + */ + width?: string; + /** + * Focus ring style of handle + * + * @designToken splitter.handle.focus.ring.style + */ + style?: string; + /** + * Focus ring color of handle + * + * @designToken splitter.handle.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of handle + * + * @designToken splitter.handle.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of handle + * + * @designToken splitter.handle.focus.ring.shadow + */ + shadow?: string; + }; }; - } } diff --git a/packages/themes/types/stepper/index.d.ts b/packages/themes/types/stepper/index.d.ts index e96f82ef2..0bf63908a 100644 --- a/packages/themes/types/stepper/index.d.ts +++ b/packages/themes/types/stepper/index.d.ts @@ -1,4 +1,3 @@ - /** * * Stepper Design Tokens @@ -12,269 +11,258 @@ import { ColorSchemeDesignToken } from '..'; export interface StepperDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken stepper.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken stepper.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the separator section - */ + * Used to pass tokens of the separator section + */ separator?: { - + /** + * Background of separator + * + * @designToken stepper.separator.background + */ + background?: string; + /** + * Active background of separator + * + * @designToken stepper.separator.active.background + */ + activeBackground?: string; + /** + * Margin of separator + * + * @designToken stepper.separator.margin + */ + margin?: string; + /** + * Size of separator + * + * @designToken stepper.separator.size + */ + size?: string; + }; /** - * Background of separator - * - * @designToken stepper.separator.background - */ - background?: string; - /** - * Active background of separator - * - * @designToken stepper.separator.active.background - */ - activeBackground?: string; - /** - * Margin of separator - * - * @designToken stepper.separator.margin - */ - margin?: string; - /** - * Size of separator - * - * @designToken stepper.separator.size - */ - size?: string; - } - /** - * Used to pass tokens of the step section - */ + * Used to pass tokens of the step section + */ step?: { - + /** + * Padding of step + * + * @designToken stepper.step.padding + */ + padding?: string; + /** + * Gap of step + * + * @designToken stepper.step.gap + */ + gap?: string; + }; /** - * Padding of step - * - * @designToken stepper.step.padding - */ - padding?: string; - /** - * Gap of step - * - * @designToken stepper.step.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the step header section - */ + * Used to pass tokens of the step header section + */ stepHeader?: { - - /** - * Padding of step header - * - * @designToken stepper.step.header.padding - */ - padding?: string; - /** - * Border radius of step header - * - * @designToken stepper.step.header.border.radius - */ - borderRadius?: string; - /** - * Focus ring of step header - */ - focusRing?: { - - /** - * Focus ring width of step header - * - * @designToken stepper.step.header.focus.ring.width - */ - width?: string; - /** - * Focus ring style of step header - * - * @designToken stepper.step.header.focus.ring.style - */ - style?: string; - /** - * Focus ring color of step header - * - * @designToken stepper.step.header.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of step header - * - * @designToken stepper.step.header.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of step header - * - * @designToken stepper.step.header.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of step header + * + * @designToken stepper.step.header.padding + */ + padding?: string; + /** + * Border radius of step header + * + * @designToken stepper.step.header.border.radius + */ + borderRadius?: string; + /** + * Focus ring of step header + */ + focusRing?: { + /** + * Focus ring width of step header + * + * @designToken stepper.step.header.focus.ring.width + */ + width?: string; + /** + * Focus ring style of step header + * + * @designToken stepper.step.header.focus.ring.style + */ + style?: string; + /** + * Focus ring color of step header + * + * @designToken stepper.step.header.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of step header + * + * @designToken stepper.step.header.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of step header + * + * @designToken stepper.step.header.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Gap of step header + * + * @designToken stepper.step.header.gap + */ + gap?: string; }; /** - * Gap of step header - * - * @designToken stepper.step.header.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the step title section - */ + * Used to pass tokens of the step title section + */ stepTitle?: { - - /** - * Color of step title - * - * @designToken stepper.step.title.color - */ - color?: string; - /** - * Active color of step title - * - * @designToken stepper.step.title.active.color - */ - activeColor?: string; - /** - * Font weight of step title - * - * @designToken stepper.step.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the step number section - */ - stepNumber?: { - - /** - * Background of step number - * - * @designToken stepper.step.number.background - */ - background?: string; - /** - * Active background of step number - * - * @designToken stepper.step.number.active.background - */ - activeBackground?: string; - /** - * Border color of step number - * - * @designToken stepper.step.number.border.color - */ - borderColor?: string; - /** - * Active border color of step number - * - * @designToken stepper.step.number.active.border.color - */ - activeBorderColor?: string; - /** - * Color of step number - * - * @designToken stepper.step.number.color - */ - color?: string; - /** - * Active color of step number - * - * @designToken stepper.step.number.active.color - */ - activeColor?: string; - /** - * Size of step number - * - * @designToken stepper.step.number.size - */ - size?: string; - /** - * Font size of step number - * - * @designToken stepper.step.number.font.size - */ - fontSize?: string; - /** - * Font weight of step number - * - * @designToken stepper.step.number.font.weight - */ - fontWeight?: string; - /** - * Border radius of step number - * - * @designToken stepper.step.number.border.radius - */ - borderRadius?: string; - /** - * Shadow of step number - * - * @designToken stepper.step.number.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the steppanels section - */ - steppanels?: { - - /** - * Padding of steppanels - * - * @designToken stepper.steppanels.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the steppanel section - */ - steppanel?: { - - /** - * Background of steppanel - * - * @designToken stepper.steppanel.background - */ - background?: string; - /** - * Color of steppanel - * - * @designToken stepper.steppanel.color - */ - color?: string; - /** - * Padding of steppanel - * - * @designToken stepper.steppanel.padding - */ - padding?: string; - /** - * Last of steppanel - */ - last?: { - - /** - * Last padding of steppanel - * - * @designToken stepper.steppanel.last.padding - */ - padding?: string; + /** + * Color of step title + * + * @designToken stepper.step.title.color + */ + color?: string; + /** + * Active color of step title + * + * @designToken stepper.step.title.active.color + */ + activeColor?: string; + /** + * Font weight of step title + * + * @designToken stepper.step.title.font.weight + */ + fontWeight?: string; + }; + /** + * Used to pass tokens of the step number section + */ + stepNumber?: { + /** + * Background of step number + * + * @designToken stepper.step.number.background + */ + background?: string; + /** + * Active background of step number + * + * @designToken stepper.step.number.active.background + */ + activeBackground?: string; + /** + * Border color of step number + * + * @designToken stepper.step.number.border.color + */ + borderColor?: string; + /** + * Active border color of step number + * + * @designToken stepper.step.number.active.border.color + */ + activeBorderColor?: string; + /** + * Color of step number + * + * @designToken stepper.step.number.color + */ + color?: string; + /** + * Active color of step number + * + * @designToken stepper.step.number.active.color + */ + activeColor?: string; + /** + * Size of step number + * + * @designToken stepper.step.number.size + */ + size?: string; + /** + * Font size of step number + * + * @designToken stepper.step.number.font.size + */ + fontSize?: string; + /** + * Font weight of step number + * + * @designToken stepper.step.number.font.weight + */ + fontWeight?: string; + /** + * Border radius of step number + * + * @designToken stepper.step.number.border.radius + */ + borderRadius?: string; + /** + * Shadow of step number + * + * @designToken stepper.step.number.shadow + */ + shadow?: string; + }; + /** + * Used to pass tokens of the steppanels section + */ + steppanels?: { + /** + * Padding of steppanels + * + * @designToken stepper.steppanels.padding + */ + padding?: string; + }; + /** + * Used to pass tokens of the steppanel section + */ + steppanel?: { + /** + * Background of steppanel + * + * @designToken stepper.steppanel.background + */ + background?: string; + /** + * Color of steppanel + * + * @designToken stepper.steppanel.color + */ + color?: string; + /** + * Padding of steppanel + * + * @designToken stepper.steppanel.padding + */ + padding?: string; + /** + * Last of steppanel + */ + last?: { + /** + * Last padding of steppanel + * + * @designToken stepper.steppanel.last.padding + */ + padding?: string; + }; }; - } } diff --git a/packages/themes/types/steps/index.d.ts b/packages/themes/types/steps/index.d.ts index 77a0ef9c0..027208304 100644 --- a/packages/themes/types/steps/index.d.ts +++ b/packages/themes/types/steps/index.d.ts @@ -1,4 +1,3 @@ - /** * * Steps Design Tokens @@ -12,179 +11,172 @@ import { ColorSchemeDesignToken } from '..'; export interface StepsDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Transition duration of root - * - * @designToken steps.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the separator section - */ - separator?: { - - /** - * Background of separator - * - * @designToken steps.separator.background - */ - background?: string; - } - /** - * Used to pass tokens of the item link section - */ - itemLink?: { - - /** - * Border radius of item link - * - * @designToken steps.item.link.border.radius - */ - borderRadius?: string; - /** - * Focus ring of item link - */ - focusRing?: { - - /** - * Focus ring width of item link - * - * @designToken steps.item.link.focus.ring.width - */ - width?: string; - /** - * Focus ring style of item link - * - * @designToken steps.item.link.focus.ring.style - */ - style?: string; - /** - * Focus ring color of item link - * - * @designToken steps.item.link.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of item link - * - * @designToken steps.item.link.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of item link - * - * @designToken steps.item.link.focus.ring.shadow - */ - shadow?: string; + /** + * Transition duration of root + * + * @designToken steps.transition.duration + */ + transitionDuration?: string; }; /** - * Gap of item link - * - * @designToken steps.item.link.gap - */ - gap?: string; - } + * Used to pass tokens of the separator section + */ + separator?: { + /** + * Background of separator + * + * @designToken steps.separator.background + */ + background?: string; + }; /** - * Used to pass tokens of the item label section - */ + * Used to pass tokens of the item link section + */ + itemLink?: { + /** + * Border radius of item link + * + * @designToken steps.item.link.border.radius + */ + borderRadius?: string; + /** + * Focus ring of item link + */ + focusRing?: { + /** + * Focus ring width of item link + * + * @designToken steps.item.link.focus.ring.width + */ + width?: string; + /** + * Focus ring style of item link + * + * @designToken steps.item.link.focus.ring.style + */ + style?: string; + /** + * Focus ring color of item link + * + * @designToken steps.item.link.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of item link + * + * @designToken steps.item.link.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of item link + * + * @designToken steps.item.link.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Gap of item link + * + * @designToken steps.item.link.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the item label section + */ itemLabel?: { - + /** + * Color of item label + * + * @designToken steps.item.label.color + */ + color?: string; + /** + * Active color of item label + * + * @designToken steps.item.label.active.color + */ + activeColor?: string; + /** + * Font weight of item label + * + * @designToken steps.item.label.font.weight + */ + fontWeight?: string; + }; /** - * Color of item label - * - * @designToken steps.item.label.color - */ - color?: string; - /** - * Active color of item label - * - * @designToken steps.item.label.active.color - */ - activeColor?: string; - /** - * Font weight of item label - * - * @designToken steps.item.label.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the item number section - */ + * Used to pass tokens of the item number section + */ itemNumber?: { - - /** - * Background of item number - * - * @designToken steps.item.number.background - */ - background?: string; - /** - * Active background of item number - * - * @designToken steps.item.number.active.background - */ - activeBackground?: string; - /** - * Border color of item number - * - * @designToken steps.item.number.border.color - */ - borderColor?: string; - /** - * Active border color of item number - * - * @designToken steps.item.number.active.border.color - */ - activeBorderColor?: string; - /** - * Color of item number - * - * @designToken steps.item.number.color - */ - color?: string; - /** - * Active color of item number - * - * @designToken steps.item.number.active.color - */ - activeColor?: string; - /** - * Size of item number - * - * @designToken steps.item.number.size - */ - size?: string; - /** - * Font size of item number - * - * @designToken steps.item.number.font.size - */ - fontSize?: string; - /** - * Font weight of item number - * - * @designToken steps.item.number.font.weight - */ - fontWeight?: string; - /** - * Border radius of item number - * - * @designToken steps.item.number.border.radius - */ - borderRadius?: string; - /** - * Shadow of item number - * - * @designToken steps.item.number.shadow - */ - shadow?: string; - } + /** + * Background of item number + * + * @designToken steps.item.number.background + */ + background?: string; + /** + * Active background of item number + * + * @designToken steps.item.number.active.background + */ + activeBackground?: string; + /** + * Border color of item number + * + * @designToken steps.item.number.border.color + */ + borderColor?: string; + /** + * Active border color of item number + * + * @designToken steps.item.number.active.border.color + */ + activeBorderColor?: string; + /** + * Color of item number + * + * @designToken steps.item.number.color + */ + color?: string; + /** + * Active color of item number + * + * @designToken steps.item.number.active.color + */ + activeColor?: string; + /** + * Size of item number + * + * @designToken steps.item.number.size + */ + size?: string; + /** + * Font size of item number + * + * @designToken steps.item.number.font.size + */ + fontSize?: string; + /** + * Font weight of item number + * + * @designToken steps.item.number.font.weight + */ + fontWeight?: string; + /** + * Border radius of item number + * + * @designToken steps.item.number.border.radius + */ + borderRadius?: string; + /** + * Shadow of item number + * + * @designToken steps.item.number.shadow + */ + shadow?: string; + }; } diff --git a/packages/themes/types/tabmenu/index.d.ts b/packages/themes/types/tabmenu/index.d.ts index d8e277823..58fc25cea 100644 --- a/packages/themes/types/tabmenu/index.d.ts +++ b/packages/themes/types/tabmenu/index.d.ts @@ -1,4 +1,3 @@ - /** * * Tabmenu Design Tokens @@ -12,215 +11,208 @@ import { ColorSchemeDesignToken } from '..'; export interface TabmenuDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Transition duration of root - * - * @designToken tabmenu.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the tablist section - */ - tablist?: { - - /** - * Border width of tablist - * - * @designToken tabmenu.tablist.border.width - */ - borderWidth?: string; - /** - * Background of tablist - * - * @designToken tabmenu.tablist.background - */ - background?: string; - /** - * Border color of tablist - * - * @designToken tabmenu.tablist.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the item section - */ - item?: { - - /** - * Background of item - * - * @designToken tabmenu.item.background - */ - background?: string; - /** - * Hover background of item - * - * @designToken tabmenu.item.hover.background - */ - hoverBackground?: string; - /** - * Active background of item - * - * @designToken tabmenu.item.active.background - */ - activeBackground?: string; - /** - * Border width of item - * - * @designToken tabmenu.item.border.width - */ - borderWidth?: string; - /** - * Border color of item - * - * @designToken tabmenu.item.border.color - */ - borderColor?: string; - /** - * Hover border color of item - * - * @designToken tabmenu.item.hover.border.color - */ - hoverBorderColor?: string; - /** - * Active border color of item - * - * @designToken tabmenu.item.active.border.color - */ - activeBorderColor?: string; - /** - * Color of item - * - * @designToken tabmenu.item.color - */ - color?: string; - /** - * Hover color of item - * - * @designToken tabmenu.item.hover.color - */ - hoverColor?: string; - /** - * Active color of item - * - * @designToken tabmenu.item.active.color - */ - activeColor?: string; - /** - * Padding of item - * - * @designToken tabmenu.item.padding - */ - padding?: string; - /** - * Font weight of item - * - * @designToken tabmenu.item.font.weight - */ - fontWeight?: string; - /** - * Margin of item - * - * @designToken tabmenu.item.margin - */ - margin?: string; - /** - * Gap of item - * - * @designToken tabmenu.item.gap - */ - gap?: string; - /** - * Focus ring of item - */ - focusRing?: { - - /** - * Focus ring width of item - * - * @designToken tabmenu.item.focus.ring.width - */ - width?: string; - /** - * Focus ring style of item - * - * @designToken tabmenu.item.focus.ring.style - */ - style?: string; - /** - * Focus ring color of item - * - * @designToken tabmenu.item.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of item - * - * @designToken tabmenu.item.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of item - * - * @designToken tabmenu.item.focus.ring.shadow - */ - shadow?: string; + /** + * Transition duration of root + * + * @designToken tabmenu.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the item icon section - */ + * Used to pass tokens of the tablist section + */ + tablist?: { + /** + * Border width of tablist + * + * @designToken tabmenu.tablist.border.width + */ + borderWidth?: string; + /** + * Background of tablist + * + * @designToken tabmenu.tablist.background + */ + background?: string; + /** + * Border color of tablist + * + * @designToken tabmenu.tablist.border.color + */ + borderColor?: string; + }; + /** + * Used to pass tokens of the item section + */ + item?: { + /** + * Background of item + * + * @designToken tabmenu.item.background + */ + background?: string; + /** + * Hover background of item + * + * @designToken tabmenu.item.hover.background + */ + hoverBackground?: string; + /** + * Active background of item + * + * @designToken tabmenu.item.active.background + */ + activeBackground?: string; + /** + * Border width of item + * + * @designToken tabmenu.item.border.width + */ + borderWidth?: string; + /** + * Border color of item + * + * @designToken tabmenu.item.border.color + */ + borderColor?: string; + /** + * Hover border color of item + * + * @designToken tabmenu.item.hover.border.color + */ + hoverBorderColor?: string; + /** + * Active border color of item + * + * @designToken tabmenu.item.active.border.color + */ + activeBorderColor?: string; + /** + * Color of item + * + * @designToken tabmenu.item.color + */ + color?: string; + /** + * Hover color of item + * + * @designToken tabmenu.item.hover.color + */ + hoverColor?: string; + /** + * Active color of item + * + * @designToken tabmenu.item.active.color + */ + activeColor?: string; + /** + * Padding of item + * + * @designToken tabmenu.item.padding + */ + padding?: string; + /** + * Font weight of item + * + * @designToken tabmenu.item.font.weight + */ + fontWeight?: string; + /** + * Margin of item + * + * @designToken tabmenu.item.margin + */ + margin?: string; + /** + * Gap of item + * + * @designToken tabmenu.item.gap + */ + gap?: string; + /** + * Focus ring of item + */ + focusRing?: { + /** + * Focus ring width of item + * + * @designToken tabmenu.item.focus.ring.width + */ + width?: string; + /** + * Focus ring style of item + * + * @designToken tabmenu.item.focus.ring.style + */ + style?: string; + /** + * Focus ring color of item + * + * @designToken tabmenu.item.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of item + * + * @designToken tabmenu.item.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of item + * + * @designToken tabmenu.item.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the item icon section + */ itemIcon?: { - + /** + * Color of item icon + * + * @designToken tabmenu.item.icon.color + */ + color?: string; + /** + * Hover color of item icon + * + * @designToken tabmenu.item.icon.hover.color + */ + hoverColor?: string; + /** + * Active color of item icon + * + * @designToken tabmenu.item.icon.active.color + */ + activeColor?: string; + }; /** - * Color of item icon - * - * @designToken tabmenu.item.icon.color - */ - color?: string; - /** - * Hover color of item icon - * - * @designToken tabmenu.item.icon.hover.color - */ - hoverColor?: string; - /** - * Active color of item icon - * - * @designToken tabmenu.item.icon.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the active bar section - */ + * Used to pass tokens of the active bar section + */ activeBar?: { - - /** - * Height of active bar - * - * @designToken tabmenu.active.bar.height - */ - height?: string; - /** - * Bottom of active bar - * - * @designToken tabmenu.active.bar.bottom - */ - bottom?: string; - /** - * Background of active bar - * - * @designToken tabmenu.active.bar.background - */ - background?: string; - } + /** + * Height of active bar + * + * @designToken tabmenu.active.bar.height + */ + height?: string; + /** + * Bottom of active bar + * + * @designToken tabmenu.active.bar.bottom + */ + bottom?: string; + /** + * Background of active bar + * + * @designToken tabmenu.active.bar.background + */ + background?: string; + }; } diff --git a/packages/themes/types/tabs/index.d.ts b/packages/themes/types/tabs/index.d.ts index fce0729d4..608d5dd24 100644 --- a/packages/themes/types/tabs/index.d.ts +++ b/packages/themes/types/tabs/index.d.ts @@ -1,4 +1,3 @@ - /** * * Tabs Design Tokens @@ -12,323 +11,313 @@ import { ColorSchemeDesignToken } from '..'; export interface TabsDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken tabs.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken tabs.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the tablist section - */ + * Used to pass tokens of the tablist section + */ tablist?: { - + /** + * Border width of tablist + * + * @designToken tabs.tablist.border.width + */ + borderWidth?: string; + /** + * Background of tablist + * + * @designToken tabs.tablist.background + */ + background?: string; + /** + * Border color of tablist + * + * @designToken tabs.tablist.border.color + */ + borderColor?: string; + }; /** - * Border width of tablist - * - * @designToken tabs.tablist.border.width - */ - borderWidth?: string; - /** - * Background of tablist - * - * @designToken tabs.tablist.background - */ - background?: string; - /** - * Border color of tablist - * - * @designToken tabs.tablist.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the tab section - */ + * Used to pass tokens of the tab section + */ tab?: { - - /** - * Background of tab - * - * @designToken tabs.tab.background - */ - background?: string; - /** - * Hover background of tab - * - * @designToken tabs.tab.hover.background - */ - hoverBackground?: string; - /** - * Active background of tab - * - * @designToken tabs.tab.active.background - */ - activeBackground?: string; - /** - * Border width of tab - * - * @designToken tabs.tab.border.width - */ - borderWidth?: string; - /** - * Border color of tab - * - * @designToken tabs.tab.border.color - */ - borderColor?: string; - /** - * Hover border color of tab - * - * @designToken tabs.tab.hover.border.color - */ - hoverBorderColor?: string; - /** - * Active border color of tab - * - * @designToken tabs.tab.active.border.color - */ - activeBorderColor?: string; - /** - * Color of tab - * - * @designToken tabs.tab.color - */ - color?: string; - /** - * Hover color of tab - * - * @designToken tabs.tab.hover.color - */ - hoverColor?: string; - /** - * Active color of tab - * - * @designToken tabs.tab.active.color - */ - activeColor?: string; - /** - * Padding of tab - * - * @designToken tabs.tab.padding - */ - padding?: string; - /** - * Font weight of tab - * - * @designToken tabs.tab.font.weight - */ - fontWeight?: string; - /** - * Margin of tab - * - * @designToken tabs.tab.margin - */ - margin?: string; - /** - * Gap of tab - * - * @designToken tabs.tab.gap - */ - gap?: string; - /** - * Focus ring of tab - */ - focusRing?: { - - /** - * Focus ring width of tab - * - * @designToken tabs.tab.focus.ring.width - */ - width?: string; - /** - * Focus ring style of tab - * - * @designToken tabs.tab.focus.ring.style - */ - style?: string; - /** - * Focus ring color of tab - * - * @designToken tabs.tab.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of tab - * - * @designToken tabs.tab.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of tab - * - * @designToken tabs.tab.focus.ring.shadow - */ - shadow?: string; + /** + * Background of tab + * + * @designToken tabs.tab.background + */ + background?: string; + /** + * Hover background of tab + * + * @designToken tabs.tab.hover.background + */ + hoverBackground?: string; + /** + * Active background of tab + * + * @designToken tabs.tab.active.background + */ + activeBackground?: string; + /** + * Border width of tab + * + * @designToken tabs.tab.border.width + */ + borderWidth?: string; + /** + * Border color of tab + * + * @designToken tabs.tab.border.color + */ + borderColor?: string; + /** + * Hover border color of tab + * + * @designToken tabs.tab.hover.border.color + */ + hoverBorderColor?: string; + /** + * Active border color of tab + * + * @designToken tabs.tab.active.border.color + */ + activeBorderColor?: string; + /** + * Color of tab + * + * @designToken tabs.tab.color + */ + color?: string; + /** + * Hover color of tab + * + * @designToken tabs.tab.hover.color + */ + hoverColor?: string; + /** + * Active color of tab + * + * @designToken tabs.tab.active.color + */ + activeColor?: string; + /** + * Padding of tab + * + * @designToken tabs.tab.padding + */ + padding?: string; + /** + * Font weight of tab + * + * @designToken tabs.tab.font.weight + */ + fontWeight?: string; + /** + * Margin of tab + * + * @designToken tabs.tab.margin + */ + margin?: string; + /** + * Gap of tab + * + * @designToken tabs.tab.gap + */ + gap?: string; + /** + * Focus ring of tab + */ + focusRing?: { + /** + * Focus ring width of tab + * + * @designToken tabs.tab.focus.ring.width + */ + width?: string; + /** + * Focus ring style of tab + * + * @designToken tabs.tab.focus.ring.style + */ + style?: string; + /** + * Focus ring color of tab + * + * @designToken tabs.tab.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of tab + * + * @designToken tabs.tab.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of tab + * + * @designToken tabs.tab.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the tabpanel section - */ + * Used to pass tokens of the tabpanel section + */ tabpanel?: { - - /** - * Background of tabpanel - * - * @designToken tabs.tabpanel.background - */ - background?: string; - /** - * Color of tabpanel - * - * @designToken tabs.tabpanel.color - */ - color?: string; - /** - * Padding of tabpanel - * - * @designToken tabs.tabpanel.padding - */ - padding?: string; - /** - * Focus ring of tabpanel - */ - focusRing?: { - - /** - * Focus ring width of tabpanel - * - * @designToken tabs.tabpanel.focus.ring.width - */ - width?: string; - /** - * Focus ring style of tabpanel - * - * @designToken tabs.tabpanel.focus.ring.style - */ - style?: string; - /** - * Focus ring color of tabpanel - * - * @designToken tabs.tabpanel.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of tabpanel - * - * @designToken tabs.tabpanel.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of tabpanel - * - * @designToken tabs.tabpanel.focus.ring.shadow - */ - shadow?: string; + /** + * Background of tabpanel + * + * @designToken tabs.tabpanel.background + */ + background?: string; + /** + * Color of tabpanel + * + * @designToken tabs.tabpanel.color + */ + color?: string; + /** + * Padding of tabpanel + * + * @designToken tabs.tabpanel.padding + */ + padding?: string; + /** + * Focus ring of tabpanel + */ + focusRing?: { + /** + * Focus ring width of tabpanel + * + * @designToken tabs.tabpanel.focus.ring.width + */ + width?: string; + /** + * Focus ring style of tabpanel + * + * @designToken tabs.tabpanel.focus.ring.style + */ + style?: string; + /** + * Focus ring color of tabpanel + * + * @designToken tabs.tabpanel.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of tabpanel + * + * @designToken tabs.tabpanel.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of tabpanel + * + * @designToken tabs.tabpanel.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the nav button section - */ + * Used to pass tokens of the nav button section + */ navButton?: { - - /** - * Background of nav button - * - * @designToken tabs.nav.button.background - */ - background?: string; - /** - * Color of nav button - * - * @designToken tabs.nav.button.color - */ - color?: string; - /** - * Hover color of nav button - * - * @designToken tabs.nav.button.hover.color - */ - hoverColor?: string; - /** - * Width of nav button - * - * @designToken tabs.nav.button.width - */ - width?: string; - /** - * Focus ring of nav button - */ - focusRing?: { - - /** - * Focus ring width of nav button - * - * @designToken tabs.nav.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of nav button - * - * @designToken tabs.nav.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of nav button - * - * @designToken tabs.nav.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of nav button - * - * @designToken tabs.nav.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of nav button - * - * @designToken tabs.nav.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of nav button + * + * @designToken tabs.nav.button.background + */ + background?: string; + /** + * Color of nav button + * + * @designToken tabs.nav.button.color + */ + color?: string; + /** + * Hover color of nav button + * + * @designToken tabs.nav.button.hover.color + */ + hoverColor?: string; + /** + * Width of nav button + * + * @designToken tabs.nav.button.width + */ + width?: string; + /** + * Focus ring of nav button + */ + focusRing?: { + /** + * Focus ring width of nav button + * + * @designToken tabs.nav.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of nav button + * + * @designToken tabs.nav.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of nav button + * + * @designToken tabs.nav.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of nav button + * + * @designToken tabs.nav.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of nav button + * + * @designToken tabs.nav.button.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Box shadow of nav button + * + * @designToken tabs.nav.button.box.shadow + */ + boxShadow?: string; }; /** - * Box shadow of nav button - * - * @designToken tabs.nav.button.box.shadow - */ - boxShadow?: string; - } - /** - * Used to pass tokens of the active bar section - */ + * Used to pass tokens of the active bar section + */ activeBar?: { - - /** - * Height of active bar - * - * @designToken tabs.active.bar.height - */ - height?: string; - /** - * Bottom of active bar - * - * @designToken tabs.active.bar.bottom - */ - bottom?: string; - /** - * Background of active bar - * - * @designToken tabs.active.bar.background - */ - background?: string; - } + /** + * Height of active bar + * + * @designToken tabs.active.bar.height + */ + height?: string; + /** + * Bottom of active bar + * + * @designToken tabs.active.bar.bottom + */ + bottom?: string; + /** + * Background of active bar + * + * @designToken tabs.active.bar.background + */ + background?: string; + }; } diff --git a/packages/themes/types/tabview/index.d.ts b/packages/themes/types/tabview/index.d.ts index 6ba0cb88c..d79342b42 100644 --- a/packages/themes/types/tabview/index.d.ts +++ b/packages/themes/types/tabview/index.d.ts @@ -1,4 +1,3 @@ - /** * * TabView Design Tokens @@ -12,119 +11,113 @@ import { ColorSchemeDesignToken } from '..'; export interface TabViewDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken tabview.transition.duration + */ + transitionDuration?: string; + }; /** - * Transition duration of root - * - * @designToken tabview.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the tab list section - */ + * Used to pass tokens of the tab list section + */ tabList?: { - + /** + * Background of tab list + * + * @designToken tabview.tab.list.background + */ + background?: string; + /** + * Border color of tab list + * + * @designToken tabview.tab.list.border.color + */ + borderColor?: string; + }; /** - * Background of tab list - * - * @designToken tabview.tab.list.background - */ - background?: string; - /** - * Border color of tab list - * - * @designToken tabview.tab.list.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the tab section - */ + * Used to pass tokens of the tab section + */ tab?: { - + /** + * Border color of tab + * + * @designToken tabview.tab.border.color + */ + borderColor?: string; + /** + * Active border color of tab + * + * @designToken tabview.tab.active.border.color + */ + activeBorderColor?: string; + /** + * Color of tab + * + * @designToken tabview.tab.color + */ + color?: string; + /** + * Hover color of tab + * + * @designToken tabview.tab.hover.color + */ + hoverColor?: string; + /** + * Active color of tab + * + * @designToken tabview.tab.active.color + */ + activeColor?: string; + }; /** - * Border color of tab - * - * @designToken tabview.tab.border.color - */ - borderColor?: string; - /** - * Active border color of tab - * - * @designToken tabview.tab.active.border.color - */ - activeBorderColor?: string; - /** - * Color of tab - * - * @designToken tabview.tab.color - */ - color?: string; - /** - * Hover color of tab - * - * @designToken tabview.tab.hover.color - */ - hoverColor?: string; - /** - * Active color of tab - * - * @designToken tabview.tab.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the tab panel section - */ + * Used to pass tokens of the tab panel section + */ tabPanel?: { - + /** + * Background of tab panel + * + * @designToken tabview.tab.panel.background + */ + background?: string; + /** + * Color of tab panel + * + * @designToken tabview.tab.panel.color + */ + color?: string; + }; /** - * Background of tab panel - * - * @designToken tabview.tab.panel.background - */ - background?: string; - /** - * Color of tab panel - * - * @designToken tabview.tab.panel.color - */ - color?: string; - } - /** - * Used to pass tokens of the nav button section - */ + * Used to pass tokens of the nav button section + */ navButton?: { - - /** - * Background of nav button - * - * @designToken tabview.nav.button.background - */ - background?: string; - /** - * Color of nav button - * - * @designToken tabview.nav.button.color - */ - color?: string; - /** - * Hover color of nav button - * - * @designToken tabview.nav.button.hover.color - */ - hoverColor?: string; - /** - * Box shadow of nav button - * - * @designToken tabview.nav.button.box.shadow - */ - boxShadow?: string; - } + /** + * Background of nav button + * + * @designToken tabview.nav.button.background + */ + background?: string; + /** + * Color of nav button + * + * @designToken tabview.nav.button.color + */ + color?: string; + /** + * Hover color of nav button + * + * @designToken tabview.nav.button.hover.color + */ + hoverColor?: string; + /** + * Box shadow of nav button + * + * @designToken tabview.nav.button.box.shadow + */ + boxShadow?: string; + }; } diff --git a/packages/themes/types/tag/index.d.ts b/packages/themes/types/tag/index.d.ts index d4bf891ba..154af3b75 100644 --- a/packages/themes/types/tag/index.d.ts +++ b/packages/themes/types/tag/index.d.ts @@ -1,4 +1,3 @@ - /** * * Tag Design Tokens @@ -12,185 +11,175 @@ import { ColorSchemeDesignToken } from '..'; export interface TagDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Font size of root + * + * @designToken tag.font.size + */ + fontSize?: string; + /** + * Font weight of root + * + * @designToken tag.font.weight + */ + fontWeight?: string; + /** + * Padding of root + * + * @designToken tag.padding + */ + padding?: string; + /** + * Gap of root + * + * @designToken tag.gap + */ + gap?: string; + /** + * Border radius of root + * + * @designToken tag.border.radius + */ + borderRadius?: string; + /** + * Rounded border radius of root + * + * @designToken tag.rounded.border.radius + */ + roundedBorderRadius?: string; + }; /** - * Font size of root - * - * @designToken tag.font.size - */ - fontSize?: string; - /** - * Font weight of root - * - * @designToken tag.font.weight - */ - fontWeight?: string; - /** - * Padding of root - * - * @designToken tag.padding - */ - padding?: string; - /** - * Gap of root - * - * @designToken tag.gap - */ - gap?: string; - /** - * Border radius of root - * - * @designToken tag.border.radius - */ - borderRadius?: string; - /** - * Rounded border radius of root - * - * @designToken tag.rounded.border.radius - */ - roundedBorderRadius?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Size of icon + * + * @designToken tag.icon.size + */ + size?: string; + }; /** - * Size of icon - * - * @designToken tag.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the primary section - */ + * Used to pass tokens of the primary section + */ primary?: { - + /** + * Background of primary + * + * @designToken tag.primary.background + */ + background?: string; + /** + * Color of primary + * + * @designToken tag.primary.color + */ + color?: string; + }; /** - * Background of primary - * - * @designToken tag.primary.background - */ - background?: string; - /** - * Color of primary - * - * @designToken tag.primary.color - */ - color?: string; - } - /** - * Used to pass tokens of the secondary section - */ + * Used to pass tokens of the secondary section + */ secondary?: { - + /** + * Background of secondary + * + * @designToken tag.secondary.background + */ + background?: string; + /** + * Color of secondary + * + * @designToken tag.secondary.color + */ + color?: string; + }; /** - * Background of secondary - * - * @designToken tag.secondary.background - */ - background?: string; - /** - * Color of secondary - * - * @designToken tag.secondary.color - */ - color?: string; - } - /** - * Used to pass tokens of the success section - */ + * Used to pass tokens of the success section + */ success?: { - + /** + * Background of success + * + * @designToken tag.success.background + */ + background?: string; + /** + * Color of success + * + * @designToken tag.success.color + */ + color?: string; + }; /** - * Background of success - * - * @designToken tag.success.background - */ - background?: string; - /** - * Color of success - * - * @designToken tag.success.color - */ - color?: string; - } - /** - * Used to pass tokens of the info section - */ + * Used to pass tokens of the info section + */ info?: { - + /** + * Background of info + * + * @designToken tag.info.background + */ + background?: string; + /** + * Color of info + * + * @designToken tag.info.color + */ + color?: string; + }; /** - * Background of info - * - * @designToken tag.info.background - */ - background?: string; - /** - * Color of info - * - * @designToken tag.info.color - */ - color?: string; - } - /** - * Used to pass tokens of the warn section - */ + * Used to pass tokens of the warn section + */ warn?: { - + /** + * Background of warn + * + * @designToken tag.warn.background + */ + background?: string; + /** + * Color of warn + * + * @designToken tag.warn.color + */ + color?: string; + }; /** - * Background of warn - * - * @designToken tag.warn.background - */ - background?: string; - /** - * Color of warn - * - * @designToken tag.warn.color - */ - color?: string; - } - /** - * Used to pass tokens of the danger section - */ + * Used to pass tokens of the danger section + */ danger?: { - + /** + * Background of danger + * + * @designToken tag.danger.background + */ + background?: string; + /** + * Color of danger + * + * @designToken tag.danger.color + */ + color?: string; + }; /** - * Background of danger - * - * @designToken tag.danger.background - */ - background?: string; - /** - * Color of danger - * - * @designToken tag.danger.color - */ - color?: string; - } - /** - * Used to pass tokens of the contrast section - */ + * Used to pass tokens of the contrast section + */ contrast?: { - - /** - * Background of contrast - * - * @designToken tag.contrast.background - */ - background?: string; - /** - * Color of contrast - * - * @designToken tag.contrast.color - */ - color?: string; - } + /** + * Background of contrast + * + * @designToken tag.contrast.background + */ + background?: string; + /** + * Color of contrast + * + * @designToken tag.contrast.color + */ + color?: string; + }; } diff --git a/packages/themes/types/terminal/index.d.ts b/packages/themes/types/terminal/index.d.ts index 8bc402be8..771e3d849 100644 --- a/packages/themes/types/terminal/index.d.ts +++ b/packages/themes/types/terminal/index.d.ts @@ -1,4 +1,3 @@ - /** * * Terminal Design Tokens @@ -12,71 +11,67 @@ import { ColorSchemeDesignToken } from '..'; export interface TerminalDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken terminal.background + */ + background?: string; + /** + * Border color of root + * + * @designToken terminal.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken terminal.color + */ + color?: string; + /** + * Height of root + * + * @designToken terminal.height + */ + height?: string; + /** + * Padding of root + * + * @designToken terminal.padding + */ + padding?: string; + /** + * Border radius of root + * + * @designToken terminal.border.radius + */ + borderRadius?: string; + }; /** - * Background of root - * - * @designToken terminal.background - */ - background?: string; - /** - * Border color of root - * - * @designToken terminal.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken terminal.color - */ - color?: string; - /** - * Height of root - * - * @designToken terminal.height - */ - height?: string; - /** - * Padding of root - * - * @designToken terminal.padding - */ - padding?: string; - /** - * Border radius of root - * - * @designToken terminal.border.radius - */ - borderRadius?: string; - } - /** - * Used to pass tokens of the prompt section - */ + * Used to pass tokens of the prompt section + */ prompt?: { - + /** + * Gap of prompt + * + * @designToken terminal.prompt.gap + */ + gap?: string; + }; /** - * Gap of prompt - * - * @designToken terminal.prompt.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the command response section - */ + * Used to pass tokens of the command response section + */ commandResponse?: { - - /** - * Margin of command response - * - * @designToken terminal.command.response.margin - */ - margin?: string; - } + /** + * Margin of command response + * + * @designToken terminal.command.response.margin + */ + margin?: string; + }; } diff --git a/packages/themes/types/textarea/index.d.ts b/packages/themes/types/textarea/index.d.ts index 0f39bac61..bd38b99ef 100644 --- a/packages/themes/types/textarea/index.d.ts +++ b/packages/themes/types/textarea/index.d.ts @@ -1,4 +1,3 @@ - /** * * Textarea Design Tokens @@ -12,143 +11,140 @@ import { ColorSchemeDesignToken } from '..'; export interface TextareaDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken textarea.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken textarea.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken textarea.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken textarea.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken textarea.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken textarea.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken textarea.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken textarea.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken textarea.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken textarea.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken textarea.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken textarea.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken textarea.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken textarea.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken textarea.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken textarea.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken textarea.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken textarea.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken textarea.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken textarea.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken textarea.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken textarea.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken textarea.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken textarea.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken textarea.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken textarea.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken textarea.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken textarea.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken textarea.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken textarea.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken textarea.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken textarea.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken textarea.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken textarea.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken textarea.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken textarea.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken textarea.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken textarea.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken textarea.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken textarea.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken textarea.transition.duration + */ + transitionDuration?: string; }; - /** - * Transition duration of root - * - * @designToken textarea.transition.duration - */ - transitionDuration?: string; - } } diff --git a/packages/themes/types/tieredmenu/index.d.ts b/packages/themes/types/tieredmenu/index.d.ts index d91557a18..d90f5f2c8 100644 --- a/packages/themes/types/tieredmenu/index.d.ts +++ b/packages/themes/types/tieredmenu/index.d.ts @@ -1,4 +1,3 @@ - /** * * TieredMenu Design Tokens @@ -12,215 +11,207 @@ import { ColorSchemeDesignToken } from '..'; export interface TieredMenuDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken tieredmenu.background - */ - background?: string; - /** - * Border color of root - * - * @designToken tieredmenu.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken tieredmenu.color - */ - color?: string; - /** - * Border radius of root - * - * @designToken tieredmenu.border.radius - */ - borderRadius?: string; - /** - * Shadow of root - * - * @designToken tieredmenu.shadow - */ - shadow?: string; - /** - * Transition duration of root - * - * @designToken tieredmenu.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the list section - */ - list?: { - - /** - * Padding of list - * - * @designToken tieredmenu.list.padding - */ - padding?: string; - /** - * Gap of list - * - * @designToken tieredmenu.list.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the item section - */ - item?: { - - /** - * Focus background of item - * - * @designToken tieredmenu.item.focus.background - */ - focusBackground?: string; - /** - * Active background of item - * - * @designToken tieredmenu.item.active.background - */ - activeBackground?: string; - /** - * Color of item - * - * @designToken tieredmenu.item.color - */ - color?: string; - /** - * Focus color of item - * - * @designToken tieredmenu.item.focus.color - */ - focusColor?: string; - /** - * Active color of item - * - * @designToken tieredmenu.item.active.color - */ - activeColor?: string; - /** - * Padding of item - * - * @designToken tieredmenu.item.padding - */ - padding?: string; - /** - * Border radius of item - * - * @designToken tieredmenu.item.border.radius - */ - borderRadius?: string; - /** - * Gap of item - * - * @designToken tieredmenu.item.gap - */ - gap?: string; - /** - * Icon of item - */ - icon?: { - - /** - * Icon color of item - * - * @designToken tieredmenu.item.icon.color - */ - color?: string; - /** - * Icon focus color of item - * - * @designToken tieredmenu.item.icon.focus.color - */ - focusColor?: string; - /** - * Icon active color of item - * - * @designToken tieredmenu.item.icon.active.color - */ - activeColor?: string; + /** + * Background of root + * + * @designToken tieredmenu.background + */ + background?: string; + /** + * Border color of root + * + * @designToken tieredmenu.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken tieredmenu.color + */ + color?: string; + /** + * Border radius of root + * + * @designToken tieredmenu.border.radius + */ + borderRadius?: string; + /** + * Shadow of root + * + * @designToken tieredmenu.shadow + */ + shadow?: string; + /** + * Transition duration of root + * + * @designToken tieredmenu.transition.duration + */ + transitionDuration?: string; }; - } /** - * Used to pass tokens of the submenu label section - */ + * Used to pass tokens of the list section + */ + list?: { + /** + * Padding of list + * + * @designToken tieredmenu.list.padding + */ + padding?: string; + /** + * Gap of list + * + * @designToken tieredmenu.list.gap + */ + gap?: string; + }; + /** + * Used to pass tokens of the item section + */ + item?: { + /** + * Focus background of item + * + * @designToken tieredmenu.item.focus.background + */ + focusBackground?: string; + /** + * Active background of item + * + * @designToken tieredmenu.item.active.background + */ + activeBackground?: string; + /** + * Color of item + * + * @designToken tieredmenu.item.color + */ + color?: string; + /** + * Focus color of item + * + * @designToken tieredmenu.item.focus.color + */ + focusColor?: string; + /** + * Active color of item + * + * @designToken tieredmenu.item.active.color + */ + activeColor?: string; + /** + * Padding of item + * + * @designToken tieredmenu.item.padding + */ + padding?: string; + /** + * Border radius of item + * + * @designToken tieredmenu.item.border.radius + */ + borderRadius?: string; + /** + * Gap of item + * + * @designToken tieredmenu.item.gap + */ + gap?: string; + /** + * Icon of item + */ + icon?: { + /** + * Icon color of item + * + * @designToken tieredmenu.item.icon.color + */ + color?: string; + /** + * Icon focus color of item + * + * @designToken tieredmenu.item.icon.focus.color + */ + focusColor?: string; + /** + * Icon active color of item + * + * @designToken tieredmenu.item.icon.active.color + */ + activeColor?: string; + }; + }; + /** + * Used to pass tokens of the submenu label section + */ submenuLabel?: { - + /** + * Padding of submenu label + * + * @designToken tieredmenu.submenu.label.padding + */ + padding?: string; + /** + * Font weight of submenu label + * + * @designToken tieredmenu.submenu.label.font.weight + */ + fontWeight?: string; + /** + * Background of submenu label + * + * @designToken tieredmenu.submenu.label.background + */ + background?: string; + /** + * Color of submenu label + * + * @designToken tieredmenu.submenu.label.color + */ + color?: string; + }; /** - * Padding of submenu label - * - * @designToken tieredmenu.submenu.label.padding - */ - padding?: string; - /** - * Font weight of submenu label - * - * @designToken tieredmenu.submenu.label.font.weight - */ - fontWeight?: string; - /** - * Background of submenu label - * - * @designToken tieredmenu.submenu.label.background - */ - background?: string; - /** - * Color of submenu label - * - * @designToken tieredmenu.submenu.label.color - */ - color?: string; - } - /** - * Used to pass tokens of the submenu icon section - */ + * Used to pass tokens of the submenu icon section + */ submenuIcon?: { - + /** + * Size of submenu icon + * + * @designToken tieredmenu.submenu.icon.size + */ + size?: string; + /** + * Color of submenu icon + * + * @designToken tieredmenu.submenu.icon.color + */ + color?: string; + /** + * Focus color of submenu icon + * + * @designToken tieredmenu.submenu.icon.focus.color + */ + focusColor?: string; + /** + * Active color of submenu icon + * + * @designToken tieredmenu.submenu.icon.active.color + */ + activeColor?: string; + }; /** - * Size of submenu icon - * - * @designToken tieredmenu.submenu.icon.size - */ - size?: string; - /** - * Color of submenu icon - * - * @designToken tieredmenu.submenu.icon.color - */ - color?: string; - /** - * Focus color of submenu icon - * - * @designToken tieredmenu.submenu.icon.focus.color - */ - focusColor?: string; - /** - * Active color of submenu icon - * - * @designToken tieredmenu.submenu.icon.active.color - */ - activeColor?: string; - } - /** - * Used to pass tokens of the separator section - */ + * Used to pass tokens of the separator section + */ separator?: { - - /** - * Border color of separator - * - * @designToken tieredmenu.separator.border.color - */ - borderColor?: string; - } + /** + * Border color of separator + * + * @designToken tieredmenu.separator.border.color + */ + borderColor?: string; + }; } diff --git a/packages/themes/types/timeline/index.d.ts b/packages/themes/types/timeline/index.d.ts index d450d3763..eadd086b5 100644 --- a/packages/themes/types/timeline/index.d.ts +++ b/packages/themes/types/timeline/index.d.ts @@ -1,4 +1,3 @@ - /** * * Timeline Design Tokens @@ -12,137 +11,128 @@ import { ColorSchemeDesignToken } from '..'; export interface TimelineDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the event section - */ + * Used to pass tokens of the event section + */ event?: { - + /** + * Min height of event + * + * @designToken timeline.event.min.height + */ + minHeight?: string; + }; /** - * Min height of event - * - * @designToken timeline.event.min.height - */ - minHeight?: string; - } - /** - * Used to pass tokens of the horizontal section - */ + * Used to pass tokens of the horizontal section + */ horizontal?: { - - /** - * Event content of horizontal - */ - eventContent?: { - - /** - * Event content padding of horizontal - * - * @designToken timeline.horizontal.event.content.padding - */ - padding?: string; + /** + * Event content of horizontal + */ + eventContent?: { + /** + * Event content padding of horizontal + * + * @designToken timeline.horizontal.event.content.padding + */ + padding?: string; + }; }; - } /** - * Used to pass tokens of the vertical section - */ + * Used to pass tokens of the vertical section + */ vertical?: { - - /** - * Event content of vertical - */ - eventContent?: { - - /** - * Event content padding of vertical - * - * @designToken timeline.vertical.event.content.padding - */ - padding?: string; + /** + * Event content of vertical + */ + eventContent?: { + /** + * Event content padding of vertical + * + * @designToken timeline.vertical.event.content.padding + */ + padding?: string; + }; }; - } /** - * Used to pass tokens of the event marker section - */ + * Used to pass tokens of the event marker section + */ eventMarker?: { - - /** - * Size of event marker - * - * @designToken timeline.event.marker.size - */ - size?: string; - /** - * Border radius of event marker - * - * @designToken timeline.event.marker.border.radius - */ - borderRadius?: string; - /** - * Border width of event marker - * - * @designToken timeline.event.marker.border.width - */ - borderWidth?: string; - /** - * Background of event marker - * - * @designToken timeline.event.marker.background - */ - background?: string; - /** - * Border color of event marker - * - * @designToken timeline.event.marker.border.color - */ - borderColor?: string; - /** - * Content of event marker - */ - content?: { - - /** - * Content border radius of event marker - * - * @designToken timeline.event.marker.content.border.radius - */ - borderRadius?: string; - /** - * Content size of event marker - * - * @designToken timeline.event.marker.content.size - */ - size?: string; - /** - * Content background of event marker - * - * @designToken timeline.event.marker.content.background - */ - background?: string; - /** - * Content inset shadow of event marker - * - * @designToken timeline.event.marker.content.inset.shadow - */ - insetShadow?: string; + /** + * Size of event marker + * + * @designToken timeline.event.marker.size + */ + size?: string; + /** + * Border radius of event marker + * + * @designToken timeline.event.marker.border.radius + */ + borderRadius?: string; + /** + * Border width of event marker + * + * @designToken timeline.event.marker.border.width + */ + borderWidth?: string; + /** + * Background of event marker + * + * @designToken timeline.event.marker.background + */ + background?: string; + /** + * Border color of event marker + * + * @designToken timeline.event.marker.border.color + */ + borderColor?: string; + /** + * Content of event marker + */ + content?: { + /** + * Content border radius of event marker + * + * @designToken timeline.event.marker.content.border.radius + */ + borderRadius?: string; + /** + * Content size of event marker + * + * @designToken timeline.event.marker.content.size + */ + size?: string; + /** + * Content background of event marker + * + * @designToken timeline.event.marker.content.background + */ + background?: string; + /** + * Content inset shadow of event marker + * + * @designToken timeline.event.marker.content.inset.shadow + */ + insetShadow?: string; + }; }; - } /** - * Used to pass tokens of the event connector section - */ + * Used to pass tokens of the event connector section + */ eventConnector?: { - - /** - * Color of event connector - * - * @designToken timeline.event.connector.color - */ - color?: string; - /** - * Size of event connector - * - * @designToken timeline.event.connector.size - */ - size?: string; - } + /** + * Color of event connector + * + * @designToken timeline.event.connector.color + */ + color?: string; + /** + * Size of event connector + * + * @designToken timeline.event.connector.size + */ + size?: string; + }; } diff --git a/packages/themes/types/toast/index.d.ts b/packages/themes/types/toast/index.d.ts index 6d0f5c8e5..daebb4ffa 100644 --- a/packages/themes/types/toast/index.d.ts +++ b/packages/themes/types/toast/index.d.ts @@ -1,4 +1,3 @@ - /** * * Toast Design Tokens @@ -12,605 +11,576 @@ import { ColorSchemeDesignToken } from '..'; export interface ToastDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Width of root + * + * @designToken toast.width + */ + width?: string; + /** + * Border radius of root + * + * @designToken toast.border.radius + */ + borderRadius?: string; + /** + * Border width of root + * + * @designToken toast.border.width + */ + borderWidth?: string; + /** + * Transition duration of root + * + * @designToken toast.transition.duration + */ + transitionDuration?: string; + }; /** - * Width of root - * - * @designToken toast.width - */ - width?: string; - /** - * Border radius of root - * - * @designToken toast.border.radius - */ - borderRadius?: string; - /** - * Border width of root - * - * @designToken toast.border.width - */ - borderWidth?: string; - /** - * Transition duration of root - * - * @designToken toast.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Size of icon + * + * @designToken toast.icon.size + */ + size?: string; + }; /** - * Size of icon - * - * @designToken toast.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - + /** + * Padding of content + * + * @designToken toast.content.padding + */ + padding?: string; + /** + * Gap of content + * + * @designToken toast.content.gap + */ + gap?: string; + }; /** - * Padding of content - * - * @designToken toast.content.padding - */ - padding?: string; - /** - * Gap of content - * - * @designToken toast.content.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the text section - */ + * Used to pass tokens of the text section + */ text?: { - + /** + * Gap of text + * + * @designToken toast.text.gap + */ + gap?: string; + }; /** - * Gap of text - * - * @designToken toast.text.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the summary section - */ + * Used to pass tokens of the summary section + */ summary?: { - + /** + * Font weight of summary + * + * @designToken toast.summary.font.weight + */ + fontWeight?: string; + /** + * Font size of summary + * + * @designToken toast.summary.font.size + */ + fontSize?: string; + }; /** - * Font weight of summary - * - * @designToken toast.summary.font.weight - */ - fontWeight?: string; - /** - * Font size of summary - * - * @designToken toast.summary.font.size - */ - fontSize?: string; - } - /** - * Used to pass tokens of the detail section - */ + * Used to pass tokens of the detail section + */ detail?: { - - /** - * Font weight of detail - * - * @designToken toast.detail.font.weight - */ - fontWeight?: string; - /** - * Font size of detail - * - * @designToken toast.detail.font.size - */ - fontSize?: string; - } - /** - * Used to pass tokens of the close button section - */ - closeButton?: { - - /** - * Width of close button - * - * @designToken toast.close.button.width - */ - width?: string; - /** - * Height of close button - * - * @designToken toast.close.button.height - */ - height?: string; - /** - * Border radius of close button - * - * @designToken toast.close.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of close button - */ - focusRing?: { - - /** - * Focus ring width of close button - * - * @designToken toast.close.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of close button - * - * @designToken toast.close.button.focus.ring.style - */ - style?: string; - /** - * Focus ring offset of close button - * - * @designToken toast.close.button.focus.ring.offset - */ - offset?: string; + /** + * Font weight of detail + * + * @designToken toast.detail.font.weight + */ + fontWeight?: string; + /** + * Font size of detail + * + * @designToken toast.detail.font.size + */ + fontSize?: string; }; - } /** - * Used to pass tokens of the close icon section - */ + * Used to pass tokens of the close button section + */ + closeButton?: { + /** + * Width of close button + * + * @designToken toast.close.button.width + */ + width?: string; + /** + * Height of close button + * + * @designToken toast.close.button.height + */ + height?: string; + /** + * Border radius of close button + * + * @designToken toast.close.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of close button + */ + focusRing?: { + /** + * Focus ring width of close button + * + * @designToken toast.close.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of close button + * + * @designToken toast.close.button.focus.ring.style + */ + style?: string; + /** + * Focus ring offset of close button + * + * @designToken toast.close.button.focus.ring.offset + */ + offset?: string; + }; + }; + /** + * Used to pass tokens of the close icon section + */ closeIcon?: { - + /** + * Size of close icon + * + * @designToken toast.close.icon.size + */ + size?: string; + }; /** - * Size of close icon - * - * @designToken toast.close.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the blur section - */ + * Used to pass tokens of the blur section + */ blur?: { - + /** + * 0 of blur + * + * @designToken toast.blur.0 + */ + 0?: string; + /** + * 1 of blur + * + * @designToken toast.blur.1 + */ + 1?: string; + /** + * 2 of blur + * + * @designToken toast.blur.2 + */ + 2?: string; + /** + * 3 of blur + * + * @designToken toast.blur.3 + */ + 3?: string; + /** + * 4 of blur + * + * @designToken toast.blur.4 + */ + 4?: string; + }; /** - * 0 of blur - * - * @designToken toast.blur.0 - */ - 0?: string; - /** - * 1 of blur - * - * @designToken toast.blur.1 - */ - 1?: string; - /** - * 2 of blur - * - * @designToken toast.blur.2 - */ - 2?: string; - /** - * 3 of blur - * - * @designToken toast.blur.3 - */ - 3?: string; - /** - * 4 of blur - * - * @designToken toast.blur.4 - */ - 4?: string; - } - /** - * Used to pass tokens of the info section - */ + * Used to pass tokens of the info section + */ info?: { - - /** - * Background of info - * - * @designToken toast.info.background - */ - background?: string; - /** - * Border color of info - * - * @designToken toast.info.border.color - */ - borderColor?: string; - /** - * Color of info - * - * @designToken toast.info.color - */ - color?: string; - /** - * Detail color of info - * - * @designToken toast.info.detail.color - */ - detailColor?: string; - /** - * Shadow of info - * - * @designToken toast.info.shadow - */ - shadow?: string; - /** - * Close button of info - */ - closeButton?: { - - /** - * Close button hover background of info - * - * @designToken toast.info.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of info - */ - focusRing?: { - - /** - * Close button focus ring color of info - * - * @designToken toast.info.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of info - * - * @designToken toast.info.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of info + * + * @designToken toast.info.background + */ + background?: string; + /** + * Border color of info + * + * @designToken toast.info.border.color + */ + borderColor?: string; + /** + * Color of info + * + * @designToken toast.info.color + */ + color?: string; + /** + * Detail color of info + * + * @designToken toast.info.detail.color + */ + detailColor?: string; + /** + * Shadow of info + * + * @designToken toast.info.shadow + */ + shadow?: string; + /** + * Close button of info + */ + closeButton?: { + /** + * Close button hover background of info + * + * @designToken toast.info.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of info + */ + focusRing?: { + /** + * Close button focus ring color of info + * + * @designToken toast.info.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of info + * + * @designToken toast.info.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the success section - */ + * Used to pass tokens of the success section + */ success?: { - - /** - * Background of success - * - * @designToken toast.success.background - */ - background?: string; - /** - * Border color of success - * - * @designToken toast.success.border.color - */ - borderColor?: string; - /** - * Color of success - * - * @designToken toast.success.color - */ - color?: string; - /** - * Detail color of success - * - * @designToken toast.success.detail.color - */ - detailColor?: string; - /** - * Shadow of success - * - * @designToken toast.success.shadow - */ - shadow?: string; - /** - * Close button of success - */ - closeButton?: { - - /** - * Close button hover background of success - * - * @designToken toast.success.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of success - */ - focusRing?: { - - /** - * Close button focus ring color of success - * - * @designToken toast.success.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of success - * - * @designToken toast.success.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of success + * + * @designToken toast.success.background + */ + background?: string; + /** + * Border color of success + * + * @designToken toast.success.border.color + */ + borderColor?: string; + /** + * Color of success + * + * @designToken toast.success.color + */ + color?: string; + /** + * Detail color of success + * + * @designToken toast.success.detail.color + */ + detailColor?: string; + /** + * Shadow of success + * + * @designToken toast.success.shadow + */ + shadow?: string; + /** + * Close button of success + */ + closeButton?: { + /** + * Close button hover background of success + * + * @designToken toast.success.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of success + */ + focusRing?: { + /** + * Close button focus ring color of success + * + * @designToken toast.success.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of success + * + * @designToken toast.success.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the warn section - */ + * Used to pass tokens of the warn section + */ warn?: { - - /** - * Background of warn - * - * @designToken toast.warn.background - */ - background?: string; - /** - * Border color of warn - * - * @designToken toast.warn.border.color - */ - borderColor?: string; - /** - * Color of warn - * - * @designToken toast.warn.color - */ - color?: string; - /** - * Detail color of warn - * - * @designToken toast.warn.detail.color - */ - detailColor?: string; - /** - * Shadow of warn - * - * @designToken toast.warn.shadow - */ - shadow?: string; - /** - * Close button of warn - */ - closeButton?: { - - /** - * Close button hover background of warn - * - * @designToken toast.warn.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of warn - */ - focusRing?: { - - /** - * Close button focus ring color of warn - * - * @designToken toast.warn.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of warn - * - * @designToken toast.warn.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of warn + * + * @designToken toast.warn.background + */ + background?: string; + /** + * Border color of warn + * + * @designToken toast.warn.border.color + */ + borderColor?: string; + /** + * Color of warn + * + * @designToken toast.warn.color + */ + color?: string; + /** + * Detail color of warn + * + * @designToken toast.warn.detail.color + */ + detailColor?: string; + /** + * Shadow of warn + * + * @designToken toast.warn.shadow + */ + shadow?: string; + /** + * Close button of warn + */ + closeButton?: { + /** + * Close button hover background of warn + * + * @designToken toast.warn.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of warn + */ + focusRing?: { + /** + * Close button focus ring color of warn + * + * @designToken toast.warn.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of warn + * + * @designToken toast.warn.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the error section - */ + * Used to pass tokens of the error section + */ error?: { - - /** - * Background of error - * - * @designToken toast.error.background - */ - background?: string; - /** - * Border color of error - * - * @designToken toast.error.border.color - */ - borderColor?: string; - /** - * Color of error - * - * @designToken toast.error.color - */ - color?: string; - /** - * Detail color of error - * - * @designToken toast.error.detail.color - */ - detailColor?: string; - /** - * Shadow of error - * - * @designToken toast.error.shadow - */ - shadow?: string; - /** - * Close button of error - */ - closeButton?: { - - /** - * Close button hover background of error - * - * @designToken toast.error.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of error - */ - focusRing?: { - - /** - * Close button focus ring color of error - * - * @designToken toast.error.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of error - * - * @designToken toast.error.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of error + * + * @designToken toast.error.background + */ + background?: string; + /** + * Border color of error + * + * @designToken toast.error.border.color + */ + borderColor?: string; + /** + * Color of error + * + * @designToken toast.error.color + */ + color?: string; + /** + * Detail color of error + * + * @designToken toast.error.detail.color + */ + detailColor?: string; + /** + * Shadow of error + * + * @designToken toast.error.shadow + */ + shadow?: string; + /** + * Close button of error + */ + closeButton?: { + /** + * Close button hover background of error + * + * @designToken toast.error.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of error + */ + focusRing?: { + /** + * Close button focus ring color of error + * + * @designToken toast.error.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of error + * + * @designToken toast.error.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the secondary section - */ + * Used to pass tokens of the secondary section + */ secondary?: { - - /** - * Background of secondary - * - * @designToken toast.secondary.background - */ - background?: string; - /** - * Border color of secondary - * - * @designToken toast.secondary.border.color - */ - borderColor?: string; - /** - * Color of secondary - * - * @designToken toast.secondary.color - */ - color?: string; - /** - * Detail color of secondary - * - * @designToken toast.secondary.detail.color - */ - detailColor?: string; - /** - * Shadow of secondary - * - * @designToken toast.secondary.shadow - */ - shadow?: string; - /** - * Close button of secondary - */ - closeButton?: { - - /** - * Close button hover background of secondary - * - * @designToken toast.secondary.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of secondary - */ - focusRing?: { - - /** - * Close button focus ring color of secondary - * - * @designToken toast.secondary.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of secondary - * - * @designToken toast.secondary.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of secondary + * + * @designToken toast.secondary.background + */ + background?: string; + /** + * Border color of secondary + * + * @designToken toast.secondary.border.color + */ + borderColor?: string; + /** + * Color of secondary + * + * @designToken toast.secondary.color + */ + color?: string; + /** + * Detail color of secondary + * + * @designToken toast.secondary.detail.color + */ + detailColor?: string; + /** + * Shadow of secondary + * + * @designToken toast.secondary.shadow + */ + shadow?: string; + /** + * Close button of secondary + */ + closeButton?: { + /** + * Close button hover background of secondary + * + * @designToken toast.secondary.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of secondary + */ + focusRing?: { + /** + * Close button focus ring color of secondary + * + * @designToken toast.secondary.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of secondary + * + * @designToken toast.secondary.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } /** - * Used to pass tokens of the contrast section - */ + * Used to pass tokens of the contrast section + */ contrast?: { - - /** - * Background of contrast - * - * @designToken toast.contrast.background - */ - background?: string; - /** - * Border color of contrast - * - * @designToken toast.contrast.border.color - */ - borderColor?: string; - /** - * Color of contrast - * - * @designToken toast.contrast.color - */ - color?: string; - /** - * Detail color of contrast - * - * @designToken toast.contrast.detail.color - */ - detailColor?: string; - /** - * Shadow of contrast - * - * @designToken toast.contrast.shadow - */ - shadow?: string; - /** - * Close button of contrast - */ - closeButton?: { - - /** - * Close button hover background of contrast - * - * @designToken toast.contrast.close.button.hover.background - */ - hoverBackground?: string; - /** - * Close button focus ring of contrast - */ - focusRing?: { - - /** - * Close button focus ring color of contrast - * - * @designToken toast.contrast.close.button.focus.ring.color - */ - color?: string; - /** - * Close button focus ring shadow of contrast - * - * @designToken toast.contrast.close.button.focus.ring.shadow - */ - shadow?: string; + /** + * Background of contrast + * + * @designToken toast.contrast.background + */ + background?: string; + /** + * Border color of contrast + * + * @designToken toast.contrast.border.color + */ + borderColor?: string; + /** + * Color of contrast + * + * @designToken toast.contrast.color + */ + color?: string; + /** + * Detail color of contrast + * + * @designToken toast.contrast.detail.color + */ + detailColor?: string; + /** + * Shadow of contrast + * + * @designToken toast.contrast.shadow + */ + shadow?: string; + /** + * Close button of contrast + */ + closeButton?: { + /** + * Close button hover background of contrast + * + * @designToken toast.contrast.close.button.hover.background + */ + hoverBackground?: string; + /** + * Close button focus ring of contrast + */ + focusRing?: { + /** + * Close button focus ring color of contrast + * + * @designToken toast.contrast.close.button.focus.ring.color + */ + color?: string; + /** + * Close button focus ring shadow of contrast + * + * @designToken toast.contrast.close.button.focus.ring.shadow + */ + shadow?: string; + }; + }; }; - }; - } } diff --git a/packages/themes/types/togglebutton/index.d.ts b/packages/themes/types/togglebutton/index.d.ts index 2db99e402..f5467f028 100644 --- a/packages/themes/types/togglebutton/index.d.ts +++ b/packages/themes/types/togglebutton/index.d.ts @@ -1,4 +1,3 @@ - /** * * ToggleButton Design Tokens @@ -12,209 +11,204 @@ import { ColorSchemeDesignToken } from '..'; export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Padding of root - * - * @designToken togglebutton.padding - */ - padding?: string; - /** - * Border radius of root - * - * @designToken togglebutton.border.radius - */ - borderRadius?: string; - /** - * Gap of root - * - * @designToken togglebutton.gap - */ - gap?: string; - /** - * Font weight of root - * - * @designToken togglebutton.font.weight - */ - fontWeight?: string; - /** - * Disabled background of root - * - * @designToken togglebutton.disabled.background - */ - disabledBackground?: string; - /** - * Disabled border color of root - * - * @designToken togglebutton.disabled.border.color - */ - disabledBorderColor?: string; - /** - * Disabled color of root - * - * @designToken togglebutton.disabled.color - */ - disabledColor?: string; - /** - * Invalid border color of root - * - * @designToken togglebutton.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken togglebutton.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken togglebutton.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken togglebutton.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken togglebutton.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken togglebutton.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of root + * + * @designToken togglebutton.padding + */ + padding?: string; + /** + * Border radius of root + * + * @designToken togglebutton.border.radius + */ + borderRadius?: string; + /** + * Gap of root + * + * @designToken togglebutton.gap + */ + gap?: string; + /** + * Font weight of root + * + * @designToken togglebutton.font.weight + */ + fontWeight?: string; + /** + * Disabled background of root + * + * @designToken togglebutton.disabled.background + */ + disabledBackground?: string; + /** + * Disabled border color of root + * + * @designToken togglebutton.disabled.border.color + */ + disabledBorderColor?: string; + /** + * Disabled color of root + * + * @designToken togglebutton.disabled.color + */ + disabledColor?: string; + /** + * Invalid border color of root + * + * @designToken togglebutton.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken togglebutton.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken togglebutton.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken togglebutton.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken togglebutton.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken togglebutton.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken togglebutton.transition.duration + */ + transitionDuration?: string; + /** + * Background of root + * + * @designToken togglebutton.background + */ + background?: string; + /** + * Checked background of root + * + * @designToken togglebutton.checked.background + */ + checkedBackground?: string; + /** + * Hover background of root + * + * @designToken togglebutton.hover.background + */ + hoverBackground?: string; + /** + * Border color of root + * + * @designToken togglebutton.border.color + */ + borderColor?: string; + /** + * Color of root + * + * @designToken togglebutton.color + */ + color?: string; + /** + * Hover color of root + * + * @designToken togglebutton.hover.color + */ + hoverColor?: string; + /** + * Checked color of root + * + * @designToken togglebutton.checked.color + */ + checkedColor?: string; + /** + * Checked border color of root + * + * @designToken togglebutton.checked.border.color + */ + checkedBorderColor?: string; }; /** - * Transition duration of root - * - * @designToken togglebutton.transition.duration - */ - transitionDuration?: string; - /** - * Background of root - * - * @designToken togglebutton.background - */ - background?: string; - /** - * Checked background of root - * - * @designToken togglebutton.checked.background - */ - checkedBackground?: string; - /** - * Hover background of root - * - * @designToken togglebutton.hover.background - */ - hoverBackground?: string; - /** - * Border color of root - * - * @designToken togglebutton.border.color - */ - borderColor?: string; - /** - * Color of root - * - * @designToken togglebutton.color - */ - color?: string; - /** - * Hover color of root - * - * @designToken togglebutton.hover.color - */ - hoverColor?: string; - /** - * Checked color of root - * - * @designToken togglebutton.checked.color - */ - checkedColor?: string; - /** - * Checked border color of root - * - * @designToken togglebutton.checked.border.color - */ - checkedBorderColor?: string; - } - /** - * Used to pass tokens of the icon section - */ + * Used to pass tokens of the icon section + */ icon?: { - + /** + * Disabled color of icon + * + * @designToken togglebutton.icon.disabled.color + */ + disabledColor?: string; + /** + * Color of icon + * + * @designToken togglebutton.icon.color + */ + color?: string; + /** + * Hover color of icon + * + * @designToken togglebutton.icon.hover.color + */ + hoverColor?: string; + /** + * Checked color of icon + * + * @designToken togglebutton.icon.checked.color + */ + checkedColor?: string; + }; /** - * Disabled color of icon - * - * @designToken togglebutton.icon.disabled.color - */ - disabledColor?: string; - /** - * Color of icon - * - * @designToken togglebutton.icon.color - */ - color?: string; - /** - * Hover color of icon - * - * @designToken togglebutton.icon.hover.color - */ - hoverColor?: string; - /** - * Checked color of icon - * - * @designToken togglebutton.icon.checked.color - */ - checkedColor?: string; - } - /** - * Used to pass tokens of the content section - */ + * Used to pass tokens of the content section + */ content?: { - - /** - * Left of content - * - * @designToken togglebutton.content.left - */ - left?: string; - /** - * Top of content - * - * @designToken togglebutton.content.top - */ - top?: string; - /** - * Checked shadow of content - * - * @designToken togglebutton.content.checked.shadow - */ - checkedShadow?: string; - /** - * Checked background of content - * - * @designToken togglebutton.content.checked.background - */ - checkedBackground?: string; - } + /** + * Left of content + * + * @designToken togglebutton.content.left + */ + left?: string; + /** + * Top of content + * + * @designToken togglebutton.content.top + */ + top?: string; + /** + * Checked shadow of content + * + * @designToken togglebutton.content.checked.shadow + */ + checkedShadow?: string; + /** + * Checked background of content + * + * @designToken togglebutton.content.checked.background + */ + checkedBackground?: string; + }; } diff --git a/packages/themes/types/toggleswitch/index.d.ts b/packages/themes/types/toggleswitch/index.d.ts index 0b6fd70da..5e8bffd42 100644 --- a/packages/themes/types/toggleswitch/index.d.ts +++ b/packages/themes/types/toggleswitch/index.d.ts @@ -1,4 +1,3 @@ - /** * * ToggleSwitch Design Tokens @@ -12,191 +11,187 @@ import { ColorSchemeDesignToken } from '..'; export interface ToggleSwitchDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Width of root - * - * @designToken toggleswitch.width - */ - width?: string; - /** - * Height of root - * - * @designToken toggleswitch.height - */ - height?: string; - /** - * Border radius of root - * - * @designToken toggleswitch.border.radius - */ - borderRadius?: string; - /** - * Gap of root - * - * @designToken toggleswitch.gap - */ - gap?: string; - /** - * Shadow of root - * - * @designToken toggleswitch.shadow - */ - shadow?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken toggleswitch.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken toggleswitch.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken toggleswitch.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken toggleswitch.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken toggleswitch.focus.ring.shadow - */ - shadow?: string; + /** + * Width of root + * + * @designToken toggleswitch.width + */ + width?: string; + /** + * Height of root + * + * @designToken toggleswitch.height + */ + height?: string; + /** + * Border radius of root + * + * @designToken toggleswitch.border.radius + */ + borderRadius?: string; + /** + * Gap of root + * + * @designToken toggleswitch.gap + */ + gap?: string; + /** + * Shadow of root + * + * @designToken toggleswitch.shadow + */ + shadow?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken toggleswitch.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken toggleswitch.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken toggleswitch.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken toggleswitch.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken toggleswitch.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Border width of root + * + * @designToken toggleswitch.border.width + */ + borderWidth?: string; + /** + * Border color of root + * + * @designToken toggleswitch.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken toggleswitch.hover.border.color + */ + hoverBorderColor?: string; + /** + * Checked border color of root + * + * @designToken toggleswitch.checked.border.color + */ + checkedBorderColor?: string; + /** + * Checked hover border color of root + * + * @designToken toggleswitch.checked.hover.border.color + */ + checkedHoverBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken toggleswitch.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Transition duration of root + * + * @designToken toggleswitch.transition.duration + */ + transitionDuration?: string; + /** + * Slide duration of root + * + * @designToken toggleswitch.slide.duration + */ + slideDuration?: string; + /** + * Background of root + * + * @designToken toggleswitch.background + */ + background?: string; + /** + * Hover background of root + * + * @designToken toggleswitch.hover.background + */ + hoverBackground?: string; + /** + * Checked background of root + * + * @designToken toggleswitch.checked.background + */ + checkedBackground?: string; + /** + * Checked hover background of root + * + * @designToken toggleswitch.checked.hover.background + */ + checkedHoverBackground?: string; }; /** - * Border width of root - * - * @designToken toggleswitch.border.width - */ - borderWidth?: string; - /** - * Border color of root - * - * @designToken toggleswitch.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken toggleswitch.hover.border.color - */ - hoverBorderColor?: string; - /** - * Checked border color of root - * - * @designToken toggleswitch.checked.border.color - */ - checkedBorderColor?: string; - /** - * Checked hover border color of root - * - * @designToken toggleswitch.checked.hover.border.color - */ - checkedHoverBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken toggleswitch.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Transition duration of root - * - * @designToken toggleswitch.transition.duration - */ - transitionDuration?: string; - /** - * Slide duration of root - * - * @designToken toggleswitch.slide.duration - */ - slideDuration?: string; - /** - * Background of root - * - * @designToken toggleswitch.background - */ - background?: string; - /** - * Hover background of root - * - * @designToken toggleswitch.hover.background - */ - hoverBackground?: string; - /** - * Checked background of root - * - * @designToken toggleswitch.checked.background - */ - checkedBackground?: string; - /** - * Checked hover background of root - * - * @designToken toggleswitch.checked.hover.background - */ - checkedHoverBackground?: string; - } - /** - * Used to pass tokens of the handle section - */ + * Used to pass tokens of the handle section + */ handle?: { - - /** - * Border radius of handle - * - * @designToken toggleswitch.handle.border.radius - */ - borderRadius?: string; - /** - * Size of handle - * - * @designToken toggleswitch.handle.size - */ - size?: string; - /** - * Background of handle - * - * @designToken toggleswitch.handle.background - */ - background?: string; - /** - * Hover background of handle - * - * @designToken toggleswitch.handle.hover.background - */ - hoverBackground?: string; - /** - * Checked background of handle - * - * @designToken toggleswitch.handle.checked.background - */ - checkedBackground?: string; - /** - * Checked hover background of handle - * - * @designToken toggleswitch.handle.checked.hover.background - */ - checkedHoverBackground?: string; - } + /** + * Border radius of handle + * + * @designToken toggleswitch.handle.border.radius + */ + borderRadius?: string; + /** + * Size of handle + * + * @designToken toggleswitch.handle.size + */ + size?: string; + /** + * Background of handle + * + * @designToken toggleswitch.handle.background + */ + background?: string; + /** + * Hover background of handle + * + * @designToken toggleswitch.handle.hover.background + */ + hoverBackground?: string; + /** + * Checked background of handle + * + * @designToken toggleswitch.handle.checked.background + */ + checkedBackground?: string; + /** + * Checked hover background of handle + * + * @designToken toggleswitch.handle.checked.hover.background + */ + checkedHoverBackground?: string; + }; } diff --git a/packages/themes/types/toolbar/index.d.ts b/packages/themes/types/toolbar/index.d.ts index eb239e5fc..658bf2a9b 100644 --- a/packages/themes/types/toolbar/index.d.ts +++ b/packages/themes/types/toolbar/index.d.ts @@ -1,4 +1,3 @@ - /** * * Toolbar Design Tokens @@ -12,47 +11,45 @@ import { ColorSchemeDesignToken } from '..'; export interface ToolbarDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken toolbar.background - */ - background?: string; - /** - * Border color of root - * - * @designToken toolbar.border.color - */ - borderColor?: string; - /** - * Border radius of root - * - * @designToken toolbar.border.radius - */ - borderRadius?: string; - /** - * Color of root - * - * @designToken toolbar.color - */ - color?: string; - /** - * Gap of root - * - * @designToken toolbar.gap - */ - gap?: string; - /** - * Padding of root - * - * @designToken toolbar.padding - */ - padding?: string; - } + /** + * Background of root + * + * @designToken toolbar.background + */ + background?: string; + /** + * Border color of root + * + * @designToken toolbar.border.color + */ + borderColor?: string; + /** + * Border radius of root + * + * @designToken toolbar.border.radius + */ + borderRadius?: string; + /** + * Color of root + * + * @designToken toolbar.color + */ + color?: string; + /** + * Gap of root + * + * @designToken toolbar.gap + */ + gap?: string; + /** + * Padding of root + * + * @designToken toolbar.padding + */ + padding?: string; + }; } diff --git a/packages/themes/types/tooltip/index.d.ts b/packages/themes/types/tooltip/index.d.ts index e04af13d0..00c565230 100644 --- a/packages/themes/types/tooltip/index.d.ts +++ b/packages/themes/types/tooltip/index.d.ts @@ -1,4 +1,3 @@ - /** * * Tooltip Design Tokens @@ -12,53 +11,51 @@ import { ColorSchemeDesignToken } from '..'; export interface TooltipDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Max width of root - * - * @designToken tooltip.max.width - */ - maxWidth?: string; - /** - * Gutter of root - * - * @designToken tooltip.gutter - */ - gutter?: string; - /** - * Shadow of root - * - * @designToken tooltip.shadow - */ - shadow?: string; - /** - * Padding of root - * - * @designToken tooltip.padding - */ - padding?: string; - /** - * Border radius of root - * - * @designToken tooltip.border.radius - */ - borderRadius?: string; - /** - * Background of root - * - * @designToken tooltip.background - */ - background?: string; - /** - * Color of root - * - * @designToken tooltip.color - */ - color?: string; - } + /** + * Max width of root + * + * @designToken tooltip.max.width + */ + maxWidth?: string; + /** + * Gutter of root + * + * @designToken tooltip.gutter + */ + gutter?: string; + /** + * Shadow of root + * + * @designToken tooltip.shadow + */ + shadow?: string; + /** + * Padding of root + * + * @designToken tooltip.padding + */ + padding?: string; + /** + * Border radius of root + * + * @designToken tooltip.border.radius + */ + borderRadius?: string; + /** + * Background of root + * + * @designToken tooltip.background + */ + background?: string; + /** + * Color of root + * + * @designToken tooltip.color + */ + color?: string; + }; } diff --git a/packages/themes/types/tree/index.d.ts b/packages/themes/types/tree/index.d.ts index c92edb946..a035a6d2a 100644 --- a/packages/themes/types/tree/index.d.ts +++ b/packages/themes/types/tree/index.d.ts @@ -1,4 +1,3 @@ - /** * * Tree Design Tokens @@ -12,257 +11,249 @@ import { ColorSchemeDesignToken } from '..'; export interface TreeDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Background of root + * + * @designToken tree.background + */ + background?: string; + /** + * Color of root + * + * @designToken tree.color + */ + color?: string; + /** + * Padding of root + * + * @designToken tree.padding + */ + padding?: string; + /** + * Gap of root + * + * @designToken tree.gap + */ + gap?: string; + /** + * Indent of root + * + * @designToken tree.indent + */ + indent?: string; + /** + * Transition duration of root + * + * @designToken tree.transition.duration + */ + transitionDuration?: string; + }; /** - * Background of root - * - * @designToken tree.background - */ - background?: string; - /** - * Color of root - * - * @designToken tree.color - */ - color?: string; - /** - * Padding of root - * - * @designToken tree.padding - */ - padding?: string; - /** - * Gap of root - * - * @designToken tree.gap - */ - gap?: string; - /** - * Indent of root - * - * @designToken tree.indent - */ - indent?: string; - /** - * Transition duration of root - * - * @designToken tree.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the node section - */ + * Used to pass tokens of the node section + */ node?: { - - /** - * Padding of node - * - * @designToken tree.node.padding - */ - padding?: string; - /** - * Border radius of node - * - * @designToken tree.node.border.radius - */ - borderRadius?: string; - /** - * Hover background of node - * - * @designToken tree.node.hover.background - */ - hoverBackground?: string; - /** - * Selected background of node - * - * @designToken tree.node.selected.background - */ - selectedBackground?: string; - /** - * Color of node - * - * @designToken tree.node.color - */ - color?: string; - /** - * Hover color of node - * - * @designToken tree.node.hover.color - */ - hoverColor?: string; - /** - * Selected color of node - * - * @designToken tree.node.selected.color - */ - selectedColor?: string; - /** - * Focus ring of node - */ - focusRing?: { - - /** - * Focus ring width of node - * - * @designToken tree.node.focus.ring.width - */ - width?: string; - /** - * Focus ring style of node - * - * @designToken tree.node.focus.ring.style - */ - style?: string; - /** - * Focus ring color of node - * - * @designToken tree.node.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of node - * - * @designToken tree.node.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of node - * - * @designToken tree.node.focus.ring.shadow - */ - shadow?: string; + /** + * Padding of node + * + * @designToken tree.node.padding + */ + padding?: string; + /** + * Border radius of node + * + * @designToken tree.node.border.radius + */ + borderRadius?: string; + /** + * Hover background of node + * + * @designToken tree.node.hover.background + */ + hoverBackground?: string; + /** + * Selected background of node + * + * @designToken tree.node.selected.background + */ + selectedBackground?: string; + /** + * Color of node + * + * @designToken tree.node.color + */ + color?: string; + /** + * Hover color of node + * + * @designToken tree.node.hover.color + */ + hoverColor?: string; + /** + * Selected color of node + * + * @designToken tree.node.selected.color + */ + selectedColor?: string; + /** + * Focus ring of node + */ + focusRing?: { + /** + * Focus ring width of node + * + * @designToken tree.node.focus.ring.width + */ + width?: string; + /** + * Focus ring style of node + * + * @designToken tree.node.focus.ring.style + */ + style?: string; + /** + * Focus ring color of node + * + * @designToken tree.node.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of node + * + * @designToken tree.node.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of node + * + * @designToken tree.node.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Gap of node + * + * @designToken tree.node.gap + */ + gap?: string; }; /** - * Gap of node - * - * @designToken tree.node.gap - */ - gap?: string; - } - /** - * Used to pass tokens of the node icon section - */ + * Used to pass tokens of the node icon section + */ nodeIcon?: { - - /** - * Color of node icon - * - * @designToken tree.node.icon.color - */ - color?: string; - /** - * Hover color of node icon - * - * @designToken tree.node.icon.hover.color - */ - hoverColor?: string; - /** - * Selected color of node icon - * - * @designToken tree.node.icon.selected.color - */ - selectedColor?: string; - } - /** - * Used to pass tokens of the node toggle button section - */ - nodeToggleButton?: { - - /** - * Border radius of node toggle button - * - * @designToken tree.node.toggle.button.border.radius - */ - borderRadius?: string; - /** - * Size of node toggle button - * - * @designToken tree.node.toggle.button.size - */ - size?: string; - /** - * Hover background of node toggle button - * - * @designToken tree.node.toggle.button.hover.background - */ - hoverBackground?: string; - /** - * Selected hover background of node toggle button - * - * @designToken tree.node.toggle.button.selected.hover.background - */ - selectedHoverBackground?: string; - /** - * Color of node toggle button - * - * @designToken tree.node.toggle.button.color - */ - color?: string; - /** - * Hover color of node toggle button - * - * @designToken tree.node.toggle.button.hover.color - */ - hoverColor?: string; - /** - * Selected hover color of node toggle button - * - * @designToken tree.node.toggle.button.selected.hover.color - */ - selectedHoverColor?: string; - /** - * Focus ring of node toggle button - */ - focusRing?: { - - /** - * Focus ring width of node toggle button - * - * @designToken tree.node.toggle.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of node toggle button - * - * @designToken tree.node.toggle.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of node toggle button - * - * @designToken tree.node.toggle.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of node toggle button - * - * @designToken tree.node.toggle.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of node toggle button - * - * @designToken tree.node.toggle.button.focus.ring.shadow - */ - shadow?: string; + /** + * Color of node icon + * + * @designToken tree.node.icon.color + */ + color?: string; + /** + * Hover color of node icon + * + * @designToken tree.node.icon.hover.color + */ + hoverColor?: string; + /** + * Selected color of node icon + * + * @designToken tree.node.icon.selected.color + */ + selectedColor?: string; }; - } /** - * Used to pass tokens of the loading icon section - */ + * Used to pass tokens of the node toggle button section + */ + nodeToggleButton?: { + /** + * Border radius of node toggle button + * + * @designToken tree.node.toggle.button.border.radius + */ + borderRadius?: string; + /** + * Size of node toggle button + * + * @designToken tree.node.toggle.button.size + */ + size?: string; + /** + * Hover background of node toggle button + * + * @designToken tree.node.toggle.button.hover.background + */ + hoverBackground?: string; + /** + * Selected hover background of node toggle button + * + * @designToken tree.node.toggle.button.selected.hover.background + */ + selectedHoverBackground?: string; + /** + * Color of node toggle button + * + * @designToken tree.node.toggle.button.color + */ + color?: string; + /** + * Hover color of node toggle button + * + * @designToken tree.node.toggle.button.hover.color + */ + hoverColor?: string; + /** + * Selected hover color of node toggle button + * + * @designToken tree.node.toggle.button.selected.hover.color + */ + selectedHoverColor?: string; + /** + * Focus ring of node toggle button + */ + focusRing?: { + /** + * Focus ring width of node toggle button + * + * @designToken tree.node.toggle.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of node toggle button + * + * @designToken tree.node.toggle.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of node toggle button + * + * @designToken tree.node.toggle.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of node toggle button + * + * @designToken tree.node.toggle.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of node toggle button + * + * @designToken tree.node.toggle.button.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the loading icon section + */ loadingIcon?: { - - /** - * Size of loading icon - * - * @designToken tree.loading.icon.size - */ - size?: string; - } + /** + * Size of loading icon + * + * @designToken tree.loading.icon.size + */ + size?: string; + }; } diff --git a/packages/themes/types/treeselect/index.d.ts b/packages/themes/types/treeselect/index.d.ts index 59d09abf1..360c82915 100644 --- a/packages/themes/types/treeselect/index.d.ts +++ b/packages/themes/types/treeselect/index.d.ts @@ -1,4 +1,3 @@ - /** * * TreeSelect Design Tokens @@ -12,233 +11,225 @@ import { ColorSchemeDesignToken } from '..'; export interface TreeSelectDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - - /** - * Background of root - * - * @designToken treeselect.background - */ - background?: string; - /** - * Disabled background of root - * - * @designToken treeselect.disabled.background - */ - disabledBackground?: string; - /** - * Filled background of root - * - * @designToken treeselect.filled.background - */ - filledBackground?: string; - /** - * Filled focus background of root - * - * @designToken treeselect.filled.focus.background - */ - filledFocusBackground?: string; - /** - * Border color of root - * - * @designToken treeselect.border.color - */ - borderColor?: string; - /** - * Hover border color of root - * - * @designToken treeselect.hover.border.color - */ - hoverBorderColor?: string; - /** - * Focus border color of root - * - * @designToken treeselect.focus.border.color - */ - focusBorderColor?: string; - /** - * Invalid border color of root - * - * @designToken treeselect.invalid.border.color - */ - invalidBorderColor?: string; - /** - * Color of root - * - * @designToken treeselect.color - */ - color?: string; - /** - * Disabled color of root - * - * @designToken treeselect.disabled.color - */ - disabledColor?: string; - /** - * Placeholder color of root - * - * @designToken treeselect.placeholder.color - */ - placeholderColor?: string; - /** - * Shadow of root - * - * @designToken treeselect.shadow - */ - shadow?: string; - /** - * Padding x of root - * - * @designToken treeselect.padding.x - */ - paddingX?: string; - /** - * Padding y of root - * - * @designToken treeselect.padding.y - */ - paddingY?: string; - /** - * Border radius of root - * - * @designToken treeselect.border.radius - */ - borderRadius?: string; - /** - * Focus ring of root - */ - focusRing?: { - - /** - * Focus ring width of root - * - * @designToken treeselect.focus.ring.width - */ - width?: string; - /** - * Focus ring style of root - * - * @designToken treeselect.focus.ring.style - */ - style?: string; - /** - * Focus ring color of root - * - * @designToken treeselect.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of root - * - * @designToken treeselect.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of root - * - * @designToken treeselect.focus.ring.shadow - */ - shadow?: string; + /** + * Background of root + * + * @designToken treeselect.background + */ + background?: string; + /** + * Disabled background of root + * + * @designToken treeselect.disabled.background + */ + disabledBackground?: string; + /** + * Filled background of root + * + * @designToken treeselect.filled.background + */ + filledBackground?: string; + /** + * Filled focus background of root + * + * @designToken treeselect.filled.focus.background + */ + filledFocusBackground?: string; + /** + * Border color of root + * + * @designToken treeselect.border.color + */ + borderColor?: string; + /** + * Hover border color of root + * + * @designToken treeselect.hover.border.color + */ + hoverBorderColor?: string; + /** + * Focus border color of root + * + * @designToken treeselect.focus.border.color + */ + focusBorderColor?: string; + /** + * Invalid border color of root + * + * @designToken treeselect.invalid.border.color + */ + invalidBorderColor?: string; + /** + * Color of root + * + * @designToken treeselect.color + */ + color?: string; + /** + * Disabled color of root + * + * @designToken treeselect.disabled.color + */ + disabledColor?: string; + /** + * Placeholder color of root + * + * @designToken treeselect.placeholder.color + */ + placeholderColor?: string; + /** + * Shadow of root + * + * @designToken treeselect.shadow + */ + shadow?: string; + /** + * Padding x of root + * + * @designToken treeselect.padding.x + */ + paddingX?: string; + /** + * Padding y of root + * + * @designToken treeselect.padding.y + */ + paddingY?: string; + /** + * Border radius of root + * + * @designToken treeselect.border.radius + */ + borderRadius?: string; + /** + * Focus ring of root + */ + focusRing?: { + /** + * Focus ring width of root + * + * @designToken treeselect.focus.ring.width + */ + width?: string; + /** + * Focus ring style of root + * + * @designToken treeselect.focus.ring.style + */ + style?: string; + /** + * Focus ring color of root + * + * @designToken treeselect.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of root + * + * @designToken treeselect.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of root + * + * @designToken treeselect.focus.ring.shadow + */ + shadow?: string; + }; + /** + * Transition duration of root + * + * @designToken treeselect.transition.duration + */ + transitionDuration?: string; }; /** - * Transition duration of root - * - * @designToken treeselect.transition.duration - */ - transitionDuration?: string; - } - /** - * Used to pass tokens of the dropdown section - */ + * Used to pass tokens of the dropdown section + */ dropdown?: { - + /** + * Width of dropdown + * + * @designToken treeselect.dropdown.width + */ + width?: string; + /** + * Color of dropdown + * + * @designToken treeselect.dropdown.color + */ + color?: string; + }; /** - * Width of dropdown - * - * @designToken treeselect.dropdown.width - */ - width?: string; - /** - * Color of dropdown - * - * @designToken treeselect.dropdown.color - */ - color?: string; - } - /** - * Used to pass tokens of the overlay section - */ + * Used to pass tokens of the overlay section + */ overlay?: { - + /** + * Background of overlay + * + * @designToken treeselect.overlay.background + */ + background?: string; + /** + * Border color of overlay + * + * @designToken treeselect.overlay.border.color + */ + borderColor?: string; + /** + * Border radius of overlay + * + * @designToken treeselect.overlay.border.radius + */ + borderRadius?: string; + /** + * Color of overlay + * + * @designToken treeselect.overlay.color + */ + color?: string; + /** + * Shadow of overlay + * + * @designToken treeselect.overlay.shadow + */ + shadow?: string; + }; /** - * Background of overlay - * - * @designToken treeselect.overlay.background - */ - background?: string; - /** - * Border color of overlay - * - * @designToken treeselect.overlay.border.color - */ - borderColor?: string; - /** - * Border radius of overlay - * - * @designToken treeselect.overlay.border.radius - */ - borderRadius?: string; - /** - * Color of overlay - * - * @designToken treeselect.overlay.color - */ - color?: string; - /** - * Shadow of overlay - * - * @designToken treeselect.overlay.shadow - */ - shadow?: string; - } - /** - * Used to pass tokens of the tree section - */ + * Used to pass tokens of the tree section + */ tree?: { - + /** + * Padding of tree + * + * @designToken treeselect.tree.padding + */ + padding?: string; + }; /** - * Padding of tree - * - * @designToken treeselect.tree.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the empty message section - */ + * Used to pass tokens of the empty message section + */ emptyMessage?: { - + /** + * Padding of empty message + * + * @designToken treeselect.empty.message.padding + */ + padding?: string; + }; /** - * Padding of empty message - * - * @designToken treeselect.empty.message.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the chip section - */ + * Used to pass tokens of the chip section + */ chip?: { - - /** - * Border radius of chip - * - * @designToken treeselect.chip.border.radius - */ - borderRadius?: string; - } + /** + * Border radius of chip + * + * @designToken treeselect.chip.border.radius + */ + borderRadius?: string; + }; } diff --git a/packages/themes/types/treetable/index.d.ts b/packages/themes/types/treetable/index.d.ts index 77711d024..920c262d7 100644 --- a/packages/themes/types/treetable/index.d.ts +++ b/packages/themes/types/treetable/index.d.ts @@ -1,4 +1,3 @@ - /** * * TreeTable Design Tokens @@ -12,563 +11,543 @@ import { ColorSchemeDesignToken } from '..'; export interface TreeTableDesignTokens extends ColorSchemeDesignToken { - /** - * Used to pass tokens of the root section - */ + * Used to pass tokens of the root section + */ root?: { - + /** + * Transition duration of root + * + * @designToken treetable.transition.duration + */ + transitionDuration?: string; + /** + * Border color of root + * + * @designToken treetable.border.color + */ + borderColor?: string; + }; /** - * Transition duration of root - * - * @designToken treetable.transition.duration - */ - transitionDuration?: string; - /** - * Border color of root - * - * @designToken treetable.border.color - */ - borderColor?: string; - } - /** - * Used to pass tokens of the header section - */ + * Used to pass tokens of the header section + */ header?: { - + /** + * Background of header + * + * @designToken treetable.header.background + */ + background?: string; + /** + * Border color of header + * + * @designToken treetable.header.border.color + */ + borderColor?: string; + /** + * Color of header + * + * @designToken treetable.header.color + */ + color?: string; + /** + * Border width of header + * + * @designToken treetable.header.border.width + */ + borderWidth?: string; + /** + * Padding of header + * + * @designToken treetable.header.padding + */ + padding?: string; + }; /** - * Background of header - * - * @designToken treetable.header.background - */ - background?: string; - /** - * Border color of header - * - * @designToken treetable.header.border.color - */ - borderColor?: string; - /** - * Color of header - * - * @designToken treetable.header.color - */ - color?: string; - /** - * Border width of header - * - * @designToken treetable.header.border.width - */ - borderWidth?: string; - /** - * Padding of header - * - * @designToken treetable.header.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the header cell section - */ + * Used to pass tokens of the header cell section + */ headerCell?: { - - /** - * Background of header cell - * - * @designToken treetable.header.cell.background - */ - background?: string; - /** - * Hover background of header cell - * - * @designToken treetable.header.cell.hover.background - */ - hoverBackground?: string; - /** - * Selected background of header cell - * - * @designToken treetable.header.cell.selected.background - */ - selectedBackground?: string; - /** - * Border color of header cell - * - * @designToken treetable.header.cell.border.color - */ - borderColor?: string; - /** - * Color of header cell - * - * @designToken treetable.header.cell.color - */ - color?: string; - /** - * Hover color of header cell - * - * @designToken treetable.header.cell.hover.color - */ - hoverColor?: string; - /** - * Selected color of header cell - * - * @designToken treetable.header.cell.selected.color - */ - selectedColor?: string; - /** - * Gap of header cell - * - * @designToken treetable.header.cell.gap - */ - gap?: string; - /** - * Padding of header cell - * - * @designToken treetable.header.cell.padding - */ - padding?: string; - /** - * Focus ring of header cell - */ - focusRing?: { - - /** - * Focus ring width of header cell - * - * @designToken treetable.header.cell.focus.ring.width - */ - width?: string; - /** - * Focus ring style of header cell - * - * @designToken treetable.header.cell.focus.ring.style - */ - style?: string; - /** - * Focus ring color of header cell - * - * @designToken treetable.header.cell.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of header cell - * - * @designToken treetable.header.cell.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of header cell - * - * @designToken treetable.header.cell.focus.ring.shadow - */ - shadow?: string; + /** + * Background of header cell + * + * @designToken treetable.header.cell.background + */ + background?: string; + /** + * Hover background of header cell + * + * @designToken treetable.header.cell.hover.background + */ + hoverBackground?: string; + /** + * Selected background of header cell + * + * @designToken treetable.header.cell.selected.background + */ + selectedBackground?: string; + /** + * Border color of header cell + * + * @designToken treetable.header.cell.border.color + */ + borderColor?: string; + /** + * Color of header cell + * + * @designToken treetable.header.cell.color + */ + color?: string; + /** + * Hover color of header cell + * + * @designToken treetable.header.cell.hover.color + */ + hoverColor?: string; + /** + * Selected color of header cell + * + * @designToken treetable.header.cell.selected.color + */ + selectedColor?: string; + /** + * Gap of header cell + * + * @designToken treetable.header.cell.gap + */ + gap?: string; + /** + * Padding of header cell + * + * @designToken treetable.header.cell.padding + */ + padding?: string; + /** + * Focus ring of header cell + */ + focusRing?: { + /** + * Focus ring width of header cell + * + * @designToken treetable.header.cell.focus.ring.width + */ + width?: string; + /** + * Focus ring style of header cell + * + * @designToken treetable.header.cell.focus.ring.style + */ + style?: string; + /** + * Focus ring color of header cell + * + * @designToken treetable.header.cell.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of header cell + * + * @designToken treetable.header.cell.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of header cell + * + * @designToken treetable.header.cell.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the column title section - */ + * Used to pass tokens of the column title section + */ columnTitle?: { - + /** + * Font weight of column title + * + * @designToken treetable.column.title.font.weight + */ + fontWeight?: string; + }; /** - * Font weight of column title - * - * @designToken treetable.column.title.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the row section - */ + * Used to pass tokens of the row section + */ row?: { - - /** - * Background of row - * - * @designToken treetable.row.background - */ - background?: string; - /** - * Hover background of row - * - * @designToken treetable.row.hover.background - */ - hoverBackground?: string; - /** - * Selected background of row - * - * @designToken treetable.row.selected.background - */ - selectedBackground?: string; - /** - * Color of row - * - * @designToken treetable.row.color - */ - color?: string; - /** - * Hover color of row - * - * @designToken treetable.row.hover.color - */ - hoverColor?: string; - /** - * Selected color of row - * - * @designToken treetable.row.selected.color - */ - selectedColor?: string; - /** - * Focus ring of row - */ - focusRing?: { - - /** - * Focus ring width of row - * - * @designToken treetable.row.focus.ring.width - */ - width?: string; - /** - * Focus ring style of row - * - * @designToken treetable.row.focus.ring.style - */ - style?: string; - /** - * Focus ring color of row - * - * @designToken treetable.row.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of row - * - * @designToken treetable.row.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of row - * - * @designToken treetable.row.focus.ring.shadow - */ - shadow?: string; + /** + * Background of row + * + * @designToken treetable.row.background + */ + background?: string; + /** + * Hover background of row + * + * @designToken treetable.row.hover.background + */ + hoverBackground?: string; + /** + * Selected background of row + * + * @designToken treetable.row.selected.background + */ + selectedBackground?: string; + /** + * Color of row + * + * @designToken treetable.row.color + */ + color?: string; + /** + * Hover color of row + * + * @designToken treetable.row.hover.color + */ + hoverColor?: string; + /** + * Selected color of row + * + * @designToken treetable.row.selected.color + */ + selectedColor?: string; + /** + * Focus ring of row + */ + focusRing?: { + /** + * Focus ring width of row + * + * @designToken treetable.row.focus.ring.width + */ + width?: string; + /** + * Focus ring style of row + * + * @designToken treetable.row.focus.ring.style + */ + style?: string; + /** + * Focus ring color of row + * + * @designToken treetable.row.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of row + * + * @designToken treetable.row.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of row + * + * @designToken treetable.row.focus.ring.shadow + */ + shadow?: string; + }; }; - } /** - * Used to pass tokens of the body cell section - */ + * Used to pass tokens of the body cell section + */ bodyCell?: { - - /** - * Border color of body cell - * - * @designToken treetable.body.cell.border.color - */ - borderColor?: string; - /** - * Padding of body cell - * - * @designToken treetable.body.cell.padding - */ - padding?: string; - /** - * Gap of body cell - * - * @designToken treetable.body.cell.gap - */ - gap?: string; - /** - * Selected border color of body cell - * - * @designToken treetable.body.cell.selected.border.color - */ - selectedBorderColor?: string; - } - /** - * Used to pass tokens of the footer cell section - */ - footerCell?: { - - /** - * Background of footer cell - * - * @designToken treetable.footer.cell.background - */ - background?: string; - /** - * Border color of footer cell - * - * @designToken treetable.footer.cell.border.color - */ - borderColor?: string; - /** - * Color of footer cell - * - * @designToken treetable.footer.cell.color - */ - color?: string; - /** - * Padding of footer cell - * - * @designToken treetable.footer.cell.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the column footer section - */ - columnFooter?: { - - /** - * Font weight of column footer - * - * @designToken treetable.column.footer.font.weight - */ - fontWeight?: string; - } - /** - * Used to pass tokens of the footer section - */ - footer?: { - - /** - * Background of footer - * - * @designToken treetable.footer.background - */ - background?: string; - /** - * Border color of footer - * - * @designToken treetable.footer.border.color - */ - borderColor?: string; - /** - * Color of footer - * - * @designToken treetable.footer.color - */ - color?: string; - /** - * Border width of footer - * - * @designToken treetable.footer.border.width - */ - borderWidth?: string; - /** - * Padding of footer - * - * @designToken treetable.footer.padding - */ - padding?: string; - } - /** - * Used to pass tokens of the column resizer width section - */ - columnResizerWidth?: { - - /** - * 0 of column resizer width - * - * @designToken treetable.column.resizer.width.0 - */ - 0?: string; - /** - * 1 of column resizer width - * - * @designToken treetable.column.resizer.width.1 - */ - 1?: string; - /** - * 2 of column resizer width - * - * @designToken treetable.column.resizer.width.2 - */ - 2?: string; - /** - * 3 of column resizer width - * - * @designToken treetable.column.resizer.width.3 - */ - 3?: string; - /** - * 4 of column resizer width - * - * @designToken treetable.column.resizer.width.4 - */ - 4?: string; - /** - * 5 of column resizer width - * - * @designToken treetable.column.resizer.width.5 - */ - 5?: string; - } - /** - * Used to pass tokens of the resize indicator section - */ - resizeIndicator?: { - - /** - * Width of resize indicator - * - * @designToken treetable.resize.indicator.width - */ - width?: string; - /** - * Color of resize indicator - * - * @designToken treetable.resize.indicator.color - */ - color?: string; - } - /** - * Used to pass tokens of the sort icon section - */ - sortIcon?: { - - /** - * Color of sort icon - * - * @designToken treetable.sort.icon.color - */ - color?: string; - /** - * Hover color of sort icon - * - * @designToken treetable.sort.icon.hover.color - */ - hoverColor?: string; - } - /** - * Used to pass tokens of the loading icon section - */ - loadingIcon?: { - - /** - * Size of loading icon - * - * @designToken treetable.loading.icon.size - */ - size?: string; - } - /** - * Used to pass tokens of the node toggle button section - */ - nodeToggleButton?: { - - /** - * Hover background of node toggle button - * - * @designToken treetable.node.toggle.button.hover.background - */ - hoverBackground?: string; - /** - * Selected hover background of node toggle button - * - * @designToken treetable.node.toggle.button.selected.hover.background - */ - selectedHoverBackground?: string; - /** - * Color of node toggle button - * - * @designToken treetable.node.toggle.button.color - */ - color?: string; - /** - * Hover color of node toggle button - * - * @designToken treetable.node.toggle.button.hover.color - */ - hoverColor?: string; - /** - * Selected hover color of node toggle button - * - * @designToken treetable.node.toggle.button.selected.hover.color - */ - selectedHoverColor?: string; - /** - * Size of node toggle button - * - * @designToken treetable.node.toggle.button.size - */ - size?: string; - /** - * Border radius of node toggle button - * - * @designToken treetable.node.toggle.button.border.radius - */ - borderRadius?: string; - /** - * Focus ring of node toggle button - */ - focusRing?: { - - /** - * Focus ring width of node toggle button - * - * @designToken treetable.node.toggle.button.focus.ring.width - */ - width?: string; - /** - * Focus ring style of node toggle button - * - * @designToken treetable.node.toggle.button.focus.ring.style - */ - style?: string; - /** - * Focus ring color of node toggle button - * - * @designToken treetable.node.toggle.button.focus.ring.color - */ - color?: string; - /** - * Focus ring offset of node toggle button - * - * @designToken treetable.node.toggle.button.focus.ring.offset - */ - offset?: string; - /** - * Focus ring shadow of node toggle button - * - * @designToken treetable.node.toggle.button.focus.ring.shadow - */ - shadow?: string; + /** + * Border color of body cell + * + * @designToken treetable.body.cell.border.color + */ + borderColor?: string; + /** + * Padding of body cell + * + * @designToken treetable.body.cell.padding + */ + padding?: string; + /** + * Gap of body cell + * + * @designToken treetable.body.cell.gap + */ + gap?: string; + /** + * Selected border color of body cell + * + * @designToken treetable.body.cell.selected.border.color + */ + selectedBorderColor?: string; }; - } /** - * Used to pass tokens of the paginator top section - */ + * Used to pass tokens of the footer cell section + */ + footerCell?: { + /** + * Background of footer cell + * + * @designToken treetable.footer.cell.background + */ + background?: string; + /** + * Border color of footer cell + * + * @designToken treetable.footer.cell.border.color + */ + borderColor?: string; + /** + * Color of footer cell + * + * @designToken treetable.footer.cell.color + */ + color?: string; + /** + * Padding of footer cell + * + * @designToken treetable.footer.cell.padding + */ + padding?: string; + }; + /** + * Used to pass tokens of the column footer section + */ + columnFooter?: { + /** + * Font weight of column footer + * + * @designToken treetable.column.footer.font.weight + */ + fontWeight?: string; + }; + /** + * Used to pass tokens of the footer section + */ + footer?: { + /** + * Background of footer + * + * @designToken treetable.footer.background + */ + background?: string; + /** + * Border color of footer + * + * @designToken treetable.footer.border.color + */ + borderColor?: string; + /** + * Color of footer + * + * @designToken treetable.footer.color + */ + color?: string; + /** + * Border width of footer + * + * @designToken treetable.footer.border.width + */ + borderWidth?: string; + /** + * Padding of footer + * + * @designToken treetable.footer.padding + */ + padding?: string; + }; + /** + * Used to pass tokens of the column resizer width section + */ + columnResizerWidth?: { + /** + * 0 of column resizer width + * + * @designToken treetable.column.resizer.width.0 + */ + 0?: string; + /** + * 1 of column resizer width + * + * @designToken treetable.column.resizer.width.1 + */ + 1?: string; + /** + * 2 of column resizer width + * + * @designToken treetable.column.resizer.width.2 + */ + 2?: string; + /** + * 3 of column resizer width + * + * @designToken treetable.column.resizer.width.3 + */ + 3?: string; + /** + * 4 of column resizer width + * + * @designToken treetable.column.resizer.width.4 + */ + 4?: string; + /** + * 5 of column resizer width + * + * @designToken treetable.column.resizer.width.5 + */ + 5?: string; + }; + /** + * Used to pass tokens of the resize indicator section + */ + resizeIndicator?: { + /** + * Width of resize indicator + * + * @designToken treetable.resize.indicator.width + */ + width?: string; + /** + * Color of resize indicator + * + * @designToken treetable.resize.indicator.color + */ + color?: string; + }; + /** + * Used to pass tokens of the sort icon section + */ + sortIcon?: { + /** + * Color of sort icon + * + * @designToken treetable.sort.icon.color + */ + color?: string; + /** + * Hover color of sort icon + * + * @designToken treetable.sort.icon.hover.color + */ + hoverColor?: string; + }; + /** + * Used to pass tokens of the loading icon section + */ + loadingIcon?: { + /** + * Size of loading icon + * + * @designToken treetable.loading.icon.size + */ + size?: string; + }; + /** + * Used to pass tokens of the node toggle button section + */ + nodeToggleButton?: { + /** + * Hover background of node toggle button + * + * @designToken treetable.node.toggle.button.hover.background + */ + hoverBackground?: string; + /** + * Selected hover background of node toggle button + * + * @designToken treetable.node.toggle.button.selected.hover.background + */ + selectedHoverBackground?: string; + /** + * Color of node toggle button + * + * @designToken treetable.node.toggle.button.color + */ + color?: string; + /** + * Hover color of node toggle button + * + * @designToken treetable.node.toggle.button.hover.color + */ + hoverColor?: string; + /** + * Selected hover color of node toggle button + * + * @designToken treetable.node.toggle.button.selected.hover.color + */ + selectedHoverColor?: string; + /** + * Size of node toggle button + * + * @designToken treetable.node.toggle.button.size + */ + size?: string; + /** + * Border radius of node toggle button + * + * @designToken treetable.node.toggle.button.border.radius + */ + borderRadius?: string; + /** + * Focus ring of node toggle button + */ + focusRing?: { + /** + * Focus ring width of node toggle button + * + * @designToken treetable.node.toggle.button.focus.ring.width + */ + width?: string; + /** + * Focus ring style of node toggle button + * + * @designToken treetable.node.toggle.button.focus.ring.style + */ + style?: string; + /** + * Focus ring color of node toggle button + * + * @designToken treetable.node.toggle.button.focus.ring.color + */ + color?: string; + /** + * Focus ring offset of node toggle button + * + * @designToken treetable.node.toggle.button.focus.ring.offset + */ + offset?: string; + /** + * Focus ring shadow of node toggle button + * + * @designToken treetable.node.toggle.button.focus.ring.shadow + */ + shadow?: string; + }; + }; + /** + * Used to pass tokens of the paginator top section + */ paginatorTop?: { - + /** + * Border color of paginator top + * + * @designToken treetable.paginator.top.border.color + */ + borderColor?: string; + /** + * Border width of paginator top + * + * @designToken treetable.paginator.top.border.width + */ + borderWidth?: string; + }; /** - * Border color of paginator top - * - * @designToken treetable.paginator.top.border.color - */ - borderColor?: string; - /** - * Border width of paginator top - * - * @designToken treetable.paginator.top.border.width - */ - borderWidth?: string; - } - /** - * Used to pass tokens of the paginator bottom section - */ + * Used to pass tokens of the paginator bottom section + */ paginatorBottom?: { - - /** - * Border color of paginator bottom - * - * @designToken treetable.paginator.bottom.border.color - */ - borderColor?: string; - /** - * Border width of paginator bottom - * - * @designToken treetable.paginator.bottom.border.width - */ - borderWidth?: string; - } + /** + * Border color of paginator bottom + * + * @designToken treetable.paginator.bottom.border.color + */ + borderColor?: string; + /** + * Border width of paginator bottom + * + * @designToken treetable.paginator.bottom.border.width + */ + borderWidth?: string; + }; }