Spacing Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| space.0 | 0 | --gw-space-0 | 0 |
| space.1 | 1rem | --gw-space-1 | 1rem |
| space.2 | 2rem | --gw-space-2 | 2rem |
| space.3 | 3rem | --gw-space-3 | 3rem |
| space.4 | 4rem | --gw-space-4 | 4rem |
| space.0.25 | 0.25rem | --gw-space-0-25 | 0.25rem |
| space.0.125 | 0.125rem | --gw-space-0-125 | 0.125rem |
| space.0.375 | 0.375rem | --gw-space-0-375 | 0.375rem |
| space.0.5 | 0.5rem | --gw-space-0-5 | 0.5rem |
| space.0.75 | 0.75rem | --gw-space-0-75 | 0.75rem |
| space.0.875 | 0.875rem | --gw-space-0-875 | 0.875rem |
| space.1.125 | 1.125rem | --gw-space-1-125 | 1.125rem |
| space.1.5 | 1.5rem | --gw-space-1-5 | 1.5rem |
| space.2.5 | 2.5rem | --gw-space-2-5 | 2.5rem |
| form.field.padding.x | {space.0,75} | --gw-form-field-padding-x | 0.75rem |
| form.field.padding.y | {space.0,5} | --gw-form-field-padding-y | 0.5rem |
| form.field.sm.padding.x | 0.375rem | --gw-form-field-sm-padding-x | 0.375rem |
| form.field.sm.padding.y | 0.25rem | --gw-form-field-sm-padding-y | 0.25rem |
| form.field.lg.padding.x | 0.875rem | --gw-form-field-lg-padding-x | 0.875rem |
| form.field.lg.padding.y | 0.625rem | --gw-form-field-lg-padding-y | 0.625rem |
| list.padding | 0.25rem 0.25rem | --gw-list-padding | 0.25rem 0.25rem |
| list.gap | 2px | --gw-list-gap | 2px |
| list.header.padding | 0.5rem 0.75rem 0.25rem 0.75rem | --gw-list-header-padding | 0.5rem 0.75rem 0.25rem 0.75rem |
| list.option.padding | 0.5rem 0.75rem | --gw-list-option-padding | 0.5rem 0.75rem |
| list.option.group.padding | 0.5rem 0.75rem | --gw-list-option-group-padding | 0.5rem 0.75rem |
| sidenav.list.padding | 0.25rem 0.25rem | --gw-sidenav-list-padding | 0.25rem 0.25rem |
| sidenav.list.gap | 2px | --gw-sidenav-list-gap | 2px |
| sidenav.padding | {space.1,5} | --gw-sidenav-padding | 1.5rem |
| sidenav.gap | {space.1} | --gw-sidenav-gap | 1rem |
| sidenav.menuitem.padding | 0.5rem 1rem | --gw-sidenav-menuitem-padding | 0.5rem 1rem |
| sidenav.menuitem.gap | 0.5rem | --gw-sidenav-menuitem-gap | 0.5rem |
| sidenav.submenuitem.padding | 0.5rem 1rem | --gw-sidenav-submenuitem-padding | 0.5rem 1rem |
| sidenav.submenuitem.gap | 0.5rem | --gw-sidenav-submenuitem-gap | 0.5rem |
| overlay.popover.padding | 0.75rem | --gw-overlay-popover-padding | 0.75rem |
| overlay.modal.padding | {space.1} | --gw-overlay-modal-padding | 1rem |
| button.padding.x | {form.field.padding.x} | --gw-button-padding-x | 0.75rem |
| button.padding.y | {form.field.padding.y} | --gw-button-padding-y | 0.5rem |
| button.sm.padding.x | 0.5rem | --gw-button-sm-padding-x | 0.5rem |
| button.sm.padding.y | {form.field.sm.padding.y} | --gw-button-sm-padding-y | 0.25rem |
| button.gap | {space.0,5} | --gw-button-gap | 0.5rem |
| inputtext.padding.x | {form.field.padding.x} | --gw-inputtext-padding-x | 0.75rem |
| inputtext.padding.y | {form.field.padding.y} | --gw-inputtext-padding-y | 0.5rem |
| inputtext.sm.padding.x | {form.field.sm.padding.x} | --gw-inputtext-sm-padding-x | 0.375rem |
| inputtext.sm.padding.y | {form.field.sm.padding.y} | --gw-inputtext-sm-padding-y | 0.25rem |
| inputtext.lg.padding.x | {form.field.lg.padding.x} | --gw-inputtext-lg-padding-x | 0.875rem |
| inputtext.lg.padding.y | {form.field.lg.padding.y} | --gw-inputtext-lg-padding-y | 0.625rem |
| panel.header.padding | 1.125rem | --gw-panel-header-padding | 1.125rem |
| panel.toggleable.header.padding.x | {space.1} | --gw-panel-toggleable-header-padding-x | 1rem |
| panel.toggleable.header.padding.y | {space.0,75} | --gw-panel-toggleable-header-padding-y | 0.75rem |
| panel.content.padding | {space.1} | --gw-panel-content-padding | 1rem |
| panel.footer.padding | 0 1.125rem 1.125rem 1.125rem | --gw-panel-footer-padding | 0 1.125rem 1.125rem 1.125rem |
| toggleswitch.gap | {space.0,25} | --gw-toggleswitch-gap | 0.25rem |
| inlinebutton.gap | {space.0,25} | --gw-inlinebutton-gap | 0.25rem |
| inlinebutton.padding.x | {space.0,25} | --gw-inlinebutton-padding-x | 0.25rem |
| floatlabel.position.x | {form.field.padding.x} | --gw-floatlabel-position-x | 0.75rem |
| floatlabel.position.y | {form.field.padding.y} | --gw-floatlabel-position-y | 0.5rem |
| floatlabel.over.active.top | -1.25rem | --gw-floatlabel-over-active-top | -1.25rem |
| floatlabel.in.input.padding.top | {space.1,125} | --gw-floatlabel-in-input-padding-top | 1.125rem |
| floatlabel.in.input.padding.bottom | {form.field.padding.y} | --gw-floatlabel-in-input-padding-bottom | 0.5rem |
| floatlabel.in.active.top | {form.field.padding.y} | --gw-floatlabel-in-active-top | 0.5rem |
| floatlabel.on.active.padding | 0 0.125rem | --gw-floatlabel-on-active-padding | 0 0.125rem |
| floatlabel.figma.over.active.top | {floatlabel.over.active.top}*-1 | --gw-floatlabel-figma-over-active-top | -1.25rem*-1 |
| floatlabel.figma.over.active.gap | {floatlabel.figma.over.active.top} - {floatlabel.active.font.size} | --gw-floatlabel-figma-over-active-gap | -1.25rem*-1 - 0.75rem |
| floatlabel.figma.on.active.gap | -1*({floatlabel.active.font.size}/2) | --gw-floatlabel-figma-on-active-gap | -1*(0.75rem/2) |
| autocomplete.padding.x | {form.field.padding.x} | --gw-autocomplete-padding-x | 0.75rem |
| autocomplete.padding.y | {form.field.padding.y} | --gw-autocomplete-padding-y | 0.5rem |
| autocomplete.list.padding | {list.padding} | --gw-autocomplete-list-padding | 0.25rem 0.25rem |
| autocomplete.list.gap | {list.gap} | --gw-autocomplete-list-gap | 2px |
| autocomplete.option.padding | {list.option.padding} | --gw-autocomplete-option-padding | 0.5rem 0.75rem |
| autocomplete.option.group.padding | {list.option.group.padding} | --gw-autocomplete-option-group-padding | 0.5rem 0.75rem |
| autocomplete.empty.message.padding | {list.option.padding} | --gw-autocomplete-empty-message-padding | 0.5rem 0.75rem |
| autocomplete.figma.chip.padding.top | {autocomplete.padding.y}/2 | --gw-autocomplete-figma-chip-padding-top | 0.25rem |
| autocomplete.figma.chip.padding.bottom | {autocomplete.padding.y} /2 | --gw-autocomplete-figma-chip-padding-bottom | 0.25rem |
| autocomplete.figma.input.multiple.gap | {autocomplete.padding.y} /2 | --gw-autocomplete-figma-input-multiple-gap | 0.25rem |
| autocomplete.figma.input.multiple.padding.y | {autocomplete.padding.y} / 2 | --gw-autocomplete-figma-input-multiple-padding-y | 0.25rem |
| autocomplete.figma.input.multiple.haschip.padding.x | {autocomplete.padding.y} / 2 | --gw-autocomplete-figma-input-multiple-haschip-padding-x | 0.25rem |
| autocomplete.figma.input.chip.padding.top | {autocomplete.padding.y} / 2 | --gw-autocomplete-figma-input-chip-padding-top | 0.25rem |
| autocomplete.figma.input.chip.padding.bottom | {autocomplete.padding.y} / 2 | --gw-autocomplete-figma-input-chip-padding-bottom | 0.25rem |
| datepicker.panel.padding | {overlay.popover.padding} | --gw-datepicker-panel-padding | 0.75rem |
| datepicker.header.padding | 0 0 0.5rem 0 | --gw-datepicker-header-padding | 0 0 0.5rem 0 |
| datepicker.title.gap | 0.5rem | --gw-datepicker-title-gap | 0.5rem |
| datepicker.select.month.padding | 0.25rem 0.5rem | --gw-datepicker-select-month-padding | 0.25rem 0.5rem |
| datepicker.select.year.padding | 0.25rem 0.5rem | --gw-datepicker-select-year-padding | 0.25rem 0.5rem |
| datepicker.group.gap | {overlay.popover.padding} | --gw-datepicker-group-gap | 0.75rem |
| datepicker.day.view.margin | 0.5rem 0 0 0 | --gw-datepicker-day-view-margin | 0.5rem 0 0 0 |
| datepicker.week.day.padding | 0.25rem | --gw-datepicker-week-day-padding | 0.25rem |
| datepicker.date.padding | 0.25rem | --gw-datepicker-date-padding | 0.25rem |
| datepicker.month.view.margin | 0.5rem 0 0 0 | --gw-datepicker-month-view-margin | 0.5rem 0 0 0 |
| datepicker.month.padding | 0.375rem | --gw-datepicker-month-padding | 0.375rem |
| datepicker.year.view.margin | 0.5rem 0 0 0 | --gw-datepicker-year-view-margin | 0.5rem 0 0 0 |
| datepicker.year.padding | 0.375rem | --gw-datepicker-year-padding | 0.375rem |
| datepicker.buttonbar.padding | 0.5rem 0 0 0 | --gw-datepicker-buttonbar-padding | 0.5rem 0 0 0 |
| datepicker.time.picker.padding | 0.5rem 0 0 0 | --gw-datepicker-time-picker-padding | 0.5rem 0 0 0 |
| datepicker.time.picker.gap | 0.5rem | --gw-datepicker-time-picker-gap | 0.5rem |
| datepicker.time.picker.button.gap | 0.25rem | --gw-datepicker-time-picker-button-gap | 0.25rem |
| title.gap | 0.5rem | --gw-title-gap | 0.5rem |
| card.body.padding | 1.25rem | --gw-card-body-padding | 1.25rem |
| card.body.gap | 0.5rem | --gw-card-body-gap | 0.5rem |
| card.caption.gap | {space.1} | --gw-card-caption-gap | 1rem |
| dialog.header.padding.x | {overlay.modal.padding} | --gw-dialog-header-padding-x | 1rem |
| dialog.header.padding.y | {space.0,5} | --gw-dialog-header-padding-y | 0.5rem |
| dialog.header.gap | 0.5rem | --gw-dialog-header-gap | 0.5rem |
| dialog.footer.gap | 0.5rem | --gw-dialog-footer-gap | 0.5rem |
| dialog.footer.padding.x | {overlay.modal.padding} | --gw-dialog-footer-padding-x | 1rem |
| dialog.footer.padding.y | {space.0,5} | --gw-dialog-footer-padding-y | 0.5rem |
| dialog.content.padding | {overlay.modal.padding} | --gw-dialog-content-padding | 1rem |
| drawer.header.padding | {overlay.modal.padding} | --gw-drawer-header-padding | 1rem |
| drawer.content.padding | 0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding} | --gw-drawer-content-padding | 0 1rem 1rem 1rem |
| drawer.footer.padding | {overlay.modal.padding} | --gw-drawer-footer-padding | 1rem |
| rating.gap | 0.25rem | --gw-rating-gap | 0.25rem |
| avatar.group.offset | -0.75rem | --gw-avatar-group-offset | -0.75rem |
| avatar.lg.group.offset | -1rem | --gw-avatar-lg-group-offset | -1rem |
| avatar.xl.group.offset | -1.5rem | --gw-avatar-xl-group-offset | -1.5rem |
| badge.padding | 0 0.125rem | --gw-badge-padding | 0 0.125rem |
| chip.padding.x | 0.75rem | --gw-chip-padding-x | 0.75rem |
| chip.padding.y | {space.0,125} | --gw-chip-padding-y | 0.125rem |
| chip.gap | 0.5rem | --gw-chip-gap | 0.5rem |
| message.content.padding | 0.75rem 0.75rem | --gw-message-content-padding | 0.75rem 0.75rem |
| message.content.gap | 0.5rem | --gw-message-content-gap | 0.5rem |
| message.content.sm.padding | 0.375rem 0.625rem | --gw-message-content-sm-padding | 0.375rem 0.625rem |
| message.content.lg.padding | 0.625rem 0.875rem | --gw-message-content-lg-padding | 0.625rem 0.875rem |
| message.simple.content.padding | 0 | --gw-message-simple-content-padding | 0 |
| tag.padding.x | {space.0,25} | --gw-tag-padding-x | 0.25rem |
| tag.padding.y | {space.0,125} | --gw-tag-padding-y | 0.125rem |
| tag.gap | 0.25rem | --gw-tag-gap | 0.25rem |
| breadcrumb.padding | 1rem | --gw-breadcrumb-padding | 1rem |
| breadcrumb.gap | 0.5rem | --gw-breadcrumb-gap | 0.5rem |
| breadcrumb.item.gap | {sidenav.menuitem.gap} | --gw-breadcrumb-item-gap | 0.5rem |
| cascadeselect.padding.x | {form.field.padding.x} | --gw-cascadeselect-padding-x | 0.75rem |
| cascadeselect.padding.y | {form.field.padding.y} | --gw-cascadeselect-padding-y | 0.5rem |
| cascadeselect.list.padding | {list.padding} | --gw-cascadeselect-list-padding | 0.25rem 0.25rem |
| cascadeselect.list.gap | {list.gap} | --gw-cascadeselect-list-gap | 2px |
| cascadeselect.list.mobile.indent | 1rem | --gw-cascadeselect-list-mobile-indent | 1rem |
| cascadeselect.option.padding | {list.option.padding} | --gw-cascadeselect-option-padding | 0.5rem 0.75rem |
| cascadeselect.sm.padding.x | {form.field.sm.padding.x} | --gw-cascadeselect-sm-padding-x | 0.375rem |
| cascadeselect.sm.padding.y | {form.field.sm.padding.y} | --gw-cascadeselect-sm-padding-y | 0.25rem |
| cascadeselect.lg.padding.x | {form.field.lg.padding.x} | --gw-cascadeselect-lg-padding-x | 0.875rem |
| cascadeselect.lg.padding.y | {form.field.lg.padding.y} | --gw-cascadeselect-lg-padding-y | 0.625rem |
| select.padding.x | {form.field.padding.x} | --gw-select-padding-x | 0.75rem |
| select.padding.y | {form.field.padding.y} | --gw-select-padding-y | 0.5rem |
| select.list.padding | {list.padding} | --gw-select-list-padding | 0.25rem 0.25rem |
| select.list.gap | {list.gap} | --gw-select-list-gap | 2px |
| select.list.header.padding | {list.header.padding} | --gw-select-list-header-padding | 0.5rem 0.75rem 0.25rem 0.75rem |
| select.option.padding | {list.option.padding} | --gw-select-option-padding | 0.5rem 0.75rem |
| select.option.group.padding | {list.option.group.padding} | --gw-select-option-group-padding | 0.5rem 0.75rem |
| select.checkmark.gutter.start | -0.375rem | --gw-select-checkmark-gutter-start | -0.375rem |
| select.checkmark.gutter.end | 0.375rem | --gw-select-checkmark-gutter-end | 0.375rem |
| select.empty.message.padding | {list.option.padding} | --gw-select-empty-message-padding | 0.5rem 0.75rem |
| select.sm.padding.x | {form.field.sm.padding.x} | --gw-select-sm-padding-x | 0.375rem |
| select.sm.padding.y | {form.field.sm.padding.y} | --gw-select-sm-padding-y | 0.25rem |
| select.lg.padding.x | {form.field.lg.padding.x} | --gw-select-lg-padding-x | 0.875rem |
| select.lg.padding.y | {form.field.lg.padding.y} | --gw-select-lg-padding-y | 0.625rem |
| editor.overlay.padding | {list.padding} | --gw-editor-overlay-padding | 0.25rem 0.25rem |
| editor.overlay.option.padding | {list.option.padding} | --gw-editor-overlay-option-padding | 0.5rem 0.75rem |
| editor.content.padding | {list.padding} | --gw-editor-content-padding | 0.25rem 0.25rem |
| inputgroup.addon.padding | 0.5rem | --gw-inputgroup-addon-padding | 0.5rem |
| textarea.padding.x | {form.field.padding.x} | --gw-textarea-padding-x | 0.75rem |
| textarea.padding.y | {form.field.padding.y} | --gw-textarea-padding-y | 0.5rem |
| textarea.sm.padding.x | {form.field.sm.padding.x} | --gw-textarea-sm-padding-x | 0.375rem |
| textarea.sm.padding.y | {form.field.sm.padding.y} | --gw-textarea-sm-padding-y | 0.25rem |
| textarea.lg.padding.x | {form.field.lg.padding.x} | --gw-textarea-lg-padding-x | 0.875rem |
| textarea.lg.padding.y | {form.field.lg.padding.y} | --gw-textarea-lg-padding-y | 0.625rem |
| inputnumber.button.vertical.padding | {form.field.padding.y} | --gw-inputnumber-button-vertical-padding | 0.5rem |
| listbox.list.padding | {list.padding} | --gw-listbox-list-padding | 0.25rem 0.25rem |
| listbox.list.gap | {list.gap} | --gw-listbox-list-gap | 2px |
| listbox.list.header.padding | {list.header.padding} | --gw-listbox-list-header-padding | 0.5rem 0.75rem 0.25rem 0.75rem |
| listbox.option.padding | {list.option.padding} | --gw-listbox-option-padding | 0.5rem 0.75rem |
| listbox.option.group.padding | {list.option.group.padding} | --gw-listbox-option-group-padding | 0.5rem 0.75rem |
| listbox.checkmark.gutter.start | -0.375rem | --gw-listbox-checkmark-gutter-start | -0.375rem |
| listbox.checkmark.gutter.end | 0.375rem | --gw-listbox-checkmark-gutter-end | 0.375rem |
| listbox.empty.message.padding | {list.option.padding} | --gw-listbox-empty-message-padding | 0.5rem 0.75rem |
| multiselect.padding.x | {form.field.padding.x} | --gw-multiselect-padding-x | 0.75rem |
| multiselect.padding.y | {form.field.padding.y} | --gw-multiselect-padding-y | 0.5rem |
| multiselect.list.padding | {list.padding} | --gw-multiselect-list-padding | 0.25rem 0.25rem |
| multiselect.list.gap | {list.gap} | --gw-multiselect-list-gap | 2px |
| multiselect.list.header.padding | {list.header.padding} | --gw-multiselect-list-header-padding | 0.5rem 0.75rem 0.25rem 0.75rem |
| multiselect.header.padding | {list.header.padding} | --gw-multiselect-header-padding | 0.5rem 0.75rem 0.25rem 0.75rem |
| multiselect.option.padding | {list.option.padding} | --gw-multiselect-option-padding | 0.5rem 0.75rem |
| multiselect.option.gap | 0.5rem | --gw-multiselect-option-gap | 0.5rem |
| multiselect.option.group.padding | {list.option.group.padding} | --gw-multiselect-option-group-padding | 0.5rem 0.75rem |
| multiselect.empty.message.padding | {list.option.padding} | --gw-multiselect-empty-message-padding | 0.5rem 0.75rem |
| multiselect.figma.chip.padding.top | {multiselect.padding.y}/2 | --gw-multiselect-figma-chip-padding-top | 0.25rem |
| multiselect.figma.chip.padding.bottom | {multiselect.padding.y} /2 | --gw-multiselect-figma-chip-padding-bottom | 0.25rem |
| multiselect.figma.input.multiple.gap | {multiselect.padding.y} /2 | --gw-multiselect-figma-input-multiple-gap | 0.25rem |
| multiselect.sm.padding.x | {form.field.sm.padding.x} | --gw-multiselect-sm-padding-x | 0.375rem |
| multiselect.sm.padding.y | {form.field.sm.padding.y} | --gw-multiselect-sm-padding-y | 0.25rem |
| multiselect.lg.padding.x | {form.field.lg.padding.x} | --gw-multiselect-lg-padding-x | 0.875rem |
| multiselect.lg.padding.y | {form.field.lg.padding.y} | --gw-multiselect-lg-padding-y | 0.625rem |
| password.overlay.padding | {overlay.popover.padding} | --gw-password-overlay-padding | 0.75rem |
| password.content.gap | 0.5rem | --gw-password-content-gap | 0.5rem |
| togglebutton.gap | 0.5rem | --gw-togglebutton-gap | 0.5rem |
| togglebutton.content.padding | 0.25rem 0.75rem | --gw-togglebutton-content-padding | 0.25rem 0.75rem |
| togglebutton.content.sm.padding | 0.25rem 0.75rem | --gw-togglebutton-content-sm-padding | 0.25rem 0.75rem |
| togglebutton.content.lg.padding | 0.25rem 0.75rem | --gw-togglebutton-content-lg-padding | 0.25rem 0.75rem |
| togglebutton.sm.padding | 0.25rem | --gw-togglebutton-sm-padding | 0.25rem |
| togglebutton.lg.padding | 0.25rem | --gw-togglebutton-lg-padding | 0.25rem |
| togglebutton.padding | 0.25rem | --gw-togglebutton-padding | 0.25rem |
| treeselect.padding.x | {form.field.padding.x} | --gw-treeselect-padding-x | 0.75rem |
| treeselect.padding.y | {form.field.padding.y} | --gw-treeselect-padding-y | 0.5rem |
| treeselect.tree.padding | {list.padding} | --gw-treeselect-tree-padding | 0.25rem 0.25rem |
| treeselect.empty.message.padding | {list.option.padding} | --gw-treeselect-empty-message-padding | 0.5rem 0.75rem |
| treeselect.figma.chip.padding.top | {treeselect.padding.y}/2 | --gw-treeselect-figma-chip-padding-top | 0.25rem |
| treeselect.figma.chip.padding.bottom | {treeselect.padding.y} /2 | --gw-treeselect-figma-chip-padding-bottom | 0.25rem |
| treeselect.figma.input.multiple.gap | {treeselect.padding.y} /2 | --gw-treeselect-figma-input-multiple-gap | 0.25rem |
| treeselect.sm.padding.x | {form.field.sm.padding.x} | --gw-treeselect-sm-padding-x | 0.375rem |
| treeselect.sm.padding.y | {form.field.sm.padding.y} | --gw-treeselect-sm-padding-y | 0.25rem |
| treeselect.lg.padding.x | {form.field.lg.padding.x} | --gw-treeselect-lg-padding-x | 0.875rem |
| treeselect.lg.padding.y | {form.field.lg.padding.y} | --gw-treeselect-lg-padding-y | 0.625rem |
| dataview.padding | 0 | --gw-dataview-padding | 0 |
| dataview.header.padding | 0.75rem 1rem | --gw-dataview-header-padding | 0.75rem 1rem |
| dataview.content.padding | 0 | --gw-dataview-content-padding | 0 |
| dataview.footer.padding | 0.75rem 1rem | --gw-dataview-footer-padding | 0.75rem 1rem |
| accordion.header.padding | {space.0,875} | --gw-accordion-header-padding | 0.875rem |
| accordion.content.padding | 0 {space.0,875} {space.0,875} {space.0,875} | --gw-accordion-content-padding | 0 0.875rem 0.875rem 0.875rem |
| divider.horizontal.margin | 1rem 0 | --gw-divider-horizontal-margin | 1rem 0 |
| divider.horizontal.padding | 0 | --gw-divider-horizontal-padding | 0 |
| divider.horizontal.content.padding | 0 0.5rem | --gw-divider-horizontal-content-padding | 0 0.5rem |
| divider.vertical.margin | 0 1rem | --gw-divider-vertical-margin | 0 1rem |
| divider.vertical.padding | 0 | --gw-divider-vertical-padding | 0 |
| divider.vertical.content.padding | 0.5rem 0 | --gw-divider-vertical-content-padding | 0.5rem 0 |
| fieldset.padding | 1.125rem 1.125rem 1.125rem 1.125rem | --gw-fieldset-padding | 1.125rem 1.125rem 1.125rem 1.125rem |
| fieldset.legend.padding | 0.5rem 0.75rem | --gw-fieldset-legend-padding | 0.5rem 0.75rem |
| fieldset.legend.gap | 0.5rem | --gw-fieldset-legend-gap | 0.5rem |
| fieldset.content.padding | 0 | --gw-fieldset-content-padding | 0 |
| splitter.gap | {space.1} | --gw-splitter-gap | 1rem |
| tabs.tablist.gap | 1px | --gw-tabs-tablist-gap | 1px |
| tabs.tab.padding.x | {space.1} | --gw-tabs-tab-padding-x | 1rem |
| tabs.tab.padding.y | {space.0,75} | --gw-tabs-tab-padding-y | 0.75rem |
| tabs.tab.margin | 0 0 -1px 0 | --gw-tabs-tab-margin | 0 0 -1px 0 |
| tabs.tab.gap | 0.5rem | --gw-tabs-tab-gap | 0.5rem |
| tabs.tabpanel.padding | 0.875rem 1.125rem 1.125rem 1.125rem | --gw-tabs-tabpanel-padding | 0.875rem 1.125rem 1.125rem 1.125rem |
| tabs.active.bar.bottom | -1px | --gw-tabs-active-bar-bottom | -1px |
| toolbar.gap | 0.5rem | --gw-toolbar-gap | 0.5rem |
| toolbar.padding | 0.75rem | --gw-toolbar-padding | 0.75rem |
| confirmdialog.content.gap | 1rem | --gw-confirmdialog-content-gap | 1rem |
| confirmpopup.gutter | 10px | --gw-confirmpopup-gutter | 10px |
| confirmpopup.arrow.offset | 1.25rem | --gw-confirmpopup-arrow-offset | 1.25rem |
| confirmpopup.content.padding | {editor.overlay.option.padding} | --gw-confirmpopup-content-padding | 0.5rem 0.75rem |
| confirmpopup.content.gap | 1rem | --gw-confirmpopup-content-gap | 1rem |
| confirmpopup.footer.gap | 0.5rem | --gw-confirmpopup-footer-gap | 0.5rem |
| confirmpopup.footer.padding | 0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding} | --gw-confirmpopup-footer-padding | 0 0.75rem 0.75rem 0.75rem |
| tooltip.gutter | 0.25rem | --gw-tooltip-gutter | 0.25rem |
| tooltip.padding | 0.25rem 0.75rem | --gw-tooltip-padding | 0.25rem 0.75rem |
| contextmenu.list.padding | {sidenav.list.padding} | --gw-contextmenu-list-padding | 0.25rem 0.25rem |
| contextmenu.list.gap | {sidenav.list.gap} | --gw-contextmenu-list-gap | 2px |
| contextmenu.item.padding | {sidenav.menuitem.padding} | --gw-contextmenu-item-padding | 0.5rem 1rem |
| contextmenu.item.gap | {sidenav.menuitem.gap} | --gw-contextmenu-item-gap | 0.5rem |
| contextmenu.submenu.mobile.indent | 1rem | --gw-contextmenu-submenu-mobile-indent | 1rem |
| statusmenu.list.padding | {sidenav.list.padding} | --gw-statusmenu-list-padding | 0.25rem 0.25rem |
| statusmenu.list.gap | {space.0,25} | --gw-statusmenu-list-gap | 0.25rem |
| statusmenu.padding | 0 0.25rem | --gw-statusmenu-padding | 0 0.25rem |
| dock.padding | 0.5rem | --gw-dock-padding | 0.5rem |
| dock.item.padding | 0.5rem | --gw-dock-item-padding | 0.5rem |
| megamenu.gap | 0.5rem | --gw-megamenu-gap | 0.5rem |
| megamenu.vertical.orientation.padding | {sidenav.list.padding} | --gw-megamenu-vertical-orientation-padding | 0.25rem 0.25rem |
| megamenu.vertical.orientation.gap | {sidenav.list.gap} | --gw-megamenu-vertical-orientation-gap | 2px |
| megamenu.horizontal.orientation.padding | 0.5rem 0.75rem | --gw-megamenu-horizontal-orientation-padding | 0.5rem 0.75rem |
| megamenu.horizontal.orientation.gap | 0.5rem | --gw-megamenu-horizontal-orientation-gap | 0.5rem |
| megamenu.base.item.padding | {sidenav.menuitem.padding} | --gw-megamenu-base-item-padding | 0.5rem 1rem |
| megamenu.item.padding | {sidenav.menuitem.padding} | --gw-megamenu-item-padding | 0.5rem 1rem |
| megamenu.item.gap | {sidenav.menuitem.gap} | --gw-megamenu-item-gap | 0.5rem |
| megamenu.overlay.padding | 0 | --gw-megamenu-overlay-padding | 0 |
| megamenu.overlay.gap | 0.5rem | --gw-megamenu-overlay-gap | 0.5rem |
| megamenu.submenu.label.padding | {sidenav.submenuitem.padding} | --gw-megamenu-submenu-label-padding | 0.5rem 1rem |
| megamenu.submenu.padding | {sidenav.list.padding} | --gw-megamenu-submenu-padding | 0.25rem 0.25rem |
| megamenu.submenu.gap | {sidenav.list.gap} | --gw-megamenu-submenu-gap | 2px |
| menu.list.padding | {sidenav.list.padding} | --gw-menu-list-padding | 0.25rem 0.25rem |
| menu.list.gap | {sidenav.list.gap} | --gw-menu-list-gap | 2px |
| menu.item.padding | {sidenav.menuitem.padding} | --gw-menu-item-padding | 0.5rem 1rem |
| menu.item.gap | {sidenav.menuitem.gap} | --gw-menu-item-gap | 0.5rem |
| menu.submenu.label.padding | {sidenav.submenuitem.padding} | --gw-menu-submenu-label-padding | 0.5rem 1rem |
| menubar.gap | 0.5rem | --gw-menubar-gap | 0.5rem |
| menubar.padding | 0.5rem 0.75rem | --gw-menubar-padding | 0.5rem 0.75rem |
| menubar.base.item.padding | {sidenav.menuitem.padding} | --gw-menubar-base-item-padding | 0.5rem 1rem |
| menubar.item.padding | {sidenav.menuitem.padding} | --gw-menubar-item-padding | 0.5rem 1rem |
| menubar.item.gap | {sidenav.menuitem.gap} | --gw-menubar-item-gap | 0.5rem |
| menubar.submenu.padding | {sidenav.list.padding} | --gw-menubar-submenu-padding | 0.25rem 0.25rem |
| menubar.submenu.gap | {sidenav.list.gap} | --gw-menubar-submenu-gap | 2px |
| menubar.submenu.mobile.indent | 1rem | --gw-menubar-submenu-mobile-indent | 1rem |
| panelmenu.gap | 0.5rem | --gw-panelmenu-gap | 0.5rem |
| panelmenu.panel.padding | 0.25rem 0.25rem | --gw-panelmenu-panel-padding | 0.25rem 0.25rem |
| panelmenu.item.gap | 0.5rem | --gw-panelmenu-item-gap | 0.5rem |
| panelmenu.item.padding | {sidenav.menuitem.padding} | --gw-panelmenu-item-padding | 0.5rem 1rem |
| panelmenu.submenu.indent | 1rem | --gw-panelmenu-submenu-indent | 1rem |
| tieredmenu.list.padding | {sidenav.list.padding} | --gw-tieredmenu-list-padding | 0.25rem 0.25rem |
| tieredmenu.list.gap | {sidenav.list.gap} | --gw-tieredmenu-list-gap | 2px |
| tieredmenu.item.padding | {sidenav.menuitem.padding} | --gw-tieredmenu-item-padding | 0.5rem 1rem |
| tieredmenu.item.gap | {sidenav.menuitem.gap} | --gw-tieredmenu-item-gap | 0.5rem |
| tieredmenu.submenu.mobile.indent | 1rem | --gw-tieredmenu-submenu-mobile-indent | 1rem |
| orderlist.gap | 1.125rem | --gw-orderlist-gap | 1.125rem |
| orderlist.controls.gap | 0.5rem | --gw-orderlist-controls-gap | 0.5rem |
| organizationchart.gutter | 0.75rem | --gw-organizationchart-gutter | 0.75rem |
| organizationchart.node.padding | 0.75rem 1rem | --gw-organizationchart-node-padding | 0.75rem 1rem |
| organizationchart.node.toggleable.padding | 0.75rem 1rem 1.25rem 1rem | --gw-organizationchart-node-toggleable-padding | 0.75rem 1rem 1.25rem 1rem |
| paginator.padding | 0.5rem 1rem | --gw-paginator-padding | 0.5rem 1rem |
| paginator.gap | 0.25rem | --gw-paginator-gap | 0.25rem |
| picklist.gap | 1.125rem | --gw-picklist-gap | 1.125rem |
| picklist.controls.gap | 0.5rem | --gw-picklist-controls-gap | 0.5rem |
| datatable.header.padding | 0.75rem 1rem | --gw-datatable-header-padding | 0.75rem 1rem |
| datatable.header.cell.gap | 0.5rem | --gw-datatable-header-cell-gap | 0.5rem |
| datatable.header.cell.padding.x | {datatable.body.cell.padding.x} | --gw-datatable-header-cell-padding-x | 0.5rem |
| datatable.header.cell.padding.y | {datatable.body.cell.padding.y} | --gw-datatable-header-cell-padding-y | 0.75rem |
| datatable.header.cell.sm.padding.x | {datatable.body.cell.sm.padding.x} | --gw-datatable-header-cell-sm-padding-x | 0.5rem |
| datatable.header.cell.sm.padding.y | {datatable.body.cell.sm.padding.y} | --gw-datatable-header-cell-sm-padding-y | 0.375rem |
| datatable.header.cell.lg.padding.x | {datatable.body.cell.lg.padding.x} | --gw-datatable-header-cell-lg-padding-x | 0.875rem |
| datatable.header.cell.lg.padding.y | {datatable.body.cell.lg.padding.y} | --gw-datatable-header-cell-lg-padding-y | 0.75rem |
| datatable.header.sm.padding | 0.375rem 0.5rem | --gw-datatable-header-sm-padding | 0.375rem 0.5rem |
| datatable.header.lg.padding | 1rem 1.25rem | --gw-datatable-header-lg-padding | 1rem 1.25rem |
| datatable.body.cell.padding.x | {space.0,5} | --gw-datatable-body-cell-padding-x | 0.5rem |
| datatable.body.cell.padding.y | {space.0,75} | --gw-datatable-body-cell-padding-y | 0.75rem |
| datatable.body.cell.gap | {space.0,375} | --gw-datatable-body-cell-gap | 0.375rem |
| datatable.body.cell.sm.padding.y | {space.0,375} | --gw-datatable-body-cell-sm-padding-y | 0.375rem |
| datatable.body.cell.sm.padding.x | {space.0,5} | --gw-datatable-body-cell-sm-padding-x | 0.5rem |
| datatable.body.cell.lg.padding.x | {space.0,875} | --gw-datatable-body-cell-lg-padding-x | 0.875rem |
| datatable.body.cell.lg.padding.y | {space.0,75} | --gw-datatable-body-cell-lg-padding-y | 0.75rem |
| datatable.footer.cell.padding.x | {datatable.body.cell.padding.x} | --gw-datatable-footer-cell-padding-x | 0.5rem |
| datatable.footer.cell.padding.y | {datatable.body.cell.padding.y} | --gw-datatable-footer-cell-padding-y | 0.75rem |
| datatable.footer.cell.sm.padding.x | {datatable.body.cell.sm.padding.x} | --gw-datatable-footer-cell-sm-padding-x | 0.5rem |
| datatable.footer.cell.sm.padding.y | {datatable.body.cell.sm.padding.y} | --gw-datatable-footer-cell-sm-padding-y | 0.375rem |
| datatable.footer.cell.lg.padding.x | {datatable.body.cell.lg.padding.x} | --gw-datatable-footer-cell-lg-padding-x | 0.875rem |
| datatable.footer.cell.lg.padding.y | {datatable.body.cell.lg.padding.y} | --gw-datatable-footer-cell-lg-padding-y | 0.75rem |
| datatable.footer.padding | 0.75rem 1rem | --gw-datatable-footer-padding | 0.75rem 1rem |
| datatable.footer.sm.padding | 0.375rem 0.5rem | --gw-datatable-footer-sm-padding | 0.375rem 0.5rem |
| datatable.footer.lg.padding | 1rem 1.25rem | --gw-datatable-footer-lg-padding | 1rem 1.25rem |
| datatable.filter.inline.gap | 0.5rem | --gw-datatable-filter-inline-gap | 0.5rem |
| datatable.filter.overlay.popover.padding | {overlay.popover.padding} | --gw-datatable-filter-overlay-popover-padding | 0.75rem |
| datatable.filter.overlay.popover.gap | 0.5rem | --gw-datatable-filter-overlay-popover-gap | 0.5rem |
| datatable.filter.constraint.list.padding | {list.padding} | --gw-datatable-filter-constraint-list-padding | 0.25rem 0.25rem |
| datatable.filter.constraint.list.gap | {list.gap} | --gw-datatable-filter-constraint-list-gap | 2px |
| datatable.filter.constraint.padding | {list.option.padding} | --gw-datatable-filter-constraint-padding | 0.5rem 0.75rem |
| timeline.horizontal.event.content.padding | 1rem 0 | --gw-timeline-horizontal-event-content-padding | 1rem 0 |
| timeline.vertical.event.content.padding | 0 1rem | --gw-timeline-vertical-event-content-padding | 0 1rem |
| tree.padding | 1rem | --gw-tree-padding | 1rem |
| tree.gap | 2px | --gw-tree-gap | 2px |
| tree.indent | 1rem | --gw-tree-indent | 1rem |
| tree.node.padding | 0.25rem 0.5rem | --gw-tree-node-padding | 0.25rem 0.5rem |
| tree.node.gap | 0.25rem | --gw-tree-node-gap | 0.25rem |
| tree.filter.margin | 0.5rem | --gw-tree-filter-margin | 0.5rem |
| carousel.content.gap | 0.25rem | --gw-carousel-content-gap | 0.25rem |
| carousel.indicator.list.padding | 1rem | --gw-carousel-indicator-list-padding | 1rem |
| carousel.indicator.list.gap | 0.5rem | --gw-carousel-indicator-list-gap | 0.5rem |
| image.toolbar.padding | 0.5rem | --gw-image-toolbar-padding | 0.5rem |
| image.toolbar.gap | 0.5rem | --gw-image-toolbar-gap | 0.5rem |
| image.toolbar.position.right | 1rem | --gw-image-toolbar-position-right | 1rem |
| image.toolbar.position.top | 1rem | --gw-image-toolbar-position-top | 1rem |
| treetable.header.padding | 0.75rem 1rem | --gw-treetable-header-padding | 0.75rem 1rem |
| treetable.header.cell.gap | 0.5rem | --gw-treetable-header-cell-gap | 0.5rem |
| treetable.header.cell.padding | 0.75rem 1rem | --gw-treetable-header-cell-padding | 0.75rem 1rem |
| treetable.body.cell.padding | 0.75rem 1rem | --gw-treetable-body-cell-padding | 0.75rem 1rem |
| treetable.body.cell.gap | 0.5rem | --gw-treetable-body-cell-gap | 0.5rem |
| treetable.footer.cell.padding | 0.75rem 1rem | --gw-treetable-footer-cell-padding | 0.75rem 1rem |
| treetable.footer.padding | 0.75rem 1rem | --gw-treetable-footer-padding | 0.75rem 1rem |
| toast.content.gap | {space.0,75} | --gw-toast-content-gap | 0.75rem |
| toast.content.padding | {space.1,5} | --gw-toast-content-padding | 1.5rem |
| toast.text.gap | 0.5rem | --gw-toast-text-gap | 0.5rem |
| padding | {space.2} | --gw-padding | 2rem |
| galleria.nav.button.gutter | 0.5rem | --gw-galleria-nav-button-gutter | 0.5rem |
| galleria.thumbnails.content.padding | 1rem 0.25rem | --gw-galleria-thumbnails-content-padding | 1rem 0.25rem |
| galleria.thumbnail.nav.button.gutter | 0.5rem | --gw-galleria-thumbnail-nav-button-gutter | 0.5rem |
| galleria.caption.padding | 1rem | --gw-galleria-caption-padding | 1rem |
| galleria.indicator.list.gap | 0.5rem | --gw-galleria-indicator-list-gap | 0.5rem |
| galleria.indicator.list.padding | 1rem | --gw-galleria-indicator-list-padding | 1rem |
| galleria.close.button.gutter | 0.5rem | --gw-galleria-close-button-gutter | 0.5rem |
| popover.gutter | 10px | --gw-popover-gutter | 10px |
| popover.arrow.offset | 1.25rem | --gw-popover-arrow-offset | 1.25rem |
| popover.content.padding | {overlay.popover.padding} | --gw-popover-content-padding | 0.75rem |
| fileupload.header.padding | 1.125rem | --gw-fileupload-header-padding | 1.125rem |
| fileupload.header.gap | 0.5rem | --gw-fileupload-header-gap | 0.5rem |
| fileupload.content.padding | 0 1.125rem 1.125rem 1.125rem | --gw-fileupload-content-padding | 0 1.125rem 1.125rem 1.125rem |
| fileupload.content.gap | 1rem | --gw-fileupload-content-gap | 1rem |
| fileupload.file.padding | 1rem | --gw-fileupload-file-padding | 1rem |
| fileupload.file.gap | 1rem | --gw-fileupload-file-gap | 1rem |
| fileupload.file.info.gap | 0.5rem | --gw-fileupload-file-info-gap | 0.5rem |
| fileupload.file.list.gap | 0.5rem | --gw-fileupload-file-list-gap | 0.5rem |
| fileupload.basic.gap | 0.5rem | --gw-fileupload-basic-gap | 0.5rem |
| speeddial.gap | 0.5rem | --gw-speeddial-gap | 0.5rem |
| splitbutton.gap | 1px | --gw-splitbutton-gap | 1px |
| stepper.separator.margin | 0 0 0 1rem | --gw-stepper-separator-margin | 0 0 0 1rem |
| stepper.step.padding | 0.5rem 1rem | --gw-stepper-step-padding | 0.5rem 1rem |
| stepper.step.gap | 1rem | --gw-stepper-step-gap | 1rem |
| stepper.step.header.padding | 0 | --gw-stepper-step-header-padding | 0 |
| stepper.step.header.gap | 0.5rem | --gw-stepper-step-header-gap | 0.5rem |
| stepper.steppanels.padding | 0.875rem 0.5rem 1.125rem 0.5rem | --gw-stepper-steppanels-padding | 0.875rem 0.5rem 1.125rem 0.5rem |
| stepper.steppanel.padding | 0 | --gw-stepper-steppanel-padding | 0 |
| stepper.steppanel.indent | 1rem | --gw-stepper-steppanel-indent | 1rem |
| inplace.padding | {form.field.padding.y} {form.field.padding.x} | --gw-inplace-padding | 0.5rem 0.75rem |
| metergroup.gap | 1rem | --gw-metergroup-gap | 1rem |
| metergroup.label.gap | 0.5rem | --gw-metergroup-label-gap | 0.5rem |
| metergroup.label.list.vertical.gap | 0.5rem | --gw-metergroup-label-list-vertical-gap | 0.5rem |
| metergroup.label.list.horizontal.gap | 1rem | --gw-metergroup-label-list-horizontal-gap | 1rem |
| terminal.prompt.gap | 0.25rem | --gw-terminal-prompt-gap | 0.25rem |
| terminal.command.response.margin | 2px 0 | --gw-terminal-command-response-margin | 2px 0 |
| terminal.padding | {form.field.padding.y} {form.field.padding.x} | --gw-terminal-padding | 0.5rem 0.75rem |
| inputotp.gap | 0.5rem | --gw-inputotp-gap | 0.5rem |
| iftalabel.position.x | {form.field.padding.x} | --gw-iftalabel-position-x | 0.75rem |
| iftalabel.top | {form.field.padding.y} | --gw-iftalabel-top | 0.5rem |
| iftalabel.input.padding.top | 1.5rem | --gw-iftalabel-input-padding-top | 1.5rem |
| iftalabel.input.padding.bottom | {form.field.padding.y} | --gw-iftalabel-input-padding-bottom | 0.5rem |
| shortcuts.cta.padding.x | {space.0,5} | --gw-shortcuts-cta-padding-x | 0.5rem |
| shortcuts.cta.padding.y | {space.0,125} | --gw-shortcuts-cta-padding-y | 0.125rem |
BorderRadius Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| border.radius.none | 0 | --gw-border-radius-none | 0 |
| border.radius.xs | 2 | --gw-border-radius-xs | 2 |
| border.radius.sm | 4 | --gw-border-radius-sm | 4 |
| border.radius.md | 8 | --gw-border-radius-md | 8 |
| border.radius.lg | 12 | --gw-border-radius-lg | 12 |
| border.radius.xl-circle | 3rem | --gw-border-radius-xl-circle | 3rem |
| border.radius.xxl-circle | 9999px | --gw-border-radius-xxl-circle | 9999px |
| form.field.border.radius | {default.border.radius} | --gw-form-field-border-radius | 0 |
| content.border.radius | {default.border.radius} | --gw-content-border-radius | 0 |
| default.border.radius | {border.radius.none} | --gw-default-border-radius | 0 |
| list.option.border.radius | {default.border.radius} | --gw-list-option-border-radius | 0 |
| sidenav.menuitem.border.radius | {default.border.radius} | --gw-sidenav-menuitem-border-radius | 0 |
| overlay.select.border.radius | {default.border.radius} | --gw-overlay-select-border-radius | 0 |
| overlay.popover.border.radius | {default.border.radius} | --gw-overlay-popover-border-radius | 0 |
| overlay.modal.border.radius | {default.border.radius} | --gw-overlay-modal-border-radius | 0 |
| inputtext.border.radius | {default.border.radius} | --gw-inputtext-border-radius | 0 |
| panel.border.radius | {content.border.radius} | --gw-panel-border-radius | 0 |
| panel.header.border.radius | 0 | --gw-panel-header-border-radius | 0 |
| button.border.radius | {form.field.border.radius} | --gw-button-border-radius | 0 |
| button.rounded.border.radius | 2rem | --gw-button-rounded-border-radius | 2rem |
| toggleswitch.border.radius | 30px | --gw-toggleswitch-border-radius | 30px |
| toggleswitch.handle.border.radius | {toggleswitch.handle.size}/2 | --gw-toggleswitch-handle-border-radius | 0.375rem |
| floatlabel.on.border.radius | {border.radius.xs} | --gw-floatlabel-on-border-radius | 2 |
| checkbox.border.radius | {default.border.radius} | --gw-checkbox-border-radius | 0 |
| autocomplete.border.radius | {form.field.border.radius} | --gw-autocomplete-border-radius | 0 |
| autocomplete.overlay.border.radius | {overlay.select.border.radius} | --gw-autocomplete-overlay-border-radius | 0 |
| autocomplete.option.border.radius | {list.option.border.radius} | --gw-autocomplete-option-border-radius | 0 |
| autocomplete.dropdown.border.radius | {form.field.border.radius} | --gw-autocomplete-dropdown-border-radius | 0 |
| autocomplete.chip.border.radius | {border.radius.sm} | --gw-autocomplete-chip-border-radius | 4 |
| autocomplete.figma.multiple.border.radius | 0 | --gw-autocomplete-figma-multiple-border-radius | 0 |
| datepicker.border.radius | {form.field.border.radius} | --gw-datepicker-border-radius | 0 |
| datepicker.panel.border.radius | {content.border.radius} | --gw-datepicker-panel-border-radius | 0 |
| datepicker.dropdown.border.radius | {form.field.border.radius} | --gw-datepicker-dropdown-border-radius | 0 |
| datepicker.select.month.border.radius | {content.border.radius} | --gw-datepicker-select-month-border-radius | 0 |
| datepicker.select.year.border.radius | {content.border.radius} | --gw-datepicker-select-year-border-radius | 0 |
| datepicker.date.border.radius | {datepicker.date.width} / 2 | --gw-datepicker-date-border-radius | 1rem |
| datepicker.month.border.radius | {content.border.radius} | --gw-datepicker-month-border-radius | 0 |
| datepicker.year.border.radius | {content.border.radius} | --gw-datepicker-year-border-radius | 0 |
| card.border.radius | {border.radius.xl-circle} | --gw-card-border-radius | 3rem |
| dialog.border.radius | {overlay.modal.border.radius} | --gw-dialog-border-radius | 0 |
| drawer.border.radius | {overlay.modal.border.radius} | --gw-drawer-border-radius | 0 |
| avatar.border.radius | {content.border.radius} | --gw-avatar-border-radius | 0 |
| avatar.figma.circle.border.radius | {avatar.width} / 2 | --gw-avatar-figma-circle-border-radius | 1rem |
| avatar.figma.circle.lg.border.radius | {avatar.lg.width} / 2 | --gw-avatar-figma-circle-lg-border-radius | 1.5rem |
| avatar.figma.circle.xl.border.radius | {avatar.xl.width} / 2 | --gw-avatar-figma-circle-xl-border-radius | 2rem |
| badge.border.radius | {border.radius.xs} | --gw-badge-border-radius | 2 |
| chip.border.radius | 16px | --gw-chip-border-radius | 16px |
| progressbar.border.radius | {content.border.radius} | --gw-progressbar-border-radius | 0 |
| message.border.radius | {content.border.radius} | --gw-message-border-radius | 0 |
| message.close.button.border.radius | {default.border.radius} | --gw-message-close-button-border-radius | 0 |
| tag.border.radius | {content.border.radius} | --gw-tag-border-radius | 0 |
| tag.rounded.border.radius | {border.radius.xl-circle} | --gw-tag-rounded-border-radius | 3rem |
| skeleton.border.radius | {content.border.radius} | --gw-skeleton-border-radius | 0 |
| breadcrumb.item.border.radius | {content.border.radius} | --gw-breadcrumb-item-border-radius | 0 |
| cascadeselect.border.radius | {form.field.border.radius} | --gw-cascadeselect-border-radius | 0 |
| cascadeselect.overlay.border.radius | {overlay.select.border.radius} | --gw-cascadeselect-overlay-border-radius | 0 |
| cascadeselect.option.border.radius | {list.option.border.radius} | --gw-cascadeselect-option-border-radius | 0 |
| colorpicker.preview.border.radius | {form.field.border.radius} | --gw-colorpicker-preview-border-radius | 0 |
| colorpicker.panel.border.radius | {overlay.popover.border.radius} | --gw-colorpicker-panel-border-radius | 0 |
| select.border.radius | {form.field.border.radius} | --gw-select-border-radius | 0 |
| select.overlay.border.radius | {overlay.select.border.radius} | --gw-select-overlay-border-radius | 0 |
| select.option.border.radius | {list.option.border.radius} | --gw-select-option-border-radius | 0 |
| editor.toolbar.border.radius | {content.border.radius} | --gw-editor-toolbar-border-radius | 0 |
| editor.overlay.border.radius | {overlay.select.border.radius} | --gw-editor-overlay-border-radius | 0 |
| editor.overlay.option.border.radius | {list.option.border.radius} | --gw-editor-overlay-option-border-radius | 0 |
| editor.content.border.radius | {content.border.radius} | --gw-editor-content-border-radius | 0 |
| inputgroup.addon.border.radius | {form.field.border.radius} | --gw-inputgroup-addon-border-radius | 0 |
| textarea.border.radius | {form.field.border.radius} | --gw-textarea-border-radius | 0 |
| inputnumber.button.border.radius | {form.field.border.radius} | --gw-inputnumber-button-border-radius | 0 |
| listbox.border.radius | {form.field.border.radius} | --gw-listbox-border-radius | 0 |
| listbox.option.border.radius | {list.option.border.radius} | --gw-listbox-option-border-radius | 0 |
| multiselect.border.radius | {form.field.border.radius} | --gw-multiselect-border-radius | 0 |
| multiselect.overlay.border.radius | {overlay.select.border.radius} | --gw-multiselect-overlay-border-radius | 0 |
| multiselect.option.border.radius | {list.option.border.radius} | --gw-multiselect-option-border-radius | 0 |
| multiselect.chip.border.radius | {border.radius.sm} | --gw-multiselect-chip-border-radius | 4 |
| password.meter.border.radius | {content.border.radius} | --gw-password-meter-border-radius | 0 |
| password.overlay.border.radius | {overlay.popover.border.radius} | --gw-password-overlay-border-radius | 0 |
| slider.track.border.radius | {content.border.radius} | --gw-slider-track-border-radius | 0 |
| slider.handle.border.radius | {slider.handle.width} / 2 | --gw-slider-handle-border-radius | 10px |
| slider.handle.content.border.radius | {slider.handle.content.width} / 2 | --gw-slider-handle-content-border-radius | 8px |
| togglebutton.border.radius | {content.border.radius} | --gw-togglebutton-border-radius | 0 |
| togglebutton.content.border.radius | {content.border.radius} | --gw-togglebutton-content-border-radius | 0 |
| selectbutton.border.radius | {form.field.border.radius} | --gw-selectbutton-border-radius | 0 |
| treeselect.border.radius | {form.field.border.radius} | --gw-treeselect-border-radius | 0 |
| treeselect.overlay.border.radius | {overlay.select.border.radius} | --gw-treeselect-overlay-border-radius | 0 |
| treeselect.chip.border.radius | {border.radius.sm} | --gw-treeselect-chip-border-radius | 4 |
| dataview.border.radius | 0 | --gw-dataview-border-radius | 0 |
| dataview.header.border.radius | 0 | --gw-dataview-header-border-radius | 0 |
| dataview.content.border.radius | 0 | --gw-dataview-content-border-radius | 0 |
| dataview.footer.border.radius | 0 | --gw-dataview-footer-border-radius | 0 |
| accordion.header.border.radius | 0 | --gw-accordion-header-border-radius | 0 |
| accordion.header.first.top.border.radius | {content.border.radius} | --gw-accordion-header-first-top-border-radius | 0 |
| accordion.header.last.bottom.border.radius | {content.border.radius} | --gw-accordion-header-last-bottom-border-radius | 0 |
| accordion.header.last.active.bottom.border.radius | 0 | --gw-accordion-header-last-active-bottom-border-radius | 0 |
| fieldset.border.radius | {content.border.radius} | --gw-fieldset-border-radius | 0 |
| fieldset.legend.border.radius | {content.border.radius} | --gw-fieldset-legend-border-radius | 0 |
| splitter.handle.border.radius | {content.border.radius} | --gw-splitter-handle-border-radius | 0 |
| scrollpanel.bar.border.radius | {border.radius.sm} | --gw-scrollpanel-bar-border-radius | 4 |
| toolbar.border.radius | {content.border.radius} | --gw-toolbar-border-radius | 0 |
| confirmpopup.border.radius | {overlay.popover.border.radius} | --gw-confirmpopup-border-radius | 0 |
| tooltip.border.radius | {overlay.popover.border.radius} | --gw-tooltip-border-radius | 0 |
| contextmenu.border.radius | {content.border.radius} | --gw-contextmenu-border-radius | 0 |
| contextmenu.item.border.radius | {sidenav.menuitem.border.radius} | --gw-contextmenu-item-border-radius | 0 |
| dock.border.radius | {border.radius.xl-circle} | --gw-dock-border-radius | 3rem |
| dock.item.border.radius | {content.border.radius} | --gw-dock-item-border-radius | 0 |
| megamenu.border.radius | {content.border.radius} | --gw-megamenu-border-radius | 0 |
| megamenu.base.item.border.radius | {content.border.radius} | --gw-megamenu-base-item-border-radius | 0 |
| megamenu.item.border.radius | {sidenav.menuitem.border.radius} | --gw-megamenu-item-border-radius | 0 |
| megamenu.overlay.border.radius | {content.border.radius} | --gw-megamenu-overlay-border-radius | 0 |
| megamenu.mobile.button.border.radius | {megamenu.mobile.button.size} / 2 | --gw-megamenu-mobile-button-border-radius | 0.875rem |
| menu.border.radius | {content.border.radius} | --gw-menu-border-radius | 0 |
| menu.item.border.radius | {sidenav.menuitem.border.radius} | --gw-menu-item-border-radius | 0 |
| menubar.border.radius | {content.border.radius} | --gw-menubar-border-radius | 0 |
| menubar.base.item.border.radius | {content.border.radius} | --gw-menubar-base-item-border-radius | 0 |
| menubar.item.border.radius | {sidenav.menuitem.border.radius} | --gw-menubar-item-border-radius | 0 |
| menubar.submenu.border.radius | {content.border.radius} | --gw-menubar-submenu-border-radius | 0 |
| menubar.mobile.button.border.radius | {menubar.mobile.button.size} / 2 | --gw-menubar-mobile-button-border-radius | 0.875rem |
| panelmenu.panel.border.radius | {content.border.radius} | --gw-panelmenu-panel-border-radius | 0 |
| panelmenu.panel.first.top.border.radius | {content.border.radius} | --gw-panelmenu-panel-first-top-border-radius | 0 |
| panelmenu.panel.last.bottom.border.radius | {content.border.radius} | --gw-panelmenu-panel-last-bottom-border-radius | 0 |
| panelmenu.item.border.radius | {content.border.radius} | --gw-panelmenu-item-border-radius | 0 |
| tieredmenu.border.radius | {content.border.radius} | --gw-tieredmenu-border-radius | 0 |
| tieredmenu.item.border.radius | {sidenav.menuitem.border.radius} | --gw-tieredmenu-item-border-radius | 0 |
| organizationchart.node.border.radius | {content.border.radius} | --gw-organizationchart-node-border-radius | 0 |
| organizationchart.node.toggle.button.border.radius | {organizationchart.node.toggle.button.size} / 2 | --gw-organizationchart-node-toggle-button-border-radius | 0.75rem |
| organizationchart.connector.border.radius | {content.border.radius} | --gw-organizationchart-connector-border-radius | 0 |
| paginator.border.radius | {content.border.radius} | --gw-paginator-border-radius | 0 |
| paginator.nav.button.border.radius | {paginator.nav.button.width} / 2 | --gw-paginator-nav-button-border-radius | 1.25rem |
| datatable.row.toggle.button.border.radius | {datatable.row.toggle.button.size} / 2 | --gw-datatable-row-toggle-button-border-radius | 0.75rem |
| datatable.filter.overlay.select.border.radius | {overlay.select.border.radius} | --gw-datatable-filter-overlay-select-border-radius | 0 |
| datatable.filter.overlay.popover.border.radius | {overlay.popover.border.radius} | --gw-datatable-filter-overlay-popover-border-radius | 0 |
| datatable.filter.constraint.border.radius | {list.option.border.radius} | --gw-datatable-filter-constraint-border-radius | 0 |
| timeline.event.marker.border.radius | {timeline.event.marker.size} / 2 | --gw-timeline-event-marker-border-radius | 0.5625rem |
| timeline.event.marker.content.border.radius | {timeline.event.marker.content.size} / 2 | --gw-timeline-event-marker-content-border-radius | 0.1875rem |
| tree.node.border.radius | {content.border.radius} | --gw-tree-node-border-radius | 0 |
| tree.node.toggle.button.border.radius | {tree.node.toggle.button.size} / 2 | --gw-tree-node-toggle-button-border-radius | 0.875rem |
| carousel.indicator.border.radius | {content.border.radius} | --gw-carousel-indicator-border-radius | 0 |
| image.toolbar.border.radius | 30px | --gw-image-toolbar-border-radius | 30px |
| image.action.border.radius | {image.action.size} / 2 | --gw-image-action-border-radius | 1.5rem |
| treetable.node.toggle.button.border.radius | {treetable.node.toggle.button.size} / 2 | --gw-treetable-node-toggle-button-border-radius | 0.875rem |
| toast.border.radius | {default.border.radius} | --gw-toast-border-radius | 0 |
| toast.close.button.border.radius | {toast.close.button.width} / 2 | --gw-toast-close-button-border-radius | 0.875rem |
| galleria.border.radius | {content.border.radius} | --gw-galleria-border-radius | 0 |
| galleria.nav.button.prev.border.radius | {galleria.nav.button.size} / 2 | --gw-galleria-nav-button-prev-border-radius | 1.5rem |
| galleria.nav.button.next.border.radius | {galleria.nav.button.size} / 2 | --gw-galleria-nav-button-next-border-radius | 1.5rem |
| galleria.thumbnail.nav.button.border.radius | {content.border.radius} | --gw-galleria-thumbnail-nav-button-border-radius | 0 |
| galleria.indicator.button.border.radius | {galleria.indicator.button.width} / 2 | --gw-galleria-indicator-button-border-radius | 0.5rem |
| galleria.close.button.border.radius | {galleria.close.button.size} / 2 | --gw-galleria-close-button-border-radius | 1.5rem |
| popover.border.radius | {overlay.popover.border.radius} | --gw-popover-border-radius | 0 |
| fileupload.border.radius | {content.border.radius} | --gw-fileupload-border-radius | 0 |
| fileupload.header.border.radius | 0 | --gw-fileupload-header-border-radius | 0 |
| splitbutton.internal.border.radius | {border.radius.none} | --gw-splitbutton-internal-border-radius | 0 |
| splitbutton.rounded.border.radius | 2rem | --gw-splitbutton-rounded-border-radius | 2rem |
| stepper.step.header.border.radius | {content.border.radius} | --gw-stepper-step-header-border-radius | 0 |
| stepper.step.number.border.radius | {stepper.step.number.size} / 2 | --gw-stepper-step-number-border-radius | 1rem |
| blockui.border.radius | {content.border.radius} | --gw-blockui-border-radius | 0 |
| inplace.border.radius | {content.border.radius} | --gw-inplace-border-radius | 0 |
| metergroup.border.radius | {content.border.radius} | --gw-metergroup-border-radius | 0 |
| terminal.border.radius | {form.field.border.radius} | --gw-terminal-border-radius | 0 |
| imagecompare.handle.border.radius | {imagecompare.handle.size} / 2 | --gw-imagecompare-handle-border-radius | 7.5px |
| imagecompare.figma.handle.hover.border.radius | {imagecompare.handle.hover.size} / 2 | --gw-imagecompare-figma-handle-hover-border-radius | 15px |
Color Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| color.blue.50 | hsl(240, 98%, 98%) | --gw-color-blue-50 | hsl(240, 98%, 98%) |
| color.blue.100 | hsl(240, 98%, 96%) | --gw-color-blue-100 | hsl(240, 98%, 96%) |
| color.blue.200 | hsl(239, 100%, 85%) | --gw-color-blue-200 | hsl(239, 100%, 85%) |
| color.blue.300 | hsl(232, 100%, 68%) | --gw-color-blue-300 | hsl(232, 100%, 68%) |
| color.blue.400 | hsl(232, 100%, 59%) | --gw-color-blue-400 | hsl(232, 100%, 59%) |
| color.blue.500 | hsl(233, 100%, 50%) | --gw-color-blue-500 | hsl(233, 100%, 50%) |
| color.blue.600 | hsl(232, 98%, 41%) | --gw-color-blue-600 | hsl(232, 98%, 41%) |
| color.blue.700 | hsl(231, 98%, 32%) | --gw-color-blue-700 | hsl(231, 98%, 32%) |
| color.blue.800 | hsl(231, 95%, 24%) | --gw-color-blue-800 | hsl(231, 95%, 24%) |
| color.blue.900 | hsl(231, 95%, 15%) | --gw-color-blue-900 | hsl(231, 95%, 15%) |
| color.navy-blue.50 | hsl(251, 73%, 98%) | --gw-color-navy-blue-50 | hsl(251, 73%, 98%) |
| color.navy-blue.100 | hsl(254, 76%, 92%) | --gw-color-navy-blue-100 | hsl(254, 76%, 92%) |
| color.navy-blue.200 | hsl(271, 65%, 80%) | --gw-color-navy-blue-200 | hsl(271, 65%, 80%) |
| color.navy-blue.300 | hsl(265, 68%, 65%) | --gw-color-navy-blue-300 | hsl(265, 68%, 65%) |
| color.navy-blue.400 | hsl(260, 70%, 55%) | --gw-color-navy-blue-400 | hsl(260, 70%, 55%) |
| color.navy-blue.500 | hsl(254, 72%, 48%) | --gw-color-navy-blue-500 | hsl(254, 72%, 48%) |
| color.navy-blue.600 | hsl(254, 73%, 40%) | --gw-color-navy-blue-600 | hsl(254, 73%, 40%) |
| color.navy-blue.700 | hsl(254, 73%, 32%) | --gw-color-navy-blue-700 | hsl(254, 73%, 32%) |
| color.navy-blue.800 | hsl(254, 73%, 22%) | --gw-color-navy-blue-800 | hsl(254, 73%, 22%) |
| color.navy-blue.900 | hsl(253, 73%, 15%) | --gw-color-navy-blue-900 | hsl(253, 73%, 15%) |
| color.pink.50 | hsl(340, 60%, 99%) | --gw-color-pink-50 | hsl(340, 60%, 99%) |
| color.pink.100 | hsl(333, 73%, 97%) | --gw-color-pink-100 | hsl(333, 73%, 97%) |
| color.pink.200 | hsl(336, 73%, 90%) | --gw-color-pink-200 | hsl(336, 73%, 90%) |
| color.pink.300 | hsl(335, 72%, 75%) | --gw-color-pink-300 | hsl(335, 72%, 75%) |
| color.pink.400 | hsl(335, 72%, 65%) | --gw-color-pink-400 | hsl(335, 72%, 65%) |
| color.pink.500 | hsl(335, 73%, 54%) | --gw-color-pink-500 | hsl(335, 73%, 54%) |
| color.pink.600 | hsl(332, 80%, 45%) | --gw-color-pink-600 | hsl(332, 80%, 45%) |
| color.pink.700 | hsl(333, 77%, 36%) | --gw-color-pink-700 | hsl(333, 77%, 36%) |
| color.pink.800 | hsl(333, 76%, 27%) | --gw-color-pink-800 | hsl(333, 76%, 27%) |
| color.pink.900 | hsl(334, 73%, 19%) | --gw-color-pink-900 | hsl(334, 73%, 19%) |
| color.teal.50 | hsl(180, 50%, 98%) | --gw-color-teal-50 | hsl(180, 50%, 98%) |
| color.teal.100 | hsl(175, 50%, 95%) | --gw-color-teal-100 | hsl(175, 50%, 95%) |
| color.teal.200 | hsl(175, 40%, 89%) | --gw-color-teal-200 | hsl(175, 40%, 89%) |
| color.teal.300 | hsl(175, 35%, 75%) | --gw-color-teal-300 | hsl(175, 35%, 75%) |
| color.teal.400 | hsl(175, 40%, 65%) | --gw-color-teal-400 | hsl(175, 40%, 65%) |
| color.teal.500 | hsl(175, 50%, 40%) | --gw-color-teal-500 | hsl(175, 50%, 40%) |
| color.teal.600 | hsl(175, 50%, 30%) | --gw-color-teal-600 | hsl(175, 50%, 30%) |
| color.teal.700 | hsl(175, 50%, 23%) | --gw-color-teal-700 | hsl(175, 50%, 23%) |
| color.teal.800 | hsl(175, 50%, 18%) | --gw-color-teal-800 | hsl(175, 50%, 18%) |
| color.teal.900 | hsl(174, 50%, 12%) | --gw-color-teal-900 | hsl(174, 50%, 12%) |
| color.steel.50 | hsl(213, 40%, 98%) | --gw-color-steel-50 | hsl(213, 40%, 98%) |
| color.steel.100 | hsl(213, 36%, 94%) | --gw-color-steel-100 | hsl(213, 36%, 94%) |
| color.steel.200 | hsl(213, 36%, 87%) | --gw-color-steel-200 | hsl(213, 36%, 87%) |
| color.steel.300 | hsl(211, 37%, 77%) | --gw-color-steel-300 | hsl(211, 37%, 77%) |
| color.steel.400 | hsl(210, 36%, 65%) | --gw-color-steel-400 | hsl(210, 36%, 65%) |
| color.steel.500 | hsl(211, 34%, 45%) | --gw-color-steel-500 | hsl(211, 34%, 45%) |
| color.steel.600 | hsl(211, 37%, 36%) | --gw-color-steel-600 | hsl(211, 37%, 36%) |
| color.steel.700 | hsl(211, 37%, 28%) | --gw-color-steel-700 | hsl(211, 37%, 28%) |
| color.steel.800 | hsl(211, 37%, 20%) | --gw-color-steel-800 | hsl(211, 37%, 20%) |
| color.steel.900 | hsl(208, 86%, 14%) | --gw-color-steel-900 | hsl(208, 86%, 14%) |
| color.steel.900-alpha-50 | #0B121880 | --gw-color-steel-900-alpha-50 | #0B121880 |
| color.steel.900-alpha-5 | #0B12180D | --gw-color-steel-900-alpha-5 | #0B12180D |
| color.steel.0-alpha-5 | #FFFFFF0D | --gw-color-steel-0-alpha-5 | #FFFFFF0D |
| color.steel.0-alpha-10 | #FFFFFF1A | --gw-color-steel-0-alpha-10 | #FFFFFF1A |
| color.steel.50-alpha-50 | #F8FAFC80 | --gw-color-steel-50-alpha-50 | #F8FAFC80 |
| color.grey.0 | hsl(0, 0%, 100%) | --gw-color-grey-0 | hsl(0, 0%, 100%) |
| color.grey.50 | hsl(210, 20%, 98%) | --gw-color-grey-50 | hsl(210, 20%, 98%) |
| color.grey.100 | hsl(220, 14%, 95%) | --gw-color-grey-100 | hsl(220, 14%, 95%) |
| color.grey.200 | hsl(220, 13%, 91%) | --gw-color-grey-200 | hsl(220, 13%, 91%) |
| color.grey.300 | hsl(210, 14%, 83%) | --gw-color-grey-300 | hsl(210, 14%, 83%) |
| color.grey.400 | hsl(220, 11%, 65%) | --gw-color-grey-400 | hsl(220, 11%, 65%) |
| color.grey.500 | hsl(220, 9%, 46%) | --gw-color-grey-500 | hsl(220, 9%, 46%) |
| color.grey.600 | hsl(215, 14%, 34%) | --gw-color-grey-600 | hsl(215, 14%, 34%) |
| color.grey.700 | hsl(217, 19%, 27%) | --gw-color-grey-700 | hsl(217, 19%, 27%) |
| color.grey.800 | hsl(212, 28%, 14%) | --gw-color-grey-800 | hsl(212, 28%, 14%) |
| color.grey.900 | hsl(220, 40%, 7%) | --gw-color-grey-900 | hsl(220, 40%, 7%) |
| color.grey.0-alpha-5 | #F9FAFB0D | --gw-color-grey-0-alpha-5 | #F9FAFB0D |
| color.grey.0-alpha-10 | #F9FAFB1A | --gw-color-grey-0-alpha-10 | #F9FAFB1A |
| color.grey.0-alpha-15 | #F9FAFB26 | --gw-color-grey-0-alpha-15 | #F9FAFB26 |
| color.grey.50-alpha-10 | #F0F2F514 | --gw-color-grey-50-alpha-10 | #F0F2F514 |
| color.grey.50-alpha-50 | #F9FAFB80 | --gw-color-grey-50-alpha-50 | #F9FAFB80 |
| color.grey.900-alpha-5 | #111B270D | --gw-color-grey-900-alpha-5 | #111B270D |
| color.grey.900-alpha-10 | #111B271A | --gw-color-grey-900-alpha-10 | #111B271A |
| color.grey.900-alpha-15 | #111B2726 | --gw-color-grey-900-alpha-15 | #111B2726 |
| color.grey.900-alpha-50 | #111B2780 | --gw-color-grey-900-alpha-50 | #111B2780 |
| color.red.100 | hsl(0, 60%, 97%) | --gw-color-red-100 | hsl(0, 60%, 97%) |
| color.red.200 | hsl(0, 60%, 94%) | --gw-color-red-200 | hsl(0, 60%, 94%) |
| color.red.300 | hsl(0, 60%, 89%) | --gw-color-red-300 | hsl(0, 60%, 89%) |
| color.red.400 | hsl(0, 60%, 78%) | --gw-color-red-400 | hsl(0, 60%, 78%) |
| color.red.500 | hsl(0, 60%, 68%) | --gw-color-red-500 | hsl(0, 60%, 68%) |
| color.red.600 | hsl(0, 60%, 51%) | --gw-color-red-600 | hsl(0, 60%, 51%) |
| color.red.700 | hsl(0, 60%, 42%) | --gw-color-red-700 | hsl(0, 60%, 42%) |
| color.red.800 | hsl(0, 60%, 35%) | --gw-color-red-800 | hsl(0, 60%, 35%) |
| color.red.900 | hsl(0, 60%, 15%) | --gw-color-red-900 | hsl(0, 60%, 15%) |
| color.yellow.100 | hsl(48, 90%, 98%) | --gw-color-yellow-100 | hsl(48, 90%, 98%) |
| color.yellow.200 | hsl(48, 65%, 94%) | --gw-color-yellow-200 | hsl(48, 65%, 94%) |
| color.yellow.300 | hsl(48, 65%, 89%) | --gw-color-yellow-300 | hsl(48, 65%, 89%) |
| color.yellow.400 | hsl(48, 65%, 78%) | --gw-color-yellow-400 | hsl(48, 65%, 78%) |
| color.yellow.500 | hsl(40, 60%, 65%) | --gw-color-yellow-500 | hsl(40, 60%, 65%) |
| color.yellow.600 | hsl(40, 60%, 44%) | --gw-color-yellow-600 | hsl(40, 60%, 44%) |
| color.yellow.700 | hsl(40, 60%, 36%) | --gw-color-yellow-700 | hsl(40, 60%, 36%) |
| color.yellow.800 | hsl(40, 60%, 25%) | --gw-color-yellow-800 | hsl(40, 60%, 25%) |
| color.yellow.900 | hsl(40, 90%, 15%) | --gw-color-yellow-900 | hsl(40, 90%, 15%) |
| color.green.100 | {color.teal.50} | --gw-color-green-100 | hsl(180, 50%, 98%) |
| color.green.200 | {color.teal.100} | --gw-color-green-200 | hsl(175, 50%, 95%) |
| color.green.300 | {color.teal.300} | --gw-color-green-300 | hsl(175, 35%, 75%) |
| color.green.400 | {color.teal.400} | --gw-color-green-400 | hsl(175, 40%, 65%) |
| color.green.500 | {color.teal.500} | --gw-color-green-500 | hsl(175, 50%, 40%) |
| color.green.600 | {color.teal.600} | --gw-color-green-600 | hsl(175, 50%, 30%) |
| color.green.700 | {color.teal.700} | --gw-color-green-700 | hsl(175, 50%, 23%) |
| color.green.800 | {color.teal.800} | --gw-color-green-800 | hsl(175, 50%, 18%) |
| color.green.900 | {color.teal.900} | --gw-color-green-900 | hsl(174, 50%, 12%) |
| primary.50 | {color.blue.50} | --gw-primary-50 | hsl(240, 98%, 98%) |
| primary.100 | {color.blue.100} | --gw-primary-100 | hsl(240, 98%, 96%) |
| primary.200 | {color.blue.200} | --gw-primary-200 | hsl(239, 100%, 85%) |
| primary.300 | {color.blue.300} | --gw-primary-300 | hsl(232, 100%, 68%) |
| primary.400 | {color.blue.400} | --gw-primary-400 | hsl(232, 100%, 59%) |
| primary.500 | {color.blue.500} | --gw-primary-500 | hsl(233, 100%, 50%) |
| primary.600 | {color.blue.600} | --gw-primary-600 | hsl(232, 98%, 41%) |
| primary.700 | {color.blue.700} | --gw-primary-700 | hsl(231, 98%, 32%) |
| primary.800 | {color.blue.800} | --gw-primary-800 | hsl(231, 95%, 24%) |
| primary.900 | {color.blue.900} | --gw-primary-900 | hsl(231, 95%, 15%) |
| secondary.50 | {color.steel.50} | --gw-secondary-50 | hsl(213, 40%, 98%) |
| secondary.100 | {color.steel.100} | --gw-secondary-100 | hsl(213, 36%, 94%) |
| secondary.200 | {color.steel.200} | --gw-secondary-200 | hsl(213, 36%, 87%) |
| secondary.300 | {color.steel.300} | --gw-secondary-300 | hsl(211, 37%, 77%) |
| secondary.400 | {color.steel.400} | --gw-secondary-400 | hsl(210, 36%, 65%) |
| secondary.500 | {color.steel.500} | --gw-secondary-500 | hsl(211, 34%, 45%) |
| secondary.600 | {color.steel.600} | --gw-secondary-600 | hsl(211, 37%, 36%) |
| secondary.700 | {color.steel.700} | --gw-secondary-700 | hsl(211, 37%, 28%) |
| secondary.800 | {color.steel.800} | --gw-secondary-800 | hsl(211, 37%, 20%) |
| secondary.900 | {color.steel.900} | --gw-secondary-900 | hsl(208, 86%, 14%) |
| success.100 | {color.green.100} | --gw-success-100 | hsl(180, 50%, 98%) |
| success.200 | {color.green.200} | --gw-success-200 | hsl(175, 50%, 95%) |
| success.300 | {color.green.300} | --gw-success-300 | hsl(175, 35%, 75%) |
| success.400 | {color.green.400} | --gw-success-400 | hsl(175, 40%, 65%) |
| success.500 | {color.green.500} | --gw-success-500 | hsl(175, 50%, 40%) |
| success.600 | {color.green.600} | --gw-success-600 | hsl(175, 50%, 30%) |
| success.700 | {color.green.700} | --gw-success-700 | hsl(175, 50%, 23%) |
| success.800 | {color.green.800} | --gw-success-800 | hsl(175, 50%, 18%) |
| success.900 | {color.green.900} | --gw-success-900 | hsl(174, 50%, 12%) |
| accent.50 | {color.pink.50} | --gw-accent-50 | hsl(340, 60%, 99%) |
| accent.100 | {color.pink.100} | --gw-accent-100 | hsl(333, 73%, 97%) |
| accent.200 | {color.pink.200} | --gw-accent-200 | hsl(336, 73%, 90%) |
| accent.300 | {color.pink.300} | --gw-accent-300 | hsl(335, 72%, 75%) |
| accent.400 | {color.pink.400} | --gw-accent-400 | hsl(335, 72%, 65%) |
| accent.500 | {color.pink.500} | --gw-accent-500 | hsl(335, 73%, 54%) |
| accent.600 | {color.pink.600} | --gw-accent-600 | hsl(332, 80%, 45%) |
| accent.700 | {color.pink.700} | --gw-accent-700 | hsl(333, 77%, 36%) |
| accent.800 | {color.pink.800} | --gw-accent-800 | hsl(333, 76%, 27%) |
| accent.900 | {color.pink.900} | --gw-accent-900 | hsl(334, 73%, 19%) |
| warning.100 | {color.yellow.100} | --gw-warning-100 | hsl(48, 90%, 98%) |
| warning.200 | {color.yellow.200} | --gw-warning-200 | hsl(48, 65%, 94%) |
| warning.300 | {color.yellow.300} | --gw-warning-300 | hsl(48, 65%, 89%) |
| warning.400 | {color.yellow.400} | --gw-warning-400 | hsl(48, 65%, 78%) |
| warning.500 | {color.yellow.500} | --gw-warning-500 | hsl(40, 60%, 65%) |
| warning.600 | {color.yellow.600} | --gw-warning-600 | hsl(40, 60%, 44%) |
| warning.700 | {color.yellow.700} | --gw-warning-700 | hsl(40, 60%, 36%) |
| warning.800 | {color.yellow.800} | --gw-warning-800 | hsl(40, 60%, 25%) |
| warning.900 | {color.yellow.900} | --gw-warning-900 | hsl(40, 90%, 15%) |
| danger.100 | {color.red.100} | --gw-danger-100 | hsl(0, 60%, 97%) |
| danger.200 | {color.red.200} | --gw-danger-200 | hsl(0, 60%, 94%) |
| danger.300 | {color.red.300} | --gw-danger-300 | hsl(0, 60%, 89%) |
| danger.400 | {color.red.400} | --gw-danger-400 | hsl(0, 60%, 78%) |
| danger.500 | {color.red.500} | --gw-danger-500 | hsl(0, 60%, 68%) |
| danger.600 | {color.red.600} | --gw-danger-600 | hsl(0, 60%, 51%) |
| danger.700 | {color.red.700} | --gw-danger-700 | hsl(0, 60%, 42%) |
| danger.800 | {color.red.800} | --gw-danger-800 | hsl(0, 60%, 35%) |
| danger.900 | {color.red.900} | --gw-danger-900 | hsl(0, 60%, 15%) |
| info.100 | {color.steel.100} | --gw-info-100 | hsl(213, 36%, 94%) |
| info.200 | {color.steel.200} | --gw-info-200 | hsl(213, 36%, 87%) |
| info.300 | {color.steel.300} | --gw-info-300 | hsl(211, 37%, 77%) |
| info.400 | {color.steel.400} | --gw-info-400 | hsl(210, 36%, 65%) |
| info.500 | {color.steel.500} | --gw-info-500 | hsl(211, 34%, 45%) |
| info.600 | {color.steel.600} | --gw-info-600 | hsl(211, 37%, 36%) |
| info.700 | {color.steel.700} | --gw-info-700 | hsl(211, 37%, 28%) |
| info.800 | {color.steel.800} | --gw-info-800 | hsl(211, 37%, 20%) |
| info.900 | {color.steel.900} | --gw-info-900 | hsl(208, 86%, 14%) |
| neutral.0 | {color.grey.0} | --gw-neutral-0 | hsl(0, 0%, 100%) |
| neutral.50 | {color.grey.50} | --gw-neutral-50 | hsl(210, 20%, 98%) |
| neutral.100 | {color.grey.100} | --gw-neutral-100 | hsl(220, 14%, 95%) |
| neutral.200 | {color.grey.200} | --gw-neutral-200 | hsl(220, 13%, 91%) |
| neutral.300 | {color.grey.300} | --gw-neutral-300 | hsl(210, 14%, 83%) |
| neutral.400 | {color.grey.400} | --gw-neutral-400 | hsl(220, 11%, 65%) |
| neutral.500 | {color.grey.500} | --gw-neutral-500 | hsl(220, 9%, 46%) |
| neutral.600 | {color.grey.600} | --gw-neutral-600 | hsl(215, 14%, 34%) |
| neutral.700 | {color.grey.700} | --gw-neutral-700 | hsl(217, 19%, 27%) |
| neutral.800 | {color.grey.800} | --gw-neutral-800 | hsl(212, 28%, 14%) |
| neutral.900 | {color.grey.900} | --gw-neutral-900 | hsl(220, 40%, 7%) |
| neutral.shadow.0 | transparent | --gw-neutral-shadow-0 | transparent |
| neutral.shadow.10 | {color.grey.900-alpha-10} | --gw-neutral-shadow-10 | #111B271A |
| neutral.shadow.15 | {color.grey.900-alpha-15} | --gw-neutral-shadow-15 | #111B2726 |
| neutral.0-alpha-5 | {color.grey.0-alpha-5} | --gw-neutral-0-alpha-5 | #F9FAFB0D |
| neutral.0-alpha-10 | {color.grey.0-alpha-10} | --gw-neutral-0-alpha-10 | #F9FAFB1A |
| neutral.0-alpha-15 | {color.grey.0-alpha-15} | --gw-neutral-0-alpha-15 | #F9FAFB26 |
| neutral.50-alpha-50 | {color.grey.50-alpha-50} | --gw-neutral-50-alpha-50 | #F9FAFB80 |
| neutral.900-alpha-50 | {color.grey.900-alpha-50} | --gw-neutral-900-alpha-50 | #111B2780 |
| tertiary.100 | {color.teal.100} | --gw-tertiary-100 | hsl(175, 50%, 95%) |
| tertiary.200 | {color.teal.200} | --gw-tertiary-200 | hsl(175, 40%, 89%) |
| tertiary.300 | {color.teal.300} | --gw-tertiary-300 | hsl(175, 35%, 75%) |
| tertiary.400 | {color.teal.400} | --gw-tertiary-400 | hsl(175, 40%, 65%) |
| tertiary.500 | {color.teal.500} | --gw-tertiary-500 | hsl(175, 50%, 40%) |
| tertiary.600 | {color.teal.600} | --gw-tertiary-600 | hsl(175, 50%, 30%) |
| tertiary.700 | {color.teal.700} | --gw-tertiary-700 | hsl(175, 50%, 23%) |
| tertiary.800 | {color.teal.800} | --gw-tertiary-800 | hsl(175, 50%, 18%) |
| tertiary.900 | {color.teal.900} | --gw-tertiary-900 | hsl(174, 50%, 12%) |
| background.page | {neutral.0} | --gw-background-page | hsl(0, 0%, 100%) |
| background.highlighted | {primary.100} | --gw-background-highlighted | hsl(240, 98%, 96%) |
| background.header | {primary.50} | --gw-background-header | hsl(240, 98%, 98%) |
| background.raised | {primary.50} | --gw-background-raised | hsl(240, 98%, 98%) |
| background.surface-semitransparent | {neutral.50-alpha-50} | --gw-background-surface-semitransparent | #F9FAFB80 |
| background.elevated | {neutral.0} | --gw-background-elevated | hsl(0, 0%, 100%) |
| background.surface | {neutral.50} | --gw-background-surface | hsl(210, 20%, 98%) |
| background.brand | {primary.dark} | --gw-background-brand | hsl(231, 98%, 32%) |
| background.disabled | {neutral.200} | --gw-background-disabled | hsl(220, 13%, 91%) |
| background.subtle | {neutral.200} | --gw-background-subtle | hsl(220, 13%, 91%) |
| foreground.on-surface.brand | {primary.base} | --gw-foreground-on-surface-brand | hsl(232, 98%, 41%) |
| foreground.on-surface.primary | {primary.dark} | --gw-foreground-on-surface-primary | hsl(231, 98%, 32%) |
| foreground.on-surface.strong | {primary.dark} | --gw-foreground-on-surface-strong | hsl(231, 98%, 32%) |
| foreground.on-surface.accent | {accent.500} | --gw-foreground-on-surface-accent | hsl(335, 73%, 54%) |
| foreground.on-surface.default | {neutral.900} | --gw-foreground-on-surface-default | hsl(220, 40%, 7%) |
| foreground.on-surface.heading | {color.navy-blue.700} | --gw-foreground-on-surface-heading | hsl(254, 73%, 32%) |
| foreground.on-surface.secondary | {secondary.600} | --gw-foreground-on-surface-secondary | hsl(211, 37%, 36%) |
| foreground.on-surface.muted | {secondary.700} | --gw-foreground-on-surface-muted | hsl(211, 37%, 28%) |
| foreground.on-surface.subtle | {neutral.500} | --gw-foreground-on-surface-subtle | hsl(220, 9%, 46%) |
| foreground.on-surface.disabled | {neutral.300} | --gw-foreground-on-surface-disabled | hsl(210, 14%, 83%) |
| foreground.on-brand | {neutral.0} | --gw-foreground-on-brand | hsl(0, 0%, 100%) |
| foreground.link.idle | {primary.base} | --gw-foreground-link-idle | hsl(232, 98%, 41%) |
| foreground.link.hover | {primary.dark} | --gw-foreground-link-hover | hsl(231, 98%, 32%) |
| foreground.link.visited | {secondary.base} | --gw-foreground-link-visited | hsl(211, 37%, 36%) |
| foreground.link.disabled | {foreground.on-surface.disabled} | --gw-foreground-link-disabled | hsl(210, 14%, 83%) |
| foreground.visual.1-1 | {primary.500} | --gw-foreground-visual-1-1 | hsl(233, 100%, 50%) |
| foreground.visual.1-2 | {primary.300} | --gw-foreground-visual-1-2 | hsl(232, 100%, 68%) |
| foreground.visual.1-3 | {primary.200} | --gw-foreground-visual-1-3 | hsl(239, 100%, 85%) |
| foreground.visual.1-4 | {primary.100} | --gw-foreground-visual-1-4 | hsl(240, 98%, 96%) |
| foreground.visual.4-1 | {secondary-blue.500} | --gw-foreground-visual-4-1 | hsl(254, 72%, 48%) |
| foreground.visual.4-2 | {secondary-blue.300} | --gw-foreground-visual-4-2 | hsl(265, 68%, 65%) |
| foreground.visual.4-3 | {secondary-blue.200} | --gw-foreground-visual-4-3 | hsl(271, 65%, 80%) |
| foreground.visual.4-4 | {secondary-blue.100} | --gw-foreground-visual-4-4 | hsl(254, 76%, 92%) |
| foreground.visual.3-1 | {success.500} | --gw-foreground-visual-3-1 | hsl(175, 50%, 40%) |
| foreground.visual.3-2 | {success.400} | --gw-foreground-visual-3-2 | hsl(175, 40%, 65%) |
| foreground.visual.3-3 | {success.200} | --gw-foreground-visual-3-3 | hsl(175, 50%, 95%) |
| foreground.visual.3-4 | {success.200} | --gw-foreground-visual-3-4 | hsl(175, 50%, 95%) |
| foreground.visual.2-1 | {accent.500} | --gw-foreground-visual-2-1 | hsl(335, 73%, 54%) |
| foreground.visual.2-2 | {accent.300} | --gw-foreground-visual-2-2 | hsl(335, 72%, 75%) |
| foreground.visual.2-3 | {accent.200} | --gw-foreground-visual-2-3 | hsl(336, 73%, 90%) |
| foreground.visual.2-4 | {accent.100} | --gw-foreground-visual-2-4 | hsl(333, 73%, 97%) |
| foreground.visual.neutral-1 | {neutral.500} | --gw-foreground-visual-neutral-1 | hsl(220, 9%, 46%) |
| foreground.visual.neutral-2 | {neutral.400} | --gw-foreground-visual-neutral-2 | hsl(220, 11%, 65%) |
| foreground.visual.neutral-3 | {neutral.300} | --gw-foreground-visual-neutral-3 | hsl(210, 14%, 83%) |
| foreground.visual.neutral-4 | {neutral.100} | --gw-foreground-visual-neutral-4 | hsl(220, 14%, 95%) |
| default.border.color | {neutral.200} | --gw-default-border-color | hsl(220, 13%, 91%) |
| border.color.default | {neutral.200} | --gw-border-color-default | hsl(220, 13%, 91%) |
| border.color.subtle | {neutral.100} | --gw-border-color-subtle | hsl(220, 14%, 95%) |
| border.color.focus | {secondary.light} | --gw-border-color-focus | hsl(211, 34%, 45%) |
| border.color.focus-ring | {foreground.on-surface.brand} | --gw-border-color-focus-ring | hsl(232, 98%, 41%) |
| border.color.disabled | {neutral.200} | --gw-border-color-disabled | hsl(220, 13%, 91%) |
| secondary-blue.50 | {color.navy-blue.50} | --gw-secondary-blue-50 | hsl(251, 73%, 98%) |
| secondary-blue.100 | {color.navy-blue.100} | --gw-secondary-blue-100 | hsl(254, 76%, 92%) |
| secondary-blue.200 | {color.navy-blue.200} | --gw-secondary-blue-200 | hsl(271, 65%, 80%) |
| secondary-blue.300 | {color.navy-blue.300} | --gw-secondary-blue-300 | hsl(265, 68%, 65%) |
| secondary-blue.400 | {color.navy-blue.400} | --gw-secondary-blue-400 | hsl(260, 70%, 55%) |
| secondary-blue.500 | {color.navy-blue.500} | --gw-secondary-blue-500 | hsl(254, 72%, 48%) |
| secondary-blue.600 | {color.navy-blue.600} | --gw-secondary-blue-600 | hsl(254, 73%, 40%) |
| secondary-blue.700 | {color.navy-blue.700} | --gw-secondary-blue-700 | hsl(254, 73%, 32%) |
| secondary-blue.800 | {color.navy-blue.800} | --gw-secondary-blue-800 | hsl(254, 73%, 22%) |
| secondary-blue.900 | {color.navy-blue.900} | --gw-secondary-blue-900 | hsl(253, 73%, 15%) |
| primary.50 | {color.blue.900} | --gw-primary-50 | hsl(231, 95%, 15%) |
| primary.100 | {color.blue.800} | --gw-primary-100 | hsl(231, 95%, 24%) |
| primary.200 | {color.blue.700} | --gw-primary-200 | hsl(231, 98%, 32%) |
| primary.300 | {color.blue.600} | --gw-primary-300 | hsl(232, 98%, 41%) |
| primary.400 | {color.blue.500} | --gw-primary-400 | hsl(233, 100%, 50%) |
| primary.500 | {color.blue.400} | --gw-primary-500 | hsl(232, 100%, 59%) |
| primary.600 | {color.blue.300} | --gw-primary-600 | hsl(232, 100%, 68%) |
| primary.700 | {color.blue.200} | --gw-primary-700 | hsl(239, 100%, 85%) |
| primary.800 | {color.blue.100} | --gw-primary-800 | hsl(240, 98%, 96%) |
| primary.900 | {color.blue.50} | --gw-primary-900 | hsl(240, 98%, 98%) |
| secondary.50 | {color.steel.900} | --gw-secondary-50 | hsl(208, 86%, 14%) |
| secondary.100 | {color.steel.800} | --gw-secondary-100 | hsl(211, 37%, 20%) |
| secondary.200 | {color.steel.700} | --gw-secondary-200 | hsl(211, 37%, 28%) |
| secondary.300 | {color.steel.600} | --gw-secondary-300 | hsl(211, 37%, 36%) |
| secondary.400 | {color.steel.500} | --gw-secondary-400 | hsl(211, 34%, 45%) |
| secondary.500 | {color.steel.400} | --gw-secondary-500 | hsl(210, 36%, 65%) |
| secondary.600 | {color.steel.300} | --gw-secondary-600 | hsl(211, 37%, 77%) |
| secondary.700 | {color.steel.200} | --gw-secondary-700 | hsl(213, 36%, 87%) |
| secondary.800 | {color.steel.100} | --gw-secondary-800 | hsl(213, 36%, 94%) |
| secondary.900 | {color.steel.50} | --gw-secondary-900 | hsl(213, 40%, 98%) |
| success.100 | {color.green.900} | --gw-success-100 | hsl(174, 50%, 12%) |
| success.200 | {color.green.800} | --gw-success-200 | hsl(175, 50%, 18%) |
| success.300 | {color.green.700} | --gw-success-300 | hsl(175, 50%, 23%) |
| success.400 | {color.green.600} | --gw-success-400 | hsl(175, 50%, 30%) |
| success.500 | {color.green.500} | --gw-success-500 | hsl(175, 50%, 40%) |
| success.600 | {color.green.400} | --gw-success-600 | hsl(175, 40%, 65%) |
| success.700 | {color.green.300} | --gw-success-700 | hsl(175, 35%, 75%) |
| success.800 | {color.green.200} | --gw-success-800 | hsl(175, 50%, 95%) |
| success.900 | {color.green.100} | --gw-success-900 | hsl(180, 50%, 98%) |
| warning.100 | {color.yellow.900} | --gw-warning-100 | hsl(40, 90%, 15%) |
| warning.200 | {color.yellow.800} | --gw-warning-200 | hsl(40, 60%, 25%) |
| warning.300 | {color.yellow.700} | --gw-warning-300 | hsl(40, 60%, 36%) |
| warning.400 | {color.yellow.600} | --gw-warning-400 | hsl(40, 60%, 44%) |
| warning.500 | {color.yellow.500} | --gw-warning-500 | hsl(40, 60%, 65%) |
| warning.600 | {color.yellow.400} | --gw-warning-600 | hsl(48, 65%, 78%) |
| warning.700 | {color.yellow.300} | --gw-warning-700 | hsl(48, 65%, 89%) |
| warning.800 | {color.yellow.200} | --gw-warning-800 | hsl(48, 65%, 94%) |
| warning.900 | {color.yellow.100} | --gw-warning-900 | hsl(48, 90%, 98%) |
| danger.100 | {color.red.900} | --gw-danger-100 | hsl(0, 60%, 15%) |
| danger.200 | {color.red.800} | --gw-danger-200 | hsl(0, 60%, 35%) |
| danger.300 | {color.red.700} | --gw-danger-300 | hsl(0, 60%, 42%) |
| danger.400 | {color.red.600} | --gw-danger-400 | hsl(0, 60%, 51%) |
| danger.500 | {color.red.500} | --gw-danger-500 | hsl(0, 60%, 68%) |
| danger.600 | {color.red.400} | --gw-danger-600 | hsl(0, 60%, 78%) |
| danger.700 | {color.red.300} | --gw-danger-700 | hsl(0, 60%, 89%) |
| danger.800 | {color.red.200} | --gw-danger-800 | hsl(0, 60%, 94%) |
| danger.900 | {color.red.100} | --gw-danger-900 | hsl(0, 60%, 97%) |
| info.100 | {color.steel.800} | --gw-info-100 | hsl(211, 37%, 20%) |
| info.200 | {color.steel.700} | --gw-info-200 | hsl(211, 37%, 28%) |
| info.300 | {color.steel.600} | --gw-info-300 | hsl(211, 37%, 36%) |
| info.400 | {color.steel.500} | --gw-info-400 | hsl(211, 34%, 45%) |
| info.500 | {color.steel.400} | --gw-info-500 | hsl(210, 36%, 65%) |
| info.600 | {color.steel.300} | --gw-info-600 | hsl(211, 37%, 77%) |
| info.700 | {color.steel.200} | --gw-info-700 | hsl(213, 36%, 87%) |
| info.800 | {color.steel.100} | --gw-info-800 | hsl(213, 36%, 94%) |
| info.900 | {color.steel.50} | --gw-info-900 | hsl(213, 40%, 98%) |
| neutral.0 | {color.grey.900} | --gw-neutral-0 | hsl(220, 40%, 7%) |
| neutral.50 | {color.grey.800} | --gw-neutral-50 | hsl(212, 28%, 14%) |
| neutral.100 | {color.grey.700} | --gw-neutral-100 | hsl(217, 19%, 27%) |
| neutral.200 | {color.grey.600} | --gw-neutral-200 | hsl(215, 14%, 34%) |
| neutral.300 | {color.grey.500} | --gw-neutral-300 | hsl(220, 9%, 46%) |
| neutral.400 | {color.grey.400} | --gw-neutral-400 | hsl(220, 11%, 65%) |
| neutral.500 | {color.grey.300} | --gw-neutral-500 | hsl(210, 14%, 83%) |
| neutral.600 | {color.grey.200} | --gw-neutral-600 | hsl(220, 13%, 91%) |
| neutral.700 | {color.grey.100} | --gw-neutral-700 | hsl(220, 14%, 95%) |
| neutral.800 | {color.grey.50} | --gw-neutral-800 | hsl(210, 20%, 98%) |
| neutral.900 | {color.grey.0} | --gw-neutral-900 | hsl(0, 0%, 100%) |
| neutral.shadow.0 | transparent | --gw-neutral-shadow-0 | transparent |
| neutral.shadow.10 | {color.grey.50-alpha-10} | --gw-neutral-shadow-10 | #F0F2F514 |
| neutral.shadow.15 | {color.grey.0-alpha-15} | --gw-neutral-shadow-15 | #F9FAFB26 |
| neutral.900-alpha-5 | {color.grey.0-alpha-5} | --gw-neutral-900-alpha-5 | #F9FAFB0D |
| neutral.900-alpha-50 | {color.grey.50-alpha-50} | --gw-neutral-900-alpha-50 | #F9FAFB80 |
| neutral.900-alpha-15 | {color.grey.0-alpha-15} | --gw-neutral-900-alpha-15 | #F9FAFB26 |
| neutral.900-alpha-10 | {color.grey.50-alpha-10} | --gw-neutral-900-alpha-10 | #F0F2F514 |
| neutral.50-alpha-50 | {color.grey.900-alpha-50} | --gw-neutral-50-alpha-50 | #111B2780 |
| tertiary.100 | {color.teal.900} | --gw-tertiary-100 | hsl(174, 50%, 12%) |
| tertiary.200 | {color.teal.800} | --gw-tertiary-200 | hsl(175, 50%, 18%) |
| tertiary.300 | {color.teal.700} | --gw-tertiary-300 | hsl(175, 50%, 23%) |
| tertiary.400 | {color.teal.600} | --gw-tertiary-400 | hsl(175, 50%, 30%) |
| tertiary.500 | {color.teal.500} | --gw-tertiary-500 | hsl(175, 50%, 40%) |
| tertiary.600 | {color.teal.400} | --gw-tertiary-600 | hsl(175, 40%, 65%) |
| tertiary.700 | {color.teal.300} | --gw-tertiary-700 | hsl(175, 35%, 75%) |
| tertiary.800 | {color.teal.200} | --gw-tertiary-800 | hsl(175, 40%, 89%) |
| tertiary.900 | {color.teal.100} | --gw-tertiary-900 | hsl(175, 50%, 95%) |
| background.surface | {neutral.0} | --gw-background-surface | hsl(0, 0%, 100%) |
| background.page | {neutral.50} | --gw-background-page | hsl(210, 20%, 98%) |
| background.header | {primary.50} | --gw-background-header | hsl(240, 98%, 98%) |
| background.raised | {primary.50} | --gw-background-raised | hsl(240, 98%, 98%) |
| background.highlighted | {primary.200} | --gw-background-highlighted | hsl(239, 100%, 85%) |
| background.surface-semitransparent | {neutral.50-alpha-50} | --gw-background-surface-semitransparent | #F9FAFB80 |
| background.elevated | {neutral.50} | --gw-background-elevated | hsl(210, 20%, 98%) |
| background.brand | {primary.base} | --gw-background-brand | hsl(232, 98%, 41%) |
| background.disabled | {neutral.200} | --gw-background-disabled | hsl(220, 13%, 91%) |
| background.subtle | {neutral.200} | --gw-background-subtle | hsl(220, 13%, 91%) |
| foreground.on-surface.brand | {primary.light} | --gw-foreground-on-surface-brand | hsl(233, 100%, 50%) |
| foreground.on-surface.primary | {primary.dark} | --gw-foreground-on-surface-primary | hsl(231, 98%, 32%) |
| foreground.on-surface.strong | {primary.base} | --gw-foreground-on-surface-strong | hsl(232, 98%, 41%) |
| foreground.on-surface.default | {neutral.900} | --gw-foreground-on-surface-default | hsl(220, 40%, 7%) |
| foreground.on-surface.heading | {color.navy-blue.700} | --gw-foreground-on-surface-heading | hsl(254, 73%, 32%) |
| foreground.on-surface.secondary | {secondary.500} | --gw-foreground-on-surface-secondary | hsl(211, 34%, 45%) |
| foreground.on-surface.muted | {secondary.600} | --gw-foreground-on-surface-muted | hsl(211, 37%, 36%) |
| foreground.on-surface.subtle | {neutral.500} | --gw-foreground-on-surface-subtle | hsl(220, 9%, 46%) |
| foreground.on-surface.disabled | {neutral.400} | --gw-foreground-on-surface-disabled | hsl(220, 11%, 65%) |
| foreground.on-surface.accent | {accent.500} | --gw-foreground-on-surface-accent | hsl(335, 73%, 54%) |
| foreground.on-brand | {neutral.900} | --gw-foreground-on-brand | hsl(220, 40%, 7%) |
| foreground.link.idle | {primary.base} | --gw-foreground-link-idle | hsl(232, 98%, 41%) |
| foreground.link.hover | {primary.dark} | --gw-foreground-link-hover | hsl(231, 98%, 32%) |
| foreground.link.visited | {secondary.base} | --gw-foreground-link-visited | hsl(211, 37%, 36%) |
| foreground.link.disabled | {foreground.on-surface.disabled} | --gw-foreground-link-disabled | hsl(210, 14%, 83%) |
| foreground.visual.1-1 | {primary.500} | --gw-foreground-visual-1-1 | hsl(233, 100%, 50%) |
| foreground.visual.1-2 | {primary.300} | --gw-foreground-visual-1-2 | hsl(232, 100%, 68%) |
| foreground.visual.1-3 | {primary.200} | --gw-foreground-visual-1-3 | hsl(239, 100%, 85%) |
| foreground.visual.1-4 | {primary.100} | --gw-foreground-visual-1-4 | hsl(240, 98%, 96%) |
| foreground.visual.3-1 | {success.500} | --gw-foreground-visual-3-1 | hsl(175, 50%, 40%) |
| foreground.visual.3-2 | {success.400} | --gw-foreground-visual-3-2 | hsl(175, 40%, 65%) |
| foreground.visual.3-3 | {success.200} | --gw-foreground-visual-3-3 | hsl(175, 50%, 95%) |
| foreground.visual.3-4 | {success.100} | --gw-foreground-visual-3-4 | hsl(180, 50%, 98%) |
| foreground.visual.2-1 | {accent.500} | --gw-foreground-visual-2-1 | hsl(335, 73%, 54%) |
| foreground.visual.2-2 | {accent.300} | --gw-foreground-visual-2-2 | hsl(335, 72%, 75%) |
| foreground.visual.2-3 | {accent.200} | --gw-foreground-visual-2-3 | hsl(336, 73%, 90%) |
| foreground.visual.2-4 | {accent.100} | --gw-foreground-visual-2-4 | hsl(333, 73%, 97%) |
| foreground.visual.neutral-1 | {neutral.500} | --gw-foreground-visual-neutral-1 | hsl(220, 9%, 46%) |
| foreground.visual.neutral-2 | {neutral.400} | --gw-foreground-visual-neutral-2 | hsl(220, 11%, 65%) |
| foreground.visual.neutral-3 | {neutral.300} | --gw-foreground-visual-neutral-3 | hsl(210, 14%, 83%) |
| foreground.visual.neutral-4 | {neutral.100} | --gw-foreground-visual-neutral-4 | hsl(220, 14%, 95%) |
| foreground.visual.4-1 | {secondary-blue.500} | --gw-foreground-visual-4-1 | hsl(254, 72%, 48%) |
| foreground.visual.4-2 | {secondary-blue.300} | --gw-foreground-visual-4-2 | hsl(265, 68%, 65%) |
| foreground.visual.4-3 | {secondary-blue.200} | --gw-foreground-visual-4-3 | hsl(271, 65%, 80%) |
| foreground.visual.4-4 | {secondary-blue.100} | --gw-foreground-visual-4-4 | hsl(254, 76%, 92%) |
| default.border.color | {neutral.200} | --gw-default-border-color | hsl(220, 13%, 91%) |
| border.color.subtle | {neutral.100} | --gw-border-color-subtle | hsl(220, 14%, 95%) |
| border.color.focus | {secondary.light} | --gw-border-color-focus | hsl(211, 34%, 45%) |
| border.color.disabled | {neutral.300} | --gw-border-color-disabled | hsl(210, 14%, 83%) |
| border.color.focus-ring | {foreground.on-surface.brand} | --gw-border-color-focus-ring | hsl(232, 98%, 41%) |
| border.color.default | {neutral.200} | --gw-border-color-default | hsl(220, 13%, 91%) |
| accent.50 | {color.pink.900} | --gw-accent-50 | hsl(334, 73%, 19%) |
| accent.100 | {color.pink.800} | --gw-accent-100 | hsl(333, 76%, 27%) |
| accent.200 | {color.pink.700} | --gw-accent-200 | hsl(333, 77%, 36%) |
| accent.300 | {color.pink.600} | --gw-accent-300 | hsl(332, 80%, 45%) |
| accent.400 | {color.pink.500} | --gw-accent-400 | hsl(335, 73%, 54%) |
| accent.500 | {color.pink.400} | --gw-accent-500 | hsl(335, 72%, 65%) |
| accent.600 | {color.pink.300} | --gw-accent-600 | hsl(335, 72%, 75%) |
| accent.700 | {color.pink.200} | --gw-accent-700 | hsl(336, 73%, 90%) |
| accent.800 | {color.pink.100} | --gw-accent-800 | hsl(333, 73%, 97%) |
| accent.900 | {color.pink.50} | --gw-accent-900 | hsl(340, 60%, 99%) |
| secondary-blue.50 | {color.navy-blue.900} | --gw-secondary-blue-50 | hsl(253, 73%, 15%) |
| secondary-blue.100 | {color.navy-blue.800} | --gw-secondary-blue-100 | hsl(254, 73%, 22%) |
| secondary-blue.200 | {color.navy-blue.700} | --gw-secondary-blue-200 | hsl(254, 73%, 32%) |
| secondary-blue.300 | {color.navy-blue.600} | --gw-secondary-blue-300 | hsl(254, 73%, 40%) |
| secondary-blue.400 | {color.navy-blue.500} | --gw-secondary-blue-400 | hsl(254, 72%, 48%) |
| secondary-blue.500 | {color.navy-blue.400} | --gw-secondary-blue-500 | hsl(260, 70%, 55%) |
| secondary-blue.600 | {color.navy-blue.300} | --gw-secondary-blue-600 | hsl(265, 68%, 65%) |
| secondary-blue.700 | {color.navy-blue.200} | --gw-secondary-blue-700 | hsl(271, 65%, 80%) |
| secondary-blue.800 | {color.navy-blue.100} | --gw-secondary-blue-800 | hsl(254, 76%, 92%) |
| secondary-blue.900 | {color.navy-blue.50} | --gw-secondary-blue-900 | hsl(251, 73%, 98%) |
| form.field.focus.ring.color | {neutral.shadow.0} | --gw-form-field-focus-ring-color | transparent |
| focus.ring.color | {border.color.focus-ring} | --gw-focus-ring-color | hsl(232, 98%, 41%) |
| primary.base | {primary.600} | --gw-primary-base | hsl(232, 98%, 41%) |
| primary.lightest | {primary.50} | --gw-primary-lightest | hsl(240, 98%, 98%) |
| primary.lighter | {primary.100} | --gw-primary-lighter | hsl(240, 98%, 96%) |
| primary.light | {primary.500} | --gw-primary-light | hsl(233, 100%, 50%) |
| primary.dark | {primary.700} | --gw-primary-dark | hsl(231, 98%, 32%) |
| primary.darker | {primary.900} | --gw-primary-darker | hsl(231, 95%, 15%) |
| primary.text | {primary.base} | --gw-primary-text | hsl(232, 98%, 41%) |
| primary.contrast.color | {contrast.text} | --gw-primary-contrast-color | hsl(210, 20%, 98%) |
| primary.hover.color | {primary.dark} | --gw-primary-hover-color | hsl(231, 98%, 32%) |
| primary.active.color | {primary.base} | --gw-primary-active-color | hsl(232, 98%, 41%) |
| success.base | {success.600} | --gw-success-base | hsl(175, 50%, 30%) |
| success.lighter | {success.200} | --gw-success-lighter | hsl(175, 50%, 95%) |
| success.light | {success.500} | --gw-success-light | hsl(175, 50%, 40%) |
| success.darker | {success.900} | --gw-success-darker | hsl(174, 50%, 12%) |
| success.dark | {success.700} | --gw-success-dark | hsl(175, 50%, 23%) |
| success.text | {success.dark} | --gw-success-text | hsl(175, 50%, 23%) |
| secondary.base | {secondary.600} | --gw-secondary-base | hsl(211, 37%, 36%) |
| secondary.lighter | {secondary.100} | --gw-secondary-lighter | hsl(213, 36%, 94%) |
| secondary.light | {secondary.500} | --gw-secondary-light | hsl(211, 34%, 45%) |
| secondary.dark | {secondary.800} | --gw-secondary-dark | hsl(211, 37%, 20%) |
| secondary.darker | {secondary.900} | --gw-secondary-darker | hsl(208, 86%, 14%) |
| secondary.text | {secondary.dark} | --gw-secondary-text | hsl(211, 37%, 20%) |
| secondary.contrast.color | {foreground.on-brand} | --gw-secondary-contrast-color | hsl(0, 0%, 100%) |
| secondary.hover.color | {secondary.dark} | --gw-secondary-hover-color | hsl(211, 37%, 20%) |
| secondary.active.color | {secondary.light} | --gw-secondary-active-color | hsl(211, 34%, 45%) |
| muted.background | {neutral.200} | --gw-muted-background | hsl(220, 13%, 91%) |
| muted.color | {neutral.700} | --gw-muted-color | hsl(217, 19%, 27%) |
| disabled.background | {neutral.200} | --gw-disabled-background | hsl(220, 13%, 91%) |
| disabled.color | {neutral.400} | --gw-disabled-color | hsl(220, 11%, 65%) |
| error.base | {danger.600} | --gw-error-base | hsl(0, 60%, 51%) |
| error.lighter | {danger.200} | --gw-error-lighter | hsl(0, 60%, 94%) |
| error.light | {danger.500} | --gw-error-light | hsl(0, 60%, 68%) |
| error.dark | {danger.700} | --gw-error-dark | hsl(0, 60%, 42%) |
| error.darker | {danger.900} | --gw-error-darker | hsl(0, 60%, 15%) |
| error.text | {error.dark} | --gw-error-text | hsl(0, 60%, 42%) |
| info.base | {info.600} | --gw-info-base | hsl(211, 37%, 36%) |
| info.lighter | {info.100} | --gw-info-lighter | hsl(213, 36%, 94%) |
| info.light | {info.500} | --gw-info-light | hsl(211, 34%, 45%) |
| info.darker | {info.900} | --gw-info-darker | hsl(208, 86%, 14%) |
| info.dark | {info.700} | --gw-info-dark | hsl(211, 37%, 28%) |
| info.text | {info.dark} | --gw-info-text | hsl(211, 37%, 28%) |
| warning.base | {warning.700} | --gw-warning-base | hsl(40, 60%, 36%) |
| warning.lighter | {warning.100} | --gw-warning-lighter | hsl(48, 90%, 98%) |
| warning.light | {warning.600} | --gw-warning-light | hsl(40, 60%, 44%) |
| warning.dark | {warning.800} | --gw-warning-dark | hsl(40, 60%, 25%) |
| warning.darker | {warning.900} | --gw-warning-darker | hsl(40, 90%, 15%) |
| warning.text | {help.dark} | --gw-warning-text | hsl(212, 28%, 14%) |
| neutral.lighter | {neutral.100} | --gw-neutral-lighter | hsl(220, 14%, 95%) |
| neutral.light | {neutral.400} | --gw-neutral-light | hsl(220, 11%, 65%) |
| neutral.base | {neutral.700} | --gw-neutral-base | hsl(217, 19%, 27%) |
| neutral.dark | {neutral.800} | --gw-neutral-dark | hsl(212, 28%, 14%) |
| neutral.darker | {neutral.900} | --gw-neutral-darker | hsl(220, 40%, 7%) |
| neutral.text | {neutral.dark} | --gw-neutral-text | hsl(212, 28%, 14%) |
| contrast.text | {neutral.50} | --gw-contrast-text | hsl(210, 20%, 98%) |
| contrast.background | {neutral.900} | --gw-contrast-background | hsl(220, 40%, 7%) |
| highlight.background | {secondary.100} | --gw-highlight-background | hsl(213, 36%, 94%) |
| highlight.focus.background | {primary.lighter} | --gw-highlight-focus-background | hsl(240, 98%, 96%) |
| highlight.focus.color | {primary.base} | --gw-highlight-focus-color | hsl(232, 98%, 41%) |
| highlight.color | {primary.base} | --gw-highlight-color | hsl(232, 98%, 41%) |
| mask.background | {color.grey.900-alpha-50} | --gw-mask-background | #111B2780 |
| mask.color | {neutral.200} | --gw-mask-color | hsl(220, 13%, 91%) |
| form.field.background | {default.background} | --gw-form-field-background | hsl(0, 0%, 100%) |
| form.field.disabled.background | {muted.background} | --gw-form-field-disabled-background | hsl(220, 13%, 91%) |
| form.field.disabled.color | {disabled.color} | --gw-form-field-disabled-color | hsl(220, 11%, 65%) |
| form.field.read-only.background | {form.field.filled.background} | --gw-form-field-read-only-background | hsl(220, 14%, 95%) |
| form.field.filled.background | {neutral.100} | --gw-form-field-filled-background | hsl(220, 14%, 95%) |
| form.field.filled.focus.background | {neutral.100} | --gw-form-field-filled-focus-background | hsl(220, 14%, 95%) |
| form.field.filled.hover.background | {neutral.200} | --gw-form-field-filled-hover-background | hsl(220, 13%, 91%) |
| form.field.border.color | {default.border.color} | --gw-form-field-border-color | hsl(220, 13%, 91%) |
| form.field.hover.border.color | {hover.border.color} | --gw-form-field-hover-border-color | hsl(220, 11%, 65%) |
| form.field.focus.border.color | {border.color.focus} | --gw-form-field-focus-border-color | hsl(211, 34%, 45%) |
| form.field.invalid.border.color | {error.light} | --gw-form-field-invalid-border-color | hsl(0, 60%, 68%) |
| form.field.invalid.placeholder.color | {error.base} | --gw-form-field-invalid-placeholder-color | hsl(0, 60%, 51%) |
| form.field.placeholder.color | {neutral.500} | --gw-form-field-placeholder-color | hsl(220, 9%, 46%) |
| form.field.float.label.color | {neutral.500} | --gw-form-field-float-label-color | hsl(220, 9%, 46%) |
| form.field.float.label.focus.color | {neutral.500} | --gw-form-field-float-label-focus-color | hsl(220, 9%, 46%) |
| form.field.float.label.invalid.color | {form.field.invalid.placeholder.color} | --gw-form-field-float-label-invalid-color | hsl(0, 60%, 51%) |
| form.field.float.label.active.color | {neutral.500} | --gw-form-field-float-label-active-color | hsl(220, 9%, 46%) |
| form.field.icon.color | {foreground.on-surface.subtle} | --gw-form-field-icon-color | hsl(220, 9%, 46%) |
| form.field.icon.focus.color | {foreground.on-surface.primary} | --gw-form-field-icon-focus-color | hsl(231, 98%, 32%) |
| form.field.icon.active.color | {foreground.on-surface.subtle} | --gw-form-field-icon-active-color | hsl(220, 9%, 46%) |
| form.field.color | {neutral.dark} | --gw-form-field-color | hsl(212, 28%, 14%) |
| text.color | {foreground.on-surface.default} | --gw-text-color | hsl(220, 40%, 7%) |
| text.muted.color | {muted.color} | --gw-text-muted-color | hsl(217, 19%, 27%) |
| hover.color | {neutral.800} | --gw-hover-color | hsl(212, 28%, 14%) |
| hover.background | {neutral.200} | --gw-hover-background | hsl(220, 13%, 91%) |
| hover.border.color | {neutral.400} | --gw-hover-border-color | hsl(220, 11%, 65%) |
| default.muted.color | {foreground.on-surface.secondary} | --gw-default-muted-color | hsl(211, 37%, 36%) |
| default.border.color | {neutral.200} | --gw-default-border-color | hsl(220, 13%, 91%) |
| default.background | {background.elevated} | --gw-default-background | hsl(0, 0%, 100%) |
| default.color | {foreground.on-surface.default} | --gw-default-color | hsl(220, 40%, 7%) |
| default.success.background | {success.base} | --gw-default-success-background | hsl(175, 50%, 30%) |
| default.success.color | {success.dark} | --gw-default-success-color | hsl(175, 50%, 23%) |
| default.success.light.background | {success.lighter} | --gw-default-success-light-background | hsl(175, 50%, 95%) |
| default.error.backgound | {error.light} | --gw-default-error-backgound | hsl(0, 60%, 68%) |
| default.error.color | {error.dark} | --gw-default-error-color | hsl(0, 60%, 42%) |
| default.error.light.backgound | {error.lighter} | --gw-default-error-light-backgound | hsl(0, 60%, 94%) |
| default.secondary.background | {secondary.base} | --gw-default-secondary-background | hsl(211, 37%, 36%) |
| default.secondary.color | {secondary.base} | --gw-default-secondary-color | hsl(211, 37%, 36%) |
| default.secondary.light.backgound | {secondary.lighter} | --gw-default-secondary-light-backgound | hsl(213, 36%, 94%) |
| default.primary.backgound | {primary.base} | --gw-default-primary-backgound | hsl(232, 98%, 41%) |
| default.primary.color | {primary.base} | --gw-default-primary-color | hsl(232, 98%, 41%) |
| default.primary.light.background | {primary.lighter} | --gw-default-primary-light-background | hsl(240, 98%, 96%) |
| default.warning.background | {warning.base} | --gw-default-warning-background | hsl(40, 60%, 36%) |
| default.warning.light.background | {help.lighter} | --gw-default-warning-light-background | hsl(220, 14%, 95%) |
| default.contrast.background | {contrast.background} | --gw-default-contrast-background | hsl(220, 40%, 7%) |
| overlay.select.background | {neutral.0} | --gw-overlay-select-background | hsl(0, 0%, 100%) |
| overlay.select.border.color | {default.border.color} | --gw-overlay-select-border-color | hsl(220, 13%, 91%) |
| overlay.select.color | {text.color} | --gw-overlay-select-color | hsl(220, 40%, 7%) |
| overlay.popover.background | {neutral.0} | --gw-overlay-popover-background | hsl(0, 0%, 100%) |
| overlay.popover.border.color | {default.border.color} | --gw-overlay-popover-border-color | hsl(220, 13%, 91%) |
| overlay.popover.color | {text.color} | --gw-overlay-popover-color | hsl(220, 40%, 7%) |
| overlay.modal.background | {background.elevated} | --gw-overlay-modal-background | hsl(0, 0%, 100%) |
| overlay.modal.border.color | {border.color.subtle} | --gw-overlay-modal-border-color | hsl(220, 14%, 95%) |
| overlay.modal.color | {text.color} | --gw-overlay-modal-color | hsl(220, 40%, 7%) |
| list.option.focus.background | {neutral.100} | --gw-list-option-focus-background | hsl(220, 14%, 95%) |
| list.option.focus.color | {hover.color} | --gw-list-option-focus-color | hsl(212, 28%, 14%) |
| list.option.selected.background | {highlight.background} | --gw-list-option-selected-background | hsl(213, 36%, 94%) |
| list.option.selected.focus.background | {highlight.focus.background} | --gw-list-option-selected-focus-background | hsl(240, 98%, 96%) |
| list.option.selected.focus.color | {highlight.focus.color} | --gw-list-option-selected-focus-color | hsl(232, 98%, 41%) |
| list.option.selected.color | {text.color} | --gw-list-option-selected-color | hsl(220, 40%, 7%) |
| list.option.color | {text.color} | --gw-list-option-color | hsl(220, 40%, 7%) |
| list.option.icon.color | {neutral.400} | --gw-list-option-icon-color | hsl(220, 11%, 65%) |
| list.option.icon.focus.color | {neutral.500} | --gw-list-option-icon-focus-color | hsl(220, 9%, 46%) |
| list.option.group.background | transparent | --gw-list-option-group-background | transparent |
| list.option.group.color | {inputtext.disabled.color} | --gw-list-option-group-color | hsl(220, 11%, 65%) |
| sidenav.background | {background.surface} | --gw-sidenav-background | hsl(210, 20%, 98%) |
| sidenav.menuitem.background | {background.surface} | --gw-sidenav-menuitem-background | hsl(210, 20%, 98%) |
| sidenav.menuitem.color | {foreground.on-surface.default} | --gw-sidenav-menuitem-color | hsl(220, 40%, 7%) |
| sidenav.menuitem.icon.color | {foreground.on-surface.default} | --gw-sidenav-menuitem-icon-color | hsl(220, 40%, 7%) |
| sidenav.menuitem.icon.second.color | {foreground.on-surface.subtle} | --gw-sidenav-menuitem-icon-second-color | hsl(220, 9%, 46%) |
| sidenav.menuitem.hover.icon.color | {foreground.on-surface.primary} | --gw-sidenav-menuitem-hover-icon-color | hsl(231, 98%, 32%) |
| sidenav.menuitem.hover.color | {foreground.on-surface.primary} | --gw-sidenav-menuitem-hover-color | hsl(231, 98%, 32%) |
| sidenav.menuitem.hover.background | {background.raised} | --gw-sidenav-menuitem-hover-background | hsl(240, 98%, 98%) |
| sidenav.menuitem.selected.icon.color | {foreground.on-surface.primary} | --gw-sidenav-menuitem-selected-icon-color | hsl(231, 98%, 32%) |
| sidenav.menuitem.selected.background | {background.highlighted} | --gw-sidenav-menuitem-selected-background | hsl(240, 98%, 96%) |
| sidenav.menuitem.selected.color | {foreground.on-surface.primary} | --gw-sidenav-menuitem-selected-color | hsl(231, 98%, 32%) |
| sidenav.menuitem.open.icon.color | {foreground.on-surface.default} | --gw-sidenav-menuitem-open-icon-color | hsl(220, 40%, 7%) |
| sidenav.menuitem.open.icon.second.color | {foreground.on-surface.default} | --gw-sidenav-menuitem-open-icon-second-color | hsl(220, 40%, 7%) |
| sidenav.menuitem.open.color | {foreground.on-surface.default} | --gw-sidenav-menuitem-open-color | hsl(220, 40%, 7%) |
| sidenav.menuitem.open.background | {background.raised} | --gw-sidenav-menuitem-open-background | hsl(240, 98%, 98%) |
| sidenav.submenuitem.color | {foreground.on-surface.default} | --gw-sidenav-submenuitem-color | hsl(220, 40%, 7%) |
| sidenav.submenuitem.background | {background.surface} | --gw-sidenav-submenuitem-background | hsl(210, 20%, 98%) |
| sidenav.submenuitem.hover.background | {background.raised} | --gw-sidenav-submenuitem-hover-background | hsl(240, 98%, 98%) |
| sidenav.submenuitem.hover.color | {foreground.on-surface.primary} | --gw-sidenav-submenuitem-hover-color | hsl(231, 98%, 32%) |
| sidenav.submenuitem.selected.background | {background.highlighted} | --gw-sidenav-submenuitem-selected-background | hsl(240, 98%, 96%) |
| sidenav.submenuitem.selected.color | {foreground.on-surface.primary} | --gw-sidenav-submenuitem-selected-color | hsl(231, 98%, 32%) |
| sidenav.submenuitem.open.background | {background.raised} | --gw-sidenav-submenuitem-open-background | hsl(240, 98%, 98%) |
| sidenav.submenuitem.open.color | {foreground.on-surface.default} | --gw-sidenav-submenuitem-open-color | hsl(220, 40%, 7%) |
| sidenav.togglebutton.background | {sidenav.background} | --gw-sidenav-togglebutton-background | hsl(210, 20%, 98%) |
| sidenav.togglebutton.hover.background | {background.surface} | --gw-sidenav-togglebutton-hover-background | hsl(210, 20%, 98%) |
| sidenav.togglebutton.hover.color | {foreground.on-surface.secondary} | --gw-sidenav-togglebutton-hover-color | hsl(211, 37%, 36%) |
| sidenav.togglebutton.color | {foreground.on-surface.secondary} | --gw-sidenav-togglebutton-color | hsl(211, 37%, 36%) |
| border.color.success | {success.base} | --gw-border-color-success | hsl(175, 50%, 30%) |
| border.color.error | {error.light} | --gw-border-color-error | hsl(0, 60%, 68%) |
| border.color.secondary | {secondary.base} | --gw-border-color-secondary | hsl(211, 37%, 36%) |
| border.color.primary | {primary.base} | --gw-border-color-primary | hsl(232, 98%, 41%) |
| help.base | {neutral.base} | --gw-help-base | hsl(217, 19%, 27%) |
| help.light | {neutral.light} | --gw-help-light | hsl(220, 11%, 65%) |
| help.lighter | {neutral.lighter} | --gw-help-lighter | hsl(220, 14%, 95%) |
| help.darker | {neutral.darker} | --gw-help-darker | hsl(220, 40%, 7%) |
| help.dark | {neutral.dark} | --gw-help-dark | hsl(212, 28%, 14%) |
| help.text | {help.dark} | --gw-help-text | hsl(212, 28%, 14%) |
| tertiary.base | {tertiary.700} | --gw-tertiary-base | hsl(175, 50%, 23%) |
| tertiary.lighter | {tertiary.100} | --gw-tertiary-lighter | hsl(175, 50%, 95%) |
| tertiary.light | {tertiary.600} | --gw-tertiary-light | hsl(175, 50%, 30%) |
| tertiary.dark | {tertiary.800} | --gw-tertiary-dark | hsl(175, 50%, 18%) |
| tertiary.darker | {tertiary.900} | --gw-tertiary-darker | hsl(174, 50%, 12%) |
| tertiary.text | {tertiary.dark} | --gw-tertiary-text | hsl(175, 50%, 18%) |
| tertiary.contrast.color | {contrast.text} | --gw-tertiary-contrast-color | hsl(210, 20%, 98%) |
| tertiary.hover.color | {tertiary.dark} | --gw-tertiary-hover-color | hsl(175, 50%, 18%) |
| tertiary.active.color | {tertiary.light} | --gw-tertiary-active-color | hsl(175, 50%, 30%) |
| inputtext.background | {form.field.background} | --gw-inputtext-background | hsl(0, 0%, 100%) |
| inputtext.read-only.background | {form.field.read-only.background} | --gw-inputtext-read-only-background | hsl(220, 14%, 95%) |
| inputtext.disabled.background | {form.field.disabled.background} | --gw-inputtext-disabled-background | hsl(220, 13%, 91%) |
| inputtext.disabled.color | {form.field.disabled.color} | --gw-inputtext-disabled-color | hsl(220, 11%, 65%) |
| inputtext.filled.background | {form.field.filled.background} | --gw-inputtext-filled-background | hsl(220, 14%, 95%) |
| inputtext.filled.focus.background | {form.field.filled.focus.background} | --gw-inputtext-filled-focus-background | hsl(220, 14%, 95%) |
| inputtext.filled.hover.background | {form.field.filled.hover.background} | --gw-inputtext-filled-hover-background | hsl(220, 13%, 91%) |
| inputtext.border.color | {form.field.border.color} | --gw-inputtext-border-color | hsl(220, 13%, 91%) |
| inputtext.hover.border.color | {form.field.hover.border.color} | --gw-inputtext-hover-border-color | hsl(220, 11%, 65%) |
| inputtext.focus.border.color | {form.field.focus.border.color} | --gw-inputtext-focus-border-color | hsl(211, 34%, 45%) |
| inputtext.focus.ring.color | {form.field.focus.border.color} | --gw-inputtext-focus-ring-color | hsl(211, 34%, 45%) |
| inputtext.invalid.border.color | {form.field.invalid.border.color} | --gw-inputtext-invalid-border-color | hsl(0, 60%, 68%) |
| inputtext.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-inputtext-invalid-placeholder-color | hsl(0, 60%, 51%) |
| inputtext.color | {form.field.color} | --gw-inputtext-color | hsl(212, 28%, 14%) |
| inputtext.placeholder.color | {form.field.placeholder.color} | --gw-inputtext-placeholder-color | hsl(220, 9%, 46%) |
| panel.background | {background.elevated} | --gw-panel-background | hsl(0, 0%, 100%) |
| panel.border.color | {border.color.subtle} | --gw-panel-border-color | hsl(220, 14%, 95%) |
| panel.color | {default.color} | --gw-panel-color | hsl(220, 40%, 7%) |
| panel.header.background | transparent | --gw-panel-header-background | transparent |
| panel.header.color | {heading.default.color} | --gw-panel-header-color | hsl(220, 40%, 7%) |
| panel.header.border.color | {border.color.subtle} | --gw-panel-header-border-color | hsl(220, 14%, 95%) |
| iconfield.icon.color | {form.field.icon.color} | --gw-iconfield-icon-color | hsl(220, 9%, 46%) |
| toggleswitch.border.color | transparent | --gw-toggleswitch-border-color | transparent |
| toggleswitch.hover.border.color | transparent | --gw-toggleswitch-hover-border-color | transparent |
| toggleswitch.checked.border.color | transparent | --gw-toggleswitch-checked-border-color | transparent |
| toggleswitch.checked.hover.border.color | transparent | --gw-toggleswitch-checked-hover-border-color | transparent |
| toggleswitch.invalid.border.color | {form.field.invalid.border.color} | --gw-toggleswitch-invalid-border-color | hsl(0, 60%, 68%) |
| toggleswitch.focus.ring.color | {focus.ring.color} | --gw-toggleswitch-focus-ring-color | hsl(232, 98%, 41%) |
| floatlabel.color | {form.field.float.label.color} | --gw-floatlabel-color | hsl(220, 9%, 46%) |
| floatlabel.focus.color | {form.field.float.label.focus.color} | --gw-floatlabel-focus-color | hsl(220, 9%, 46%) |
| floatlabel.invalid.color | {form.field.float.label.invalid.color} | --gw-floatlabel-invalid-color | hsl(0, 60%, 51%) |
| floatlabel.active.color | {form.field.float.label.active.color} | --gw-floatlabel-active-color | hsl(220, 9%, 46%) |
| floatlabel.on.active.background | {form.field.background} | --gw-floatlabel-on-active-background | hsl(0, 0%, 100%) |
| radiobutton.background | {form.field.background} | --gw-radiobutton-background | hsl(0, 0%, 100%) |
| radiobutton.label.color | {muted.color} | --gw-radiobutton-label-color | hsl(217, 19%, 27%) |
| radiobutton.checked.background | {primary.base} | --gw-radiobutton-checked-background | hsl(232, 98%, 41%) |
| radiobutton.checked.label.color | {foreground.on-surface.default} | --gw-radiobutton-checked-label-color | hsl(220, 40%, 7%) |
| radiobutton.checked.hover.background | {primary.hover.color} | --gw-radiobutton-checked-hover-background | hsl(231, 98%, 32%) |
| radiobutton.checked.hover.border.color | {primary.hover.color} | --gw-radiobutton-checked-hover-border-color | hsl(231, 98%, 32%) |
| radiobutton.checked.border.color | {primary.base} | --gw-radiobutton-checked-border-color | hsl(232, 98%, 41%) |
| radiobutton.checked.focus.border.color | {primary.base} | --gw-radiobutton-checked-focus-border-color | hsl(232, 98%, 41%) |
| radiobutton.checked.disabled.border.color | {border.color.default} | --gw-radiobutton-checked-disabled-border-color | hsl(220, 13%, 91%) |
| radiobutton.checked.disabled.label.color | {form.field.disabled.color} | --gw-radiobutton-checked-disabled-label-color | hsl(220, 11%, 65%) |
| radiobutton.disabled.background | {form.field.disabled.background} | --gw-radiobutton-disabled-background | hsl(220, 13%, 91%) |
| radiobutton.disabled.label.color | {form.field.disabled.color} | --gw-radiobutton-disabled-label-color | hsl(220, 11%, 65%) |
| radiobutton.filled.background | {form.field.filled.background} | --gw-radiobutton-filled-background | hsl(220, 14%, 95%) |
| radiobutton.border.color | {foreground.on-surface.subtle} | --gw-radiobutton-border-color | hsl(220, 9%, 46%) |
| radiobutton.hover.border.color | {form.field.hover.border.color} | --gw-radiobutton-hover-border-color | hsl(220, 11%, 65%) |
| radiobutton.focus.border.color | {foreground.on-surface.subtle} | --gw-radiobutton-focus-border-color | hsl(220, 9%, 46%) |
| radiobutton.focus.ring.color | {form.field.focus.border.color} | --gw-radiobutton-focus-ring-color | hsl(211, 34%, 45%) |
| radiobutton.invalid.border.color | {form.field.invalid.border.color} | --gw-radiobutton-invalid-border-color | hsl(0, 60%, 68%) |
| radiobutton.icon.checked.color | {primary.contrast.color} | --gw-radiobutton-icon-checked-color | hsl(210, 20%, 98%) |
| radiobutton.icon.checked.hover.color | {primary.contrast.color} | --gw-radiobutton-icon-checked-hover-color | hsl(210, 20%, 98%) |
| radiobutton.icon.disabled.color | {form.field.disabled.color} | --gw-radiobutton-icon-disabled-color | hsl(220, 11%, 65%) |
| checkbox.border.color | {foreground.on-surface.subtle} | --gw-checkbox-border-color | hsl(220, 9%, 46%) |
| checkbox.background | {neutral.shadow.0} | --gw-checkbox-background | transparent |
| checkbox.color | {foreground.on-surface.default} | --gw-checkbox-color | hsl(220, 40%, 7%) |
| checkbox.checked.background | {primary.base} | --gw-checkbox-checked-background | hsl(232, 98%, 41%) |
| checkbox.checked.hover.background | {primary.hover.color} | --gw-checkbox-checked-hover-background | hsl(231, 98%, 32%) |
| checkbox.checked.hover.border.color | {primary.hover.color} | --gw-checkbox-checked-hover-border-color | hsl(231, 98%, 32%) |
| checkbox.checked.border.color | {primary.base} | --gw-checkbox-checked-border-color | hsl(232, 98%, 41%) |
| checkbox.checked.focus.border.color | {primary.base} | --gw-checkbox-checked-focus-border-color | hsl(232, 98%, 41%) |
| checkbox.checked.disabled.border.color | {foreground.on-surface.secondary} | --gw-checkbox-checked-disabled-border-color | hsl(211, 37%, 36%) |
| checkbox.checked.disabled.icon.color | {primary.contrast.color} | --gw-checkbox-checked-disabled-icon-color | hsl(210, 20%, 98%) |
| checkbox.checked.disabled.background | {foreground.on-surface.secondary} | --gw-checkbox-checked-disabled-background | hsl(211, 37%, 36%) |
| checkbox.disabled.background | {form.field.disabled.background} | --gw-checkbox-disabled-background | hsl(220, 13%, 91%) |
| checkbox.filled.background | {form.field.filled.background} | --gw-checkbox-filled-background | hsl(220, 14%, 95%) |
| checkbox.hover.border.color | {form.field.hover.border.color} | --gw-checkbox-hover-border-color | hsl(220, 11%, 65%) |
| checkbox.focus.border.color | {form.field.border.color} | --gw-checkbox-focus-border-color | hsl(220, 13%, 91%) |
| checkbox.focus.ring.color | {form.field.focus.border.color} | --gw-checkbox-focus-ring-color | hsl(211, 34%, 45%) |
| checkbox.invalid.border.color | {form.field.invalid.border.color} | --gw-checkbox-invalid-border-color | hsl(0, 60%, 68%) |
| checkbox.icon.color | {form.field.color} | --gw-checkbox-icon-color | hsl(212, 28%, 14%) |
| checkbox.icon.checked.color | {primary.contrast.color} | --gw-checkbox-icon-checked-color | hsl(210, 20%, 98%) |
| checkbox.icon.checked.hover.color | {primary.contrast.color} | --gw-checkbox-icon-checked-hover-color | hsl(210, 20%, 98%) |
| checkbox.icon.disabled.color | {form.field.disabled.color} | --gw-checkbox-icon-disabled-color | hsl(220, 11%, 65%) |
| autocomplete.background | {form.field.background} | --gw-autocomplete-background | hsl(0, 0%, 100%) |
| autocomplete.disabled.background | {form.field.disabled.background} | --gw-autocomplete-disabled-background | hsl(220, 13%, 91%) |
| autocomplete.disabled.color | {form.field.disabled.color} | --gw-autocomplete-disabled-color | hsl(220, 11%, 65%) |
| autocomplete.filled.background | {form.field.filled.background} | --gw-autocomplete-filled-background | hsl(220, 14%, 95%) |
| autocomplete.filled.focus.background | {form.field.filled.focus.background} | --gw-autocomplete-filled-focus-background | hsl(220, 14%, 95%) |
| autocomplete.filled.hover.background | {form.field.filled.hover.background} | --gw-autocomplete-filled-hover-background | hsl(220, 13%, 91%) |
| autocomplete.border.color | {form.field.border.color} | --gw-autocomplete-border-color | hsl(220, 13%, 91%) |
| autocomplete.hover.border.color | {form.field.hover.border.color} | --gw-autocomplete-hover-border-color | hsl(220, 11%, 65%) |
| autocomplete.focus.border.color | {form.field.focus.border.color} | --gw-autocomplete-focus-border-color | hsl(211, 34%, 45%) |
| autocomplete.focus.ring.color | {form.field.focus.border.color} | --gw-autocomplete-focus-ring-color | hsl(211, 34%, 45%) |
| autocomplete.invalid.border.color | {form.field.invalid.border.color} | --gw-autocomplete-invalid-border-color | hsl(0, 60%, 68%) |
| autocomplete.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-autocomplete-invalid-placeholder-color | hsl(0, 60%, 51%) |
| autocomplete.color | {form.field.color} | --gw-autocomplete-color | hsl(212, 28%, 14%) |
| autocomplete.placeholder.color | {form.field.placeholder.color} | --gw-autocomplete-placeholder-color | hsl(220, 9%, 46%) |
| autocomplete.overlay.background | {overlay.select.background} | --gw-autocomplete-overlay-background | hsl(0, 0%, 100%) |
| autocomplete.overlay.border.color | {overlay.select.border.color} | --gw-autocomplete-overlay-border-color | hsl(220, 13%, 91%) |
| autocomplete.overlay.color | {overlay.select.color} | --gw-autocomplete-overlay-color | hsl(220, 40%, 7%) |
| autocomplete.option.focus.background | {list.option.focus.background} | --gw-autocomplete-option-focus-background | hsl(220, 14%, 95%) |
| autocomplete.option.focus.color | {list.option.focus.color} | --gw-autocomplete-option-focus-color | hsl(212, 28%, 14%) |
| autocomplete.option.selected.background | {list.option.selected.background} | --gw-autocomplete-option-selected-background | hsl(213, 36%, 94%) |
| autocomplete.option.selected.focus.background | {list.option.selected.focus.background} | --gw-autocomplete-option-selected-focus-background | hsl(240, 98%, 96%) |
| autocomplete.option.selected.focus.color | {list.option.selected.focus.color} | --gw-autocomplete-option-selected-focus-color | hsl(232, 98%, 41%) |
| autocomplete.option.selected.color | {list.option.selected.color} | --gw-autocomplete-option-selected-color | hsl(220, 40%, 7%) |
| autocomplete.option.color | {list.option.color} | --gw-autocomplete-option-color | hsl(220, 40%, 7%) |
| autocomplete.option.group.background | {list.option.group.background} | --gw-autocomplete-option-group-background | transparent |
| autocomplete.option.group.color | {list.option.group.color} | --gw-autocomplete-option-group-color | hsl(220, 11%, 65%) |
| autocomplete.dropdown.border.color | {form.field.border.color} | --gw-autocomplete-dropdown-border-color | hsl(220, 13%, 91%) |
| autocomplete.dropdown.hover.border.color | {form.field.border.color} | --gw-autocomplete-dropdown-hover-border-color | hsl(220, 13%, 91%) |
| autocomplete.dropdown.active.border.color | {form.field.border.color} | --gw-autocomplete-dropdown-active-border-color | hsl(220, 13%, 91%) |
| autocomplete.dropdown.focus.ring.color | {focus.ring.color} | --gw-autocomplete-dropdown-focus-ring-color | hsl(232, 98%, 41%) |
| datepicker.panel.background | {panel.background} | --gw-datepicker-panel-background | hsl(0, 0%, 100%) |
| datepicker.panel.border.color | {panel.border.color} | --gw-datepicker-panel-border-color | hsl(220, 14%, 95%) |
| datepicker.panel.color | {default.color} | --gw-datepicker-panel-color | hsl(220, 40%, 7%) |
| datepicker.header.background | {default.background} | --gw-datepicker-header-background | hsl(0, 0%, 100%) |
| datepicker.header.border.color | {default.border.color} | --gw-datepicker-header-border-color | hsl(220, 13%, 91%) |
| datepicker.header.color | {default.color} | --gw-datepicker-header-color | hsl(220, 40%, 7%) |
| datepicker.dropdown.border.color | {form.field.border.color} | --gw-datepicker-dropdown-border-color | hsl(220, 13%, 91%) |
| datepicker.dropdown.hover.border.color | {form.field.border.color} | --gw-datepicker-dropdown-hover-border-color | hsl(220, 13%, 91%) |
| datepicker.dropdown.active.border.color | {form.field.border.color} | --gw-datepicker-dropdown-active-border-color | hsl(220, 13%, 91%) |
| datepicker.dropdown.focus.ring.color | {focus.ring.color} | --gw-datepicker-dropdown-focus-ring-color | hsl(232, 98%, 41%) |
| datepicker.input.icon.color | {form.field.icon.color} | --gw-datepicker-input-icon-color | hsl(220, 9%, 46%) |
| datepicker.select.month.hover.background | {hover.background} | --gw-datepicker-select-month-hover-background | hsl(220, 13%, 91%) |
| datepicker.select.month.hover.color | {hover.color} | --gw-datepicker-select-month-hover-color | hsl(212, 28%, 14%) |
| datepicker.select.month.color | {default.color} | --gw-datepicker-select-month-color | hsl(220, 40%, 7%) |
| datepicker.select.year.hover.background | {hover.background} | --gw-datepicker-select-year-hover-background | hsl(220, 13%, 91%) |
| datepicker.select.year.hover.color | {hover.color} | --gw-datepicker-select-year-hover-color | hsl(212, 28%, 14%) |
| datepicker.select.year.color | {default.color} | --gw-datepicker-select-year-color | hsl(220, 40%, 7%) |
| datepicker.group.border.color | {default.border.color} | --gw-datepicker-group-border-color | hsl(220, 13%, 91%) |
| datepicker.week.day.color | {default.color} | --gw-datepicker-week-day-color | hsl(220, 40%, 7%) |
| datepicker.date.hover.background | {hover.background} | --gw-datepicker-date-hover-background | hsl(220, 13%, 91%) |
| datepicker.date.hover.color | {hover.color} | --gw-datepicker-date-hover-color | hsl(212, 28%, 14%) |
| datepicker.date.selected.background | {primary.base} | --gw-datepicker-date-selected-background | hsl(232, 98%, 41%) |
| datepicker.date.selected.color | {primary.contrast.color} | --gw-datepicker-date-selected-color | hsl(210, 20%, 98%) |
| datepicker.date.range.selected.background | {highlight.background} | --gw-datepicker-date-range-selected-background | hsl(213, 36%, 94%) |
| datepicker.date.range.selected.color | {highlight.color} | --gw-datepicker-date-range-selected-color | hsl(232, 98%, 41%) |
| datepicker.date.color | {default.color} | --gw-datepicker-date-color | hsl(220, 40%, 7%) |
| datepicker.date.focus.ring.color | {focus.ring.color} | --gw-datepicker-date-focus-ring-color | hsl(232, 98%, 41%) |
| datepicker.buttonbar.border.color | {default.border.color} | --gw-datepicker-buttonbar-border-color | hsl(220, 13%, 91%) |
| datepicker.time.picker.border.color | {default.border.color} | --gw-datepicker-time-picker-border-color | hsl(220, 13%, 91%) |
| dialog.background | {overlay.modal.background} | --gw-dialog-background | hsl(0, 0%, 100%) |
| dialog.header.background | {background.header} | --gw-dialog-header-background | hsl(240, 98%, 98%) |
| dialog.header.close.button.color | {close.button.color} | --gw-dialog-header-close-button-color | hsl(220, 9%, 46%) |
| dialog.header.border.bottom.color | {overlay.modal.border.color} | --gw-dialog-header-border-bottom-color | hsl(220, 14%, 95%) |
| dialog.color | {overlay.modal.color} | --gw-dialog-color | hsl(220, 40%, 7%) |
| dialog.border.color | {overlay.modal.border.color} | --gw-dialog-border-color | hsl(220, 14%, 95%) |
| dialog.footer.border.top.color | {overlay.modal.border.color} | --gw-dialog-footer-border-top-color | hsl(220, 14%, 95%) |
| drawer.background | {overlay.modal.background} | --gw-drawer-background | hsl(0, 0%, 100%) |
| drawer.border.color | {border.color.default} | --gw-drawer-border-color | hsl(220, 13%, 91%) |
| drawer.color | {overlay.modal.color} | --gw-drawer-color | hsl(220, 40%, 7%) |
| rating.icon.color | {text.muted.color} | --gw-rating-icon-color | hsl(217, 19%, 27%) |
| rating.icon.hover.color | {primary.base} | --gw-rating-icon-hover-color | hsl(232, 98%, 41%) |
| rating.icon.active.color | {primary.base} | --gw-rating-icon-active-color | hsl(232, 98%, 41%) |
| rating.focus.ring.color | {focus.ring.color} | --gw-rating-focus-ring-color | hsl(232, 98%, 41%) |
| avatar.background | {default.border.color} | --gw-avatar-background | hsl(220, 13%, 91%) |
| avatar.group.border.color | {default.background} | --gw-avatar-group-border-color | hsl(0, 0%, 100%) |
| avatar.color | {default.color} | --gw-avatar-color | hsl(220, 40%, 7%) |
| chip.remove.icon.focus.ring.color | {focus.ring.color} | --gw-chip-remove-icon-focus-ring-color | hsl(232, 98%, 41%) |
| progressbar.background | {default.border.color} | --gw-progressbar-background | hsl(220, 13%, 91%) |
| progressbar.value.background | {primary.base} | --gw-progressbar-value-background | hsl(232, 98%, 41%) |
| progressbar.label.color | {foreground.on-brand} | --gw-progressbar-label-color | hsl(0, 0%, 100%) |
| breadcrumb.background | {default.background} | --gw-breadcrumb-background | hsl(0, 0%, 100%) |
| breadcrumb.item.color | {text.muted.color} | --gw-breadcrumb-item-color | hsl(217, 19%, 27%) |
| breadcrumb.item.hover.color | {text.color} | --gw-breadcrumb-item-hover-color | hsl(220, 40%, 7%) |
| breadcrumb.item.icon.color | {sidenav.menuitem.icon.second.color} | --gw-breadcrumb-item-icon-color | hsl(220, 9%, 46%) |
| breadcrumb.item.icon.hover.color | {form.field.icon.focus.color} | --gw-breadcrumb-item-icon-hover-color | hsl(231, 98%, 32%) |
| breadcrumb.item.focus.ring.color | {focus.ring.color} | --gw-breadcrumb-item-focus-ring-color | hsl(232, 98%, 41%) |
| breadcrumb.separator.color | {sidenav.menuitem.icon.color} | --gw-breadcrumb-separator-color | hsl(220, 40%, 7%) |
| cascadeselect.background | {form.field.background} | --gw-cascadeselect-background | hsl(0, 0%, 100%) |
| cascadeselect.disabled.background | {form.field.disabled.background} | --gw-cascadeselect-disabled-background | hsl(220, 13%, 91%) |
| cascadeselect.disabled.color | {form.field.disabled.color} | --gw-cascadeselect-disabled-color | hsl(220, 11%, 65%) |
| cascadeselect.filled.background | {form.field.filled.background} | --gw-cascadeselect-filled-background | hsl(220, 14%, 95%) |
| cascadeselect.filled.focus.background | {form.field.filled.focus.background} | --gw-cascadeselect-filled-focus-background | hsl(220, 14%, 95%) |
| cascadeselect.filled.hover.background | {form.field.filled.hover.background} | --gw-cascadeselect-filled-hover-background | hsl(220, 13%, 91%) |
| cascadeselect.border.color | {form.field.border.color} | --gw-cascadeselect-border-color | hsl(220, 13%, 91%) |
| cascadeselect.hover.border.color | {form.field.hover.border.color} | --gw-cascadeselect-hover-border-color | hsl(220, 11%, 65%) |
| cascadeselect.focus.border.color | {form.field.focus.border.color} | --gw-cascadeselect-focus-border-color | hsl(211, 34%, 45%) |
| cascadeselect.focus.ring.color | {form.field.focus.ring.color} | --gw-cascadeselect-focus-ring-color | transparent |
| cascadeselect.invalid.border.color | {form.field.invalid.border.color} | --gw-cascadeselect-invalid-border-color | hsl(0, 60%, 68%) |
| cascadeselect.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-cascadeselect-invalid-placeholder-color | hsl(0, 60%, 51%) |
| cascadeselect.color | {form.field.color} | --gw-cascadeselect-color | hsl(212, 28%, 14%) |
| cascadeselect.placeholder.color | {form.field.placeholder.color} | --gw-cascadeselect-placeholder-color | hsl(220, 9%, 46%) |
| cascadeselect.dropdown.color | {form.field.icon.color} | --gw-cascadeselect-dropdown-color | hsl(220, 9%, 46%) |
| cascadeselect.overlay.background | {overlay.select.background} | --gw-cascadeselect-overlay-background | hsl(0, 0%, 100%) |
| cascadeselect.overlay.border.color | {overlay.select.border.color} | --gw-cascadeselect-overlay-border-color | hsl(220, 13%, 91%) |
| cascadeselect.overlay.color | {overlay.select.color} | --gw-cascadeselect-overlay-color | hsl(220, 40%, 7%) |
| cascadeselect.option.focus.background | {list.option.focus.background} | --gw-cascadeselect-option-focus-background | hsl(220, 14%, 95%) |
| cascadeselect.option.focus.color | {list.option.focus.color} | --gw-cascadeselect-option-focus-color | hsl(212, 28%, 14%) |
| cascadeselect.option.selected.background | {list.option.selected.background} | --gw-cascadeselect-option-selected-background | hsl(213, 36%, 94%) |
| cascadeselect.option.selected.focus.background | {list.option.selected.focus.background} | --gw-cascadeselect-option-selected-focus-background | hsl(240, 98%, 96%) |
| cascadeselect.option.selected.focus.color | {list.option.selected.focus.color} | --gw-cascadeselect-option-selected-focus-color | hsl(232, 98%, 41%) |
| cascadeselect.option.selected.color | {list.option.selected.color} | --gw-cascadeselect-option-selected-color | hsl(220, 40%, 7%) |
| cascadeselect.option.color | {list.option.color} | --gw-cascadeselect-option-color | hsl(220, 40%, 7%) |
| cascadeselect.option.icon.color | {list.option.icon.color} | --gw-cascadeselect-option-icon-color | hsl(220, 11%, 65%) |
| cascadeselect.option.icon.focus.color | {list.option.icon.focus.color} | --gw-cascadeselect-option-icon-focus-color | hsl(220, 9%, 46%) |
| cascadeselect.clear.icon.color | {form.field.icon.color} | --gw-cascadeselect-clear-icon-color | hsl(220, 9%, 46%) |
| colorpicker.preview.focus.ring.color | {focus.ring.color} | --gw-colorpicker-preview-focus-ring-color | hsl(232, 98%, 41%) |
| select.background | {form.field.background} | --gw-select-background | hsl(0, 0%, 100%) |
| select.disabled.background | {form.field.disabled.background} | --gw-select-disabled-background | hsl(220, 13%, 91%) |
| select.disabled.color | {form.field.disabled.color} | --gw-select-disabled-color | hsl(220, 11%, 65%) |
| select.filled.background | {form.field.filled.background} | --gw-select-filled-background | hsl(220, 14%, 95%) |
| select.filled.focus.background | {form.field.filled.focus.background} | --gw-select-filled-focus-background | hsl(220, 14%, 95%) |
| select.filled.hover.background | {form.field.filled.hover.background} | --gw-select-filled-hover-background | hsl(220, 13%, 91%) |
| select.border.color | {form.field.border.color} | --gw-select-border-color | hsl(220, 13%, 91%) |
| select.hover.border.color | {form.field.hover.border.color} | --gw-select-hover-border-color | hsl(220, 11%, 65%) |
| select.focus.border.color | {form.field.focus.border.color} | --gw-select-focus-border-color | hsl(211, 34%, 45%) |
| select.focus.ring.color | {form.field.focus.ring.color} | --gw-select-focus-ring-color | transparent |
| select.invalid.border.color | {form.field.invalid.border.color} | --gw-select-invalid-border-color | hsl(0, 60%, 68%) |
| select.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-select-invalid-placeholder-color | hsl(0, 60%, 51%) |
| select.color | {form.field.color} | --gw-select-color | hsl(212, 28%, 14%) |
| select.placeholder.color | {form.field.placeholder.color} | --gw-select-placeholder-color | hsl(220, 9%, 46%) |
| select.dropdown.color | {form.field.icon.color} | --gw-select-dropdown-color | hsl(220, 9%, 46%) |
| select.overlay.background | {overlay.select.background} | --gw-select-overlay-background | hsl(0, 0%, 100%) |
| select.overlay.border.color | {overlay.select.border.color} | --gw-select-overlay-border-color | hsl(220, 13%, 91%) |
| select.overlay.color | {overlay.select.color} | --gw-select-overlay-color | hsl(220, 40%, 7%) |
| select.option.focus.background | {list.option.focus.background} | --gw-select-option-focus-background | hsl(220, 14%, 95%) |
| select.option.focus.color | {list.option.focus.color} | --gw-select-option-focus-color | hsl(212, 28%, 14%) |
| select.option.selected.background | {list.option.selected.background} | --gw-select-option-selected-background | hsl(213, 36%, 94%) |
| select.option.selected.focus.background | {list.option.selected.focus.background} | --gw-select-option-selected-focus-background | hsl(240, 98%, 96%) |
| select.option.selected.focus.color | {list.option.selected.focus.color} | --gw-select-option-selected-focus-color | hsl(232, 98%, 41%) |
| select.option.selected.color | {list.option.selected.color} | --gw-select-option-selected-color | hsl(220, 40%, 7%) |
| select.option.color | {list.option.color} | --gw-select-option-color | hsl(220, 40%, 7%) |
| select.option.group.background | {list.option.group.background} | --gw-select-option-group-background | transparent |
| select.option.group.color | {list.option.group.color} | --gw-select-option-group-color | hsl(220, 11%, 65%) |
| select.clear.icon.color | {form.field.icon.color} | --gw-select-clear-icon-color | hsl(220, 9%, 46%) |
| select.checkmark.color | {list.option.color} | --gw-select-checkmark-color | hsl(220, 40%, 7%) |
| editor.toolbar.background | {default.background} | --gw-editor-toolbar-background | hsl(0, 0%, 100%) |
| editor.toolbar.border.color | {default.border.color} | --gw-editor-toolbar-border-color | hsl(220, 13%, 91%) |
| editor.toolbar.item.color | {text.muted.color} | --gw-editor-toolbar-item-color | hsl(217, 19%, 27%) |
| editor.toolbar.item.hover.color | {text.color} | --gw-editor-toolbar-item-hover-color | hsl(220, 40%, 7%) |
| editor.toolbar.item.active.color | {primary.base} | --gw-editor-toolbar-item-active-color | hsl(232, 98%, 41%) |
| editor.toolbar.numbers.background | {list.option.focus.background} | --gw-editor-toolbar-numbers-background | hsl(220, 14%, 95%) |
| editor.toolbar.numbers.color | {default.muted.color} | --gw-editor-toolbar-numbers-color | hsl(211, 37%, 36%) |
| editor.menu.background | {default.background} | --gw-editor-menu-background | hsl(0, 0%, 100%) |
| editor.menu.item.color | {primary.base} | --gw-editor-menu-item-color | hsl(232, 98%, 41%) |
| editor.menu.item.hover.color | {primary.dark} | --gw-editor-menu-item-hover-color | hsl(231, 98%, 32%) |
| editor.menu.item.active.color | {primary.base} | --gw-editor-menu-item-active-color | hsl(232, 98%, 41%) |
| editor.overlay.background | {overlay.select.background} | --gw-editor-overlay-background | hsl(0, 0%, 100%) |
| editor.overlay.border.color | {overlay.select.border.color} | --gw-editor-overlay-border-color | hsl(220, 13%, 91%) |
| editor.overlay.color | {overlay.select.color} | --gw-editor-overlay-color | hsl(220, 40%, 7%) |
| editor.overlay.option.focus.background | {list.option.focus.background} | --gw-editor-overlay-option-focus-background | hsl(220, 14%, 95%) |
| editor.overlay.option.focus.color | {list.option.focus.color} | --gw-editor-overlay-option-focus-color | hsl(212, 28%, 14%) |
| editor.overlay.option.color | {list.option.color} | --gw-editor-overlay-option-color | hsl(220, 40%, 7%) |
| editor.content.background | {default.background} | --gw-editor-content-background | hsl(0, 0%, 100%) |
| editor.content.highlighted.background | {background.raised} | --gw-editor-content-highlighted-background | hsl(240, 98%, 98%) |
| editor.content.border.color | {border.color.default} | --gw-editor-content-border-color | hsl(220, 13%, 91%) |
| editor.content.color | {default.color} | --gw-editor-content-color | hsl(220, 40%, 7%) |
| inputgroup.addon.background | {form.field.background} | --gw-inputgroup-addon-background | hsl(0, 0%, 100%) |
| inputgroup.addon.border.color | {form.field.border.color} | --gw-inputgroup-addon-border-color | hsl(220, 13%, 91%) |
| inputgroup.addon.color | {form.field.icon.color} | --gw-inputgroup-addon-color | hsl(220, 9%, 46%) |
| textarea.background | {form.field.background} | --gw-textarea-background | hsl(0, 0%, 100%) |
| textarea.disabled.background | {form.field.disabled.background} | --gw-textarea-disabled-background | hsl(220, 13%, 91%) |
| textarea.disabled.color | {form.field.disabled.color} | --gw-textarea-disabled-color | hsl(220, 11%, 65%) |
| textarea.filled.background | {form.field.filled.background} | --gw-textarea-filled-background | hsl(220, 14%, 95%) |
| textarea.filled.focus.background | {form.field.filled.focus.background} | --gw-textarea-filled-focus-background | hsl(220, 14%, 95%) |
| textarea.filled.hover.background | {form.field.filled.hover.background} | --gw-textarea-filled-hover-background | hsl(220, 13%, 91%) |
| textarea.border.color | {form.field.border.color} | --gw-textarea-border-color | hsl(220, 13%, 91%) |
| textarea.hover.border.color | {form.field.hover.border.color} | --gw-textarea-hover-border-color | hsl(220, 11%, 65%) |
| textarea.focus.border.color | {form.field.focus.border.color} | --gw-textarea-focus-border-color | hsl(211, 34%, 45%) |
| textarea.focus.ring.color | {form.field.focus.ring.color} | --gw-textarea-focus-ring-color | transparent |
| textarea.invalid.border.color | {form.field.invalid.border.color} | --gw-textarea-invalid-border-color | hsl(0, 60%, 68%) |
| textarea.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-textarea-invalid-placeholder-color | hsl(0, 60%, 51%) |
| textarea.color | {form.field.color} | --gw-textarea-color | hsl(212, 28%, 14%) |
| textarea.placeholder.color | {form.field.placeholder.color} | --gw-textarea-placeholder-color | hsl(220, 9%, 46%) |
| knob.focus.ring.color | {focus.ring.color} | --gw-knob-focus-ring-color | hsl(232, 98%, 41%) |
| knob.value.background | {primary.base} | --gw-knob-value-background | hsl(232, 98%, 41%) |
| knob.range.background | {default.border.color} | --gw-knob-range-background | hsl(220, 13%, 91%) |
| knob.text.color | {text.muted.color} | --gw-knob-text-color | hsl(217, 19%, 27%) |
| listbox.background | {form.field.background} | --gw-listbox-background | hsl(0, 0%, 100%) |
| listbox.disabled.background | {form.field.disabled.background} | --gw-listbox-disabled-background | hsl(220, 13%, 91%) |
| listbox.disabled.color | {form.field.disabled.color} | --gw-listbox-disabled-color | hsl(220, 11%, 65%) |
| listbox.border.color | {form.field.border.color} | --gw-listbox-border-color | hsl(220, 13%, 91%) |
| listbox.invalid.border.color | {form.field.invalid.border.color} | --gw-listbox-invalid-border-color | hsl(0, 60%, 68%) |
| listbox.color | {form.field.color} | --gw-listbox-color | hsl(212, 28%, 14%) |
| listbox.option.focus.background | {list.option.focus.background} | --gw-listbox-option-focus-background | hsl(220, 14%, 95%) |
| listbox.option.focus.color | {list.option.focus.color} | --gw-listbox-option-focus-color | hsl(212, 28%, 14%) |
| listbox.option.selected.background | {list.option.selected.background} | --gw-listbox-option-selected-background | hsl(213, 36%, 94%) |
| listbox.option.selected.focus.background | {list.option.selected.focus.background} | --gw-listbox-option-selected-focus-background | hsl(240, 98%, 96%) |
| listbox.option.selected.focus.color | {list.option.selected.focus.color} | --gw-listbox-option-selected-focus-color | hsl(232, 98%, 41%) |
| listbox.option.selected.color | {list.option.selected.color} | --gw-listbox-option-selected-color | hsl(220, 40%, 7%) |
| listbox.option.color | {list.option.color} | --gw-listbox-option-color | hsl(220, 40%, 7%) |
| listbox.option.group.background | {list.option.group.background} | --gw-listbox-option-group-background | transparent |
| listbox.option.group.color | {list.option.group.color} | --gw-listbox-option-group-color | hsl(220, 11%, 65%) |
| listbox.checkmark.color | {list.option.color} | --gw-listbox-checkmark-color | hsl(220, 40%, 7%) |
| multiselect.background | {form.field.background} | --gw-multiselect-background | hsl(0, 0%, 100%) |
| multiselect.disabled.background | {form.field.disabled.background} | --gw-multiselect-disabled-background | hsl(220, 13%, 91%) |
| multiselect.disabled.color | {form.field.disabled.color} | --gw-multiselect-disabled-color | hsl(220, 11%, 65%) |
| multiselect.filled.background | {form.field.filled.background} | --gw-multiselect-filled-background | hsl(220, 14%, 95%) |
| multiselect.filled.focus.background | {form.field.filled.focus.background} | --gw-multiselect-filled-focus-background | hsl(220, 14%, 95%) |
| multiselect.filled.hover.background | {form.field.filled.hover.background} | --gw-multiselect-filled-hover-background | hsl(220, 13%, 91%) |
| multiselect.border.color | {form.field.border.color} | --gw-multiselect-border-color | hsl(220, 13%, 91%) |
| multiselect.hover.border.color | {form.field.hover.border.color} | --gw-multiselect-hover-border-color | hsl(220, 11%, 65%) |
| multiselect.focus.border.color | {form.field.focus.border.color} | --gw-multiselect-focus-border-color | hsl(211, 34%, 45%) |
| multiselect.focus.ring.color | {form.field.focus.ring.color} | --gw-multiselect-focus-ring-color | transparent |
| multiselect.invalid.border.color | {form.field.invalid.border.color} | --gw-multiselect-invalid-border-color | hsl(0, 60%, 68%) |
| multiselect.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-multiselect-invalid-placeholder-color | hsl(0, 60%, 51%) |
| multiselect.color | {form.field.color} | --gw-multiselect-color | hsl(212, 28%, 14%) |
| multiselect.placeholder.color | {form.field.placeholder.color} | --gw-multiselect-placeholder-color | hsl(220, 9%, 46%) |
| multiselect.dropdown.color | {form.field.icon.color} | --gw-multiselect-dropdown-color | hsl(220, 9%, 46%) |
| multiselect.overlay.background | {overlay.select.background} | --gw-multiselect-overlay-background | hsl(0, 0%, 100%) |
| multiselect.overlay.border.color | {overlay.select.border.color} | --gw-multiselect-overlay-border-color | hsl(220, 13%, 91%) |
| multiselect.overlay.color | {overlay.select.color} | --gw-multiselect-overlay-color | hsl(220, 40%, 7%) |
| multiselect.option.focus.background | {list.option.focus.background} | --gw-multiselect-option-focus-background | hsl(220, 14%, 95%) |
| multiselect.option.focus.color | {list.option.focus.color} | --gw-multiselect-option-focus-color | hsl(212, 28%, 14%) |
| multiselect.option.selected.background | {list.option.selected.background} | --gw-multiselect-option-selected-background | hsl(213, 36%, 94%) |
| multiselect.option.selected.focus.background | {list.option.selected.focus.background} | --gw-multiselect-option-selected-focus-background | hsl(240, 98%, 96%) |
| multiselect.option.selected.focus.color | {list.option.selected.focus.color} | --gw-multiselect-option-selected-focus-color | hsl(232, 98%, 41%) |
| multiselect.option.selected.color | {list.option.selected.color} | --gw-multiselect-option-selected-color | hsl(220, 40%, 7%) |
| multiselect.option.color | {list.option.color} | --gw-multiselect-option-color | hsl(220, 40%, 7%) |
| multiselect.option.group.background | {list.option.group.background} | --gw-multiselect-option-group-background | transparent |
| multiselect.option.group.color | {list.option.group.color} | --gw-multiselect-option-group-color | hsl(220, 11%, 65%) |
| multiselect.clear.icon.color | {form.field.icon.color} | --gw-multiselect-clear-icon-color | hsl(220, 9%, 46%) |
| password.meter.background | {default.border.color} | --gw-password-meter-background | hsl(220, 13%, 91%) |
| password.icon.color | {form.field.icon.color} | --gw-password-icon-color | hsl(220, 9%, 46%) |
| password.overlay.background | {overlay.popover.background} | --gw-password-overlay-background | hsl(0, 0%, 100%) |
| password.overlay.border.color | {overlay.popover.border.color} | --gw-password-overlay-border-color | hsl(220, 13%, 91%) |
| password.overlay.color | {overlay.popover.color} | --gw-password-overlay-color | hsl(220, 40%, 7%) |
| slider.track.background | {default.border.color} | --gw-slider-track-background | hsl(220, 13%, 91%) |
| slider.range.background | {primary.base} | --gw-slider-range-background | hsl(232, 98%, 41%) |
| slider.handle.background | {default.border.color} | --gw-slider-handle-background | hsl(220, 13%, 91%) |
| slider.handle.hover.background | {default.border.color} | --gw-slider-handle-hover-background | hsl(220, 13%, 91%) |
| slider.handle.content.hover.background | {button.primary.hover.background} | --gw-slider-handle-content-hover-background | hsl(231, 98%, 32%) |
| slider.handle.focus.ring.color | {focus.ring.color} | --gw-slider-handle-focus-ring-color | hsl(232, 98%, 41%) |
| togglebutton.disabled.background | {form.field.disabled.background} | --gw-togglebutton-disabled-background | hsl(220, 13%, 91%) |
| togglebutton.disabled.border.color | {form.field.disabled.background} | --gw-togglebutton-disabled-border-color | hsl(220, 13%, 91%) |
| togglebutton.disabled.color | {form.field.disabled.color} | --gw-togglebutton-disabled-color | hsl(220, 11%, 65%) |
| togglebutton.invalid.border.color | {form.field.invalid.border.color} | --gw-togglebutton-invalid-border-color | hsl(0, 60%, 68%) |
| togglebutton.focus.ring.color | {focus.ring.color} | --gw-togglebutton-focus-ring-color | hsl(232, 98%, 41%) |
| togglebutton.icon.disabled.color | {form.field.disabled.color} | --gw-togglebutton-icon-disabled-color | hsl(220, 11%, 65%) |
| treeselect.background | {form.field.background} | --gw-treeselect-background | hsl(0, 0%, 100%) |
| treeselect.disabled.background | {form.field.disabled.background} | --gw-treeselect-disabled-background | hsl(220, 13%, 91%) |
| treeselect.disabled.color | {form.field.disabled.color} | --gw-treeselect-disabled-color | hsl(220, 11%, 65%) |
| treeselect.filled.background | {form.field.filled.background} | --gw-treeselect-filled-background | hsl(220, 14%, 95%) |
| treeselect.filled.focus.background | {form.field.filled.focus.background} | --gw-treeselect-filled-focus-background | hsl(220, 14%, 95%) |
| treeselect.filled.hover.background | {form.field.filled.hover.background} | --gw-treeselect-filled-hover-background | hsl(220, 13%, 91%) |
| treeselect.border.color | {form.field.border.color} | --gw-treeselect-border-color | hsl(220, 13%, 91%) |
| treeselect.hover.border.color | {form.field.hover.border.color} | --gw-treeselect-hover-border-color | hsl(220, 11%, 65%) |
| treeselect.focus.border.color | {form.field.focus.border.color} | --gw-treeselect-focus-border-color | hsl(211, 34%, 45%) |
| treeselect.focus.ring.color | {form.field.focus.ring.color} | --gw-treeselect-focus-ring-color | transparent |
| treeselect.invalid.border.color | {form.field.invalid.border.color} | --gw-treeselect-invalid-border-color | hsl(0, 60%, 68%) |
| treeselect.invalid.placeholder.color | {form.field.invalid.placeholder.color} | --gw-treeselect-invalid-placeholder-color | hsl(0, 60%, 51%) |
| treeselect.color | {form.field.color} | --gw-treeselect-color | hsl(212, 28%, 14%) |
| treeselect.placeholder.color | {form.field.placeholder.color} | --gw-treeselect-placeholder-color | hsl(220, 9%, 46%) |
| treeselect.dropdown.color | {form.field.icon.color} | --gw-treeselect-dropdown-color | hsl(220, 9%, 46%) |
| treeselect.overlay.background | {overlay.select.background} | --gw-treeselect-overlay-background | hsl(0, 0%, 100%) |
| treeselect.overlay.border.color | {overlay.select.border.color} | --gw-treeselect-overlay-border-color | hsl(220, 13%, 91%) |
| treeselect.overlay.color | {overlay.select.color} | --gw-treeselect-overlay-color | hsl(220, 40%, 7%) |
| treeselect.clear.icon.color | {form.field.icon.color} | --gw-treeselect-clear-icon-color | hsl(220, 9%, 46%) |
| dataview.border.color | transparent | --gw-dataview-border-color | transparent |
| dataview.header.background | {default.background} | --gw-dataview-header-background | hsl(0, 0%, 100%) |
| dataview.header.color | {default.color} | --gw-dataview-header-color | hsl(220, 40%, 7%) |
| dataview.header.border.color | {default.border.color} | --gw-dataview-header-border-color | hsl(220, 13%, 91%) |
| dataview.content.background | {default.background} | --gw-dataview-content-background | hsl(0, 0%, 100%) |
| dataview.content.color | {default.color} | --gw-dataview-content-color | hsl(220, 40%, 7%) |
| dataview.content.border.color | transparent | --gw-dataview-content-border-color | transparent |
| dataview.footer.background | {default.background} | --gw-dataview-footer-background | hsl(0, 0%, 100%) |
| dataview.footer.color | {default.color} | --gw-dataview-footer-color | hsl(220, 40%, 7%) |
| dataview.footer.border.color | {default.border.color} | --gw-dataview-footer-border-color | hsl(220, 13%, 91%) |
| dataview.paginator.top.border.color | {default.border.color} | --gw-dataview-paginator-top-border-color | hsl(220, 13%, 91%) |
| dataview.paginator.bottom.border.color | {default.border.color} | --gw-dataview-paginator-bottom-border-color | hsl(220, 13%, 91%) |
| accordion.panel.border.color | {panel.border.color} | --gw-accordion-panel-border-color | hsl(220, 14%, 95%) |
| accordion.header.color | {text.muted.color} | --gw-accordion-header-color | hsl(217, 19%, 27%) |
| accordion.header.hover.color | {text.color} | --gw-accordion-header-hover-color | hsl(220, 40%, 7%) |
| accordion.header.hover.background | {default.background} | --gw-accordion-header-hover-background | hsl(0, 0%, 100%) |
| accordion.header.active.color | {text.color} | --gw-accordion-header-active-color | hsl(220, 40%, 7%) |
| accordion.header.active.background | {default.background} | --gw-accordion-header-active-background | hsl(0, 0%, 100%) |
| accordion.header.active.hover.background | {default.background} | --gw-accordion-header-active-hover-background | hsl(0, 0%, 100%) |
| accordion.header.border.color | {default.border.color} | --gw-accordion-header-border-color | hsl(220, 13%, 91%) |
| accordion.header.background | {default.background} | --gw-accordion-header-background | hsl(0, 0%, 100%) |
| accordion.header.focus.ring.color | {focus.ring.color} | --gw-accordion-header-focus-ring-color | hsl(232, 98%, 41%) |
| accordion.header.toggle.icon.color | {text.muted.color} | --gw-accordion-header-toggle-icon-color | hsl(217, 19%, 27%) |
| accordion.header.toggle.icon.hover.color | {text.color} | --gw-accordion-header-toggle-icon-hover-color | hsl(220, 40%, 7%) |
| accordion.header.toggle.icon.active.color | {text.color} | --gw-accordion-header-toggle-icon-active-color | hsl(220, 40%, 7%) |
| accordion.header.toggle.icon.active.hover.color | {text.color} | --gw-accordion-header-toggle-icon-active-hover-color | hsl(220, 40%, 7%) |
| accordion.content.border.color | {border.color.default} | --gw-accordion-content-border-color | hsl(220, 13%, 91%) |
| accordion.content.background | {default.background} | --gw-accordion-content-background | hsl(0, 0%, 100%) |
| accordion.content.color | {text.color} | --gw-accordion-content-color | hsl(220, 40%, 7%) |
| divider.border.color | {default.border.color} | --gw-divider-border-color | hsl(220, 13%, 91%) |
| divider.content.background | {default.background} | --gw-divider-content-background | hsl(0, 0%, 100%) |
| divider.content.color | {default.muted.color} | --gw-divider-content-color | hsl(211, 37%, 36%) |
| fieldset.background | {default.background} | --gw-fieldset-background | hsl(0, 0%, 100%) |
| fieldset.border.color | {default.border.color} | --gw-fieldset-border-color | hsl(220, 13%, 91%) |
| fieldset.color | {default.color} | --gw-fieldset-color | hsl(220, 40%, 7%) |
| fieldset.legend.background | {default.background} | --gw-fieldset-legend-background | hsl(0, 0%, 100%) |
| fieldset.legend.hover.background | {hover.background} | --gw-fieldset-legend-hover-background | hsl(220, 13%, 91%) |
| fieldset.legend.hover.color | {hover.color} | --gw-fieldset-legend-hover-color | hsl(212, 28%, 14%) |
| fieldset.legend.color | {default.color} | --gw-fieldset-legend-color | hsl(220, 40%, 7%) |
| fieldset.legend.border.color | transparent | --gw-fieldset-legend-border-color | transparent |
| fieldset.legend.focus.ring.color | {focus.ring.color} | --gw-fieldset-legend-focus-ring-color | hsl(232, 98%, 41%) |
| fieldset.toggle.icon.color | {text.muted.color} | --gw-fieldset-toggle-icon-color | hsl(217, 19%, 27%) |
| fieldset.toggle.icon.hover.color | {default.muted.color} | --gw-fieldset-toggle-icon-hover-color | hsl(211, 37%, 36%) |
| splitter.background | {default.background} | --gw-splitter-background | hsl(0, 0%, 100%) |
| splitter.border.color | {default.border.color} | --gw-splitter-border-color | hsl(220, 13%, 91%) |
| splitter.color | {default.color} | --gw-splitter-color | hsl(220, 40%, 7%) |
| splitter.gutter.background | {neutral.shadow.0} | --gw-splitter-gutter-background | transparent |
| splitter.gutter.hover.background | {background.subtle} | --gw-splitter-gutter-hover-background | hsl(220, 13%, 91%) |
| splitter.handle.background | {neutral.shadow.0} | --gw-splitter-handle-background | transparent |
| splitter.handle.focus.ring.color | {focus.ring.color} | --gw-splitter-handle-focus-ring-color | hsl(232, 98%, 41%) |
| scrollpanel.bar.focus.ring.color | {neutral.shadow.0} | --gw-scrollpanel-bar-focus-ring-color | transparent |
| tabs.tablist.background | {neutral.shadow.0} | --gw-tabs-tablist-background | transparent |
| tabs.tablist.border.color | {default.border.color} | --gw-tabs-tablist-border-color | hsl(220, 13%, 91%) |
| tabs.tab.border.color | {neutral.lighter} | --gw-tabs-tab-border-color | hsl(220, 14%, 95%) |
| tabs.tab.border.bottom.color | {default.border.color} | --gw-tabs-tab-border-bottom-color | hsl(220, 13%, 91%) |
| tabs.tab.active.border.bottom.color | {default.background} | --gw-tabs-tab-active-border-bottom-color | hsl(0, 0%, 100%) |
| tabs.tab.active.border.color | {default.border.color} | --gw-tabs-tab-active-border-color | hsl(220, 13%, 91%) |
| tabs.tab.active.color | {foreground.on-surface.default} | --gw-tabs-tab-active-color | hsl(220, 40%, 7%) |
| tabs.tab.active.background | {neutral.shadow.0} | --gw-tabs-tab-active-background | transparent |
| tabs.tab.color | {neutral.dark} | --gw-tabs-tab-color | hsl(212, 28%, 14%) |
| tabs.tab.hover.color | {text.color} | --gw-tabs-tab-hover-color | hsl(220, 40%, 7%) |
| tabs.tab.hover.background | {neutral.200} | --gw-tabs-tab-hover-background | hsl(220, 13%, 91%) |
| tabs.tab.hover.border.color | {neutral.200} | --gw-tabs-tab-hover-border-color | hsl(220, 13%, 91%) |
| tabs.tab.hover.border.bottom.color | {default.border.color} | --gw-tabs-tab-hover-border-bottom-color | hsl(220, 13%, 91%) |
| tabs.tab.background | {neutral.lighter} | --gw-tabs-tab-background | hsl(220, 14%, 95%) |
| tabs.tab.focus.ring.color | {border.color.focus} | --gw-tabs-tab-focus-ring-color | hsl(211, 34%, 45%) |
| tabs.tab.disabled.color | {disabled.color} | --gw-tabs-tab-disabled-color | hsl(220, 11%, 65%) |
| tabs.tab.disabled.background | {background.disabled} | --gw-tabs-tab-disabled-background | hsl(220, 13%, 91%) |
| tabs.tab.disabled.border.color | {border.color.default} | --gw-tabs-tab-disabled-border-color | hsl(220, 13%, 91%) |
| tabs.tab.disabled.border.bottom.color | {default.border.color} | --gw-tabs-tab-disabled-border-bottom-color | hsl(220, 13%, 91%) |
| tabs.tabpanel.background | {panel.background} | --gw-tabs-tabpanel-background | hsl(0, 0%, 100%) |
| tabs.tabpanel.color | {default.color} | --gw-tabs-tabpanel-color | hsl(220, 40%, 7%) |
| tabs.tabpanel.focus.ring.color | {border.color.focus} | --gw-tabs-tabpanel-focus-ring-color | hsl(211, 34%, 45%) |
| tabs.nav.button.background | {default.background} | --gw-tabs-nav-button-background | hsl(0, 0%, 100%) |
| tabs.nav.button.color | {text.muted.color} | --gw-tabs-nav-button-color | hsl(217, 19%, 27%) |
| tabs.nav.button.hover.color | {text.color} | --gw-tabs-nav-button-hover-color | hsl(220, 40%, 7%) |
| tabs.nav.button.focus.ring.color | {focus.ring.color} | --gw-tabs-nav-button-focus-ring-color | hsl(232, 98%, 41%) |
| tabs.active.bar.background | {primary.base} | --gw-tabs-active-bar-background | hsl(232, 98%, 41%) |
| toolbar.background | {default.background} | --gw-toolbar-background | hsl(0, 0%, 100%) |
| toolbar.border.color | {default.border.color} | --gw-toolbar-border-color | hsl(220, 13%, 91%) |
| toolbar.color | {default.color} | --gw-toolbar-color | hsl(220, 40%, 7%) |
| confirmdialog.icon.color | {overlay.modal.color} | --gw-confirmdialog-icon-color | hsl(220, 40%, 7%) |
| confirmpopup.background | {overlay.popover.background} | --gw-confirmpopup-background | hsl(0, 0%, 100%) |
| confirmpopup.border.color | {overlay.popover.border.color} | --gw-confirmpopup-border-color | hsl(220, 13%, 91%) |
| confirmpopup.color | {overlay.popover.color} | --gw-confirmpopup-color | hsl(220, 40%, 7%) |
| confirmpopup.icon.color | {overlay.popover.color} | --gw-confirmpopup-icon-color | hsl(220, 40%, 7%) |
| contextmenu.background | {background.elevated} | --gw-contextmenu-background | hsl(0, 0%, 100%) |
| contextmenu.border.color | {default.border.color} | --gw-contextmenu-border-color | hsl(220, 13%, 91%) |
| contextmenu.color | {default.color} | --gw-contextmenu-color | hsl(220, 40%, 7%) |
| contextmenu.item.focus.background | {sidenav.menuitem.selected.background} | --gw-contextmenu-item-focus-background | hsl(240, 98%, 96%) |
| contextmenu.item.focus.color | {sidenav.menuitem.selected.color} | --gw-contextmenu-item-focus-color | hsl(231, 98%, 32%) |
| contextmenu.item.active.background | {sidenav.menuitem.selected.background} | --gw-contextmenu-item-active-background | hsl(240, 98%, 96%) |
| contextmenu.item.active.color | {sidenav.menuitem.selected.color} | --gw-contextmenu-item-active-color | hsl(231, 98%, 32%) |
| contextmenu.item.color | {sidenav.menuitem.color} | --gw-contextmenu-item-color | hsl(220, 40%, 7%) |
| contextmenu.item.icon.color | {sidenav.menuitem.icon.color} | --gw-contextmenu-item-icon-color | hsl(220, 40%, 7%) |
| contextmenu.item.icon.focus.color | {sidenav.menuitem.hover.icon.color} | --gw-contextmenu-item-icon-focus-color | hsl(231, 98%, 32%) |
| contextmenu.item.icon.active.color | {sidenav.menuitem.selected.icon.color} | --gw-contextmenu-item-icon-active-color | hsl(231, 98%, 32%) |
| contextmenu.submenu.icon.color | {sidenav.menuitem.icon.color} | --gw-contextmenu-submenu-icon-color | hsl(220, 40%, 7%) |
| contextmenu.submenu.icon.focus.color | {sidenav.menuitem.hover.color} | --gw-contextmenu-submenu-icon-focus-color | hsl(231, 98%, 32%) |
| contextmenu.submenu.icon.active.color | {sidenav.menuitem.selected.background} | --gw-contextmenu-submenu-icon-active-color | hsl(240, 98%, 96%) |
| contextmenu.separator.border.color | {default.border.color} | --gw-contextmenu-separator-border-color | hsl(220, 13%, 91%) |
| statusmenu.list.background | {contextmenu.background} | --gw-statusmenu-list-background | hsl(0, 0%, 100%) |
| statusmenu.list.border.color | {contextmenu.border.color} | --gw-statusmenu-list-border-color | hsl(220, 13%, 91%) |
| statusmenu.background | {neutral.shadow.0} | --gw-statusmenu-background | transparent |
| statusmenu.warning.background | {warning.lighter} | --gw-statusmenu-warning-background | hsl(48, 90%, 98%) |
| statusmenu.danger.background | {error.lighter} | --gw-statusmenu-danger-background | hsl(0, 60%, 94%) |
| dock.background | rgba(255, 255, 255, 0.1) | --gw-dock-background | rgba(255, 255, 255, 0.1) |
| dock.border.color | rgba(255, 255, 255, 0.2) | --gw-dock-border-color | rgba(255, 255, 255, 0.2) |
| dock.item.focus.ring.color | {focus.ring.color} | --gw-dock-item-focus-ring-color | hsl(232, 98%, 41%) |
| megamenu.background | {default.background} | --gw-megamenu-background | hsl(0, 0%, 100%) |
| megamenu.border.color | {default.border.color} | --gw-megamenu-border-color | hsl(220, 13%, 91%) |
| megamenu.color | {default.color} | --gw-megamenu-color | hsl(220, 40%, 7%) |
| megamenu.item.focus.background | {sidenav.menuitem.selected.background} | --gw-megamenu-item-focus-background | hsl(240, 98%, 96%) |
| megamenu.item.focus.color | {sidenav.menuitem.selected.color} | --gw-megamenu-item-focus-color | hsl(231, 98%, 32%) |
| megamenu.item.active.background | {sidenav.menuitem.selected.background} | --gw-megamenu-item-active-background | hsl(240, 98%, 96%) |
| megamenu.item.active.color | {sidenav.menuitem.selected.color} | --gw-megamenu-item-active-color | hsl(231, 98%, 32%) |
| megamenu.item.color | {sidenav.menuitem.color} | --gw-megamenu-item-color | hsl(220, 40%, 7%) |
| megamenu.item.icon.color | {sidenav.menuitem.icon.color} | --gw-megamenu-item-icon-color | hsl(220, 40%, 7%) |
| megamenu.item.icon.focus.color | {form.field.icon.focus.color} | --gw-megamenu-item-icon-focus-color | hsl(231, 98%, 32%) |
| megamenu.item.icon.active.color | {sidenav.menuitem.selected.icon.color} | --gw-megamenu-item-icon-active-color | hsl(231, 98%, 32%) |
| megamenu.overlay.background | {default.background} | --gw-megamenu-overlay-background | hsl(0, 0%, 100%) |
| megamenu.overlay.border.color | {default.border.color} | --gw-megamenu-overlay-border-color | hsl(220, 13%, 91%) |
| megamenu.overlay.color | {default.color} | --gw-megamenu-overlay-color | hsl(220, 40%, 7%) |
| megamenu.submenu.label.background | {sidenav.menuitem.background} | --gw-megamenu-submenu-label-background | hsl(210, 20%, 98%) |
| megamenu.submenu.label.color | {sidenav.menuitem.color} | --gw-megamenu-submenu-label-color | hsl(220, 40%, 7%) |
| megamenu.submenu.icon.color | {sidenav.menuitem.icon.color} | --gw-megamenu-submenu-icon-color | hsl(220, 40%, 7%) |
| megamenu.submenu.icon.focus.color | {sidenav.menuitem.hover.color} | --gw-megamenu-submenu-icon-focus-color | hsl(231, 98%, 32%) |
| megamenu.submenu.icon.active.color | {sidenav.menuitem.selected.background} | --gw-megamenu-submenu-icon-active-color | hsl(240, 98%, 96%) |
| megamenu.separator.border.color | {default.border.color} | --gw-megamenu-separator-border-color | hsl(220, 13%, 91%) |
| megamenu.mobile.button.color | {text.muted.color} | --gw-megamenu-mobile-button-color | hsl(217, 19%, 27%) |
| megamenu.mobile.button.hover.color | {default.muted.color} | --gw-megamenu-mobile-button-hover-color | hsl(211, 37%, 36%) |
| megamenu.mobile.button.hover.background | {hover.background} | --gw-megamenu-mobile-button-hover-background | hsl(220, 13%, 91%) |
| megamenu.mobile.button.focus.ring.color | {focus.ring.color} | --gw-megamenu-mobile-button-focus-ring-color | hsl(232, 98%, 41%) |
| menu.background | {default.background} | --gw-menu-background | hsl(0, 0%, 100%) |
| menu.border.color | {default.border.color} | --gw-menu-border-color | hsl(220, 13%, 91%) |
| menu.color | {default.color} | --gw-menu-color | hsl(220, 40%, 7%) |
| menu.item.focus.background | {sidenav.menuitem.selected.background} | --gw-menu-item-focus-background | hsl(240, 98%, 96%) |
| menu.item.focus.color | {sidenav.menuitem.selected.color} | --gw-menu-item-focus-color | hsl(231, 98%, 32%) |
| menu.item.color | {sidenav.menuitem.color} | --gw-menu-item-color | hsl(220, 40%, 7%) |
| menu.item.icon.color | {sidenav.menuitem.icon.color} | --gw-menu-item-icon-color | hsl(220, 40%, 7%) |
| menu.item.icon.focus.color | {sidenav.menuitem.hover.icon.color} | --gw-menu-item-icon-focus-color | hsl(231, 98%, 32%) |
| menu.submenu.label.background | {sidenav.menuitem.background} | --gw-menu-submenu-label-background | hsl(210, 20%, 98%) |
| menu.submenu.label.color | {sidenav.menuitem.color} | --gw-menu-submenu-label-color | hsl(220, 40%, 7%) |
| menu.separator.border.color | {default.border.color} | --gw-menu-separator-border-color | hsl(220, 13%, 91%) |
| menubar.background | {default.background} | --gw-menubar-background | hsl(0, 0%, 100%) |
| menubar.border.color | {default.border.color} | --gw-menubar-border-color | hsl(220, 13%, 91%) |
| menubar.color | {default.color} | --gw-menubar-color | hsl(220, 40%, 7%) |
| menubar.item.focus.background | {sidenav.menuitem.selected.background} | --gw-menubar-item-focus-background | hsl(240, 98%, 96%) |
| menubar.item.focus.color | {sidenav.menuitem.selected.color} | --gw-menubar-item-focus-color | hsl(231, 98%, 32%) |
| menubar.item.active.background | {sidenav.menuitem.selected.background} | --gw-menubar-item-active-background | hsl(240, 98%, 96%) |
| menubar.item.active.color | {sidenav.menuitem.selected.color} | --gw-menubar-item-active-color | hsl(231, 98%, 32%) |
| menubar.item.color | {sidenav.menuitem.color} | --gw-menubar-item-color | hsl(220, 40%, 7%) |
| menubar.item.icon.color | {sidenav.menuitem.icon.color} | --gw-menubar-item-icon-color | hsl(220, 40%, 7%) |
| menubar.item.icon.focus.color | {sidenav.menuitem.hover.icon.color} | --gw-menubar-item-icon-focus-color | hsl(231, 98%, 32%) |
| menubar.item.icon.active.color | {sidenav.menuitem.selected.icon.color} | --gw-menubar-item-icon-active-color | hsl(231, 98%, 32%) |
| menubar.submenu.background | {default.background} | --gw-menubar-submenu-background | hsl(0, 0%, 100%) |
| menubar.submenu.border.color | {default.border.color} | --gw-menubar-submenu-border-color | hsl(220, 13%, 91%) |
| menubar.submenu.icon.color | {sidenav.menuitem.icon.color} | --gw-menubar-submenu-icon-color | hsl(220, 40%, 7%) |
| menubar.submenu.icon.focus.color | {sidenav.menuitem.hover.color} | --gw-menubar-submenu-icon-focus-color | hsl(231, 98%, 32%) |
| menubar.submenu.icon.active.color | {sidenav.menuitem.selected.background} | --gw-menubar-submenu-icon-active-color | hsl(240, 98%, 96%) |
| menubar.separator.border.color | {default.border.color} | --gw-menubar-separator-border-color | hsl(220, 13%, 91%) |
| menubar.mobile.button.color | {text.muted.color} | --gw-menubar-mobile-button-color | hsl(217, 19%, 27%) |
| menubar.mobile.button.hover.color | {default.muted.color} | --gw-menubar-mobile-button-hover-color | hsl(211, 37%, 36%) |
| menubar.mobile.button.hover.background | {hover.background} | --gw-menubar-mobile-button-hover-background | hsl(220, 13%, 91%) |
| menubar.mobile.button.focus.ring.color | {focus.ring.color} | --gw-menubar-mobile-button-focus-ring-color | hsl(232, 98%, 41%) |
| panelmenu.panel.background | {panel.background} | --gw-panelmenu-panel-background | hsl(0, 0%, 100%) |
| panelmenu.panel.border.color | {panel.border.color} | --gw-panelmenu-panel-border-color | hsl(220, 14%, 95%) |
| panelmenu.panel.color | {default.color} | --gw-panelmenu-panel-color | hsl(220, 40%, 7%) |
| panelmenu.item.focus.background | {sidenav.menuitem.selected.background} | --gw-panelmenu-item-focus-background | hsl(240, 98%, 96%) |
| panelmenu.item.focus.color | {sidenav.menuitem.selected.color} | --gw-panelmenu-item-focus-color | hsl(231, 98%, 32%) |
| panelmenu.item.color | {sidenav.menuitem.color} | --gw-panelmenu-item-color | hsl(220, 40%, 7%) |
| panelmenu.item.icon.color | {sidenav.menuitem.icon.color} | --gw-panelmenu-item-icon-color | hsl(220, 40%, 7%) |
| panelmenu.item.icon.focus.color | {sidenav.menuitem.hover.icon.color} | --gw-panelmenu-item-icon-focus-color | hsl(231, 98%, 32%) |
| panelmenu.submenu.icon.color | {sidenav.menuitem.icon.color} | --gw-panelmenu-submenu-icon-color | hsl(220, 40%, 7%) |
| panelmenu.submenu.icon.focus.color | {sidenav.menuitem.hover.color} | --gw-panelmenu-submenu-icon-focus-color | hsl(231, 98%, 32%) |
| tieredmenu.background | {background.elevated} | --gw-tieredmenu-background | hsl(0, 0%, 100%) |
| tieredmenu.border.color | {default.border.color} | --gw-tieredmenu-border-color | hsl(220, 13%, 91%) |
| tieredmenu.color | {default.color} | --gw-tieredmenu-color | hsl(220, 40%, 7%) |
| tieredmenu.item.focus.background | {sidenav.menuitem.hover.background} | --gw-tieredmenu-item-focus-background | hsl(240, 98%, 98%) |
| tieredmenu.item.focus.color | {sidenav.menuitem.selected.color} | --gw-tieredmenu-item-focus-color | hsl(231, 98%, 32%) |
| tieredmenu.item.active.background | {sidenav.menuitem.selected.background} | --gw-tieredmenu-item-active-background | hsl(240, 98%, 96%) |
| tieredmenu.item.active.color | {sidenav.menuitem.selected.color} | --gw-tieredmenu-item-active-color | hsl(231, 98%, 32%) |
| tieredmenu.item.color | {sidenav.menuitem.color} | --gw-tieredmenu-item-color | hsl(220, 40%, 7%) |
| tieredmenu.item.icon.color | {sidenav.menuitem.icon.color} | --gw-tieredmenu-item-icon-color | hsl(220, 40%, 7%) |
| tieredmenu.item.icon.focus.color | {sidenav.menuitem.hover.icon.color} | --gw-tieredmenu-item-icon-focus-color | hsl(231, 98%, 32%) |
| tieredmenu.item.icon.active.color | {sidenav.menuitem.selected.icon.color} | --gw-tieredmenu-item-icon-active-color | hsl(231, 98%, 32%) |
| tieredmenu.item.disabled.background | {background.disabled} | --gw-tieredmenu-item-disabled-background | hsl(220, 13%, 91%) |
| tieredmenu.item.disabled.color | {disabled.color} | --gw-tieredmenu-item-disabled-color | hsl(220, 11%, 65%) |
| tieredmenu.submenu.icon.color | {sidenav.menuitem.icon.color} | --gw-tieredmenu-submenu-icon-color | hsl(220, 40%, 7%) |
| tieredmenu.submenu.icon.focus.color | {sidenav.menuitem.hover.color} | --gw-tieredmenu-submenu-icon-focus-color | hsl(231, 98%, 32%) |
| tieredmenu.submenu.icon.active.color | {sidenav.menuitem.selected.background} | --gw-tieredmenu-submenu-icon-active-color | hsl(240, 98%, 96%) |
| tieredmenu.separator.border.color | {default.border.color} | --gw-tieredmenu-separator-border-color | hsl(220, 13%, 91%) |
| organizationchart.node.background | {default.background} | --gw-organizationchart-node-background | hsl(0, 0%, 100%) |
| organizationchart.node.hover.background | {hover.background} | --gw-organizationchart-node-hover-background | hsl(220, 13%, 91%) |
| organizationchart.node.hover.color | {hover.color} | --gw-organizationchart-node-hover-color | hsl(212, 28%, 14%) |
| organizationchart.node.selected.background | {highlight.background} | --gw-organizationchart-node-selected-background | hsl(213, 36%, 94%) |
| organizationchart.node.selected.color | {highlight.color} | --gw-organizationchart-node-selected-color | hsl(232, 98%, 41%) |
| organizationchart.node.border.color | {default.border.color} | --gw-organizationchart-node-border-color | hsl(220, 13%, 91%) |
| organizationchart.node.color | {default.color} | --gw-organizationchart-node-color | hsl(220, 40%, 7%) |
| organizationchart.node.toggle.button.background | {default.background} | --gw-organizationchart-node-toggle-button-background | hsl(0, 0%, 100%) |
| organizationchart.node.toggle.button.hover.background | {hover.background} | --gw-organizationchart-node-toggle-button-hover-background | hsl(220, 13%, 91%) |
| organizationchart.node.toggle.button.hover.color | {text.color} | --gw-organizationchart-node-toggle-button-hover-color | hsl(220, 40%, 7%) |
| organizationchart.node.toggle.button.border.color | {default.border.color} | --gw-organizationchart-node-toggle-button-border-color | hsl(220, 13%, 91%) |
| organizationchart.node.toggle.button.color | {text.muted.color} | --gw-organizationchart-node-toggle-button-color | hsl(217, 19%, 27%) |
| organizationchart.node.toggle.button.focus.ring.color | {focus.ring.color} | --gw-organizationchart-node-toggle-button-focus-ring-color | hsl(232, 98%, 41%) |
| organizationchart.connector.color | {default.border.color} | --gw-organizationchart-connector-color | hsl(220, 13%, 91%) |
| paginator.background | {default.background} | --gw-paginator-background | hsl(0, 0%, 100%) |
| paginator.color | {default.color} | --gw-paginator-color | hsl(220, 40%, 7%) |
| paginator.nav.button.background | transparent | --gw-paginator-nav-button-background | transparent |
| paginator.nav.button.hover.background | {hover.background} | --gw-paginator-nav-button-hover-background | hsl(220, 13%, 91%) |
| paginator.nav.button.hover.color | {default.muted.color} | --gw-paginator-nav-button-hover-color | hsl(211, 37%, 36%) |
| paginator.nav.button.selected.background | {highlight.background} | --gw-paginator-nav-button-selected-background | hsl(213, 36%, 94%) |
| paginator.nav.button.selected.color | {highlight.color} | --gw-paginator-nav-button-selected-color | hsl(232, 98%, 41%) |
| paginator.nav.button.focus.ring.color | {focus.ring.color} | --gw-paginator-nav-button-focus-ring-color | hsl(232, 98%, 41%) |
| paginator.nav.button.color | {text.muted.color} | --gw-paginator-nav-button-color | hsl(217, 19%, 27%) |
| paginator.current.page.report.color | {text.muted.color} | --gw-paginator-current-page-report-color | hsl(217, 19%, 27%) |
| datatable.header.background | {default.background} | --gw-datatable-header-background | hsl(0, 0%, 100%) |
| datatable.header.border.color | {datatable.border.color} | --gw-datatable-header-border-color | hsl(220, 13%, 91%) |
| datatable.header.color | {default.color} | --gw-datatable-header-color | hsl(220, 40%, 7%) |
| datatable.header.cell.background | {default.background} | --gw-datatable-header-cell-background | hsl(0, 0%, 100%) |
| datatable.header.cell.hover.background | {hover.background} | --gw-datatable-header-cell-hover-background | hsl(220, 13%, 91%) |
| datatable.header.cell.hover.color | {hover.color} | --gw-datatable-header-cell-hover-color | hsl(212, 28%, 14%) |
| datatable.header.cell.selected.background | {highlight.background} | --gw-datatable-header-cell-selected-background | hsl(213, 36%, 94%) |
| datatable.header.cell.selected.color | {highlight.color} | --gw-datatable-header-cell-selected-color | hsl(232, 98%, 41%) |
| datatable.header.cell.border.color | {datatable.border.color} | --gw-datatable-header-cell-border-color | hsl(220, 13%, 91%) |
| datatable.header.cell.color | {default.color} | --gw-datatable-header-cell-color | hsl(220, 40%, 7%) |
| datatable.header.cell.focus.ring.color | {focus.ring.color} | --gw-datatable-header-cell-focus-ring-color | hsl(232, 98%, 41%) |
| datatable.row.background | {default.background} | --gw-datatable-row-background | hsl(0, 0%, 100%) |
| datatable.row.hover.background | {background.raised} | --gw-datatable-row-hover-background | hsl(240, 98%, 98%) |
| datatable.row.hover.color | {hover.color} | --gw-datatable-row-hover-color | hsl(212, 28%, 14%) |
| datatable.row.selected.background | {highlight.background} | --gw-datatable-row-selected-background | hsl(213, 36%, 94%) |
| datatable.row.selected.color | {highlight.color} | --gw-datatable-row-selected-color | hsl(232, 98%, 41%) |
| datatable.row.color | {default.color} | --gw-datatable-row-color | hsl(220, 40%, 7%) |
| datatable.row.focus.ring.color | {focus.ring.color} | --gw-datatable-row-focus-ring-color | hsl(232, 98%, 41%) |
| datatable.row.toggle.button.hover.background | {hover.background} | --gw-datatable-row-toggle-button-hover-background | hsl(220, 13%, 91%) |
| datatable.row.toggle.button.hover.color | {text.color} | --gw-datatable-row-toggle-button-hover-color | hsl(220, 40%, 7%) |
| datatable.row.toggle.button.selected.hover.background | {default.background} | --gw-datatable-row-toggle-button-selected-hover-background | hsl(0, 0%, 100%) |
| datatable.row.toggle.button.selected.hover.color | {primary.base} | --gw-datatable-row-toggle-button-selected-hover-color | hsl(232, 98%, 41%) |
| datatable.row.toggle.button.color | {text.muted.color} | --gw-datatable-row-toggle-button-color | hsl(217, 19%, 27%) |
| datatable.row.toggle.button.focus.ring.color | {focus.ring.color} | --gw-datatable-row-toggle-button-focus-ring-color | hsl(232, 98%, 41%) |
| datatable.body.cell.border.color | {datatable.border.color} | --gw-datatable-body-cell-border-color | hsl(220, 13%, 91%) |
| datatable.footer.cell.background | {default.background} | --gw-datatable-footer-cell-background | hsl(0, 0%, 100%) |
| datatable.footer.cell.border.color | {datatable.border.color} | --gw-datatable-footer-cell-border-color | hsl(220, 13%, 91%) |
| datatable.footer.cell.color | {default.color} | --gw-datatable-footer-cell-color | hsl(220, 40%, 7%) |
| datatable.footer.background | {default.background} | --gw-datatable-footer-background | hsl(0, 0%, 100%) |
| datatable.footer.border.color | {neutral.shadow.0} | --gw-datatable-footer-border-color | transparent |
| datatable.footer.color | {default.color} | --gw-datatable-footer-color | hsl(220, 40%, 7%) |
| datatable.drop.point.color | {primary.base} | --gw-datatable-drop-point-color | hsl(232, 98%, 41%) |
| datatable.resize.indicator.color | {primary.base} | --gw-datatable-resize-indicator-color | hsl(232, 98%, 41%) |
| datatable.sort.icon.color | {text.muted.color} | --gw-datatable-sort-icon-color | hsl(217, 19%, 27%) |
| datatable.sort.icon.hover.color | {default.muted.color} | --gw-datatable-sort-icon-hover-color | hsl(211, 37%, 36%) |
| datatable.filter.overlay.select.background | {overlay.select.background} | --gw-datatable-filter-overlay-select-background | hsl(0, 0%, 100%) |
| datatable.filter.overlay.select.border.color | {overlay.select.border.color} | --gw-datatable-filter-overlay-select-border-color | hsl(220, 13%, 91%) |
| datatable.filter.overlay.select.color | {overlay.select.color} | --gw-datatable-filter-overlay-select-color | hsl(220, 40%, 7%) |
| datatable.filter.overlay.popover.background | {overlay.popover.background} | --gw-datatable-filter-overlay-popover-background | hsl(0, 0%, 100%) |
| datatable.filter.overlay.popover.border.color | {overlay.popover.border.color} | --gw-datatable-filter-overlay-popover-border-color | hsl(220, 13%, 91%) |
| datatable.filter.overlay.popover.color | {overlay.popover.color} | --gw-datatable-filter-overlay-popover-color | hsl(220, 40%, 7%) |
| datatable.filter.rule.border.color | {default.border.color} | --gw-datatable-filter-rule-border-color | hsl(220, 13%, 91%) |
| datatable.filter.constraint.focus.background | {list.option.focus.background} | --gw-datatable-filter-constraint-focus-background | hsl(220, 14%, 95%) |
| datatable.filter.constraint.focus.color | {list.option.focus.color} | --gw-datatable-filter-constraint-focus-color | hsl(212, 28%, 14%) |
| datatable.filter.constraint.selected.background | {list.option.selected.background} | --gw-datatable-filter-constraint-selected-background | hsl(213, 36%, 94%) |
| datatable.filter.constraint.selected.focus.background | {list.option.selected.focus.background} | --gw-datatable-filter-constraint-selected-focus-background | hsl(240, 98%, 96%) |
| datatable.filter.constraint.selected.focus.color | {list.option.selected.focus.color} | --gw-datatable-filter-constraint-selected-focus-color | hsl(232, 98%, 41%) |
| datatable.filter.constraint.selected.color | {list.option.selected.color} | --gw-datatable-filter-constraint-selected-color | hsl(220, 40%, 7%) |
| datatable.filter.constraint.color | {list.option.color} | --gw-datatable-filter-constraint-color | hsl(220, 40%, 7%) |
| datatable.filter.constraint.separator.border.color | {default.border.color} | --gw-datatable-filter-constraint-separator-border-color | hsl(220, 13%, 91%) |
| datatable.paginator.top.border.color | {datatable.border.color} | --gw-datatable-paginator-top-border-color | hsl(220, 13%, 91%) |
| datatable.paginator.bottom.border.color | {datatable.border.color} | --gw-datatable-paginator-bottom-border-color | hsl(220, 13%, 91%) |
| timeline.event.marker.border.color | {default.border.color} | --gw-timeline-event-marker-border-color | hsl(220, 13%, 91%) |
| timeline.event.marker.background | {default.background} | --gw-timeline-event-marker-background | hsl(0, 0%, 100%) |
| timeline.event.marker.content.background | {primary.base} | --gw-timeline-event-marker-content-background | hsl(232, 98%, 41%) |
| timeline.event.connector.color | {default.border.color} | --gw-timeline-event-connector-color | hsl(220, 13%, 91%) |
| tree.background | {default.background} | --gw-tree-background | hsl(0, 0%, 100%) |
| tree.color | {default.color} | --gw-tree-color | hsl(220, 40%, 7%) |
| tree.node.hover.background | {hover.background} | --gw-tree-node-hover-background | hsl(220, 13%, 91%) |
| tree.node.hover.color | {hover.color} | --gw-tree-node-hover-color | hsl(212, 28%, 14%) |
| tree.node.selected.background | {highlight.background} | --gw-tree-node-selected-background | hsl(213, 36%, 94%) |
| tree.node.selected.color | {highlight.color} | --gw-tree-node-selected-color | hsl(232, 98%, 41%) |
| tree.node.color | {text.color} | --gw-tree-node-color | hsl(220, 40%, 7%) |
| tree.node.focus.ring.color | {focus.ring.color} | --gw-tree-node-focus-ring-color | hsl(232, 98%, 41%) |
| tree.node.icon.color | {text.muted.color} | --gw-tree-node-icon-color | hsl(217, 19%, 27%) |
| tree.node.icon.hover.color | {default.muted.color} | --gw-tree-node-icon-hover-color | hsl(211, 37%, 36%) |
| tree.node.icon.selected.color | {highlight.color} | --gw-tree-node-icon-selected-color | hsl(232, 98%, 41%) |
| tree.node.toggle.button.hover.background | {hover.background} | --gw-tree-node-toggle-button-hover-background | hsl(220, 13%, 91%) |
| tree.node.toggle.button.hover.color | {default.muted.color} | --gw-tree-node-toggle-button-hover-color | hsl(211, 37%, 36%) |
| tree.node.toggle.button.selected.hover.background | {default.background} | --gw-tree-node-toggle-button-selected-hover-background | hsl(0, 0%, 100%) |
| tree.node.toggle.button.selected.hover.color | {primary.base} | --gw-tree-node-toggle-button-selected-hover-color | hsl(232, 98%, 41%) |
| tree.node.toggle.button.color | {text.muted.color} | --gw-tree-node-toggle-button-color | hsl(217, 19%, 27%) |
| tree.node.toggle.button.focus.ring.color | {focus.ring.color} | --gw-tree-node-toggle-button-focus-ring-color | hsl(232, 98%, 41%) |
| virtualscroller.loader.mask.background | {default.background} | --gw-virtualscroller-loader-mask-background | hsl(0, 0%, 100%) |
| virtualscroller.loader.mask.color | {foreground.on-surface.subtle} | --gw-virtualscroller-loader-mask-color | hsl(220, 9%, 46%) |
| carousel.indicator.focus.ring.color | {focus.ring.color} | --gw-carousel-indicator-focus-ring-color | hsl(232, 98%, 41%) |
| image.preview.mask.background | {mask.background} | --gw-image-preview-mask-background | #111B2780 |
| image.preview.mask.color | {mask.color} | --gw-image-preview-mask-color | hsl(220, 13%, 91%) |
| image.toolbar.background | rgba(255, 255, 255, 0.1) | --gw-image-toolbar-background | rgba(255, 255, 255, 0.1) |
| image.toolbar.border.color | rgba(255, 255, 255, 0.2) | --gw-image-toolbar-border-color | rgba(255, 255, 255, 0.2) |
| image.action.hover.background | rgba(255, 255, 255, 0.1) | --gw-image-action-hover-background | rgba(255, 255, 255, 0.1) |
| image.action.hover.color | {neutral.0} | --gw-image-action-hover-color | hsl(0, 0%, 100%) |
| image.action.color | {neutral.100} | --gw-image-action-color | hsl(220, 14%, 95%) |
| image.action.focus.ring.color | {focus.ring.color} | --gw-image-action-focus-ring-color | hsl(232, 98%, 41%) |
| treetable.header.background | {default.background} | --gw-treetable-header-background | hsl(0, 0%, 100%) |
| treetable.header.border.color | {treetable.border.color} | --gw-treetable-header-border-color | hsl(220, 13%, 91%) |
| treetable.header.color | {default.color} | --gw-treetable-header-color | hsl(220, 40%, 7%) |
| treetable.header.cell.background | {default.background} | --gw-treetable-header-cell-background | hsl(0, 0%, 100%) |
| treetable.header.cell.hover.background | {hover.background} | --gw-treetable-header-cell-hover-background | hsl(220, 13%, 91%) |
| treetable.header.cell.hover.color | {hover.color} | --gw-treetable-header-cell-hover-color | hsl(212, 28%, 14%) |
| treetable.header.cell.selected.background | {highlight.background} | --gw-treetable-header-cell-selected-background | hsl(213, 36%, 94%) |
| treetable.header.cell.selected.color | {highlight.color} | --gw-treetable-header-cell-selected-color | hsl(232, 98%, 41%) |
| treetable.header.cell.border.color | {treetable.border.color} | --gw-treetable-header-cell-border-color | hsl(220, 13%, 91%) |
| treetable.header.cell.color | {default.color} | --gw-treetable-header-cell-color | hsl(220, 40%, 7%) |
| treetable.header.cell.focus.ring.color | {focus.ring.color} | --gw-treetable-header-cell-focus-ring-color | hsl(232, 98%, 41%) |
| treetable.row.background | {default.background} | --gw-treetable-row-background | hsl(0, 0%, 100%) |
| treetable.row.hover.background | {hover.background} | --gw-treetable-row-hover-background | hsl(220, 13%, 91%) |
| treetable.row.hover.color | {hover.color} | --gw-treetable-row-hover-color | hsl(212, 28%, 14%) |
| treetable.row.selected.background | {highlight.background} | --gw-treetable-row-selected-background | hsl(213, 36%, 94%) |
| treetable.row.selected.color | {highlight.color} | --gw-treetable-row-selected-color | hsl(232, 98%, 41%) |
| treetable.row.color | {default.color} | --gw-treetable-row-color | hsl(220, 40%, 7%) |
| treetable.row.focus.ring.color | {focus.ring.color} | --gw-treetable-row-focus-ring-color | hsl(232, 98%, 41%) |
| treetable.body.cell.border.color | {treetable.border.color} | --gw-treetable-body-cell-border-color | hsl(220, 13%, 91%) |
| treetable.footer.cell.background | {default.background} | --gw-treetable-footer-cell-background | hsl(0, 0%, 100%) |
| treetable.footer.cell.border.color | {treetable.border.color} | --gw-treetable-footer-cell-border-color | hsl(220, 13%, 91%) |
| treetable.footer.cell.color | {default.color} | --gw-treetable-footer-cell-color | hsl(220, 40%, 7%) |
| treetable.footer.background | {default.background} | --gw-treetable-footer-background | hsl(0, 0%, 100%) |
| treetable.footer.border.color | {treetable.border.color} | --gw-treetable-footer-border-color | hsl(220, 13%, 91%) |
| treetable.footer.color | {default.color} | --gw-treetable-footer-color | hsl(220, 40%, 7%) |
| treetable.resize.indicator.color | {primary.base} | --gw-treetable-resize-indicator-color | hsl(232, 98%, 41%) |
| treetable.sort.icon.color | {text.muted.color} | --gw-treetable-sort-icon-color | hsl(217, 19%, 27%) |
| treetable.sort.icon.hover.color | {default.muted.color} | --gw-treetable-sort-icon-hover-color | hsl(211, 37%, 36%) |
| treetable.node.toggle.button.hover.background | {hover.background} | --gw-treetable-node-toggle-button-hover-background | hsl(220, 13%, 91%) |
| treetable.node.toggle.button.hover.color | {text.color} | --gw-treetable-node-toggle-button-hover-color | hsl(220, 40%, 7%) |
| treetable.node.toggle.button.selected.hover.background | {default.background} | --gw-treetable-node-toggle-button-selected-hover-background | hsl(0, 0%, 100%) |
| treetable.node.toggle.button.selected.hover.color | {primary.base} | --gw-treetable-node-toggle-button-selected-hover-color | hsl(232, 98%, 41%) |
| treetable.node.toggle.button.color | {text.muted.color} | --gw-treetable-node-toggle-button-color | hsl(217, 19%, 27%) |
| treetable.node.toggle.button.focus.ring.color | {focus.ring.color} | --gw-treetable-node-toggle-button-focus-ring-color | hsl(232, 98%, 41%) |
| treetable.paginator.top.border.color | {default.border.color} | --gw-treetable-paginator-top-border-color | hsl(220, 13%, 91%) |
| treetable.paginator.bottom.border.color | {default.border.color} | --gw-treetable-paginator-bottom-border-color | hsl(220, 13%, 91%) |
| galleria.border.color | {default.border.color} | --gw-galleria-border-color | hsl(220, 13%, 91%) |
| galleria.nav.button.background | rgba(255, 255, 255, 0.1) | --gw-galleria-nav-button-background | rgba(255, 255, 255, 0.1) |
| galleria.nav.button.hover.background | rgba(255, 255, 255, 0.2) | --gw-galleria-nav-button-hover-background | rgba(255, 255, 255, 0.2) |
| galleria.nav.button.hover.color | {neutral.0} | --gw-galleria-nav-button-hover-color | hsl(0, 0%, 100%) |
| galleria.nav.button.color | {neutral.100} | --gw-galleria-nav-button-color | hsl(220, 14%, 95%) |
| galleria.nav.button.focus.ring.color | {focus.ring.color} | --gw-galleria-nav-button-focus-ring-color | hsl(232, 98%, 41%) |
| galleria.thumbnails.content.background | {default.background} | --gw-galleria-thumbnails-content-background | hsl(0, 0%, 100%) |
| galleria.thumbnail.nav.button.focus.ring.color | {focus.ring.color} | --gw-galleria-thumbnail-nav-button-focus-ring-color | hsl(232, 98%, 41%) |
| galleria.caption.background | rgba(0, 0, 0, 0.5) | --gw-galleria-caption-background | rgba(0, 0, 0, 0.5) |
| galleria.caption.color | {neutral.100} | --gw-galleria-caption-color | hsl(220, 14%, 95%) |
| galleria.indicator.button.active.background | {primary.base} | --gw-galleria-indicator-button-active-background | hsl(232, 98%, 41%) |
| galleria.indicator.button.focus.ring.color | {focus.ring.color} | --gw-galleria-indicator-button-focus-ring-color | hsl(232, 98%, 41%) |
| galleria.inset.indicator.list.background | rgba(0, 0, 0, 0.5) | --gw-galleria-inset-indicator-list-background | rgba(0, 0, 0, 0.5) |
| galleria.inset.indicator.button.background | rgba(255, 255, 255, 0.4) | --gw-galleria-inset-indicator-button-background | rgba(255, 255, 255, 0.4) |
| galleria.inset.indicator.button.hover.background | rgba(255, 255, 255, 0.6) | --gw-galleria-inset-indicator-button-hover-background | rgba(255, 255, 255, 0.6) |
| galleria.inset.indicator.button.active.background | rgba(255, 255, 255, 0.9) | --gw-galleria-inset-indicator-button-active-background | rgba(255, 255, 255, 0.9) |
| galleria.close.button.background | rgba(255, 255, 255, 0.1) | --gw-galleria-close-button-background | rgba(255, 255, 255, 0.1) |
| galleria.close.button.hover.background | rgba(255, 255, 255, 0.2) | --gw-galleria-close-button-hover-background | rgba(255, 255, 255, 0.2) |
| galleria.close.button.hover.color | {neutral.0} | --gw-galleria-close-button-hover-color | hsl(0, 0%, 100%) |
| galleria.close.button.color | {neutral.100} | --gw-galleria-close-button-color | hsl(220, 14%, 95%) |
| galleria.close.button.focus.ring.color | {focus.ring.color} | --gw-galleria-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| popover.background | {overlay.popover.background} | --gw-popover-background | hsl(0, 0%, 100%) |
| popover.border.color | {overlay.popover.border.color} | --gw-popover-border-color | hsl(220, 13%, 91%) |
| popover.color | {overlay.popover.color} | --gw-popover-color | hsl(220, 40%, 7%) |
| fileupload.background | {default.background} | --gw-fileupload-background | hsl(0, 0%, 100%) |
| fileupload.border.color | {default.border.color} | --gw-fileupload-border-color | hsl(220, 13%, 91%) |
| fileupload.color | {default.color} | --gw-fileupload-color | hsl(220, 40%, 7%) |
| fileupload.header.background | transparent | --gw-fileupload-header-background | transparent |
| fileupload.header.color | {text.color} | --gw-fileupload-header-color | hsl(220, 40%, 7%) |
| fileupload.header.border.color | #00000000 | --gw-fileupload-header-border-color | #00000000 |
| fileupload.content.highlight.border.color | {primary.base} | --gw-fileupload-content-highlight-border-color | hsl(232, 98%, 41%) |
| fileupload.file.border.color | {default.border.color} | --gw-fileupload-file-border-color | hsl(220, 13%, 91%) |
| stepper.separator.background | {default.border.color} | --gw-stepper-separator-background | hsl(220, 13%, 91%) |
| stepper.separator.active.background | {primary.base} | --gw-stepper-separator-active-background | hsl(232, 98%, 41%) |
| stepper.step.header.focus.ring.color | {focus.ring.color} | --gw-stepper-step-header-focus-ring-color | hsl(232, 98%, 41%) |
| stepper.step.title.color | {text.muted.color} | --gw-stepper-step-title-color | hsl(217, 19%, 27%) |
| stepper.step.title.active.color | {primary.base} | --gw-stepper-step-title-active-color | hsl(232, 98%, 41%) |
| stepper.step.number.background | {default.background} | --gw-stepper-step-number-background | hsl(0, 0%, 100%) |
| stepper.step.number.active.background | {default.background} | --gw-stepper-step-number-active-background | hsl(0, 0%, 100%) |
| stepper.step.number.active.border.color | {primary.base} | --gw-stepper-step-number-active-border-color | hsl(232, 98%, 41%) |
| stepper.step.number.active.color | {primary.base} | --gw-stepper-step-number-active-color | hsl(232, 98%, 41%) |
| stepper.step.number.border.color | {default.border.color} | --gw-stepper-step-number-border-color | hsl(220, 13%, 91%) |
| stepper.step.number.color | {text.muted.color} | --gw-stepper-step-number-color | hsl(217, 19%, 27%) |
| stepper.steppanel.background | {neutral.shadow.0} | --gw-stepper-steppanel-background | transparent |
| stepper.steppanel.color | {default.color} | --gw-stepper-steppanel-color | hsl(220, 40%, 7%) |
| inplace.focus.ring.color | {focus.ring.color} | --gw-inplace-focus-ring-color | hsl(232, 98%, 41%) |
| inplace.display.hover.background | {hover.background} | --gw-inplace-display-hover-background | hsl(220, 13%, 91%) |
| inplace.display.hover.color | {hover.color} | --gw-inplace-display-hover-color | hsl(212, 28%, 14%) |
| metergroup.meters.background | {default.border.color} | --gw-metergroup-meters-background | hsl(220, 13%, 91%) |
| terminal.background | {form.field.background} | --gw-terminal-background | hsl(0, 0%, 100%) |
| terminal.border.color | {form.field.border.color} | --gw-terminal-border-color | hsl(220, 13%, 91%) |
| terminal.color | {form.field.color} | --gw-terminal-color | hsl(212, 28%, 14%) |
| imagecompare.handle.hover.background | rgba(255, 255, 255, 0.3) | --gw-imagecompare-handle-hover-background | rgba(255, 255, 255, 0.3) |
| imagecompare.handle.hover.border.color | transparent | --gw-imagecompare-handle-hover-border-color | transparent |
| imagecompare.handle.background | rgba(255, 255, 255, 0.3) | --gw-imagecompare-handle-background | rgba(255, 255, 255, 0.3) |
| imagecompare.handle.border.color | transparent | --gw-imagecompare-handle-border-color | transparent |
| imagecompare.handle.focus.ring.color | rgba(255, 255, 255, 0.3) | --gw-imagecompare-handle-focus-ring-color | rgba(255, 255, 255, 0.3) |
| overlaybadge.outline.color | {neutral.shadow.0} | --gw-overlaybadge-outline-color | transparent |
| iftalabel.color | {form.field.float.label.color} | --gw-iftalabel-color | hsl(220, 9%, 46%) |
| iftalabel.focus.color | {form.field.float.label.focus.color} | --gw-iftalabel-focus-color | hsl(220, 9%, 46%) |
| iftalabel.invalid.color | {form.field.float.label.invalid.color} | --gw-iftalabel-invalid-color | hsl(0, 60%, 51%) |
| button.primary.background | {foreground.on-surface.brand} | --gw-button-primary-background | hsl(232, 98%, 41%) |
| button.primary.hover.background | {foreground.on-surface.strong} | --gw-button-primary-hover-background | hsl(231, 98%, 32%) |
| button.primary.hover.border.color | {foreground.on-surface.strong} | --gw-button-primary-hover-border-color | hsl(231, 98%, 32%) |
| button.primary.hover.color | {foreground.on-brand} | --gw-button-primary-hover-color | hsl(0, 0%, 100%) |
| button.primary.active.background | {primary.base} | --gw-button-primary-active-background | hsl(232, 98%, 41%) |
| button.primary.active.border.color | {primary.base} | --gw-button-primary-active-border-color | hsl(232, 98%, 41%) |
| button.primary.active.color | {foreground.on-brand} | --gw-button-primary-active-color | hsl(0, 0%, 100%) |
| button.primary.border.color | {foreground.on-surface.brand} | --gw-button-primary-border-color | hsl(232, 98%, 41%) |
| button.primary.icon.color | {foreground.on-brand} | --gw-button-primary-icon-color | hsl(0, 0%, 100%) |
| button.primary.icon.second.color | {foreground.on-brand} | --gw-button-primary-icon-second-color | hsl(0, 0%, 100%) |
| button.primary.color | {foreground.on-brand} | --gw-button-primary-color | hsl(0, 0%, 100%) |
| button.primary.focus.ring.color | {primary.base} | --gw-button-primary-focus-ring-color | hsl(232, 98%, 41%) |
| button.primary.disabled.background | {button.primary.background} | --gw-button-primary-disabled-background | hsl(232, 98%, 41%) |
| button.primary.disabled.border.color | {button.primary.border.color} | --gw-button-primary-disabled-border-color | hsl(232, 98%, 41%) |
| button.primary.disabled.color | {button.primary.color} | --gw-button-primary-disabled-color | hsl(0, 0%, 100%) |
| button.primary.link.color | {foreground.link.idle} | --gw-button-primary-link-color | hsl(232, 98%, 41%) |
| button.primary.link.hover.color | {foreground.link.hover} | --gw-button-primary-link-hover-color | hsl(231, 98%, 32%) |
| button.primary.link.active.color | {foreground.link.visited} | --gw-button-primary-link-active-color | hsl(211, 37%, 36%) |
| button.secondary.background | {neutral.shadow.0} | --gw-button-secondary-background | transparent |
| button.secondary.hover.background | {background.raised} | --gw-button-secondary-hover-background | hsl(240, 98%, 98%) |
| button.secondary.hover.border.color | {foreground.on-surface.primary} | --gw-button-secondary-hover-border-color | hsl(231, 98%, 32%) |
| button.secondary.hover.color | {foreground.on-surface.primary} | --gw-button-secondary-hover-color | hsl(231, 98%, 32%) |
| button.secondary.active.background | {neutral.0} | --gw-button-secondary-active-background | hsl(0, 0%, 100%) |
| button.secondary.active.border.color | {foreground.on-surface.primary} | --gw-button-secondary-active-border-color | hsl(231, 98%, 32%) |
| button.secondary.active.color | {foreground.on-surface.primary} | --gw-button-secondary-active-color | hsl(231, 98%, 32%) |
| button.secondary.border.color | {foreground.on-surface.primary} | --gw-button-secondary-border-color | hsl(231, 98%, 32%) |
| button.secondary.color | {foreground.on-surface.primary} | --gw-button-secondary-color | hsl(231, 98%, 32%) |
| button.secondary.focus.ring.color | {focus.ring.color} | --gw-button-secondary-focus-ring-color | hsl(232, 98%, 41%) |
| button.secondary.icon.color | {foreground.on-surface.primary} | --gw-button-secondary-icon-color | hsl(231, 98%, 32%) |
| button.secondary.icon.second.color | {foreground.on-surface.primary} | --gw-button-secondary-icon-second-color | hsl(231, 98%, 32%) |
| button.secondary.disabled.background | {neutral.0} | --gw-button-secondary-disabled-background | hsl(0, 0%, 100%) |
| button.secondary.disabled.border.color | {foreground.on-surface.primary} | --gw-button-secondary-disabled-border-color | hsl(231, 98%, 32%) |
| button.secondary.disabled.color | {foreground.on-surface.primary} | --gw-button-secondary-disabled-color | hsl(231, 98%, 32%) |
| button.secondary.link.background | {secondary.light} | --gw-button-secondary-link-background | hsl(211, 34%, 45%) |
| button.secondary.link.hover.background | {secondary.base} | --gw-button-secondary-link-hover-background | hsl(211, 37%, 36%) |
| button.secondary.link.hover.border.color | {secondary.base} | --gw-button-secondary-link-hover-border-color | hsl(211, 37%, 36%) |
| button.secondary.link.hover.color | {primary.contrast.color} | --gw-button-secondary-link-hover-color | hsl(210, 20%, 98%) |
| button.secondary.link.active.background | {secondary.light} | --gw-button-secondary-link-active-background | hsl(211, 34%, 45%) |
| button.secondary.link.active.border.color | {secondary.light} | --gw-button-secondary-link-active-border-color | hsl(211, 34%, 45%) |
| button.secondary.link.active.color | {primary.contrast.color} | --gw-button-secondary-link-active-color | hsl(210, 20%, 98%) |
| button.secondary.link.border.color | {neutral.shadow.0} | --gw-button-secondary-link-border-color | transparent |
| button.secondary.link.icon.color | {primary.contrast.color} | --gw-button-secondary-link-icon-color | hsl(210, 20%, 98%) |
| button.secondary.link.icon.second.color | {muted.color} | --gw-button-secondary-link-icon-second-color | hsl(217, 19%, 27%) |
| button.secondary.link.color | {primary.contrast.color} | --gw-button-secondary-link-color | hsl(210, 20%, 98%) |
| button.secondary.link.focus.ring.color | {focus.ring.color} | --gw-button-secondary-link-focus-ring-color | hsl(232, 98%, 41%) |
| button.secondary.link.disabled.background | {neutral.0} | --gw-button-secondary-link-disabled-background | hsl(0, 0%, 100%) |
| button.secondary.link.disabled.border.color | {primary.200} | --gw-button-secondary-link-disabled-border-color | hsl(239, 100%, 85%) |
| button.secondary.link.disabled.color | {primary.200} | --gw-button-secondary-link-disabled-color | hsl(239, 100%, 85%) |
| button.info.background | {info.lighter} | --gw-button-info-background | hsl(213, 36%, 94%) |
| button.info.hover.background | {info.300} | --gw-button-info-hover-background | hsl(211, 37%, 77%) |
| button.info.hover.border.color | {info.300} | --gw-button-info-hover-border-color | hsl(211, 37%, 77%) |
| button.info.hover.color | {foreground.on-surface.default} | --gw-button-info-hover-color | hsl(220, 40%, 7%) |
| button.info.border.color | {info.lighter} | --gw-button-info-border-color | hsl(213, 36%, 94%) |
| button.info.color | {foreground.on-surface.default} | --gw-button-info-color | hsl(220, 40%, 7%) |
| button.info.focus.ring.color | {focus.ring.color} | --gw-button-info-focus-ring-color | hsl(232, 98%, 41%) |
| button.info.icon.color | {foreground.on-surface.default} | --gw-button-info-icon-color | hsl(220, 40%, 7%) |
| button.info.active.background | {info.100} | --gw-button-info-active-background | hsl(213, 36%, 94%) |
| button.info.active.border.color | {info.lighter} | --gw-button-info-active-border-color | hsl(213, 36%, 94%) |
| button.info.active.color | {foreground.on-surface.default} | --gw-button-info-active-color | hsl(220, 40%, 7%) |
| button.info.disabled.background | {button.info.background} | --gw-button-info-disabled-background | hsl(213, 36%, 94%) |
| button.info.disabled.border.color | {button.info.border.color} | --gw-button-info-disabled-border-color | hsl(213, 36%, 94%) |
| button.info.disabled.color | {button.info.color} | --gw-button-info-disabled-color | hsl(220, 40%, 7%) |
| button.success.background | {success.base} | --gw-button-success-background | hsl(175, 50%, 30%) |
| button.success.hover.background | {success.dark} | --gw-button-success-hover-background | hsl(175, 50%, 23%) |
| button.success.hover.border.color | {success.dark} | --gw-button-success-hover-border-color | hsl(175, 50%, 23%) |
| button.success.hover.color | {contrast.text} | --gw-button-success-hover-color | hsl(210, 20%, 98%) |
| button.success.border.color | {success.700} | --gw-button-success-border-color | hsl(175, 50%, 23%) |
| button.success.color | {contrast.text} | --gw-button-success-color | hsl(210, 20%, 98%) |
| button.success.focus.ring.color | {focus.ring.color} | --gw-button-success-focus-ring-color | hsl(232, 98%, 41%) |
| button.success.focus.color | {success.light} | --gw-button-success-focus-color | hsl(175, 50%, 40%) |
| button.success.icon.color | {contrast.text} | --gw-button-success-icon-color | hsl(210, 20%, 98%) |
| button.success.disabled.background | {success.lighter} | --gw-button-success-disabled-background | hsl(175, 50%, 95%) |
| button.success.disabled.border.color | {success.lighter} | --gw-button-success-disabled-border-color | hsl(175, 50%, 95%) |
| button.success.disabled.color | {contrast.text} | --gw-button-success-disabled-color | hsl(210, 20%, 98%) |
| button.success.active.background | {success.dark} | --gw-button-success-active-background | hsl(175, 50%, 23%) |
| button.success.active.border.color | {success.light} | --gw-button-success-active-border-color | hsl(175, 50%, 40%) |
| button.warn.background | {warning.base} | --gw-button-warn-background | hsl(40, 60%, 36%) |
| button.warn.hover.background | {warning.dark} | --gw-button-warn-hover-background | hsl(40, 60%, 25%) |
| button.warn.hover.border.color | {warning.base} | --gw-button-warn-hover-border-color | hsl(40, 60%, 36%) |
| button.warn.hover.color | {contrast.text} | --gw-button-warn-hover-color | hsl(210, 20%, 98%) |
| button.warn.active.background | {warning.base} | --gw-button-warn-active-background | hsl(40, 60%, 36%) |
| button.warn.active.border.color | {warning.base} | --gw-button-warn-active-border-color | hsl(40, 60%, 36%) |
| button.warn.active.color | {contrast.text} | --gw-button-warn-active-color | hsl(210, 20%, 98%) |
| button.warn.border.color | {warning.base} | --gw-button-warn-border-color | hsl(40, 60%, 36%) |
| button.warn.color | {contrast.text} | --gw-button-warn-color | hsl(210, 20%, 98%) |
| button.warn.focus.ring.color | {focus.ring.color} | --gw-button-warn-focus-ring-color | hsl(232, 98%, 41%) |
| button.help.background | {neutral.100} | --gw-button-help-background | hsl(220, 14%, 95%) |
| button.help.hover.background | {help.lighter} | --gw-button-help-hover-background | hsl(220, 14%, 95%) |
| button.help.hover.border.color | {help.lighter} | --gw-button-help-hover-border-color | hsl(220, 14%, 95%) |
| button.help.hover.color | {help.darker} | --gw-button-help-hover-color | hsl(220, 40%, 7%) |
| button.help.active.background | {help.lighter} | --gw-button-help-active-background | hsl(220, 14%, 95%) |
| button.help.active.border.color | {help.lighter} | --gw-button-help-active-border-color | hsl(220, 14%, 95%) |
| button.help.active.color | {help.darker} | --gw-button-help-active-color | hsl(220, 40%, 7%) |
| button.help.border.color | {help.lighter} | --gw-button-help-border-color | hsl(220, 14%, 95%) |
| button.help.color | {help.darker} | --gw-button-help-color | hsl(220, 40%, 7%) |
| button.help.focus.ring.color | {focus.ring.color} | --gw-button-help-focus-ring-color | hsl(232, 98%, 41%) |
| button.danger.background | {error.base} | --gw-button-danger-background | hsl(0, 60%, 51%) |
| button.danger.hover.background | {error.dark} | --gw-button-danger-hover-background | hsl(0, 60%, 42%) |
| button.danger.hover.border.color | {error.dark} | --gw-button-danger-hover-border-color | hsl(0, 60%, 42%) |
| button.danger.hover.color | {contrast.text} | --gw-button-danger-hover-color | hsl(210, 20%, 98%) |
| button.danger.active.background | {error.light} | --gw-button-danger-active-background | hsl(0, 60%, 68%) |
| button.danger.active.border.color | {error.light} | --gw-button-danger-active-border-color | hsl(0, 60%, 68%) |
| button.danger.active.color | {contrast.text} | --gw-button-danger-active-color | hsl(210, 20%, 98%) |
| button.danger.border.color | {error.base} | --gw-button-danger-border-color | hsl(0, 60%, 51%) |
| button.danger.color | {contrast.text} | --gw-button-danger-color | hsl(210, 20%, 98%) |
| button.danger.focus.ring.color | {error.base} | --gw-button-danger-focus-ring-color | hsl(0, 60%, 51%) |
| button.figma.raised.background | rgba(255, 255, 255, 0.01) | --gw-button-figma-raised-background | rgba(255, 255, 255, 0.01) |
| button.tertiary.background | {neutral.shadow.0} | --gw-button-tertiary-background | transparent |
| button.tertiary.hover.background | {background.raised} | --gw-button-tertiary-hover-background | hsl(240, 98%, 98%) |
| button.tertiary.hover.border.color | {default.border.color} | --gw-button-tertiary-hover-border-color | hsl(220, 13%, 91%) |
| button.tertiary.hover.color | {foreground.on-surface.muted} | --gw-button-tertiary-hover-color | hsl(211, 37%, 28%) |
| button.tertiary.active.background | {neutral.shadow.0} | --gw-button-tertiary-active-background | transparent |
| button.tertiary.active.border.color | {default.border.color} | --gw-button-tertiary-active-border-color | hsl(220, 13%, 91%) |
| button.tertiary.active.color | {foreground.on-surface.muted} | --gw-button-tertiary-active-color | hsl(211, 37%, 28%) |
| button.tertiary.border.color | {neutral.shadow.0} | --gw-button-tertiary-border-color | transparent |
| button.tertiary.color | {foreground.on-surface.muted} | --gw-button-tertiary-color | hsl(211, 37%, 28%) |
| button.tertiary.focus.ring.color | {primary.200} | --gw-button-tertiary-focus-ring-color | hsl(239, 100%, 85%) |
| button.tertiary.icon.color | {foreground.on-surface.secondary} | --gw-button-tertiary-icon-color | hsl(211, 37%, 36%) |
| button.tertiary.icon.second | {foreground.on-surface.secondary} | --gw-button-tertiary-icon-second | hsl(211, 37%, 36%) |
| button.tertiary.disabled.background | {neutral.shadow.0} | --gw-button-tertiary-disabled-background | transparent |
| button.tertiary.disabled.border.color | {neutral.shadow.0} | --gw-button-tertiary-disabled-border-color | transparent |
| button.tertiary.disabled.color | {primary.300} | --gw-button-tertiary-disabled-color | hsl(232, 100%, 68%) |
| button.tertiary.link.background | {secondary.light} | --gw-button-tertiary-link-background | hsl(211, 34%, 45%) |
| button.tertiary.link.hover.background | {secondary.base} | --gw-button-tertiary-link-hover-background | hsl(211, 37%, 36%) |
| button.tertiary.link.hover.border.color | {secondary.base} | --gw-button-tertiary-link-hover-border-color | hsl(211, 37%, 36%) |
| button.tertiary.link.hover.color | {primary.contrast.color} | --gw-button-tertiary-link-hover-color | hsl(210, 20%, 98%) |
| button.tertiary.link.active.background | {secondary.light} | --gw-button-tertiary-link-active-background | hsl(211, 34%, 45%) |
| button.tertiary.link.active.border.color | {secondary.light} | --gw-button-tertiary-link-active-border-color | hsl(211, 34%, 45%) |
| button.tertiary.link.active.color | {primary.contrast.color} | --gw-button-tertiary-link-active-color | hsl(210, 20%, 98%) |
| button.tertiary.link.border.color | {neutral.shadow.0} | --gw-button-tertiary-link-border-color | transparent |
| button.tertiary.link.icon.color | {secondary.base} | --gw-button-tertiary-link-icon-color | hsl(211, 37%, 36%) |
| button.tertiary.link.icon.color-second | {primary.base} | --gw-button-tertiary-link-icon-color-second | hsl(232, 98%, 41%) |
| button.tertiary.link.color | {primary.contrast.color} | --gw-button-tertiary-link-color | hsl(210, 20%, 98%) |
| button.tertiary.link.focus.ring.color | {primary.base} | --gw-button-tertiary-link-focus-ring-color | hsl(232, 98%, 41%) |
| button.tertiary.link.disabled.background | {neutral.0} | --gw-button-tertiary-link-disabled-background | hsl(0, 0%, 100%) |
| button.tertiary.link.disabled.border.color | {primary.200} | --gw-button-tertiary-link-disabled-border-color | hsl(239, 100%, 85%) |
| button.tertiary.link.disabled.color | {primary.200} | --gw-button-tertiary-link-disabled-color | hsl(239, 100%, 85%) |
| inlinebutton.secondary.color | {foreground.on-surface.brand} | --gw-inlinebutton-secondary-color | hsl(232, 98%, 41%) |
| cluster.node.leader.background | {foreground.on-surface.accent} | --gw-cluster-node-leader-background | hsl(335, 73%, 54%) |
| cluster.node.follower.background | {foreground.on-surface.primary} | --gw-cluster-node-follower-background | hsl(231, 98%, 32%) |
| cluster.node.outofsync.background | {foreground.on-surface.disabled} | --gw-cluster-node-outofsync-background | hsl(210, 14%, 83%) |
| cluster.link.outofsync.border.color | {foreground.on-surface.disabled} | --gw-cluster-link-outofsync-border-color | hsl(210, 14%, 83%) |
| cluster.link.outofsync.icon.color | {foreground.on-surface.secondary} | --gw-cluster-link-outofsync-icon-color | hsl(211, 37%, 36%) |
| cluster.link.outofsync.icon.background | {background.page} | --gw-cluster-link-outofsync-icon-background | hsl(0, 0%, 100%) |
| cluster.link.insync.border.color | {foreground.on-surface.primary} | --gw-cluster-link-insync-border-color | hsl(231, 98%, 32%) |
| cluster.link.snapshot.border.color | {foreground.on-surface.primary} | --gw-cluster-link-snapshot-border-color | hsl(231, 98%, 32%) |
| cluster.link.snapshot.icon.color | {foreground.on-surface.primary} | --gw-cluster-link-snapshot-icon-color | hsl(231, 98%, 32%) |
| cluster.link.syncing.border.color | {foreground.on-surface.primary} | --gw-cluster-link-syncing-border-color | hsl(231, 98%, 32%) |
| cluster.background | {body.background} | --gw-cluster-background | hsl(0, 0%, 100%) |
| link.idle.color | {foreground.link.idle} | --gw-link-idle-color | hsl(232, 98%, 41%) |
| link.hover.color | {foreground.link.hover} | --gw-link-hover-color | hsl(231, 98%, 32%) |
| link.visited.color | {foreground.link.visited} | --gw-link-visited-color | hsl(211, 37%, 36%) |
| link.emphasized.color | {primary.base} | --gw-link-emphasized-color | hsl(232, 98%, 41%) |
| link.emphasized.hover.color | {primary.dark} | --gw-link-emphasized-hover-color | hsl(231, 98%, 32%) |
| link.emphasized.visited.color | {primary.dark} | --gw-link-emphasized-visited-color | hsl(231, 98%, 32%) |
| link.subtle.color | {neutral.base} | --gw-link-subtle-color | hsl(217, 19%, 27%) |
| link.subtle.hover.color | {neutral.dark} | --gw-link-subtle-hover-color | hsl(212, 28%, 14%) |
| link.subtle.visited.color | {neutral.dark} | --gw-link-subtle-visited-color | hsl(212, 28%, 14%) |
| toggleswitch.background | {foreground.on-surface.disabled} | --gw-toggleswitch-background | hsl(210, 14%, 83%) |
| toggleswitch.hover.background | {foreground.on-surface.subtle} | --gw-toggleswitch-hover-background | hsl(220, 9%, 46%) |
| toggleswitch.offset.border.color | {panel.background} | --gw-toggleswitch-offset-border-color | hsl(0, 0%, 100%) |
| toggleswitch.checked.background | {primary.base} | --gw-toggleswitch-checked-background | hsl(232, 98%, 41%) |
| toggleswitch.checked.hover.background | {primary.hover.color} | --gw-toggleswitch-checked-hover-background | hsl(231, 98%, 32%) |
| toggleswitch.handle.background | {neutral.0} | --gw-toggleswitch-handle-background | hsl(0, 0%, 100%) |
| toggleswitch.handle.hover.background | {neutral.0} | --gw-toggleswitch-handle-hover-background | hsl(0, 0%, 100%) |
| toggleswitch.handle.hover.color | {text.color} | --gw-toggleswitch-handle-hover-color | hsl(220, 40%, 7%) |
| toggleswitch.handle.checked.background | {neutral.0} | --gw-toggleswitch-handle-checked-background | hsl(0, 0%, 100%) |
| toggleswitch.handle.checked.hover.background | {neutral.0} | --gw-toggleswitch-handle-checked-hover-background | hsl(0, 0%, 100%) |
| toggleswitch.handle.checked.hover.color | {primary.hover.color} | --gw-toggleswitch-handle-checked-hover-color | hsl(231, 98%, 32%) |
| toggleswitch.handle.checked.color | {primary.base} | --gw-toggleswitch-handle-checked-color | hsl(232, 98%, 41%) |
| toggleswitch.handle.color | {text.muted.color} | --gw-toggleswitch-handle-color | hsl(217, 19%, 27%) |
| toggleswitch.handle.disabled.background | {foreground.on-surface.disabled} | --gw-toggleswitch-handle-disabled-background | hsl(210, 14%, 83%) |
| toggleswitch.disabled.background | {form.field.disabled.background} | --gw-toggleswitch-disabled-background | hsl(220, 13%, 91%) |
| autocomplete.dropdown.background | {neutral.100} | --gw-autocomplete-dropdown-background | hsl(220, 14%, 95%) |
| autocomplete.dropdown.hover.background | {neutral.200} | --gw-autocomplete-dropdown-hover-background | hsl(220, 13%, 91%) |
| autocomplete.dropdown.hover.color | {neutral.700} | --gw-autocomplete-dropdown-hover-color | hsl(217, 19%, 27%) |
| autocomplete.dropdown.active.background | {neutral.300} | --gw-autocomplete-dropdown-active-background | hsl(210, 14%, 83%) |
| autocomplete.dropdown.active.color | {neutral.800} | --gw-autocomplete-dropdown-active-color | hsl(212, 28%, 14%) |
| autocomplete.dropdown.color | {foreground.on-surface.default} | --gw-autocomplete-dropdown-color | hsl(220, 40%, 7%) |
| autocomplete.dropdown.match.background | {background.highlighted} | --gw-autocomplete-dropdown-match-background | hsl(240, 98%, 96%) |
| autocomplete.dropdown.match.color | {foreground.on-surface.strong} | --gw-autocomplete-dropdown-match-color | hsl(231, 98%, 32%) |
| autocomplete.chip.focus.background | {neutral.200} | --gw-autocomplete-chip-focus-background | hsl(220, 13%, 91%) |
| autocomplete.chip.focus.color | {neutral.800} | --gw-autocomplete-chip-focus-color | hsl(212, 28%, 14%) |
| badge.primary.background | {primary.base} | --gw-badge-primary-background | hsl(232, 98%, 41%) |
| badge.primary.color | {primary.contrast.color} | --gw-badge-primary-color | hsl(210, 20%, 98%) |
| badge.secondary.background | {neutral.100} | --gw-badge-secondary-background | hsl(220, 14%, 95%) |
| badge.secondary.color | {neutral.600} | --gw-badge-secondary-color | hsl(215, 14%, 34%) |
| badge.success.background | {success.base} | --gw-badge-success-background | hsl(175, 50%, 30%) |
| badge.success.color | {neutral.0} | --gw-badge-success-color | hsl(0, 0%, 100%) |
| badge.info.background | {info.base} | --gw-badge-info-background | hsl(211, 37%, 36%) |
| badge.info.color | {contrast.text} | --gw-badge-info-color | hsl(210, 20%, 98%) |
| badge.warn.background | {warning.base} | --gw-badge-warn-background | hsl(40, 60%, 36%) |
| badge.warn.color | {contrast.text} | --gw-badge-warn-color | hsl(210, 20%, 98%) |
| badge.danger.background | {error.base} | --gw-badge-danger-background | hsl(0, 60%, 51%) |
| badge.danger.color | {contrast.text} | --gw-badge-danger-color | hsl(210, 20%, 98%) |
| badge.contrast.background | {contrast.background} | --gw-badge-contrast-background | hsl(220, 40%, 7%) |
| badge.contrast.color | {contrast.text} | --gw-badge-contrast-color | hsl(210, 20%, 98%) |
| chip.background | {neutral.100} | --gw-chip-background | hsl(220, 14%, 95%) |
| chip.color | {neutral.800} | --gw-chip-color | hsl(212, 28%, 14%) |
| chip.icon.color | {neutral.800} | --gw-chip-icon-color | hsl(212, 28%, 14%) |
| chip.remove.icon.color | {neutral.800} | --gw-chip-remove-icon-color | hsl(212, 28%, 14%) |
| tag.primary.background | {primary.base} | --gw-tag-primary-background | hsl(232, 98%, 41%) |
| tag.primary.color | {badge.primary.color} | --gw-tag-primary-color | hsl(210, 20%, 98%) |
| tag.secondary.background | {secondary.lighter} | --gw-tag-secondary-background | hsl(213, 36%, 94%) |
| tag.secondary.color | {secondary.base} | --gw-tag-secondary-color | hsl(211, 37%, 36%) |
| tag.success.background | {success.lighter} | --gw-tag-success-background | hsl(175, 50%, 95%) |
| tag.success.color | {success.base} | --gw-tag-success-color | hsl(175, 50%, 30%) |
| tag.info.background | {info.lighter} | --gw-tag-info-background | hsl(213, 36%, 94%) |
| tag.info.color | {info.base} | --gw-tag-info-color | hsl(211, 37%, 36%) |
| tag.warning.background | {warning.lighter} | --gw-tag-warning-background | hsl(48, 90%, 98%) |
| tag.warning.color | {warning.base} | --gw-tag-warning-color | hsl(40, 60%, 36%) |
| tag.danger.background | {error.lighter} | --gw-tag-danger-background | hsl(0, 60%, 94%) |
| tag.danger.color | {error.base} | --gw-tag-danger-color | hsl(0, 60%, 51%) |
| tag.help.background | {neutral.200} | --gw-tag-help-background | hsl(220, 13%, 91%) |
| tag.help.color | {help.dark} | --gw-tag-help-color | hsl(212, 28%, 14%) |
| tag.default.background | {background.subtle} | --gw-tag-default-background | hsl(220, 13%, 91%) |
| tag.default.color | {foreground.on-surface.default} | --gw-tag-default-color | hsl(220, 40%, 7%) |
| skeleton.background | {neutral.200} | --gw-skeleton-background | hsl(220, 13%, 91%) |
| skeleton.animation.background | rgba(255,255,255,0.4) | --gw-skeleton-animation-background | rgba(255,255,255,0.4) |
| datepicker.dropdown.background | {neutral.100} | --gw-datepicker-dropdown-background | hsl(220, 14%, 95%) |
| datepicker.dropdown.hover.background | {neutral.200} | --gw-datepicker-dropdown-hover-background | hsl(220, 13%, 91%) |
| datepicker.dropdown.hover.color | {neutral.700} | --gw-datepicker-dropdown-hover-color | hsl(217, 19%, 27%) |
| datepicker.dropdown.active.background | {neutral.300} | --gw-datepicker-dropdown-active-background | hsl(210, 14%, 83%) |
| datepicker.dropdown.active.color | {neutral.800} | --gw-datepicker-dropdown-active-color | hsl(212, 28%, 14%) |
| datepicker.dropdown.color | {neutral.600} | --gw-datepicker-dropdown-color | hsl(215, 14%, 34%) |
| datepicker.today.background | {neutral.200} | --gw-datepicker-today-background | hsl(220, 13%, 91%) |
| datepicker.today.color | {neutral.900} | --gw-datepicker-today-color | hsl(220, 40%, 7%) |
| colorpicker.panel.background | {background.elevated} | --gw-colorpicker-panel-background | hsl(0, 0%, 100%) |
| colorpicker.panel.color | {default.color} | --gw-colorpicker-panel-color | hsl(220, 40%, 7%) |
| colorpicker.panel.border.color | {panel.border.color} | --gw-colorpicker-panel-border-color | hsl(220, 14%, 95%) |
| colorpicker.handle.color | {neutral.0} | --gw-colorpicker-handle-color | hsl(0, 0%, 100%) |
| inputnumber.button.background | transparent | --gw-inputnumber-button-background | transparent |
| inputnumber.button.hover.background | {neutral.100} | --gw-inputnumber-button-hover-background | hsl(220, 14%, 95%) |
| inputnumber.button.hover.border.color | {hover.border.color} | --gw-inputnumber-button-hover-border-color | hsl(220, 11%, 65%) |
| inputnumber.button.hover.color | {neutral.500} | --gw-inputnumber-button-hover-color | hsl(220, 9%, 46%) |
| inputnumber.button.active.background | {neutral.200} | --gw-inputnumber-button-active-background | hsl(220, 13%, 91%) |
| inputnumber.button.active.border.color | {form.field.border.color} | --gw-inputnumber-button-active-border-color | hsl(220, 13%, 91%) |
| inputnumber.button.active.color | {neutral.600} | --gw-inputnumber-button-active-color | hsl(215, 14%, 34%) |
| inputnumber.button.border.color | {form.field.border.color} | --gw-inputnumber-button-border-color | hsl(220, 13%, 91%) |
| inputnumber.button.color | {neutral.400} | --gw-inputnumber-button-color | hsl(220, 11%, 65%) |
| listbox.option.striped.background | {neutral.100} | --gw-listbox-option-striped-background | hsl(220, 14%, 95%) |
| password.strength.weak.background | {error.light} | --gw-password-strength-weak-background | hsl(0, 60%, 68%) |
| password.strength.medium.background | {warning.light} | --gw-password-strength-medium-background | hsl(40, 60%, 44%) |
| password.strength.strong.background | {success.light} | --gw-password-strength-strong-background | hsl(175, 50%, 40%) |
| slider.handle.content.background | {primary.base} | --gw-slider-handle-content-background | hsl(232, 98%, 41%) |
| slider.label.color | {foreground.on-surface.subtle} | --gw-slider-label-color | hsl(220, 9%, 46%) |
| togglebutton.background | {button.secondary.background} | --gw-togglebutton-background | transparent |
| togglebutton.checked.background | {button.primary.background} | --gw-togglebutton-checked-background | hsl(232, 98%, 41%) |
| togglebutton.checked.color | {button.primary.color} | --gw-togglebutton-checked-color | hsl(0, 0%, 100%) |
| togglebutton.checked.border.color | {button.secondary.border.color} | --gw-togglebutton-checked-border-color | hsl(231, 98%, 32%) |
| togglebutton.hover.background | {button.secondary.hover.background} | --gw-togglebutton-hover-background | hsl(240, 98%, 98%) |
| togglebutton.hover.color | {button.secondary.hover.color} | --gw-togglebutton-hover-color | hsl(231, 98%, 32%) |
| togglebutton.border.color | {button.secondary.border.color} | --gw-togglebutton-border-color | hsl(231, 98%, 32%) |
| togglebutton.color | {button.secondary.color} | --gw-togglebutton-color | hsl(231, 98%, 32%) |
| togglebutton.content.checked.background | {button.primary.background} | --gw-togglebutton-content-checked-background | hsl(232, 98%, 41%) |
| togglebutton.icon.color | {button.secondary.icon.color} | --gw-togglebutton-icon-color | hsl(231, 98%, 32%) |
| togglebutton.icon.hover.color | {button.secondary.icon.color} | --gw-togglebutton-icon-hover-color | hsl(231, 98%, 32%) |
| togglebutton.icon.checked.color | {button.primary.icon.color} | --gw-togglebutton-icon-checked-color | hsl(0, 0%, 100%) |
| selectbutton.invalid.border.color | {form.field.invalid.border.color} | --gw-selectbutton-invalid-border-color | hsl(0, 60%, 68%) |
| scrollpanel.bar.background | {foreground.on-surface.subtle} | --gw-scrollpanel-bar-background | hsl(220, 9%, 46%) |
| scrollpanel.bar.border.color | {background.subtle} | --gw-scrollpanel-bar-border-color | hsl(220, 13%, 91%) |
| scrollpanel.background | {neutral.shadow.0} | --gw-scrollpanel-background | transparent |
| tooltip.background | {neutral.700} | --gw-tooltip-background | hsl(217, 19%, 27%) |
| tooltip.color | {neutral.0} | --gw-tooltip-color | hsl(0, 0%, 100%) |
| datatable.border.color | {default.border.color} | --gw-datatable-border-color | hsl(220, 13%, 91%) |
| datatable.row.striped.background | {neutral.100} | --gw-datatable-row-striped-background | hsl(220, 14%, 95%) |
| datatable.body.cell.selected.border.color | {primary.100} | --gw-datatable-body-cell-selected-border-color | hsl(240, 98%, 96%) |
| treetable.border.color | {default.border.color} | --gw-treetable-border-color | hsl(220, 13%, 91%) |
| treetable.body.cell.selected.border.color | {primary.100} | --gw-treetable-body-cell-selected-border-color | hsl(240, 98%, 96%) |
| message.info.background | {info.lighter} | --gw-message-info-background | hsl(213, 36%, 94%) |
| message.info.border.color | {info.200} | --gw-message-info-border-color | hsl(213, 36%, 87%) |
| message.info.color | {info.dark} | --gw-message-info-color | hsl(211, 37%, 28%) |
| message.info.close.button.hover.background | {contrast.text} | --gw-message-info-close-button-hover-background | hsl(210, 20%, 98%) |
| message.info.close.button.color | {close.button.color} | --gw-message-info-close-button-color | hsl(220, 9%, 46%) |
| message.info.close.button.focus.ring.color | {focus.ring.color} | --gw-message-info-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| message.info.outlined.color | {info.base} | --gw-message-info-outlined-color | hsl(211, 37%, 36%) |
| message.info.outlined.border.color | {info.base} | --gw-message-info-outlined-border-color | hsl(211, 37%, 36%) |
| message.info.simple.color | {info.base} | --gw-message-info-simple-color | hsl(211, 37%, 36%) |
| message.close.button.color | {close.button.color} | --gw-message-close-button-color | hsl(220, 9%, 46%) |
| message.close.button.focus.ring.color | {focus.ring.color} | --gw-message-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| message.success.background | {success.lighter} | --gw-message-success-background | hsl(175, 50%, 95%) |
| message.success.border.color | {success.300} | --gw-message-success-border-color | hsl(175, 35%, 75%) |
| message.success.color | {success.dark} | --gw-message-success-color | hsl(175, 50%, 23%) |
| message.success.close.button.hover.background | {success.lighter} | --gw-message-success-close-button-hover-background | hsl(175, 50%, 95%) |
| message.success.close.button.color | {close.button.color} | --gw-message-success-close-button-color | hsl(220, 9%, 46%) |
| message.success.close.button.focus.ring.color | {focus.ring.color} | --gw-message-success-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| message.success.outlined.color | {success.base} | --gw-message-success-outlined-color | hsl(175, 50%, 30%) |
| message.success.outlined.border.color | {success.base} | --gw-message-success-outlined-border-color | hsl(175, 50%, 30%) |
| message.success.simple.color | {success.base} | --gw-message-success-simple-color | hsl(175, 50%, 30%) |
| message.warning.background | {warning.300} | --gw-message-warning-background | hsl(48, 65%, 89%) |
| message.warning.border.color | {warning.400} | --gw-message-warning-border-color | hsl(48, 65%, 78%) |
| message.warning.close.button.hover.background | {contrast.text} | --gw-message-warning-close-button-hover-background | hsl(210, 20%, 98%) |
| message.warning.close.button.color | {close.button.color} | --gw-message-warning-close-button-color | hsl(220, 9%, 46%) |
| message.warning.close.button.focus.ring.color | {focus.ring.color} | --gw-message-warning-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| message.warning.color | {warning.dark} | --gw-message-warning-color | hsl(40, 60%, 25%) |
| message.warning.outlined.color | {warning.base} | --gw-message-warning-outlined-color | hsl(40, 60%, 36%) |
| message.warning.outlined.border.color | {warning.base} | --gw-message-warning-outlined-border-color | hsl(40, 60%, 36%) |
| message.warning.simple.color | {warning.base} | --gw-message-warning-simple-color | hsl(40, 60%, 36%) |
| message.error.background | {error.lighter} | --gw-message-error-background | hsl(0, 60%, 94%) |
| message.error.border.color | {danger.300} | --gw-message-error-border-color | hsl(0, 60%, 89%) |
| message.error.color | {error.dark} | --gw-message-error-color | hsl(0, 60%, 42%) |
| message.error.close.button.hover.background | {error.lighter} | --gw-message-error-close-button-hover-background | hsl(0, 60%, 94%) |
| message.error.close.button.color | {close.button.color} | --gw-message-error-close-button-color | hsl(220, 9%, 46%) |
| message.error.close.button.focus.ring.color | {focus.ring.color} | --gw-message-error-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| message.error.outlined.color | {error.dark} | --gw-message-error-outlined-color | hsl(0, 60%, 42%) |
| message.error.outlined.border.color | {error.base} | --gw-message-error-outlined-border-color | hsl(0, 60%, 51%) |
| message.error.simple.color | {error.base} | --gw-message-error-simple-color | hsl(0, 60%, 51%) |
| message.help.background | {help.lighter} | --gw-message-help-background | hsl(220, 14%, 95%) |
| message.help.border.color | {neutral.300} | --gw-message-help-border-color | hsl(210, 14%, 83%) |
| message.help.color | {help.dark} | --gw-message-help-color | hsl(212, 28%, 14%) |
| message.help.close.button.hover.background | {secondary.lighter} | --gw-message-help-close-button-hover-background | hsl(213, 36%, 94%) |
| message.help.close.button.color | {close.button.color} | --gw-message-help-close-button-color | hsl(220, 9%, 46%) |
| message.help.close.button.focus.ring.color | {help.light} | --gw-message-help-close-button-focus-ring-color | hsl(220, 11%, 65%) |
| message.help.outlined.color | {help.dark} | --gw-message-help-outlined-color | hsl(212, 28%, 14%) |
| message.help.outlined.border.color | {help.base} | --gw-message-help-outlined-border-color | hsl(217, 19%, 27%) |
| message.help.simple.color | {help.dark} | --gw-message-help-simple-color | hsl(212, 28%, 14%) |
| message.contrast.background | {contrast.background} | --gw-message-contrast-background | hsl(220, 40%, 7%) |
| message.contrast.border.color | {contrast.background} | --gw-message-contrast-border-color | hsl(220, 40%, 7%) |
| message.contrast.color | {contrast.text} | --gw-message-contrast-color | hsl(210, 20%, 98%) |
| message.contrast.close.button.hover.background | {background.surface-semitransparent} | --gw-message-contrast-close-button-hover-background | #F9FAFB80 |
| message.contrast.close.button.color | {contrast.text} | --gw-message-contrast-close-button-color | hsl(210, 20%, 98%) |
| message.contrast.close.button.focus.ring.color | {focus.ring.color} | --gw-message-contrast-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| message.contrast.outlined.color | {contrast.background} | --gw-message-contrast-outlined-color | hsl(220, 40%, 7%) |
| message.contrast.outlined.border.color | {contrast.background} | --gw-message-contrast-outlined-border-color | hsl(220, 40%, 7%) |
| message.contrast.simple.color | {contrast.background} | --gw-message-contrast-simple-color | hsl(220, 40%, 7%) |
| message.secondary.background | {help.lighter} | --gw-message-secondary-background | hsl(220, 14%, 95%) |
| message.secondary.border.color | {help.lighter} | --gw-message-secondary-border-color | hsl(220, 14%, 95%) |
| message.secondary.color | {help.dark} | --gw-message-secondary-color | hsl(212, 28%, 14%) |
| message.secondary.close.button.hover.background | {secondary.lighter} | --gw-message-secondary-close-button-hover-background | hsl(213, 36%, 94%) |
| message.secondary.close.button.color | {close.button.color} | --gw-message-secondary-close-button-color | hsl(220, 9%, 46%) |
| message.secondary.close.button.focus.ring.color | {help.light} | --gw-message-secondary-close-button-focus-ring-color | hsl(220, 11%, 65%) |
| message.secondary.outlined.color | {help.dark} | --gw-message-secondary-outlined-color | hsl(212, 28%, 14%) |
| message.secondary.outlined.border.color | {help.base} | --gw-message-secondary-outlined-border-color | hsl(217, 19%, 27%) |
| message.secondary.simple.color | {help.dark} | --gw-message-secondary-simple-color | hsl(212, 28%, 14%) |
| close.button.color | {foreground.on-surface.subtle} | --gw-close-button-color | hsl(220, 9%, 46%) |
| toast.info.background | {info.base} | --gw-toast-info-background | hsl(211, 37%, 36%) |
| toast.info.border.color | {info.base} | --gw-toast-info-border-color | hsl(211, 37%, 36%) |
| toast.info.color | {contrast.text} | --gw-toast-info-color | hsl(210, 20%, 98%) |
| toast.info.icon.color | {contrast.text} | --gw-toast-info-icon-color | hsl(210, 20%, 98%) |
| toast.info.detail.color | {contrast.text} | --gw-toast-info-detail-color | hsl(210, 20%, 98%) |
| toast.info.close.button.hover.background | {info.dark} | --gw-toast-info-close-button-hover-background | hsl(211, 37%, 28%) |
| toast.info.close.button.focus.ring.color | {focus.ring.color} | --gw-toast-info-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| toast.success.background | {success.base} | --gw-toast-success-background | hsl(175, 50%, 30%) |
| toast.success.border.color | {success.base} | --gw-toast-success-border-color | hsl(175, 50%, 30%) |
| toast.success.color | {contrast.text} | --gw-toast-success-color | hsl(210, 20%, 98%) |
| toast.success.icon.color | {contrast.text} | --gw-toast-success-icon-color | hsl(210, 20%, 98%) |
| toast.success.detail.color | {contrast.text} | --gw-toast-success-detail-color | hsl(210, 20%, 98%) |
| toast.success.close.button.hover.background | {success.light} | --gw-toast-success-close-button-hover-background | hsl(175, 50%, 40%) |
| toast.success.close.button.focus.ring.color | {focus.ring.color} | --gw-toast-success-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| toast.close.button.color | {contrast.text} | --gw-toast-close-button-color | hsl(210, 20%, 98%) |
| toast.warn.background | {warning.base} | --gw-toast-warn-background | hsl(40, 60%, 36%) |
| toast.warn.border.color | {warning.base} | --gw-toast-warn-border-color | hsl(40, 60%, 36%) |
| toast.warn.color | {contrast.text} | --gw-toast-warn-color | hsl(210, 20%, 98%) |
| toast.warn.detail.color | {contrast.text} | --gw-toast-warn-detail-color | hsl(210, 20%, 98%) |
| toast.warn.close.button.hover.background | {warning.dark} | --gw-toast-warn-close-button-hover-background | hsl(40, 60%, 25%) |
| toast.warn.close.button.focus.ring.color | {focus.ring.color} | --gw-toast-warn-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| toast.error.background | {error.base} | --gw-toast-error-background | hsl(0, 60%, 51%) |
| toast.error.border.color | {error.base} | --gw-toast-error-border-color | hsl(0, 60%, 51%) |
| toast.error.color | {contrast.text} | --gw-toast-error-color | hsl(210, 20%, 98%) |
| toast.error.detail.color | {contrast.text} | --gw-toast-error-detail-color | hsl(210, 20%, 98%) |
| toast.error.close.button.hover.background | {danger.100} | --gw-toast-error-close-button-hover-background | hsl(0, 60%, 97%) |
| toast.error.close.button.focus.ring.color | {focus.ring.color} | --gw-toast-error-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| toast.secondary.background | {neutral.100} | --gw-toast-secondary-background | hsl(220, 14%, 95%) |
| toast.secondary.border.color | {neutral.200} | --gw-toast-secondary-border-color | hsl(220, 13%, 91%) |
| toast.secondary.color | {neutral.600} | --gw-toast-secondary-color | hsl(215, 14%, 34%) |
| toast.secondary.detail.color | {neutral.700} | --gw-toast-secondary-detail-color | hsl(217, 19%, 27%) |
| toast.secondary.close.button.hover.background | {neutral.200} | --gw-toast-secondary-close-button-hover-background | hsl(220, 13%, 91%) |
| toast.secondary.close.button.focus.ring.color | {focus.ring.color} | --gw-toast-secondary-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| toast.contrast.background | {neutral.800} | --gw-toast-contrast-background | hsl(212, 28%, 14%) |
| toast.contrast.border.color | {neutral.800} | --gw-toast-contrast-border-color | hsl(212, 28%, 14%) |
| toast.contrast.color | {neutral.0} | --gw-toast-contrast-color | hsl(0, 0%, 100%) |
| toast.contrast.detail.color | {neutral.0} | --gw-toast-contrast-detail-color | hsl(0, 0%, 100%) |
| toast.contrast.close.button.hover.background | {neutral.800} | --gw-toast-contrast-close-button-hover-background | hsl(212, 28%, 14%) |
| toast.contrast.close.button.focus.ring.color | {focus.ring.color} | --gw-toast-contrast-close-button-focus-ring-color | hsl(232, 98%, 41%) |
| galleria.thumbnail.nav.button.hover.background | {neutral.100} | --gw-galleria-thumbnail-nav-button-hover-background | hsl(220, 14%, 95%) |
| galleria.thumbnail.nav.button.hover.color | {neutral.700} | --gw-galleria-thumbnail-nav-button-hover-color | hsl(217, 19%, 27%) |
| galleria.thumbnail.nav.button.color | {neutral.600} | --gw-galleria-thumbnail-nav-button-color | hsl(215, 14%, 34%) |
| galleria.indicator.button.background | {neutral.200} | --gw-galleria-indicator-button-background | hsl(220, 13%, 91%) |
| galleria.indicator.button.hover.background | {neutral.300} | --gw-galleria-indicator-button-hover-background | hsl(210, 14%, 83%) |
| progressspinner.color.one | {error.light} | --gw-progressspinner-color-one | hsl(0, 60%, 68%) |
| progressspinner.color.two | {warning.light} | --gw-progressspinner-color-two | hsl(40, 60%, 44%) |
| progressspinner.color.three | {success.light} | --gw-progressspinner-color-three | hsl(175, 50%, 40%) |
| progressspinner.color.four | {success.base} | --gw-progressspinner-color-four | hsl(175, 50%, 30%) |
| loader.color | {foreground.on-surface.accent} | --gw-loader-color | hsl(335, 73%, 54%) |
| ripple.background | rgba(0,0,0,0.1) | --gw-ripple-background | rgba(0,0,0,0.1) |
| overlay.popover.background | {neutral.0} | --gw-overlay-popover-background | hsl(0, 0%, 100%) |
| overlay.popover.border.color | {default.border.color} | --gw-overlay-popover-border-color | hsl(220, 13%, 91%) |
| overlay.popover.color | {text.color} | --gw-overlay-popover-color | hsl(220, 40%, 7%) |
| body.color | {neutral.darker} | --gw-body-color | hsl(220, 40%, 7%) |
| body.background | {neutral.0} | --gw-body-background | hsl(0, 0%, 100%) |
| body.lighter.color | {neutral.base} | --gw-body-lighter-color | hsl(217, 19%, 27%) |
| heading.h1.color | {heading.default.color} | --gw-heading-h1-color | hsl(220, 40%, 7%) |
| heading.default.color | {foreground.on-surface.default} | --gw-heading-default-color | hsl(220, 40%, 7%) |
| heading.h2.color | {heading.default.color} | --gw-heading-h2-color | hsl(220, 40%, 7%) |
| heading.h3.color | {heading.default.color} | --gw-heading-h3-color | hsl(220, 40%, 7%) |
| heading.h4.color | {heading.default.color} | --gw-heading-h4-color | hsl(220, 40%, 7%) |
| heading.h5.color | {heading.default.color} | --gw-heading-h5-color | hsl(220, 40%, 7%) |
| heading.h6.color | {heading.default.color} | --gw-heading-h6-color | hsl(220, 40%, 7%) |
| caption.color | {neutral.light} | --gw-caption-color | hsl(220, 11%, 65%) |
| card.background | {panel.background} | --gw-card-background | hsl(0, 0%, 100%) |
| card.border.color | {panel.border.color} | --gw-card-border-color | hsl(220, 14%, 95%) |
| swagger.get.background | {info.200} | --gw-swagger-get-background | hsl(213, 36%, 87%) |
| swagger.color | {body.color} | --gw-swagger-color | hsl(220, 40%, 7%) |
| swagger.help.color | {default.muted.color} | --gw-swagger-help-color | hsl(211, 37%, 36%) |
| swagger.heading.color | {default.muted.color} | --gw-swagger-heading-color | hsl(211, 37%, 36%) |
| swagger.border.color | {default.border.color} | --gw-swagger-border-color | hsl(220, 13%, 91%) |
| swagger.put.background | {warning.300} | --gw-swagger-put-background | hsl(48, 65%, 89%) |
| swagger.post.background | {success.200} | --gw-swagger-post-background | hsl(175, 50%, 95%) |
| swagger.delete.background | {danger.200} | --gw-swagger-delete-background | hsl(0, 60%, 94%) |
| swagger.resp.background | {neutral.200} | --gw-swagger-resp-background | hsl(220, 13%, 91%) |
| swagger.resp.code.background | {warning.200} | --gw-swagger-resp-code-background | hsl(48, 65%, 94%) |
| shortcuts.panel.background | {background.elevated} | --gw-shortcuts-panel-background | hsl(0, 0%, 100%) |
| shortcuts.panel.key.color | {foreground.on-surface.secondary} | --gw-shortcuts-panel-key-color | hsl(211, 37%, 36%) |
| shortcuts.panel.key.background | {background.raised} | --gw-shortcuts-panel-key-background | hsl(240, 98%, 98%) |
| shortcuts.panel.key.border.color | {border.color.default} | --gw-shortcuts-panel-key-border-color | hsl(220, 13%, 91%) |
| shortcuts.panel.color | {foreground.on-surface.default} | --gw-shortcuts-panel-color | hsl(220, 40%, 7%) |
| shortcuts.panel.heading.color | {foreground.on-surface.muted} | --gw-shortcuts-panel-heading-color | hsl(211, 37%, 28%) |
| shortcuts.panel.close.button.color | {close.button.color} | --gw-shortcuts-panel-close-button-color | hsl(220, 9%, 46%) |
| shortcuts.secondary.button.background | {background.page} | --gw-shortcuts-secondary-button-background | hsl(0, 0%, 100%) |
| page.background | {background.page} | --gw-page-background | hsl(0, 0%, 100%) |
| page.login.background | {background.surface} | --gw-page-login-background | hsl(210, 20%, 98%) |
| topnav.background | {background.header} | --gw-topnav-background | hsl(240, 98%, 98%) |
| topnav.color | {text.color} | --gw-topnav-color | hsl(220, 40%, 7%) |
| topnav.border.color | {neutral.shadow.0} | --gw-topnav-border-color | transparent |
| classhierarchy.node.backgraund.color1 | {primary.100} | --gw-classhierarchy-node-backgraund-color1 | hsl(240, 98%, 96%) |
| classhierarchy.node.backgraund.color2 | {primary.200} | --gw-classhierarchy-node-backgraund-color2 | hsl(239, 100%, 85%) |
| classhierarchy.node.backgraund.color3 | {accent.100} | --gw-classhierarchy-node-backgraund-color3 | hsl(333, 73%, 97%) |
| classhierarchy.node.backgraund.color4 | {accent.200} | --gw-classhierarchy-node-backgraund-color4 | hsl(336, 73%, 90%) |
| classhierarchy.node.label.color | {foreground.on-surface.default} | --gw-classhierarchy-node-label-color | hsl(220, 40%, 7%) |
| classhierarchy.node.hover.border.color | {foreground.on-surface.secondary} | --gw-classhierarchy-node-hover-border-color | hsl(211, 37%, 36%) |
| classhierarchy.node.selected.border.color | {border.color.focus} | --gw-classhierarchy-node-selected-border-color | hsl(211, 34%, 45%) |
| vizgraph.node.color1.1 | {foreground.visual.1-3} | --gw-vizgraph-node-color1-1 | hsl(239, 100%, 85%) |
| vizgraph.node.color1.2 | {foreground.visual.1-4} | --gw-vizgraph-node-color1-2 | hsl(240, 98%, 96%) |
| vizgraph.node.color4 | {neutral.300} | --gw-vizgraph-node-color4 | hsl(210, 14%, 83%) |
| vizgraph.node.color2.1 | {foreground.visual.1-4} | --gw-vizgraph-node-color2-1 | hsl(240, 98%, 96%) |
| vizgraph.node.color2.2 | {foreground.visual.3-3} | --gw-vizgraph-node-color2-2 | hsl(175, 50%, 95%) |
| vizgraph.node.color3.1 | {foreground.visual.2-2} | --gw-vizgraph-node-color3-1 | hsl(335, 72%, 75%) |
| vizgraph.node.color3.2 | {foreground.visual.2-3} | --gw-vizgraph-node-color3-2 | hsl(336, 73%, 90%) |
| vizgraph.label.color | {foreground.on-surface.default} | --gw-vizgraph-label-color | hsl(220, 40%, 7%) |
FontFamilies Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| font.family.body | "Inter", sans-serif | --gw-font-family-body | "Inter", sans-serif |
| font.family.heading | "Inter", sans-serif | --gw-font-family-heading | "Inter", sans-serif |
| button.label.font-family | {font.family.body} | --gw-button-label-font-family | "Inter", sans-serif |
FontWeights Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| font-weight.200 | 200 | --gw-font-weight-200 | 200 |
| font-weight.300 | 300 | --gw-font-weight-300 | 300 |
| font-weight.400 | 400 | --gw-font-weight-400 | 400 |
| font-weight.500 | 500 | --gw-font-weight-500 | 500 |
| font-weight.600 | 600 | --gw-font-weight-600 | 600 |
| font-weight.700 | 700 | --gw-font-weight-700 | 700 |
| font-weight.800 | 800 | --gw-font-weight-800 | 800 |
| list.option.group.font.weight | 600 | --gw-list-option-group-font-weight | 600 |
| sidenav.menuitem.label.font.weight | {font-weight.400} | --gw-sidenav-menuitem-label-font-weight | 400 |
| sidenav.submenuitem.label.font.weight | {font-weight.500} | --gw-sidenav-submenuitem-label-font-weight | 500 |
| panel.title.font.weight | 600 | --gw-panel-title-font-weight | 600 |
| button.label.font.weight | {font-weight.400} | --gw-button-label-font-weight | 400 |
| floatlabel.active.font.weight | 400 | --gw-floatlabel-active-font-weight | 400 |
| floatlabel.font.weight | 500 | --gw-floatlabel-font-weight | 500 |
| autocomplete.option.group.font.weight | {list.option.group.font.weight} | --gw-autocomplete-option-group-font-weight | 600 |
| datepicker.title.font.weight | 500 | --gw-datepicker-title-font-weight | 500 |
| datepicker.week.day.font.weight | 500 | --gw-datepicker-week-day-font-weight | 500 |
| card.title.font.weight | 500 | --gw-card-title-font-weight | 500 |
| dialog.title.font.weight | 600 | --gw-dialog-title-font-weight | 600 |
| drawer.title.font.weight | 600 | --gw-drawer-title-font-weight | 600 |
| badge.font.weight | 700 | --gw-badge-font-weight | 700 |
| progressbar.label.font.weight | 600 | --gw-progressbar-label-font-weight | 600 |
| message.text.font.weight | {font-weight.400} | --gw-message-text-font-weight | 400 |
| tag.font.weight | {font-weight.500} | --gw-tag-font-weight | 500 |
| select.option.group.font.weight | {list.option.group.font.weight} | --gw-select-option-group-font-weight | 600 |
| listbox.option.group.font.weight | {list.option.group.font.weight} | --gw-listbox-option-group-font-weight | 600 |
| multiselect.option.group.font.weight | {list.option.group.font.weight} | --gw-multiselect-option-group-font-weight | 600 |
| togglebutton.font.weight | 500 | --gw-togglebutton-font-weight | 500 |
| accordion.header.font.weight | 600 | --gw-accordion-header-font-weight | 600 |
| fieldset.legend.font.weight | 600 | --gw-fieldset-legend-font-weight | 600 |
| tabs.tab.font.weight | 600 | --gw-tabs-tab-font-weight | 600 |
| megamenu.submenu.label.font.weight | {sidenav.submenuitem.label.font.weight} | --gw-megamenu-submenu-label-font-weight | 500 |
| menu.submenu.label.font.weight | {sidenav.submenuitem.label.font.weight} | --gw-menu-submenu-label-font-weight | 500 |
| datatable.header.cell.font.weight | {font-weight.500} | --gw-datatable-header-cell-font-weight | 500 |
| datatable.column.footer.font.weight | 600 | --gw-datatable-column-footer-font-weight | 600 |
| datatable.column.title.font.weight.header.cell.font.weight | {font-weight.500} | --gw-datatable-column-title-font-weight-header-cell-font-weight | 500 |
| datatable.column.title.font.weight.column.footer.font.weight | {font-weight.500} | --gw-datatable-column-title-font-weight-column-footer-font-weight | 500 |
| treetable.column.title.font.weight | 600 | --gw-treetable-column-title-font-weight | 600 |
| treetable.column.footer.font.weight | 600 | --gw-treetable-column-footer-font-weight | 600 |
| toast.summary.font.weight | 500 | --gw-toast-summary-font-weight | 500 |
| toast.detail.font.weight | 500 | --gw-toast-detail-font-weight | 500 |
| stepper.step.title.font.weight | 500 | --gw-stepper-step-title-font-weight | 500 |
| stepper.step.number.font.weight | 500 | --gw-stepper-step-number-font-weight | 500 |
| iftalabel.font.weight | 400 | --gw-iftalabel-font-weight | 400 |
Dimension Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| breakpoint.xxs | 479px | --gw-breakpoint-xxs | 479px |
| breakpoint.xs | 480px | --gw-breakpoint-xs | 480px |
| breakpoint.sm | 768px | --gw-breakpoint-sm | 768px |
| breakpoint.md | 1280px | --gw-breakpoint-md | 1280px |
| breakpoint.lg | 1440px | --gw-breakpoint-lg | 1440px |
| breakpoint.xl | 1536px | --gw-breakpoint-xl | 1536px |
| breakpoint.xxl | 1920px | --gw-breakpoint-xxl | 1920px |
| breakpoint.xxxl | 2560px | --gw-breakpoint-xxxl | 2560px |
FontSizes Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| global.font.size | 16px | --gw-global-font-size | 16px |
| base.font.size | 1rem | --gw-base-font-size | 1rem |
| xs.font.size | 0.75rem | --gw-xs-font-size | 0.75rem |
| sm.font.size | 0.875rem | --gw-sm-font-size | 0.875rem |
| lg.font.size | 1.125rem | --gw-lg-font-size | 1.125rem |
| xl.font.size | 1.5rem | --gw-xl-font-size | 1.5rem |
| h1.font.size | 2.5rem | --gw-h1-font-size | 2.5rem |
| h2.font.size | 2rem | --gw-h2-font-size | 2rem |
| h3.font.size | 1.75rem | --gw-h3-font-size | 1.75rem |
| h4.font.size | 1.5rem | --gw-h4-font-size | 1.5rem |
| h5.font.size | 1.25rem | --gw-h5-font-size | 1.25rem |
| h6.font.size | 1rem | --gw-h6-font-size | 1rem |
| form.field.sm.font.size | 0.875rem | --gw-form-field-sm-font-size | 0.875rem |
| form.field.lg.font.size | 1.125rem | --gw-form-field-lg-font-size | 1.125rem |
| form.field.base.font.size | {base.font.size} | --gw-form-field-base-font-size | 1rem |
| sm.font.size | 0.875rem | --gw-sm-font-size | 0.875rem |
| lg.font.size | 1.125rem | --gw-lg-font-size | 1.125rem |
| inputtext.sm.font.size | 0.875rem | --gw-inputtext-sm-font-size | 0.875rem |
| inputtext.lg.font.size | 1.125rem | --gw-inputtext-lg-font-size | 1.125rem |
| button.sm.font.size | 0.875rem | --gw-button-sm-font-size | 0.875rem |
| button.font.size | 1rem | --gw-button-font-size | 1rem |
| button.lg.font.size | 1.125rem | --gw-button-lg-font-size | 1.125rem |
| button.label.font.size | {base.font.size} | --gw-button-label-font-size | 1rem |
| floatlabel.active.font.size | 0.75rem | --gw-floatlabel-active-font-size | 0.75rem |
| card.title.font.size | 1.25rem | --gw-card-title-font-size | 1.25rem |
| card.body.font.size | {base.font.size} | --gw-card-body-font-size | 1rem |
| dialog.title.font.size | 1.25rem | --gw-dialog-title-font-size | 1.25rem |
| drawer.title.font.size | 1.5rem | --gw-drawer-title-font-size | 1.5rem |
| avatar.font.size | 1rem | --gw-avatar-font-size | 1rem |
| avatar.lg.font.size | 1.5rem | --gw-avatar-lg-font-size | 1.5rem |
| avatar.xl.font.size | 2rem | --gw-avatar-xl-font-size | 2rem |
| badge.font.size | 0.75rem | --gw-badge-font-size | 0.75rem |
| badge.sm.font.size | {xs.font.size} | --gw-badge-sm-font-size | 0.75rem |
| badge.lg.font.size | 0.875rem | --gw-badge-lg-font-size | 0.875rem |
| badge.xl.font.size | 1rem | --gw-badge-xl-font-size | 1rem |
| progressbar.label.font.size | 0.75rem | --gw-progressbar-label-font-size | 0.75rem |
| message.text.font.size | 1rem | --gw-message-text-font-size | 1rem |
| message.text.sm.font.size | 0.875rem | --gw-message-text-sm-font-size | 0.875rem |
| message.text.lg.font.size | 1.125rem | --gw-message-text-lg-font-size | 1.125rem |
| tag.font.size | {badge.font.size} | --gw-tag-font-size | 0.75rem |
| overlay.title.font.size | 1.5rem | --gw-overlay-title-font-size | 1.5rem |
| cascadeselect.sm.font.size | {form.field.sm.font.size} | --gw-cascadeselect-sm-font-size | 0.875rem |
| cascadeselect.lg.font.size | {form.field.lg.font.size} | --gw-cascadeselect-lg-font-size | 1.125rem |
| select.sm.font.size | {form.field.sm.font.size} | --gw-select-sm-font-size | 0.875rem |
| select.lg.font.size | {form.field.lg.font.size} | --gw-select-lg-font-size | 1.125rem |
| textarea.sm.font.size | {form.field.sm.font.size} | --gw-textarea-sm-font-size | 0.875rem |
| textarea.lg.font.size | {form.field.lg.font.size} | --gw-textarea-lg-font-size | 1.125rem |
| multiselect.sm.font.size | {form.field.sm.font.size} | --gw-multiselect-sm-font-size | 0.875rem |
| multiselect.lg.font.size | {form.field.lg.font.size} | --gw-multiselect-lg-font-size | 1.125rem |
| togglebutton.sm.font.size | {form.field.sm.font.size} | --gw-togglebutton-sm-font-size | 0.875rem |
| togglebutton.lg.font.size | {form.field.lg.font.size} | --gw-togglebutton-lg-font-size | 1.125rem |
| treeselect.sm.font.size | {form.field.sm.font.size} | --gw-treeselect-sm-font-size | 0.875rem |
| treeselect.lg.font.size | {form.field.lg.font.size} | --gw-treeselect-lg-font-size | 1.125rem |
| toast.summary.font.size | 1rem | --gw-toast-summary-font-size | 1rem |
| toast.detail.font.size | 0.875rem | --gw-toast-detail-font-size | 0.875rem |
| stepper.step.number.font.size | 1.143rem | --gw-stepper-step-number-font-size | 1.143rem |
| iftalabel.font.size | 0.75rem | --gw-iftalabel-font-size | 0.75rem |
Sizing Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| size.0 | 0 | --gw-size-0 | 0 |
| size.1 | 1rem | --gw-size-1 | 1rem |
| size.2 | 2rem | --gw-size-2 | 2rem |
| size.0.25 | 0.25rem | --gw-size-0-25 | 0.25rem |
| size.0.5 | 0.5rem | --gw-size-0-5 | 0.5rem |
| size.0.75 | 0.75rem | --gw-size-0-75 | 0.75rem |
| size.0.875 | 0.875rem | --gw-size-0-875 | 0.875rem |
| size.1.125 | 1.125rem | --gw-size-1-125 | 1.125rem |
| size.1.25 | 1.25rem | --gw-size-1-25 | 1.25rem |
| size.1.5 | 1.5rem | --gw-size-1-5 | 1.5rem |
| size.1.75 | 1.75rem | --gw-size-1-75 | 1.75rem |
| size.2.5 | 2.5rem | --gw-size-2-5 | 2.5rem |
| size.2.75 | 2.75rem | --gw-size-2-75 | 2.75rem |
| icon.size | {size.1} | --gw-icon-size | 1rem |
| sidenav.menuitem.icon.size | {size.1,5} | --gw-sidenav-menuitem-icon-size | 1.5rem |
| sidenav.menuitem.hover.icon.size | {size.1,75} | --gw-sidenav-menuitem-hover-icon-size | 1.75rem |
| sidenav.menuitem.selected.icon.size | {size.1,5} | --gw-sidenav-menuitem-selected-icon-size | 1.5rem |
| sidenav.menuitem.height | 56px | --gw-sidenav-menuitem-height | 56px |
| sidenav.submenuitem.icon.size | 0.875rem | --gw-sidenav-submenuitem-icon-size | 0.875rem |
| sidenav.submenuitem.height | 48px | --gw-sidenav-submenuitem-height | 48px |
| button.icon.only.width | 2.5rem | --gw-button-icon-only-width | 2.5rem |
| button.icon.size | {icon.size} | --gw-button-icon-size | 1rem |
| button.sm.icon.only.width | 2rem | --gw-button-sm-icon-only-width | 2rem |
| button.sm.icon.size | {button.sm.font.size} | --gw-button-sm-icon-size | 0.875rem |
| button.badge.size | 1rem | --gw-button-badge-size | 1rem |
| iconfield.figma.sm.icon.size | {inputtext.sm.font.size} | --gw-iconfield-figma-sm-icon-size | 0.875rem |
| iconfield.figma.lg.icon.size | {inputtext.lg.font.size} | --gw-iconfield-figma-lg-icon-size | 1.125rem |
| toggleswitch.width | 1.875rem | --gw-toggleswitch-width | 1.875rem |
| toggleswitch.height | {size.1} | --gw-toggleswitch-height | 1rem |
| toggleswitch.handle.size | {size.0,75} | --gw-toggleswitch-handle-size | 0.75rem |
| radiobutton.width | 1.25rem | --gw-radiobutton-width | 1.25rem |
| radiobutton.height | 1.25rem | --gw-radiobutton-height | 1.25rem |
| radiobutton.icon.size | 0.75rem | --gw-radiobutton-icon-size | 0.75rem |
| radiobutton.icon.sm.size | 0.5rem | --gw-radiobutton-icon-sm-size | 0.5rem |
| radiobutton.icon.regular.size | 1rem | --gw-radiobutton-icon-regular-size | 1rem |
| radiobutton.sm.width | 1rem | --gw-radiobutton-sm-width | 1rem |
| radiobutton.sm.height | 1rem | --gw-radiobutton-sm-height | 1rem |
| radiobutton.regular.width | 1.5rem | --gw-radiobutton-regular-width | 1.5rem |
| radiobutton.regular.height | 1.5rem | --gw-radiobutton-regular-height | 1.5rem |
| checkbox.width | {icon.size} | --gw-checkbox-width | 1rem |
| checkbox.size | {icon.size} | --gw-checkbox-size | 1rem |
| checkbox.height | 1.25rem | --gw-checkbox-height | 1.25rem |
| checkbox.icon.size | 0.875rem | --gw-checkbox-icon-size | 0.875rem |
| checkbox.icon.sm.size | 0.75rem | --gw-checkbox-icon-sm-size | 0.75rem |
| checkbox.icon.lg.size | 1rem | --gw-checkbox-icon-lg-size | 1rem |
| checkbox.sm.width | 1rem | --gw-checkbox-sm-width | 1rem |
| checkbox.sm.height | 1rem | --gw-checkbox-sm-height | 1rem |
| checkbox.lg.width | 1.5rem | --gw-checkbox-lg-width | 1.5rem |
| checkbox.lg.height | 1.5rem | --gw-checkbox-lg-height | 1.5rem |
| autocomplete.dropdown.width | 2.5rem | --gw-autocomplete-dropdown-width | 2.5rem |
| autocomplete.dropdown.sm.width | 2rem | --gw-autocomplete-dropdown-sm-width | 2rem |
| autocomplete.dropdown.lg.width | 3rem | --gw-autocomplete-dropdown-lg-width | 3rem |
| datepicker.dropdown.width | 2.5rem | --gw-datepicker-dropdown-width | 2.5rem |
| datepicker.dropdown.sm.width | 2rem | --gw-datepicker-dropdown-sm-width | 2rem |
| datepicker.dropdown.lg.width | 3rem | --gw-datepicker-dropdown-lg-width | 3rem |
| datepicker.date.width | 2rem | --gw-datepicker-date-width | 2rem |
| datepicker.date.height | 2rem | --gw-datepicker-date-height | 2rem |
| rating.icon.size | 1rem | --gw-rating-icon-size | 1rem |
| avatar.width | 2rem | --gw-avatar-width | 2rem |
| avatar.height | 2rem | --gw-avatar-height | 2rem |
| avatar.lg.width | 3rem | --gw-avatar-lg-width | 3rem |
| avatar.lg.height | 3rem | --gw-avatar-lg-height | 3rem |
| avatar.lg.icon.size | 1.5rem | --gw-avatar-lg-icon-size | 1.5rem |
| avatar.xl.width | 4rem | --gw-avatar-xl-width | 4rem |
| avatar.xl.height | 4rem | --gw-avatar-xl-height | 4rem |
| avatar.xl.icon.size | 2rem | --gw-avatar-xl-icon-size | 2rem |
| avatar.icon.size | 1rem | --gw-avatar-icon-size | 1rem |
| badge.min.width | {size.1,125} | --gw-badge-min-width | 1.125rem |
| badge.height | {size.1,125} | --gw-badge-height | 1.125rem |
| badge.dot.size | 0.5rem | --gw-badge-dot-size | 0.5rem |
| badge.sm.min.width | {size.1} | --gw-badge-sm-min-width | 1rem |
| badge.sm.height | {size.1} | --gw-badge-sm-height | 1rem |
| badge.lg.min.width | {size.1,125} | --gw-badge-lg-min-width | 1.125rem |
| badge.lg.height | {size.1,125} | --gw-badge-lg-height | 1.125rem |
| badge.xl.min.width | {size.1,25} | --gw-badge-xl-min-width | 1.25rem |
| badge.xl.height | {size.1,25} | --gw-badge-xl-height | 1.25rem |
| chip.image.width | 2rem | --gw-chip-image-width | 2rem |
| chip.image.height | 2rem | --gw-chip-image-height | 2rem |
| chip.icon.size | 1rem | --gw-chip-icon-size | 1rem |
| chip.remove.icon.size | 1rem | --gw-chip-remove-icon-size | 1rem |
| progressbar.height | 1.25rem | --gw-progressbar-height | 1.25rem |
| message.icon.size | 1.125rem | --gw-message-icon-size | 1.125rem |
| message.icon.sm.size | 1rem | --gw-message-icon-sm-size | 1rem |
| message.icon.lg.size | 1.25rem | --gw-message-icon-lg-size | 1.25rem |
| message.close.button.width | {size.1,25} | --gw-message-close-button-width | 1.25rem |
| message.close.button.height | {size.1,25} | --gw-message-close-button-height | 1.25rem |
| message.close.icon.size | 1rem | --gw-message-close-icon-size | 1rem |
| message.close.icon.sm.size | 0.875rem | --gw-message-close-icon-sm-size | 0.875rem |
| message.close.icon.lg.size | 1.125rem | --gw-message-close-icon-lg-size | 1.125rem |
| tag.icon.size | 0.75rem | --gw-tag-icon-size | 0.75rem |
| cascadeselect.dropdown.width | 2.5rem | --gw-cascadeselect-dropdown-width | 2.5rem |
| cascadeselect.option.icon.size | 0.875rem | --gw-cascadeselect-option-icon-size | 0.875rem |
| colorpicker.preview.width | 1.5rem | --gw-colorpicker-preview-width | 1.5rem |
| colorpicker.preview.height | 1.5rem | --gw-colorpicker-preview-height | 1.5rem |
| select.dropdown.width | 2.5rem | --gw-select-dropdown-width | 2.5rem |
| inputgroup.addon.min.width | 2.5rem | --gw-inputgroup-addon-min-width | 2.5rem |
| inputnumber.button.width | 2.5rem | --gw-inputnumber-button-width | 2.5rem |
| multiselect.dropdown.width | 2.5rem | --gw-multiselect-dropdown-width | 2.5rem |
| password.meter.height | 0.75rem | --gw-password-meter-height | 0.75rem |
| slider.track.size | 3px | --gw-slider-track-size | 3px |
| slider.handle.width | 20px | --gw-slider-handle-width | 20px |
| slider.handle.height | 20px | --gw-slider-handle-height | 20px |
| slider.handle.content.width | 16px | --gw-slider-handle-content-width | 16px |
| slider.handle.content.height | 16px | --gw-slider-handle-content-height | 16px |
| togglebutton.figma.sm.icon.size | {togglebutton.sm.font.size} | --gw-togglebutton-figma-sm-icon-size | 0.875rem |
| togglebutton.figma.lg.icon.size | {togglebutton.lg.font.size} | --gw-togglebutton-figma-lg-icon-size | 1.125rem |
| treeselect.dropdown.width | 2.5rem | --gw-treeselect-dropdown-width | 2.5rem |
| splitter.handle.size | 24px | --gw-splitter-handle-size | 24px |
| scrollpanel.bar.size | 9px | --gw-scrollpanel-bar-size | 9px |
| tabs.nav.button.width | 2.5rem | --gw-tabs-nav-button-width | 2.5rem |
| tabs.active.bar.height | 1px | --gw-tabs-active-bar-height | 1px |
| confirmdialog.icon.size | 2rem | --gw-confirmdialog-icon-size | 2rem |
| confirmpopup.icon.size | 1.5rem | --gw-confirmpopup-icon-size | 1.5rem |
| tooltip.max.width | 12.5rem | --gw-tooltip-max-width | 12.5rem |
| contextmenu.submenu.icon.size | {sidenav.submenuitem.icon.size} | --gw-contextmenu-submenu-icon-size | 0.875rem |
| dock.item.size | 3rem | --gw-dock-item-size | 3rem |
| megamenu.submenu.icon.size | {sidenav.submenuitem.icon.size} | --gw-megamenu-submenu-icon-size | 0.875rem |
| megamenu.mobile.button.size | 1.75rem | --gw-megamenu-mobile-button-size | 1.75rem |
| menubar.submenu.icon.size | {sidenav.submenuitem.icon.size} | --gw-menubar-submenu-icon-size | 0.875rem |
| menubar.mobile.button.size | 1.75rem | --gw-menubar-mobile-button-size | 1.75rem |
| tieredmenu.submenu.icon.size | {sidenav.submenuitem.icon.size} | --gw-tieredmenu-submenu-icon-size | 0.875rem |
| organizationchart.node.toggle.button.size | 1.5rem | --gw-organizationchart-node-toggle-button-size | 1.5rem |
| organizationchart.connector.height | 24px | --gw-organizationchart-connector-height | 24px |
| paginator.nav.button.width | 2.5rem | --gw-paginator-nav-button-width | 2.5rem |
| paginator.nav.button.height | 2.5rem | --gw-paginator-nav-button-height | 2.5rem |
| paginator.jump.to.page.input.max.width | 2.5rem | --gw-paginator-jump-to-page-input-max-width | 2.5rem |
| datatable.header.cell.min-width | {size.2} | --gw-datatable-header-cell-min-width | 2rem |
| datatable.column.resizer.width | 0.5rem | --gw-datatable-column-resizer-width | 0.5rem |
| datatable.row.toggle.button.size | {size.1,5} | --gw-datatable-row-toggle-button-size | 1.5rem |
| datatable.body.cell.sm.height | {size.2} | --gw-datatable-body-cell-sm-height | 2rem |
| datatable.body.cell.lg.height | {size.2,75} | --gw-datatable-body-cell-lg-height | 2.75rem |
| datatable.body.cell.min-width | {size.2} | --gw-datatable-body-cell-min-width | 2rem |
| datatable.body.cell.height | {size.2,5} | --gw-datatable-body-cell-height | 2.5rem |
| datatable.footer.cell.min-width | {size.2} | --gw-datatable-footer-cell-min-width | 2rem |
| datatable.resize.indicator.width | 1px | --gw-datatable-resize-indicator-width | 1px |
| datatable.sort.icon.size | 0.875rem | --gw-datatable-sort-icon-size | 0.875rem |
| datatable.loading.icon.size | 2rem | --gw-datatable-loading-icon-size | 2rem |
| timeline.event.min.height | 5rem | --gw-timeline-event-min-height | 5rem |
| timeline.event.marker.size | 1.125rem | --gw-timeline-event-marker-size | 1.125rem |
| timeline.event.marker.content.size | 0.375rem | --gw-timeline-event-marker-content-size | 0.375rem |
| timeline.event.connector.size | 2px | --gw-timeline-event-connector-size | 2px |
| tree.node.toggle.button.size | 1.75rem | --gw-tree-node-toggle-button-size | 1.75rem |
| tree.loading.icon.size | 2rem | --gw-tree-loading-icon-size | 2rem |
| virtualscroller.loader.icon.size | 2rem | --gw-virtualscroller-loader-icon-size | 2rem |
| carousel.indicator.width | 2rem | --gw-carousel-indicator-width | 2rem |
| carousel.indicator.height | 0.5rem | --gw-carousel-indicator-height | 0.5rem |
| image.preview.icon.size | 1.5rem | --gw-image-preview-icon-size | 1.5rem |
| image.action.size | 3rem | --gw-image-action-size | 3rem |
| image.action.icon.size | 1.5rem | --gw-image-action-icon-size | 1.5rem |
| treetable.figma.header.cell.padding.sm | 0.375rem 0.5rem | --gw-treetable-figma-header-cell-padding-sm | 0.375rem 0.5rem |
| treetable.figma.header.cell.padding.lg | 0.9375rem 1.25rem | --gw-treetable-figma-header-cell-padding-lg | 0.9375rem 1.25rem |
| treetable.figma.header.padding.sm | 0.375rem 0.5rem | --gw-treetable-figma-header-padding-sm | 0.375rem 0.5rem |
| treetable.figma.header.padding.lg | 0.9375rem 1.25rem | --gw-treetable-figma-header-padding-lg | 0.9375rem 1.25rem |
| treetable.figma.body.cell.padding.sm | 0.375rem 0.5rem | --gw-treetable-figma-body-cell-padding-sm | 0.375rem 0.5rem |
| treetable.figma.body.cell.padding.lg | 0.9375rem 1.25rem | --gw-treetable-figma-body-cell-padding-lg | 0.9375rem 1.25rem |
| treetable.figma.footer.cell.padding.sm | 0.375rem 0.5rem | --gw-treetable-figma-footer-cell-padding-sm | 0.375rem 0.5rem |
| treetable.figma.footer.cell.padding.lg | 0.9375rem 1.25rem | --gw-treetable-figma-footer-cell-padding-lg | 0.9375rem 1.25rem |
| treetable.figma.footer.padding.sm | 0.375rem 0.5rem | --gw-treetable-figma-footer-padding-sm | 0.375rem 0.5rem |
| treetable.figma.footer.padding.lg | 0.9375rem 1.25rem | --gw-treetable-figma-footer-padding-lg | 0.9375rem 1.25rem |
| treetable.column.resizer.width | 0.5rem | --gw-treetable-column-resizer-width | 0.5rem |
| treetable.resize.indicator.width | 1px | --gw-treetable-resize-indicator-width | 1px |
| treetable.sort.icon.size | 0.875rem | --gw-treetable-sort-icon-size | 0.875rem |
| treetable.loading.icon.size | 2rem | --gw-treetable-loading-icon-size | 2rem |
| treetable.node.toggle.button.size | 1.75rem | --gw-treetable-node-toggle-button-size | 1.75rem |
| toast.width | 25rem | --gw-toast-width | 25rem |
| toast.icon.size | 1.125rem | --gw-toast-icon-size | 1.125rem |
| toast.close.button.width | 1.75rem | --gw-toast-close-button-width | 1.75rem |
| toast.close.button.height | 1.75rem | --gw-toast-close-button-height | 1.75rem |
| toast.close.icon.size | 1rem | --gw-toast-close-icon-size | 1rem |
| galleria.nav.button.size | 3rem | --gw-galleria-nav-button-size | 3rem |
| galleria.nav.icon.size | 1.5rem | --gw-galleria-nav-icon-size | 1.5rem |
| galleria.thumbnail.nav.button.size | 2rem | --gw-galleria-thumbnail-nav-button-size | 2rem |
| galleria.thumbnail.nav.button.icon.size | 1rem | --gw-galleria-thumbnail-nav-button-icon-size | 1rem |
| galleria.indicator.button.width | 1rem | --gw-galleria-indicator-button-width | 1rem |
| galleria.indicator.button.height | 1rem | --gw-galleria-indicator-button-height | 1rem |
| galleria.close.button.size | 3rem | --gw-galleria-close-button-size | 3rem |
| galleria.close.button.icon.size | 1.5rem | --gw-galleria-close-button-icon-size | 1.5rem |
| fileupload.progressbar.height | 0.25rem | --gw-fileupload-progressbar-height | 0.25rem |
| stepper.separator.size | 2px | --gw-stepper-separator-size | 2px |
| stepper.step.number.size | 2rem | --gw-stepper-step-number-size | 2rem |
| metergroup.meters.size | 0.5rem | --gw-metergroup-meters-size | 0.5rem |
| metergroup.label.marker.size | 0.5rem | --gw-metergroup-label-marker-size | 0.5rem |
| metergroup.label.icon.size | 1rem | --gw-metergroup-label-icon-size | 1rem |
| terminal.height | 18rem | --gw-terminal-height | 18rem |
| imagecompare.handle.size | 15px | --gw-imagecompare-handle-size | 15px |
| imagecompare.handle.hover.size | 30px | --gw-imagecompare-handle-hover-size | 30px |
| inputotp.input.width | 2.5rem | --gw-inputotp-input-width | 2.5rem |
| inputotp.input.sm.width | 2rem | --gw-inputotp-input-sm-width | 2rem |
| inputotp.input.lg.width | 3rem | --gw-inputotp-input-lg-width | 3rem |
| swagger.close.button.width | 1.75rem | --gw-swagger-close-button-width | 1.75rem |
| swagger.close.icon.size | 1rem | --gw-swagger-close-icon-size | 1rem |
| swagger.close.icon.sm.size | 0.875rem | --gw-swagger-close-icon-sm-size | 0.875rem |
| swagger.close.icon.lg.size | 1.125rem | --gw-swagger-close-icon-lg-size | 1.125rem |
| swagger.button.width | 5rem | --gw-swagger-button-width | 5rem |
| swagger.button.height | {size.1,5} | --gw-swagger-button-height | 1.5rem |
Opacity Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| disabled.opacity | 0.6 | --gw-disabled-opacity | 0.6 |
| button.disabled.opacity | 0.65 | --gw-button-disabled-opacity | 0.65 |
| checkbox.disabled.opacity | 65% | --gw-checkbox-disabled-opacity | 65% |
Other Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| form.field.focus.ring.style | {style.solid} | --gw-form-field-focus-ring-style | solid |
| form.field.transition.duration | {transition.duration} | --gw-form-field-transition-duration | 200ms |
| focus.ring.style | {style.solid} | --gw-focus-ring-style | solid |
| transition.duration | 200ms | --gw-transition-duration | 200ms |
| style.solid | solid | --gw-style-solid | solid |
| style.dashed | dashed | --gw-style-dashed | dashed |
| style.dotted | dotted | --gw-style-dotted | dotted |
| inputtext.focus.ring.style | {form.field.focus.ring.style} | --gw-inputtext-focus-ring-style | solid |
| inputtext.transition.duration | {form.field.transition.duration} | --gw-inputtext-transition-duration | 200ms |
| button.focus.ring.style | {focus.ring.style} | --gw-button-focus-ring-style | solid |
| button.transition.duration | {form.field.transition.duration} | --gw-button-transition-duration | 200ms |
| toggleswitch.focus.ring.style | {focus.ring.style} | --gw-toggleswitch-focus-ring-style | solid |
| toggleswitch.transition.duration | {form.field.transition.duration} | --gw-toggleswitch-transition-duration | 200ms |
| toggleswitch.slide.duration | 0.2s | --gw-toggleswitch-slide-duration | 0.2s |
| floatlabel.transition.duration | 0.2s | --gw-floatlabel-transition-duration | 0.2s |
| radiobutton.focus.ring.style | {focus.ring.style} | --gw-radiobutton-focus-ring-style | solid |
| radiobutton.transition.duration | {form.field.transition.duration} | --gw-radiobutton-transition-duration | 200ms |
| checkbox.focus.ring.style | {focus.ring.style} | --gw-checkbox-focus-ring-style | solid |
| checkbox.transition.duration | {form.field.transition.duration} | --gw-checkbox-transition-duration | 200ms |
| autocomplete.focus.ring.style | {form.field.focus.ring.style} | --gw-autocomplete-focus-ring-style | solid |
| autocomplete.dropdown.focus.ring.style | {focus.ring.style} | --gw-autocomplete-dropdown-focus-ring-style | solid |
| autocomplete.transition.duration | {transition.duration} | --gw-autocomplete-transition-duration | 200ms |
| datepicker.dropdown.focus.ring.style | {focus.ring.style} | --gw-datepicker-dropdown-focus-ring-style | solid |
| datepicker.date.focus.ring.style | {focus.ring.style} | --gw-datepicker-date-focus-ring-style | solid |
| datepicker.transition.duration | {transition.duration} | --gw-datepicker-transition-duration | 200ms |
| rating.focus.ring.style | {focus.ring.style} | --gw-rating-focus-ring-style | solid |
| rating.transition.duration | {transition.duration} | --gw-rating-transition-duration | 200ms |
| chip.remove.icon.focus.ring.style | {focus.ring.style} | --gw-chip-remove-icon-focus-ring-style | solid |
| chip.transition.duration | {transition.duration} | --gw-chip-transition-duration | 200ms |
| message.close.button.focus.ring.style | {focus.ring.style} | --gw-message-close-button-focus-ring-style | solid |
| message.transition.duration | {transition.duration} | --gw-message-transition-duration | 200ms |
| breadcrumb.item.focus.ring.style | {focus.ring.style} | --gw-breadcrumb-item-focus-ring-style | solid |
| breadcrumb.transition.duration | {transition.duration} | --gw-breadcrumb-transition-duration | 200ms |
| cascadeselect.focus.ring.style | {form.field.focus.ring.style} | --gw-cascadeselect-focus-ring-style | solid |
| cascadeselect.transition.duration | {form.field.transition.duration} | --gw-cascadeselect-transition-duration | 200ms |
| colorpicker.preview.focus.ring.style | {focus.ring.style} | --gw-colorpicker-preview-focus-ring-style | solid |
| select.focus.ring.style | {form.field.focus.ring.style} | --gw-select-focus-ring-style | solid |
| select.transition.duration | {form.field.transition.duration} | --gw-select-transition-duration | 200ms |
| textarea.focus.ring.style | {form.field.focus.ring.style} | --gw-textarea-focus-ring-style | solid |
| textarea.transition.duration | {form.field.transition.duration} | --gw-textarea-transition-duration | 200ms |
| inputnumber.transition.duration | {transition.duration} | --gw-inputnumber-transition-duration | 200ms |
| knob.focus.ring.style | {focus.ring.style} | --gw-knob-focus-ring-style | solid |
| knob.transition.duration | {transition.duration} | --gw-knob-transition-duration | 200ms |
| listbox.transition.duration | {form.field.transition.duration} | --gw-listbox-transition-duration | 200ms |
| multiselect.focus.ring.style | {form.field.focus.ring.style} | --gw-multiselect-focus-ring-style | solid |
| multiselect.transition.duration | {form.field.transition.duration} | --gw-multiselect-transition-duration | 200ms |
| slider.handle.focus.ring.style | {focus.ring.style} | --gw-slider-handle-focus-ring-style | solid |
| slider.transition.duration | {transition.duration} | --gw-slider-transition-duration | 200ms |
| togglebutton.focus.ring.style | {focus.ring.style} | --gw-togglebutton-focus-ring-style | solid |
| togglebutton.transition.duration | {form.field.transition.duration} | --gw-togglebutton-transition-duration | 200ms |
| treeselect.focus.ring.style | {form.field.focus.ring.style} | --gw-treeselect-focus-ring-style | solid |
| treeselect.transition.duration | {form.field.transition.duration} | --gw-treeselect-transition-duration | 200ms |
| accordion.header.focus.ring.style | {focus.ring.style} | --gw-accordion-header-focus-ring-style | solid |
| accordion.transition.duration | {transition.duration} | --gw-accordion-transition-duration | 200ms |
| fieldset.legend.focus.ring.style | {focus.ring.style} | --gw-fieldset-legend-focus-ring-style | solid |
| fieldset.transition.duration | {transition.duration} | --gw-fieldset-transition-duration | 200ms |
| splitter.handle.focus.ring.style | {focus.ring.style} | --gw-splitter-handle-focus-ring-style | solid |
| splitter.transition.duration | {transition.duration} | --gw-splitter-transition-duration | 200ms |
| scrollpanel.bar.focus.ring.style | {focus.ring.style} | --gw-scrollpanel-bar-focus-ring-style | solid |
| scrollpanel.transition.duration | {transition.duration} | --gw-scrollpanel-transition-duration | 200ms |
| tabs.tab.focus.ring.style | {focus.ring.style} | --gw-tabs-tab-focus-ring-style | solid |
| tabs.tabpanel.focus.ring.style | {focus.ring.style} | --gw-tabs-tabpanel-focus-ring-style | solid |
| tabs.nav.button.focus.ring.style | {focus.ring.style} | --gw-tabs-nav-button-focus-ring-style | solid |
| tabs.transition.duration | {transition.duration} | --gw-tabs-transition-duration | 200ms |
| contextmenu.transition.duration | {transition.duration} | --gw-contextmenu-transition-duration | 200ms |
| dock.item.focus.ring.style | {focus.ring.style} | --gw-dock-item-focus-ring-style | solid |
| megamenu.mobile.button.focus.ring.style | {focus.ring.style} | --gw-megamenu-mobile-button-focus-ring-style | solid |
| megamenu.transition.duration | {transition.duration} | --gw-megamenu-transition-duration | 200ms |
| menu.transition.duration | {transition.duration} | --gw-menu-transition-duration | 200ms |
| menubar.mobile.button.focus.ring.style | {focus.ring.style} | --gw-menubar-mobile-button-focus-ring-style | solid |
| menubar.transition.duration | {transition.duration} | --gw-menubar-transition-duration | 200ms |
| panelmenu.transition.duration | {transition.duration} | --gw-panelmenu-transition-duration | 200ms |
| tieredmenu.transition.duration | {transition.duration} | --gw-tieredmenu-transition-duration | 200ms |
| organizationchart.node.toggle.button.focus.ring.style | {focus.ring.style} | --gw-organizationchart-node-toggle-button-focus-ring-style | solid |
| organizationchart.transition.duration | {transition.duration} | --gw-organizationchart-transition-duration | 200ms |
| paginator.nav.button.focus.ring.style | {focus.ring.style} | --gw-paginator-nav-button-focus-ring-style | solid |
| paginator.transition.duration | {transition.duration} | --gw-paginator-transition-duration | 200ms |
| datatable.header.cell.focus.ring.style | {focus.ring.style} | --gw-datatable-header-cell-focus-ring-style | solid |
| datatable.row.focus.ring.style | {focus.ring.style} | --gw-datatable-row-focus-ring-style | solid |
| datatable.row.toggle.button.focus.ring.style | {focus.ring.style} | --gw-datatable-row-toggle-button-focus-ring-style | solid |
| datatable.transition.duration | {transition.duration} | --gw-datatable-transition-duration | 200ms |
| tree.node.focus.ring.style | {focus.ring.style} | --gw-tree-node-focus-ring-style | solid |
| tree.node.toggle.button.focus.ring.style | {focus.ring.style} | --gw-tree-node-toggle-button-focus-ring-style | solid |
| tree.transition.duration | {transition.duration} | --gw-tree-transition-duration | 200ms |
| carousel.indicator.focus.ring.style | {focus.ring.style} | --gw-carousel-indicator-focus-ring-style | solid |
| carousel.transition.duration | {transition.duration} | --gw-carousel-transition-duration | 200ms |
| image.toolbar.position.left | auto | --gw-image-toolbar-position-left | auto |
| image.toolbar.position.bottom | auto | --gw-image-toolbar-position-bottom | auto |
| image.action.focus.ring.style | {focus.ring.style} | --gw-image-action-focus-ring-style | solid |
| image.transition.duration | {transition.duration} | --gw-image-transition-duration | 200ms |
| treetable.header.cell.focus.ring.style | {focus.ring.style} | --gw-treetable-header-cell-focus-ring-style | solid |
| treetable.row.focus.ring.style | {focus.ring.style} | --gw-treetable-row-focus-ring-style | solid |
| treetable.node.toggle.button.focus.ring.style | {focus.ring.style} | --gw-treetable-node-toggle-button-focus-ring-style | solid |
| treetable.transition.duration | {transition.duration} | --gw-treetable-transition-duration | 200ms |
| toast.close.button.focus.ring.style | {focus.ring.style} | --gw-toast-close-button-focus-ring-style | solid |
| toast.transition.duration | {transition.duration} | --gw-toast-transition-duration | 200ms |
| galleria.nav.button.focus.ring.style | {focus.ring.style} | --gw-galleria-nav-button-focus-ring-style | solid |
| galleria.thumbnail.nav.button.focus.ring.style | {focus.ring.style} | --gw-galleria-thumbnail-nav-button-focus-ring-style | solid |
| galleria.indicator.button.focus.ring.style | {focus.ring.style} | --gw-galleria-indicator-button-focus-ring-style | solid |
| galleria.close.button.focus.ring.style | {focus.ring.style} | --gw-galleria-close-button-focus-ring-style | solid |
| galleria.transition.duration | {transition.duration} | --gw-galleria-transition-duration | 200ms |
| fileupload.transition.duration | {transition.duration} | --gw-fileupload-transition-duration | 200ms |
| speeddial.transition.duration | {transition.duration} | --gw-speeddial-transition-duration | 200ms |
| stepper.step.header.focus.ring.style | {focus.ring.style} | --gw-stepper-step-header-focus-ring-style | solid |
| stepper.transition.duration | {transition.duration} | --gw-stepper-transition-duration | 200ms |
| inplace.focus.ring.style | {focus.ring.style} | --gw-inplace-focus-ring-style | solid |
| inplace.transition.duration | {transition.duration} | --gw-inplace-transition-duration | 200ms |
| imagecompare.handle.focus.ring.style | {focus.ring.style} | --gw-imagecompare-handle-focus-ring-style | solid |
| imagecompare.handle.transition.duration | {transition.duration} | --gw-imagecompare-handle-transition-duration | 200ms |
| iftalabel.transition.duration | 0.2s | --gw-iftalabel-transition-duration | 0.2s |
BoxShadow Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| form.field.focus.ring.shadow | {shadow.focus} | --gw-form-field-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
} |
--gw-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| overlay.shadow | {shadow.md} | --gw-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| overlay.popover.shadow | {shadow.md} | --gw-overlay-popover-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| overlay.modal.shadow | {shadow.lg} | --gw-overlay-modal-shadow | [{"x":"0","y":"20","blur":"25","spread":"-5","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"8","blur":"10","spread":"-6","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| overlay.navigation.shadow | {shadow.md} | --gw-overlay-navigation-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| shadow.xs | [
{
"x": "0px",
"y": "1px",
"blur": "2px",
"spread": "0px",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
] |
--gw-shadow-xs | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| shadow.sm | [
{
"x": "0px",
"y": "1px",
"blur": "12px",
"spread": "-2px",
"color": "{neutral.shadow.15}",
"type": "dropShadow"
}
] |
--gw-shadow-sm | [{"x":"0px","y":"1px","blur":"12px","spread":"-2px","color":"{neutral.shadow.15}","type":"dropShadow"}] |
| shadow.md | [
{
"x": "0",
"y": "4",
"blur": "6",
"spread": "-1",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
},
{
"x": "0",
"y": "2",
"blur": "4",
"spread": "-2",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
] |
--gw-shadow-md | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| shadow.lg | [
{
"x": "0",
"y": "20",
"blur": "25",
"spread": "-5",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
},
{
"x": "0",
"y": "8",
"blur": "10",
"spread": "-6",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
] |
--gw-shadow-lg | [{"x":"0","y":"20","blur":"25","spread":"-5","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"8","blur":"10","spread":"-6","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| shadow.focus | [
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "3px",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
] |
--gw-shadow-focus | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| form.field.shadow | {shadow.xs} | --gw-form-field-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| sidenav.collapsebutton.shadow | {autocomplete.shadow} | --gw-sidenav-collapsebutton-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| sidenav.shadow | {card.shadow} | --gw-sidenav-shadow | [{"x":"0px","y":"1px","blur":"12px","spread":"-2px","color":"{neutral.shadow.15}","type":"dropShadow"}] |
| inputtext.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-inputtext-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| inputtext.shadow | {form.field.shadow} | --gw-inputtext-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| button.raised.shadow | [
{
"x": "0",
"y": "3",
"blur": "1",
"spread": "-2",
"color": "rgba(0, 0, 0, 0.2)",
"type": "dropShadow"
},
{
"x": "0",
"y": "2",
"blur": "2",
"spread": "0",
"color": "rgba(0, 0, 0, 0.14)",
"type": "dropShadow"
},
{
"x": "0",
"y": "1",
"blur": "5",
"spread": "0",
"color": "rgba(0, 0, 0, 0.12)",
"type": "dropShadow"
}
] |
--gw-button-raised-shadow | [{"x":"0","y":"3","blur":"1","spread":"-2","color":"rgba(0, 0, 0, 0.2)","type":"dropShadow"},{"x":"0","y":"2","blur":"2","spread":"0","color":"rgba(0, 0, 0, 0.14)","type":"dropShadow"},{"x":"0","y":"1","blur":"5","spread":"0","color":"rgba(0, 0, 0, 0.12)","type":"dropShadow"}] |
| toggleswitch.shadow | {form.field.shadow} | --gw-toggleswitch-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| toggleswitch.focus.ring.shadow | {focus.ring.shadow} | --gw-toggleswitch-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| radiobutton.focus.ring.shadow | {focus.ring.shadow} | --gw-radiobutton-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| radiobutton.shadow | {form.field.shadow} | --gw-radiobutton-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| checkbox.focus.ring.shadow | {focus.ring.shadow} | --gw-checkbox-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| checkbox.shadow | {form.field.shadow} | --gw-checkbox-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| autocomplete.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-autocomplete-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| autocomplete.shadow | {form.field.shadow} | --gw-autocomplete-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| autocomplete.overlay.shadow | {overlay.shadow} | --gw-autocomplete-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| autocomplete.dropdown.focus.ring.shadow | {focus.ring.shadow} | --gw-autocomplete-dropdown-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| datepicker.panel.shadow | {overlay.popover.shadow} | --gw-datepicker-panel-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| datepicker.dropdown.focus.ring.shadow | {focus.ring.shadow} | --gw-datepicker-dropdown-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| datepicker.date.focus.ring.shadow | {focus.ring.shadow} | --gw-datepicker-date-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| card.shadow | {shadow.sm} | --gw-card-shadow | [{"x":"0px","y":"1px","blur":"12px","spread":"-2px","color":"{neutral.shadow.15}","type":"dropShadow"}] |
| dialog.shadow | {overlay.modal.shadow} | --gw-dialog-shadow | [{"x":"0","y":"20","blur":"25","spread":"-5","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"8","blur":"10","spread":"-6","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| drawer.shadow | {overlay.modal.shadow} | --gw-drawer-shadow | [{"x":"0","y":"20","blur":"25","spread":"-5","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"8","blur":"10","spread":"-6","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| rating.focus.ring.shadow | {focus.ring.shadow} | --gw-rating-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| chip.remove.icon.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-chip-remove-icon-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| breadcrumb.item.focus.ring.shadow | {focus.ring.shadow} | --gw-breadcrumb-item-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| cascadeselect.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-cascadeselect-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| cascadeselect.shadow | {form.field.shadow} | --gw-cascadeselect-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| cascadeselect.overlay.shadow | {overlay.shadow} | --gw-cascadeselect-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| colorpicker.preview.focus.ring.shadow | {focus.ring.shadow} | --gw-colorpicker-preview-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| colorpicker.panel.shadow | {overlay.popover.shadow} | --gw-colorpicker-panel-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| select.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-select-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| select.shadow | {form.field.shadow} | --gw-select-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| select.overlay.shadow | {overlay.shadow} | --gw-select-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| editor.overlay.shadow | {overlay.shadow} | --gw-editor-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| textarea.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-textarea-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| textarea.shadow | {form.field.shadow} | --gw-textarea-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| knob.focus.ring.shadow | {focus.ring.shadow} | --gw-knob-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| listbox.shadow | {form.field.shadow} | --gw-listbox-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| multiselect.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-multiselect-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| multiselect.shadow | {form.field.shadow} | --gw-multiselect-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| multiselect.overlay.shadow | {overlay.shadow} | --gw-multiselect-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| password.overlay.shadow | {overlay.popover.shadow} | --gw-password-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| slider.handle.content.shadow | [
{
"x": "0",
"y": "0.5",
"blur": "0",
"spread": "0",
"color": "rgba(0, 0, 0, 0.08)",
"type": "dropShadow"
},
{
"x": "0",
"y": "1",
"blur": "1",
"spread": "0",
"color": "rgba(0, 0, 0, 0.14)",
"type": "dropShadow"
}
] |
--gw-slider-handle-content-shadow | [{"x":"0","y":"0.5","blur":"0","spread":"0","color":"rgba(0, 0, 0, 0.08)","type":"dropShadow"},{"x":"0","y":"1","blur":"1","spread":"0","color":"rgba(0, 0, 0, 0.14)","type":"dropShadow"}] |
| slider.handle.focus.ring.shadow | {focus.ring.shadow} | --gw-slider-handle-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| togglebutton.focus.ring.shadow | {focus.ring.shadow} | --gw-togglebutton-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| togglebutton.content.checked.shadow | [
{
"x": "0",
"y": "1",
"blur": "2",
"spread": "0",
"color": "rgba(0, 0, 0, 0.02)",
"type": "dropShadow"
},
{
"x": "0",
"y": "1",
"blur": "2",
"spread": "0",
"color": "rgba(0, 0, 0, 0.04)",
"type": "dropShadow"
}
] |
--gw-togglebutton-content-checked-shadow | [{"x":"0","y":"1","blur":"2","spread":"0","color":"rgba(0, 0, 0, 0.02)","type":"dropShadow"},{"x":"0","y":"1","blur":"2","spread":"0","color":"rgba(0, 0, 0, 0.04)","type":"dropShadow"}] |
| treeselect.focus.ring.shadow | {form.field.focus.ring.shadow} | --gw-treeselect-focus-ring-shadow | [{"x":"0","y":"0","blur":"0","spread":"3px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| treeselect.shadow | {form.field.shadow} | --gw-treeselect-shadow | [{"x":"0px","y":"1px","blur":"2px","spread":"0px","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| treeselect.overlay.shadow | {overlay.shadow} | --gw-treeselect-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| accordion.header.focus.ring.shadow | {focus.ring.shadow} | --gw-accordion-header-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| fieldset.legend.focus.ring.shadow | {focus.ring.shadow} | --gw-fieldset-legend-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| splitter.handle.focus.ring.shadow | {focus.ring.shadow} | --gw-splitter-handle-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| scrollpanel.bar.focus.ring.shadow | {focus.ring.shadow} | --gw-scrollpanel-bar-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| tabs.tab.focus.ring.shadow | {focus.ring.shadow} | --gw-tabs-tab-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| tabs.tabpanel.focus.ring.shadow | {focus.ring.shadow} | --gw-tabs-tabpanel-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| tabs.nav.button.focus.ring.shadow | {focus.ring.shadow} | --gw-tabs-nav-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| confirmpopup.shadow | {overlay.popover.shadow} | --gw-confirmpopup-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| tooltip.shadow | {overlay.popover.shadow} | --gw-tooltip-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| contextmenu.shadow | {overlay.navigation.shadow} | --gw-contextmenu-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| statusmenu.list.shadow | {contextmenu.shadow} | --gw-statusmenu-list-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| dock.item.focus.ring.shadow | {focus.ring.shadow} | --gw-dock-item-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| megamenu.overlay.shadow | {overlay.navigation.shadow} | --gw-megamenu-overlay-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| megamenu.mobile.button.focus.ring.shadow | {focus.ring.shadow} | --gw-megamenu-mobile-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| menu.shadow | {overlay.navigation.shadow} | --gw-menu-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| menubar.submenu.shadow | {overlay.navigation.shadow} | --gw-menubar-submenu-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| menubar.mobile.button.focus.ring.shadow | {focus.ring.shadow} | --gw-menubar-mobile-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| tieredmenu.shadow | {overlay.navigation.shadow} | --gw-tieredmenu-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| organizationchart.node.toggle.button.focus.ring.shadow | {focus.ring.shadow} | --gw-organizationchart-node-toggle-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| paginator.nav.button.focus.ring.shadow | {focus.ring.shadow} | --gw-paginator-nav-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| datatable.header.cell.focus.ring.shadow | {focus.ring.shadow} | --gw-datatable-header-cell-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| datatable.row.focus.ring.shadow | {focus.ring.shadow} | --gw-datatable-row-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| datatable.row.toggle.button.focus.ring.shadow | {focus.ring.shadow} | --gw-datatable-row-toggle-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| datatable.filter.overlay.select.shadow | {overlay.shadow} | --gw-datatable-filter-overlay-select-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| datatable.filter.overlay.popover.shadow | {overlay.popover.shadow} | --gw-datatable-filter-overlay-popover-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| timeline.event.marker.content.inset.shadow | [
{
"x": "0",
"y": "0.5",
"blur": "0",
"spread": "0",
"color": "rgba(0, 0, 0, 0.06)",
"type": "dropShadow"
},
{
"x": "0",
"y": "1",
"blur": "1",
"spread": "0",
"color": "rgba(0, 0, 0, 0.12)",
"type": "dropShadow"
}
] |
--gw-timeline-event-marker-content-inset-shadow | [{"x":"0","y":"0.5","blur":"0","spread":"0","color":"rgba(0, 0, 0, 0.06)","type":"dropShadow"},{"x":"0","y":"1","blur":"1","spread":"0","color":"rgba(0, 0, 0, 0.12)","type":"dropShadow"}] |
| tree.node.focus.ring.shadow | {focus.ring.shadow} | --gw-tree-node-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| tree.node.toggle.button.focus.ring.shadow | {focus.ring.shadow} | --gw-tree-node-toggle-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| carousel.indicator.focus.ring.shadow | {focus.ring.shadow} | --gw-carousel-indicator-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| image.action.focus.ring.shadow | {focus.ring.shadow} | --gw-image-action-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| treetable.header.cell.focus.ring.shadow | {focus.ring.shadow} | --gw-treetable-header-cell-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| treetable.row.focus.ring.shadow | {focus.ring.shadow} | --gw-treetable-row-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| treetable.node.toggle.button.focus.ring.shadow | {focus.ring.shadow} | --gw-treetable-node-toggle-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| galleria.nav.button.focus.ring.shadow | {focus.ring.shadow} | --gw-galleria-nav-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| galleria.thumbnail.nav.button.focus.ring.shadow | {focus.ring.shadow} | --gw-galleria-thumbnail-nav-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| galleria.indicator.button.focus.ring.shadow | {focus.ring.shadow} | --gw-galleria-indicator-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| galleria.close.button.focus.ring.shadow | {focus.ring.shadow} | --gw-galleria-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| popover.shadow | {overlay.popover.shadow} | --gw-popover-shadow | [{"x":"0","y":"4","blur":"6","spread":"-1","color":"{neutral.shadow.10}","type":"dropShadow"},{"x":"0","y":"2","blur":"4","spread":"-2","color":"{neutral.shadow.10}","type":"dropShadow"}] |
| splitbutton.raised.shadow | [
{
"x": "0",
"y": "3",
"blur": "1",
"spread": "-2",
"color": "rgba(0, 0, 0, 0.2)",
"type": "dropShadow"
},
{
"x": "0",
"y": "2",
"blur": "2",
"spread": "0",
"color": "rgba(0, 0, 0, 0.14)",
"type": "dropShadow"
},
{
"x": "0",
"y": "1",
"blur": "5",
"spread": "0",
"color": "rgba(0, 0, 0, 0.12)",
"type": "dropShadow"
}
] |
--gw-splitbutton-raised-shadow | [{"x":"0","y":"3","blur":"1","spread":"-2","color":"rgba(0, 0, 0, 0.2)","type":"dropShadow"},{"x":"0","y":"2","blur":"2","spread":"0","color":"rgba(0, 0, 0, 0.14)","type":"dropShadow"},{"x":"0","y":"1","blur":"5","spread":"0","color":"rgba(0, 0, 0, 0.12)","type":"dropShadow"}] |
| stepper.step.header.focus.ring.shadow | {focus.ring.shadow} | --gw-stepper-step-header-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| stepper.step.number.shadow | [
{
"x": "0",
"y": "0.5",
"blur": "0",
"spread": "0",
"color": "rgba(0, 0, 0, 0.06)",
"type": "dropShadow"
},
{
"x": "0",
"y": "1",
"blur": "1",
"spread": "0",
"color": "rgba(0, 0, 0, 0.12)",
"type": "dropShadow"
}
] |
--gw-stepper-step-number-shadow | [{"x":"0","y":"0.5","blur":"0","spread":"0","color":"rgba(0, 0, 0, 0.06)","type":"dropShadow"},{"x":"0","y":"1","blur":"1","spread":"0","color":"rgba(0, 0, 0, 0.12)","type":"dropShadow"}] |
| inplace.focus.ring.shadow | {focus.ring.shadow} | --gw-inplace-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| imagecompare.handle.focus.ring.shadow | {focus.ring.shadow} | --gw-imagecompare-handle-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "{neutral.shadow.10}",
"type": "dropShadow"
}
|
| button.primary.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-primary-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.secondary.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-secondary-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.info.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-info-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.success.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-success-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.warn.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-warn-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.help.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-help-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.danger.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-danger-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| button.contrast.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-button-contrast-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.info.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(2, 5, 10, 0.04)",
"type": "dropShadow"
} |
--gw-message-info-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(2, 5, 10, 0.04)",
"type": "dropShadow"
}
|
| message.info.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-info-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.success.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(1, 8, 4, 0.04)",
"type": "dropShadow"
} |
--gw-message-success-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(1, 8, 4, 0.04)",
"type": "dropShadow"
}
|
| message.success.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-success-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.warn.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(9, 7, 0, 0.04)",
"type": "dropShadow"
} |
--gw-message-warn-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(9, 7, 0, 0.04)",
"type": "dropShadow"
}
|
| message.warn.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-warn-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.error.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-error-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.error.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(10, 3, 3, 0.04)",
"type": "dropShadow"
} |
--gw-message-error-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(10, 3, 3, 0.04)",
"type": "dropShadow"
}
|
| message.help.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-help-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.help.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(4, 5, 6, 0.04)",
"type": "dropShadow"
} |
--gw-message-help-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(4, 5, 6, 0.04)",
"type": "dropShadow"
}
|
| message.contrast.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(0, 0, 1, 0.04)",
"type": "dropShadow"
} |
--gw-message-contrast-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(0, 0, 1, 0.04)",
"type": "dropShadow"
}
|
| message.contrast.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-contrast-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.secondary.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-message-secondary-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| message.secondary.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(4, 5, 6, 0.04)",
"type": "dropShadow"
} |
--gw-message-secondary-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(4, 5, 6, 0.04)",
"type": "dropShadow"
}
|
| toast.info.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(2, 5, 10, 0.04)",
"type": "dropShadow"
} |
--gw-toast-info-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(2, 5, 10, 0.04)",
"type": "dropShadow"
}
|
| toast.info.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-toast-info-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| toast.success.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(1, 8, 4, 0.04)",
"type": "dropShadow"
} |
--gw-toast-success-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(1, 8, 4, 0.04)",
"type": "dropShadow"
}
|
| toast.success.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-toast-success-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| toast.warn.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(9, 7, 0, 0.04)",
"type": "dropShadow"
} |
--gw-toast-warn-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(9, 7, 0, 0.04)",
"type": "dropShadow"
}
|
| toast.warn.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-toast-warn-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| toast.error.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(10, 3, 3, 0.04)",
"type": "dropShadow"
} |
--gw-toast-error-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(10, 3, 3, 0.04)",
"type": "dropShadow"
}
|
| toast.error.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-toast-error-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| toast.secondary.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(4, 5, 6, 0.04)",
"type": "dropShadow"
} |
--gw-toast-secondary-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(4, 5, 6, 0.04)",
"type": "dropShadow"
}
|
| toast.secondary.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-toast-secondary-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| toast.contrast.shadow | {
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(0, 0, 1, 0.04)",
"type": "dropShadow"
} |
--gw-toast-contrast-shadow |
{
"x": "0",
"y": "4",
"blur": "8",
"spread": "0",
"color": "rgba(0, 0, 1, 0.04)",
"type": "dropShadow"
}
|
| toast.contrast.close.button.focus.ring.shadow | {
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
} |
--gw-toast-contrast-close-button-focus-ring-shadow |
{
"x": "0",
"y": "0",
"blur": "0",
"spread": "0",
"color": "#00000000",
"type": "dropShadow"
}
|
| tabs.nav.button.shadow | {
"x": "0",
"y": "0",
"blur": "10",
"spread": "50",
"color": "rgba(255, 255, 255, 0.6)",
"type": "dropShadow"
} |
--gw-tabs-nav-button-shadow |
{
"x": "0",
"y": "0",
"blur": "10",
"spread": "50",
"color": "rgba(255, 255, 255, 0.6)",
"type": "dropShadow"
}
|
BorderWidth Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| form.field.focus.ring.offset | 0 | --gw-form-field-focus-ring-offset | 0 |
| form.field.focus.ring.width | {focus.ring.width} | --gw-form-field-focus-ring-width | 2px |
| focus.ring.width | 2px | --gw-focus-ring-width | 2px |
| focus.ring.offset | space | --gw-focus-ring-offset | space |
| inputtext.focus.ring.width | {focus.ring.width} | --gw-inputtext-focus-ring-width | 2px |
| inputtext.focus.ring.offset | {focus.ring.offset} | --gw-inputtext-focus-ring-offset | space |
| panel.header.border.width | 0 | --gw-panel-header-border-width | 0 |
| button.focus.ring.width | {focus.ring.width} | --gw-button-focus-ring-width | 2px |
| button.focus.ring.offset | {focus.ring.offset} | --gw-button-focus-ring-offset | space |
| toggleswitch.border.width | 1px | --gw-toggleswitch-border-width | 1px |
| toggleswitch.focus.ring.width | {focus.ring.width} | --gw-toggleswitch-focus-ring-width | 2px |
| toggleswitch.focus.ring.offset | {focus.ring.offset} | --gw-toggleswitch-focus-ring-offset | space |
| radiobutton.focus.ring.width | {focus.ring.width} | --gw-radiobutton-focus-ring-width | 2px |
| radiobutton.focus.ring.offset | {focus.ring.offset} | --gw-radiobutton-focus-ring-offset | space |
| checkbox.focus.ring.width | {focus.ring.width} | --gw-checkbox-focus-ring-width | 2px |
| checkbox.focus.ring.offset | {focus.ring.offset} | --gw-checkbox-focus-ring-offset | space |
| autocomplete.focus.ring.width | {form.field.focus.ring.width} | --gw-autocomplete-focus-ring-width | 2px |
| autocomplete.focus.ring.offset | {form.field.focus.ring.offset} | --gw-autocomplete-focus-ring-offset | 0 |
| autocomplete.dropdown.focus.ring.width | {focus.ring.width} | --gw-autocomplete-dropdown-focus-ring-width | 2px |
| autocomplete.dropdown.focus.ring.offset | {focus.ring.offset} | --gw-autocomplete-dropdown-focus-ring-offset | space |
| datepicker.dropdown.focus.ring.width | {focus.ring.width} | --gw-datepicker-dropdown-focus-ring-width | 2px |
| datepicker.dropdown.focus.ring.offset | {focus.ring.offset} | --gw-datepicker-dropdown-focus-ring-offset | space |
| datepicker.date.focus.ring.width | {focus.ring.width} | --gw-datepicker-date-focus-ring-width | 2px |
| datepicker.date.focus.ring.offset | {focus.ring.offset} | --gw-datepicker-date-focus-ring-offset | space |
| rating.focus.ring.width | {focus.ring.width} | --gw-rating-focus-ring-width | 2px |
| rating.focus.ring.offset | {focus.ring.offset} | --gw-rating-focus-ring-offset | space |
| chip.remove.icon.focus.ring.width | {focus.ring.width} | --gw-chip-remove-icon-focus-ring-width | 2px |
| chip.remove.icon.focus.ring.offset | {focus.ring.offset} | --gw-chip-remove-icon-focus-ring-offset | space |
| message.border.width | 1px | --gw-message-border-width | 1px |
| message.close.button.focus.ring.width | {focus.ring.width} | --gw-message-close-button-focus-ring-width | 2px |
| message.close.button.focus.ring.offset | {focus.ring.offset} | --gw-message-close-button-focus-ring-offset | space |
| message.outlined.border.width | 1px | --gw-message-outlined-border-width | 1px |
| breadcrumb.item.focus.ring.width | {focus.ring.width} | --gw-breadcrumb-item-focus-ring-width | 2px |
| breadcrumb.item.focus.ring.offset | {focus.ring.offset} | --gw-breadcrumb-item-focus-ring-offset | space |
| cascadeselect.focus.ring.width | {form.field.focus.ring.width} | --gw-cascadeselect-focus-ring-width | 2px |
| cascadeselect.focus.ring.offset | {form.field.focus.ring.offset} | --gw-cascadeselect-focus-ring-offset | 0 |
| colorpicker.preview.focus.ring.width | {focus.ring.width} | --gw-colorpicker-preview-focus-ring-width | 2px |
| colorpicker.preview.focus.ring.offset | {focus.ring.offset} | --gw-colorpicker-preview-focus-ring-offset | space |
| select.focus.ring.width | {form.field.focus.ring.width} | --gw-select-focus-ring-width | 2px |
| select.focus.ring.offset | {form.field.focus.ring.offset} | --gw-select-focus-ring-offset | 0 |
| textarea.focus.ring.width | {form.field.focus.ring.width} | --gw-textarea-focus-ring-width | 2px |
| textarea.focus.ring.offset | {form.field.focus.ring.offset} | --gw-textarea-focus-ring-offset | 0 |
| knob.focus.ring.width | {focus.ring.width} | --gw-knob-focus-ring-width | 2px |
| knob.focus.ring.offset | {focus.ring.offset} | --gw-knob-focus-ring-offset | space |
| multiselect.focus.ring.width | {form.field.focus.ring.width} | --gw-multiselect-focus-ring-width | 2px |
| multiselect.focus.ring.offset | {form.field.focus.ring.offset} | --gw-multiselect-focus-ring-offset | 0 |
| slider.handle.focus.ring.width | {focus.ring.width} | --gw-slider-handle-focus-ring-width | 2px |
| slider.handle.focus.ring.offset | {focus.ring.offset} | --gw-slider-handle-focus-ring-offset | space |
| togglebutton.focus.ring.width | {focus.ring.width} | --gw-togglebutton-focus-ring-width | 2px |
| togglebutton.focus.ring.offset | {focus.ring.offset} | --gw-togglebutton-focus-ring-offset | space |
| treeselect.focus.ring.width | {form.field.focus.ring.width} | --gw-treeselect-focus-ring-width | 2px |
| treeselect.focus.ring.offset | {form.field.focus.ring.offset} | --gw-treeselect-focus-ring-offset | 0 |
| dataview.border.width | 0 | --gw-dataview-border-width | 0 |
| dataview.header.border.width | 1 | --gw-dataview-header-border-width | 1 |
| dataview.content.border.width | 0 | --gw-dataview-content-border-width | 0 |
| dataview.footer.border.width | 1 | --gw-dataview-footer-border-width | 1 |
| dataview.paginator.top.border.width | 1 | --gw-dataview-paginator-top-border-width | 1 |
| dataview.paginator.bottom.border.width | 1 | --gw-dataview-paginator-bottom-border-width | 1 |
| accordion.panel.border.width | 1 | --gw-accordion-panel-border-width | 1 |
| accordion.header.border.width | 0 | --gw-accordion-header-border-width | 0 |
| accordion.header.focus.ring.width | {focus.ring.width} | --gw-accordion-header-focus-ring-width | 2px |
| accordion.header.focus.ring.offset | {focus.ring.offset} | --gw-accordion-header-focus-ring-offset | space |
| accordion.header.first.border.width | 0 | --gw-accordion-header-first-border-width | 0 |
| accordion.content.border.width | 0 | --gw-accordion-content-border-width | 0 |
| fieldset.legend.border.width | 1 | --gw-fieldset-legend-border-width | 1 |
| fieldset.legend.focus.ring.width | {focus.ring.width} | --gw-fieldset-legend-focus-ring-width | 2px |
| fieldset.legend.focus.ring.offset | {focus.ring.offset} | --gw-fieldset-legend-focus-ring-offset | space |
| splitter.handle.focus.ring.width | {focus.ring.width} | --gw-splitter-handle-focus-ring-width | 2px |
| splitter.handle.focus.ring.offset | {focus.ring.offset} | --gw-splitter-handle-focus-ring-offset | space |
| scrollpanel.bar.focus.ring.width | {focus.ring.width} | --gw-scrollpanel-bar-focus-ring-width | 2px |
| scrollpanel.bar.focus.ring.offset | {focus.ring.offset} | --gw-scrollpanel-bar-focus-ring-offset | space |
| tabs.tablist.border.width | 1 | --gw-tabs-tablist-border-width | 1 |
| tabs.tab.border.width | 1 | --gw-tabs-tab-border-width | 1 |
| tabs.tab.focus.ring.width | {focus.ring.width} | --gw-tabs-tab-focus-ring-width | 2px |
| tabs.tab.focus.ring.offset | -1 | --gw-tabs-tab-focus-ring-offset | -1 |
| tabs.tabpanel.focus.ring.width | {focus.ring.width} | --gw-tabs-tabpanel-focus-ring-width | 2px |
| tabs.tabpanel.focus.ring.offset | {focus.ring.offset} | --gw-tabs-tabpanel-focus-ring-offset | space |
| tabs.nav.button.focus.ring.width | {focus.ring.width} | --gw-tabs-nav-button-focus-ring-width | 2px |
| tabs.nav.button.focus.ring.offset | -1 | --gw-tabs-nav-button-focus-ring-offset | -1 |
| dock.item.focus.ring.width | {focus.ring.width} | --gw-dock-item-focus-ring-width | 2px |
| dock.item.focus.ring.offset | {focus.ring.offset} | --gw-dock-item-focus-ring-offset | space |
| megamenu.mobile.button.focus.ring.width | {focus.ring.width} | --gw-megamenu-mobile-button-focus-ring-width | 2px |
| megamenu.mobile.button.focus.ring.offset | {focus.ring.offset} | --gw-megamenu-mobile-button-focus-ring-offset | space |
| menubar.mobile.button.focus.ring.width | {focus.ring.width} | --gw-menubar-mobile-button-focus-ring-width | 2px |
| menubar.mobile.button.focus.ring.offset | {focus.ring.offset} | --gw-menubar-mobile-button-focus-ring-offset | space |
| panelmenu.panel.border.width | 1px | --gw-panelmenu-panel-border-width | 1px |
| panelmenu.panel.first.border.width | 1px | --gw-panelmenu-panel-first-border-width | 1px |
| panelmenu.panel.last.border.width | 1px | --gw-panelmenu-panel-last-border-width | 1px |
| organizationchart.node.toggle.button.focus.ring.width | {focus.ring.width} | --gw-organizationchart-node-toggle-button-focus-ring-width | 2px |
| organizationchart.node.toggle.button.focus.ring.offset | {focus.ring.offset} | --gw-organizationchart-node-toggle-button-focus-ring-offset | space |
| paginator.nav.button.focus.ring.width | {focus.ring.width} | --gw-paginator-nav-button-focus-ring-width | 2px |
| paginator.nav.button.focus.ring.offset | {focus.ring.offset} | --gw-paginator-nav-button-focus-ring-offset | space |
| datatable.header.border.width | 1px | --gw-datatable-header-border-width | 1px |
| datatable.header.cell.focus.ring.width | {focus.ring.width} | --gw-datatable-header-cell-focus-ring-width | 2px |
| datatable.header.cell.focus.ring.offset | -1px | --gw-datatable-header-cell-focus-ring-offset | -1px |
| datatable.row.focus.ring.width | {focus.ring.width} | --gw-datatable-row-focus-ring-width | 2px |
| datatable.row.focus.ring.offset | -1px | --gw-datatable-row-focus-ring-offset | -1px |
| datatable.row.toggle.button.focus.ring.width | {focus.ring.width} | --gw-datatable-row-toggle-button-focus-ring-width | 2px |
| datatable.row.toggle.button.focus.ring.offset | {focus.ring.offset} | --gw-datatable-row-toggle-button-focus-ring-offset | space |
| datatable.footer.border.width | 1px | --gw-datatable-footer-border-width | 1px |
| datatable.paginator.top.border.width | 1 | --gw-datatable-paginator-top-border-width | 1 |
| datatable.paginator.bottom.border.width | 1 | --gw-datatable-paginator-bottom-border-width | 1 |
| timeline.event.marker.border.width | 2px | --gw-timeline-event-marker-border-width | 2px |
| tree.node.focus.ring.width | {focus.ring.width} | --gw-tree-node-focus-ring-width | 2px |
| tree.node.focus.ring.offset | -1px | --gw-tree-node-focus-ring-offset | -1px |
| tree.node.toggle.button.focus.ring.width | {focus.ring.width} | --gw-tree-node-toggle-button-focus-ring-width | 2px |
| tree.node.toggle.button.focus.ring.offset | {focus.ring.offset} | --gw-tree-node-toggle-button-focus-ring-offset | space |
| carousel.indicator.focus.ring.width | {focus.ring.width} | --gw-carousel-indicator-focus-ring-width | 2px |
| carousel.indicator.focus.ring.offset | {focus.ring.offset} | --gw-carousel-indicator-focus-ring-offset | space |
| image.toolbar.border.width | 1px | --gw-image-toolbar-border-width | 1px |
| image.action.focus.ring.width | {focus.ring.width} | --gw-image-action-focus-ring-width | 2px |
| image.action.focus.ring.offset | {focus.ring.offset} | --gw-image-action-focus-ring-offset | space |
| treetable.header.border.width | 1px | --gw-treetable-header-border-width | 1px |
| treetable.header.cell.focus.ring.width | {focus.ring.width} | --gw-treetable-header-cell-focus-ring-width | 2px |
| treetable.header.cell.focus.ring.offset | -1px | --gw-treetable-header-cell-focus-ring-offset | -1px |
| treetable.row.focus.ring.width | {focus.ring.width} | --gw-treetable-row-focus-ring-width | 2px |
| treetable.row.focus.ring.offset | -1px | --gw-treetable-row-focus-ring-offset | -1px |
| treetable.footer.border.width | 1px | --gw-treetable-footer-border-width | 1px |
| treetable.node.toggle.button.focus.ring.width | {focus.ring.width} | --gw-treetable-node-toggle-button-focus-ring-width | 2px |
| treetable.node.toggle.button.focus.ring.offset | {focus.ring.offset} | --gw-treetable-node-toggle-button-focus-ring-offset | space |
| treetable.paginator.top.border.width | 1px | --gw-treetable-paginator-top-border-width | 1px |
| treetable.paginator.bottom.border.width | 1px | --gw-treetable-paginator-bottom-border-width | 1px |
| toast.border.width | 1px | --gw-toast-border-width | 1px |
| toast.close.button.focus.ring.width | {focus.ring.width} | --gw-toast-close-button-focus-ring-width | 2px |
| toast.close.button.focus.ring.offset | {focus.ring.offset} | --gw-toast-close-button-focus-ring-offset | space |
| galleria.border.width | 1px | --gw-galleria-border-width | 1px |
| galleria.nav.button.focus.ring.width | {focus.ring.width} | --gw-galleria-nav-button-focus-ring-width | 2px |
| galleria.nav.button.focus.ring.offset | {focus.ring.offset} | --gw-galleria-nav-button-focus-ring-offset | space |
| galleria.thumbnail.nav.button.focus.ring.width | {focus.ring.width} | --gw-galleria-thumbnail-nav-button-focus-ring-width | 2px |
| galleria.thumbnail.nav.button.focus.ring.offset | {focus.ring.offset} | --gw-galleria-thumbnail-nav-button-focus-ring-offset | space |
| galleria.indicator.button.focus.ring.width | {focus.ring.width} | --gw-galleria-indicator-button-focus-ring-width | 2px |
| galleria.indicator.button.focus.ring.offset | {focus.ring.offset} | --gw-galleria-indicator-button-focus-ring-offset | space |
| galleria.close.button.focus.ring.width | {focus.ring.width} | --gw-galleria-close-button-focus-ring-width | 2px |
| galleria.close.button.focus.ring.offset | {focus.ring.offset} | --gw-galleria-close-button-focus-ring-offset | space |
| fileupload.header.border.width | 0 | --gw-fileupload-header-border-width | 0 |
| stepper.step.header.focus.ring.width | {focus.ring.width} | --gw-stepper-step-header-focus-ring-width | 2px |
| stepper.step.header.focus.ring.offset | {focus.ring.offset} | --gw-stepper-step-header-focus-ring-offset | space |
| inplace.focus.ring.width | {focus.ring.width} | --gw-inplace-focus-ring-width | 2px |
| inplace.focus.ring.offset | {focus.ring.offset} | --gw-inplace-focus-ring-offset | space |
| imagecompare.handle.border.width | 0 | --gw-imagecompare-handle-border-width | 0 |
| imagecompare.handle.focus.ring.width | {focus.ring.width} | --gw-imagecompare-handle-focus-ring-width | 2px |
| imagecompare.handle.focus.ring.offset | {focus.ring.offset} | --gw-imagecompare-handle-focus-ring-offset | space |
| overlaybadge.outline.width | 1px | --gw-overlaybadge-outline-width | 1px |
Border Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| focus.ring.stroke | {
"color": "{focus.ring.color}",
"width": "{focus.ring.offset} + {focus.ring.width}",
"style": "{focus.ring.style}"
} |
--gw-focus-ring-stroke |
{
"color": "{focus.ring.color}",
"width": "{focus.ring.offset} + {focus.ring.width}",
"style": "{focus.ring.style}"
}
|
| border.default | {
"color": "{border.color.default}",
"width": "1px",
"style": "solid"
} |
--gw-border-default |
{
"color": "{border.color.default}",
"width": "1px",
"style": "solid"
}
|
| sidenav.menuitem.selected.border | {
"color": "{foreground.on-surface.primary}",
"width": "4px",
"style": "solid"
} |
--gw-sidenav-menuitem-selected-border |
{
"color": "{foreground.on-surface.primary}",
"width": "4px",
"style": "solid"
}
|
| sidenav.submenuitem.selected.border | {
"color": "{foreground.on-surface.primary}",
"width": "4px",
"style": "solid"
} |
--gw-sidenav-submenuitem-selected-border |
{
"color": "{foreground.on-surface.primary}",
"width": "4px",
"style": "solid"
}
|
| inputtext.figma.stroke | {
"color": "{inputtext.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputtext-figma-stroke |
{
"color": "{inputtext.border.color}",
"width": "1",
"style": "solid"
}
|
| inputtext.figma.hover.stroke | {
"color": "{inputtext.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputtext-figma-hover-stroke |
{
"color": "{inputtext.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| inputtext.figma.focus.stroke | {
"color": "{inputtext.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputtext-figma-focus-stroke |
{
"color": "{inputtext.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| inputtext.figma.focus.ring.stroke | {
"color": "{inputtext.focus.ring.color}",
"width": "{inputtext.focus.ring.width} + {inputtext.focus.ring.offset}",
"style": "{inputtext.focus.ring.style}"
} |
--gw-inputtext-figma-focus-ring-stroke |
{
"color": "{inputtext.focus.ring.color}",
"width": "{inputtext.focus.ring.width} + {inputtext.focus.ring.offset}",
"style": "{inputtext.focus.ring.style}"
}
|
| inputtext.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{inputtext.focus.ring.offset}",
"style": "solid"
} |
--gw-inputtext-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{inputtext.focus.ring.offset}",
"style": "solid"
}
|
| inputtext.figma.invalid.stroke | {
"color": "{inputtext.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputtext-figma-invalid-stroke |
{
"color": "{inputtext.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| panel.figma.header.stroke | {
"color": "{panel.header.border.color}",
"width": "{panel.header.border.width}",
"style": "none"
} |
--gw-panel-figma-header-stroke |
{
"color": "{panel.header.border.color}",
"width": "{panel.header.border.width}",
"style": "none"
}
|
| panel.figma.stroke | {
"color": "{panel.border.color}",
"width": "1",
"style": "solid"
} |
--gw-panel-figma-stroke |
{
"color": "{panel.border.color}",
"width": "1",
"style": "solid"
}
|
| toggleswitch.figma.stroke | {
"color": "{toggleswitch.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
} |
--gw-toggleswitch-figma-stroke |
{
"color": "{toggleswitch.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
}
|
| toggleswitch.figma.hover.stroke | {
"color": "{toggleswitch.offset.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
} |
--gw-toggleswitch-figma-hover-stroke |
{
"color": "{toggleswitch.offset.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
}
|
| toggleswitch.figma.checked.stroke | {
"color": "{toggleswitch.checked.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
} |
--gw-toggleswitch-figma-checked-stroke |
{
"color": "{toggleswitch.checked.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
}
|
| toggleswitch.figma.checked.hover.stroke | {
"color": "{toggleswitch.checked.hover.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
} |
--gw-toggleswitch-figma-checked-hover-stroke |
{
"color": "{toggleswitch.checked.hover.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
}
|
| toggleswitch.figma.invalid.stroke | {
"color": "{toggleswitch.invalid.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
} |
--gw-toggleswitch-figma-invalid-stroke |
{
"color": "{toggleswitch.invalid.border.color}",
"width": "{toggleswitch.border.width}",
"style": "solid"
}
|
| toggleswitch.figma.focus.ring.stroke | {
"color": "{toggleswitch.focus.ring.color}",
"width": "{toggleswitch.focus.ring.width} + {toggleswitch.focus.ring.offset}",
"style": "{toggleswitch.focus.ring.style}"
} |
--gw-toggleswitch-figma-focus-ring-stroke |
{
"color": "{toggleswitch.focus.ring.color}",
"width": "{toggleswitch.focus.ring.width} + {toggleswitch.focus.ring.offset}",
"style": "{toggleswitch.focus.ring.style}"
}
|
| toggleswitch.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{toggleswitch.focus.ring.offset}",
"style": "solid"
} |
--gw-toggleswitch-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{toggleswitch.focus.ring.offset}",
"style": "solid"
}
|
| radiobutton.figma.stroke | {
"color": "{radiobutton.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-stroke |
{
"color": "{radiobutton.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.hover.stroke | {
"color": "{radiobutton.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-hover-stroke |
{
"color": "{radiobutton.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.focus.stroke | {
"color": "{radiobutton.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-focus-stroke |
{
"color": "{radiobutton.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.focus.ring.stroke | {
"color": "{radiobutton.focus.ring.color}",
"width": "{radiobutton.focus.ring.width} + {radiobutton.focus.ring.offset}",
"style": "{radiobutton.focus.ring.style}"
} |
--gw-radiobutton-figma-focus-ring-stroke |
{
"color": "{radiobutton.focus.ring.color}",
"width": "{radiobutton.focus.ring.width} + {radiobutton.focus.ring.offset}",
"style": "{radiobutton.focus.ring.style}"
}
|
| radiobutton.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{radiobutton.focus.ring.offset}",
"style": "solid"
} |
--gw-radiobutton-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{radiobutton.focus.ring.offset}",
"style": "solid"
}
|
| radiobutton.figma.checked.stroke | {
"color": "{radiobutton.checked.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-checked-stroke |
{
"color": "{radiobutton.checked.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.checked.hover.stroke | {
"color": "{radiobutton.checked.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-checked-hover-stroke |
{
"color": "{radiobutton.checked.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.checked.focus.stroke | {
"color": "{radiobutton.checked.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-checked-focus-stroke |
{
"color": "{radiobutton.checked.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.checked.disabled.stroke | {
"color": "{radiobutton.checked.disabled.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-checked-disabled-stroke |
{
"color": "{radiobutton.checked.disabled.border.color}",
"width": "1",
"style": "solid"
}
|
| radiobutton.figma.invalid.stroke | {
"color": "{radiobutton.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-radiobutton-figma-invalid-stroke |
{
"color": "{radiobutton.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.stroke | {
"color": "{checkbox.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-stroke |
{
"color": "{checkbox.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.hover.stroke | {
"color": "{checkbox.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-hover-stroke |
{
"color": "{checkbox.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.focus.stroke | {
"color": "{checkbox.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-focus-stroke |
{
"color": "{checkbox.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.focus.ring.stroke | {
"color": "{checkbox.focus.ring.color}",
"width": "{checkbox.focus.ring.width} + {checkbox.focus.ring.offset}",
"style": "{checkbox.focus.ring.style}"
} |
--gw-checkbox-figma-focus-ring-stroke |
{
"color": "{checkbox.focus.ring.color}",
"width": "{checkbox.focus.ring.width} + {checkbox.focus.ring.offset}",
"style": "{checkbox.focus.ring.style}"
}
|
| checkbox.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{checkbox.focus.ring.offset}",
"style": "solid"
} |
--gw-checkbox-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{checkbox.focus.ring.offset}",
"style": "solid"
}
|
| checkbox.figma.checked.stroke | {
"color": "{checkbox.checked.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-checked-stroke |
{
"color": "{checkbox.checked.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.checked.hover.stroke | {
"color": "{checkbox.checked.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-checked-hover-stroke |
{
"color": "{checkbox.checked.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.checked.focus.stroke | {
"color": "{checkbox.checked.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-checked-focus-stroke |
{
"color": "{checkbox.checked.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.checked.disabled.stroke | {
"color": "{checkbox.checked.disabled.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-checked-disabled-stroke |
{
"color": "{checkbox.checked.disabled.border.color}",
"width": "1",
"style": "solid"
}
|
| checkbox.figma.invalid.stroke | {
"color": "{checkbox.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-checkbox-figma-invalid-stroke |
{
"color": "{checkbox.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.overlay.stroke | {
"color": "{autocomplete.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-overlay-stroke |
{
"color": "{autocomplete.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.dropdown.stroke | {
"color": "{autocomplete.dropdown.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-dropdown-stroke |
{
"color": "{autocomplete.dropdown.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.dropdown.hover.stroke | {
"color": "{autocomplete.dropdown.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-dropdown-hover-stroke |
{
"color": "{autocomplete.dropdown.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.dropdown.active.stroke | {
"color": "{autocomplete.dropdown.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-dropdown-active-stroke |
{
"color": "{autocomplete.dropdown.active.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.stroke | {
"color": "{autocomplete.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-stroke |
{
"color": "{autocomplete.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.hover.stroke | {
"color": "{autocomplete.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-hover-stroke |
{
"color": "{autocomplete.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.focus.stroke | {
"color": "{autocomplete.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-focus-stroke |
{
"color": "{autocomplete.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| autocomplete.figma.invalid.stroke | {
"color": "{autocomplete.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-autocomplete-figma-invalid-stroke |
{
"color": "{autocomplete.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.dropdown.stroke | {
"color": "{datepicker.dropdown.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-dropdown-stroke |
{
"color": "{datepicker.dropdown.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.dropdown.hover.stroke | {
"color": "{datepicker.dropdown.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-dropdown-hover-stroke |
{
"color": "{datepicker.dropdown.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.dropdown.active.stroke | {
"color": "{datepicker.dropdown.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-dropdown-active-stroke |
{
"color": "{datepicker.dropdown.active.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.buttonbar.stroke | {
"color": "{datepicker.buttonbar.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-buttonbar-stroke |
{
"color": "{datepicker.buttonbar.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.panel.stroke | {
"color": "{datepicker.panel.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-panel-stroke |
{
"color": "{datepicker.panel.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.header.stroke | {
"color": "{datepicker.header.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-header-stroke |
{
"color": "{datepicker.header.border.color}",
"width": "1",
"style": "solid"
}
|
| datepicker.figma.time.picker.stroke | {
"color": "{datepicker.time.picker.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datepicker-figma-time-picker-stroke |
{
"color": "{datepicker.time.picker.border.color}",
"width": "1",
"style": "solid"
}
|
| dialog.figma.stroke | {
"color": "{dialog.border.color}",
"width": "1",
"style": "solid"
} |
--gw-dialog-figma-stroke |
{
"color": "{dialog.border.color}",
"width": "1",
"style": "solid"
}
|
| drawer.figma.stroke | {
"color": "{drawer.border.color}",
"width": "1",
"style": "solid"
} |
--gw-drawer-figma-stroke |
{
"color": "{drawer.border.color}",
"width": "1",
"style": "solid"
}
|
| rating.figma.focus.ring.stroke | {
"color": "{rating.focus.ring.color}",
"width": "{rating.focus.ring.width} + {rating.focus.ring.offset}",
"style": "{rating.focus.ring.style}"
} |
--gw-rating-figma-focus-ring-stroke |
{
"color": "{rating.focus.ring.color}",
"width": "{rating.focus.ring.width} + {rating.focus.ring.offset}",
"style": "{rating.focus.ring.style}"
}
|
| rating.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{rating.focus.ring.offset}",
"style": "solid"
} |
--gw-rating-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{rating.focus.ring.offset}",
"style": "solid"
}
|
| avatar.group.stroke | {
"color": "{avatar.group.border.color}",
"width": "2",
"style": "solid"
} |
--gw-avatar-group-stroke |
{
"color": "{avatar.group.border.color}",
"width": "2",
"style": "solid"
}
|
| chip.figma.remove.icon.focus.ring.stroke | {
"color": "{chip.remove.icon.focus.ring.color}",
"width": "{chip.remove.icon.focus.ring.width} + {chip.remove.icon.focus.ring.offset}",
"style": "{chip.remove.icon.focus.ring.style}"
} |
--gw-chip-figma-remove-icon-focus-ring-stroke |
{
"color": "{chip.remove.icon.focus.ring.color}",
"width": "{chip.remove.icon.focus.ring.width} + {chip.remove.icon.focus.ring.offset}",
"style": "{chip.remove.icon.focus.ring.style}"
}
|
| chip.figma.remove.icon.focus.ring.offset.stroke | {
"color": "{chip.background}",
"width": "{chip.remove.icon.focus.ring.offset}",
"style": "solid"
} |
--gw-chip-figma-remove-icon-focus-ring-offset-stroke |
{
"color": "{chip.background}",
"width": "{chip.remove.icon.focus.ring.offset}",
"style": "solid"
}
|
| breadcrumb.figma.item.focus.ring.stroke | {
"color": "{breadcrumb.item.focus.ring.color}",
"width": "{breadcrumb.item.focus.ring.width} + {breadcrumb.item.focus.ring.offset}",
"style": "{breadcrumb.item.focus.ring.style}"
} |
--gw-breadcrumb-figma-item-focus-ring-stroke |
{
"color": "{breadcrumb.item.focus.ring.color}",
"width": "{breadcrumb.item.focus.ring.width} + {breadcrumb.item.focus.ring.offset}",
"style": "{breadcrumb.item.focus.ring.style}"
}
|
| breadcrumb.figma.item.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{breadcrumb.item.focus.ring.offset}",
"style": "solid"
} |
--gw-breadcrumb-figma-item-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{breadcrumb.item.focus.ring.offset}",
"style": "solid"
}
|
| cascadeselect.figma.focus.ring.stroke | {
"color": "{cascadeselect.focus.ring.color}",
"width": "{cascadeselect.focus.ring.width} + {cascadeselect.focus.ring.offset}",
"style": "{cascadeselect.focus.ring.style}"
} |
--gw-cascadeselect-figma-focus-ring-stroke |
{
"color": "{cascadeselect.focus.ring.color}",
"width": "{cascadeselect.focus.ring.width} + {cascadeselect.focus.ring.offset}",
"style": "{cascadeselect.focus.ring.style}"
}
|
| cascadeselect.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{cascadeselect.focus.ring.offset}",
"style": "solid"
} |
--gw-cascadeselect-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{cascadeselect.focus.ring.offset}",
"style": "solid"
}
|
| cascadeselect.figma.focus.stroke | {
"color": "{cascadeselect.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-cascadeselect-figma-focus-stroke |
{
"color": "{cascadeselect.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| cascadeselect.figma.stroke | {
"color": "{cascadeselect.border.color}",
"width": "1",
"style": "solid"
} |
--gw-cascadeselect-figma-stroke |
{
"color": "{cascadeselect.border.color}",
"width": "1",
"style": "solid"
}
|
| cascadeselect.figma.hover.stroke | {
"color": "{cascadeselect.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-cascadeselect-figma-hover-stroke |
{
"color": "{cascadeselect.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| cascadeselect.figma.invalid.stroke | {
"color": "{cascadeselect.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-cascadeselect-figma-invalid-stroke |
{
"color": "{cascadeselect.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| cascadeselect.figma.overlay.stroke | {
"color": "{cascadeselect.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-cascadeselect-figma-overlay-stroke |
{
"color": "{cascadeselect.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| colorpicker.figma.preview.focus.ring.stroke | {
"color": "{colorpicker.preview.focus.ring.color}",
"width": "{colorpicker.preview.focus.ring.width} + {colorpicker.preview.focus.ring.offset}",
"style": "{colorpicker.preview.focus.ring.style}"
} |
--gw-colorpicker-figma-preview-focus-ring-stroke |
{
"color": "{colorpicker.preview.focus.ring.color}",
"width": "{colorpicker.preview.focus.ring.width} + {colorpicker.preview.focus.ring.offset}",
"style": "{colorpicker.preview.focus.ring.style}"
}
|
| colorpicker.figma.preview.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{colorpicker.preview.focus.ring.offset}",
"style": "solid"
} |
--gw-colorpicker-figma-preview-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{colorpicker.preview.focus.ring.offset}",
"style": "solid"
}
|
| select.figma.focus.ring.stroke | {
"color": "{select.focus.ring.color}",
"width": "{select.focus.ring.width} + {cascadeselect.focus.ring.offset}",
"style": "{select.focus.ring.style}"
} |
--gw-select-figma-focus-ring-stroke |
{
"color": "{select.focus.ring.color}",
"width": "{select.focus.ring.width} + {cascadeselect.focus.ring.offset}",
"style": "{select.focus.ring.style}"
}
|
| select.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{select.focus.ring.offset}",
"style": "solid"
} |
--gw-select-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{select.focus.ring.offset}",
"style": "solid"
}
|
| select.figma.focus.stroke | {
"color": "{select.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-select-figma-focus-stroke |
{
"color": "{select.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| select.figma.stroke | {
"color": "{select.border.color}",
"width": "1",
"style": "solid"
} |
--gw-select-figma-stroke |
{
"color": "{select.border.color}",
"width": "1",
"style": "solid"
}
|
| select.figma.hover.stroke | {
"color": "{select.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-select-figma-hover-stroke |
{
"color": "{select.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| select.figma.invalid.stroke | {
"color": "{select.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-select-figma-invalid-stroke |
{
"color": "{select.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| select.figma.overlay.stroke | {
"color": "{select.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-select-figma-overlay-stroke |
{
"color": "{select.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| editor.figma.overlay.stroke | {
"color": "{editor.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-editor-figma-overlay-stroke |
{
"color": "{editor.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| editor.figma.toolbar.stroke | {
"color": "{editor.toolbar.border.color}",
"width": "1",
"style": "solid"
} |
--gw-editor-figma-toolbar-stroke |
{
"color": "{editor.toolbar.border.color}",
"width": "1",
"style": "solid"
}
|
| editor.figma.content.stroke | {
"color": "{editor.content.border.color}",
"width": "1",
"style": "solid"
} |
--gw-editor-figma-content-stroke |
{
"color": "{editor.content.border.color}",
"width": "1",
"style": "solid"
}
|
| inputgroup.figma.addon.stroke | {
"color": "{inputgroup.addon.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputgroup-figma-addon-stroke |
{
"color": "{inputgroup.addon.border.color}",
"width": "1",
"style": "solid"
}
|
| textarea.figma.stroke | {
"color": "{textarea.border.color}",
"width": "1",
"style": "solid"
} |
--gw-textarea-figma-stroke |
{
"color": "{textarea.border.color}",
"width": "1",
"style": "solid"
}
|
| textarea.figma.hover.stroke | {
"color": "{textarea.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-textarea-figma-hover-stroke |
{
"color": "{textarea.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| textarea.figma.focus.stroke | {
"color": "{textarea.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-textarea-figma-focus-stroke |
{
"color": "{textarea.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| textarea.figma.invalid.stroke | {
"color": "{textarea.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-textarea-figma-invalid-stroke |
{
"color": "{textarea.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| knob.figma.focus.ring.stroke | {
"color": "{knob.focus.ring.color}",
"width": "{knob.focus.ring.width} + {knob.focus.ring.offset}",
"style": "{knob.focus.ring.style}"
} |
--gw-knob-figma-focus-ring-stroke |
{
"color": "{knob.focus.ring.color}",
"width": "{knob.focus.ring.width} + {knob.focus.ring.offset}",
"style": "{knob.focus.ring.style}"
}
|
| knob.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{knob.focus.ring.offset}",
"style": "solid"
} |
--gw-knob-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{knob.focus.ring.offset}",
"style": "solid"
}
|
| multiselect.figma.stroke | {
"color": "{multiselect.border.color}",
"width": "1",
"style": "solid"
} |
--gw-multiselect-figma-stroke |
{
"color": "{multiselect.border.color}",
"width": "1",
"style": "solid"
}
|
| multiselect.figma.hover.stroke | {
"color": "{multiselect.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-multiselect-figma-hover-stroke |
{
"color": "{multiselect.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| multiselect.figma.focus.stroke | {
"color": "{multiselect.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-multiselect-figma-focus-stroke |
{
"color": "{multiselect.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| multiselect.figma.invalid.stroke | {
"color": "{multiselect.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-multiselect-figma-invalid-stroke |
{
"color": "{multiselect.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| multiselect.figma.overlay.stroke | {
"color": "{multiselect.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-multiselect-figma-overlay-stroke |
{
"color": "{multiselect.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| password.figma.overlay.stroke | {
"color": "{password.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-password-figma-overlay-stroke |
{
"color": "{password.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| slider.figma.handle.focus.ring.stroke | {
"color": "{slider.handle.focus.ring.color}",
"width": "{slider.handle.focus.ring.width} + {slider.handle.focus.ring.offset}",
"style": "{slider.handle.focus.ring.style}"
} |
--gw-slider-figma-handle-focus-ring-stroke |
{
"color": "{slider.handle.focus.ring.color}",
"width": "{slider.handle.focus.ring.width} + {slider.handle.focus.ring.offset}",
"style": "{slider.handle.focus.ring.style}"
}
|
| slider.figma.handle.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{slider.handle.focus.ring.offset}",
"style": "solid"
} |
--gw-slider-figma-handle-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{slider.handle.focus.ring.offset}",
"style": "solid"
}
|
| togglebutton.figma.focus.ring.stroke | {
"color": "{togglebutton.focus.ring.color}",
"width": "{togglebutton.focus.ring.width} + {togglebutton.focus.ring.offset}",
"style": "{togglebutton.focus.ring.style}"
} |
--gw-togglebutton-figma-focus-ring-stroke |
{
"color": "{togglebutton.focus.ring.color}",
"width": "{togglebutton.focus.ring.width} + {togglebutton.focus.ring.offset}",
"style": "{togglebutton.focus.ring.style}"
}
|
| togglebutton.figma.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{togglebutton.focus.ring.offset}",
"style": "solid"
} |
--gw-togglebutton-figma-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{togglebutton.focus.ring.offset}",
"style": "solid"
}
|
| togglebutton.figma.disabled.stroke | {
"color": "{togglebutton.disabled.border.color}",
"width": "1",
"style": "solid"
} |
--gw-togglebutton-figma-disabled-stroke |
{
"color": "{togglebutton.disabled.border.color}",
"width": "1",
"style": "solid"
}
|
| togglebutton.figma.invalid.stroke | {
"color": "{togglebutton.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-togglebutton-figma-invalid-stroke |
{
"color": "{togglebutton.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| treeselect.figma.stroke | {
"color": "{treeselect.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treeselect-figma-stroke |
{
"color": "{treeselect.border.color}",
"width": "1",
"style": "solid"
}
|
| treeselect.figma.hover.stroke | {
"color": "{treeselect.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treeselect-figma-hover-stroke |
{
"color": "{treeselect.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| treeselect.figma.focus.stroke | {
"color": "{treeselect.focus.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treeselect-figma-focus-stroke |
{
"color": "{treeselect.focus.border.color}",
"width": "1",
"style": "solid"
}
|
| treeselect.figma.invalid.stroke | {
"color": "{treeselect.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treeselect-figma-invalid-stroke |
{
"color": "{treeselect.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| treeselect.figma.overlay.stroke | {
"color": "{treeselect.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treeselect-figma-overlay-stroke |
{
"color": "{treeselect.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| dataview.figma.stroke | {
"color": "{dataview.border.color}",
"width": "{dataview.border.width}",
"style": "solid"
} |
--gw-dataview-figma-stroke |
{
"color": "{dataview.border.color}",
"width": "{dataview.border.width}",
"style": "solid"
}
|
| dataview.figma.header.stroke | {
"color": "{dataview.header.border.color}",
"width": "{dataview.header.border.width}",
"style": "solid"
} |
--gw-dataview-figma-header-stroke |
{
"color": "{dataview.header.border.color}",
"width": "{dataview.header.border.width}",
"style": "solid"
}
|
| dataview.figma.content.stroke | {
"color": "{dataview.content.border.color}",
"width": "{dataview.content.border.width}",
"style": "solid"
} |
--gw-dataview-figma-content-stroke |
{
"color": "{dataview.content.border.color}",
"width": "{dataview.content.border.width}",
"style": "solid"
}
|
| accordion.figma.panel.stroke | {
"color": "{accordion.panel.border.color}",
"width": "{accordion.panel.border.width}",
"style": "solid"
} |
--gw-accordion-figma-panel-stroke |
{
"color": "{accordion.panel.border.color}",
"width": "{accordion.panel.border.width}",
"style": "solid"
}
|
| accordion.figma.header.stroke | {
"color": "{accordion.header.border.color}",
"width": "{accordion.header.border.width}",
"style": "solid"
} |
--gw-accordion-figma-header-stroke |
{
"color": "{accordion.header.border.color}",
"width": "{accordion.header.border.width}",
"style": "solid"
}
|
| accordion.figma.header.focus.ring.stroke | {
"color": "{accordion.header.focus.ring.color}",
"width": "{accordion.header.focus.ring.width} + {accordion.header.focus.ring.offset}",
"style": "{accordion.header.focus.ring.style}"
} |
--gw-accordion-figma-header-focus-ring-stroke |
{
"color": "{accordion.header.focus.ring.color}",
"width": "{accordion.header.focus.ring.width} + {accordion.header.focus.ring.offset}",
"style": "{accordion.header.focus.ring.style}"
}
|
| accordion.figma.header.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{accordion.header.focus.ring.offset}",
"style": "solid"
} |
--gw-accordion-figma-header-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{accordion.header.focus.ring.offset}",
"style": "solid"
}
|
| accordion.figma.content.stroke | {
"color": "{accordion.content.border.color}",
"width": "{accordion.content.border.width}",
"style": "solid"
} |
--gw-accordion-figma-content-stroke |
{
"color": "{accordion.content.border.color}",
"width": "{accordion.content.border.width}",
"style": "solid"
}
|
| divider.figma.stroke | {
"color": "{divider.border.color}",
"width": "1",
"style": "dashed"
} |
--gw-divider-figma-stroke |
{
"color": "{divider.border.color}",
"width": "1",
"style": "dashed"
}
|
| fieldset.figma.stroke | {
"color": "{fieldset.border.color}",
"width": "1",
"style": "solid"
} |
--gw-fieldset-figma-stroke |
{
"color": "{fieldset.border.color}",
"width": "1",
"style": "solid"
}
|
| fieldset.figma.legend.stroke | {
"color": "{fieldset.legend.border.color}",
"width": "1",
"style": "solid"
} |
--gw-fieldset-figma-legend-stroke |
{
"color": "{fieldset.legend.border.color}",
"width": "1",
"style": "solid"
}
|
| splitter.figma.stroke | {
"color": "{splitter.border.color}",
"width": "1",
"style": "solid"
} |
--gw-splitter-figma-stroke |
{
"color": "{splitter.border.color}",
"width": "1",
"style": "solid"
}
|
| splitter.figma.handle.focus.ring.stroke | {
"color": "{splitter.handle.focus.ring.color}",
"width": "{splitter.handle.focus.ring.width} + {splitter.handle.focus.ring.offset}",
"style": "{splitter.handle.focus.ring.style}"
} |
--gw-splitter-figma-handle-focus-ring-stroke |
{
"color": "{splitter.handle.focus.ring.color}",
"width": "{splitter.handle.focus.ring.width} + {splitter.handle.focus.ring.offset}",
"style": "{splitter.handle.focus.ring.style}"
}
|
| splitter.figma.handle.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{splitter.handle.focus.ring.offset}",
"style": "solid"
} |
--gw-splitter-figma-handle-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{splitter.handle.focus.ring.offset}",
"style": "solid"
}
|
| scrollpanel.figma.bar.focus.ring.stroke | {
"color": "{scrollpanel.bar.focus.ring.color}",
"width": "{scrollpanel.bar.focus.ring.width} + {scrollpanel.bar.focus.ring.offset}",
"style": "{scrollpanel.bar.focus.ring.style}"
} |
--gw-scrollpanel-figma-bar-focus-ring-stroke |
{
"color": "{scrollpanel.bar.focus.ring.color}",
"width": "{scrollpanel.bar.focus.ring.width} + {scrollpanel.bar.focus.ring.offset}",
"style": "{scrollpanel.bar.focus.ring.style}"
}
|
| scrollpanel.figma.bar.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{scrollpanel.bar.focus.ring.offset}",
"style": "solid"
} |
--gw-scrollpanel-figma-bar-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{scrollpanel.bar.focus.ring.offset}",
"style": "solid"
}
|
| tabs.figma.tablist.stroke | {
"color": "{tabs.tablist.border.color}",
"width": "{tabs.tablist.border.width}",
"style": "solid"
} |
--gw-tabs-figma-tablist-stroke |
{
"color": "{tabs.tablist.border.color}",
"width": "{tabs.tablist.border.width}",
"style": "solid"
}
|
| tabs.figma.tab.stroke | {
"color": "{tabs.tab.border.color}",
"width": "{tabs.tab.border.width}",
"style": "solid"
} |
--gw-tabs-figma-tab-stroke |
{
"color": "{tabs.tab.border.color}",
"width": "{tabs.tab.border.width}",
"style": "solid"
}
|
| tabs.figma.tab.active.stroke | {
"color": "{tabs.tab.active.border.bottom.color}",
"width": "{tabs.tab.border.width}",
"style": "solid"
} |
--gw-tabs-figma-tab-active-stroke |
{
"color": "{tabs.tab.active.border.bottom.color}",
"width": "{tabs.tab.border.width}",
"style": "solid"
}
|
| tabs.figma.tab.focus.ring.stroke | {
"color": "{tabs.tab.focus.ring.color}",
"width": "{tabs.tab.focus.ring.width} + {tabs.tab.focus.ring.offset}",
"style": "{tabs.tab.focus.ring.style}"
} |
--gw-tabs-figma-tab-focus-ring-stroke |
{
"color": "{tabs.tab.focus.ring.color}",
"width": "{tabs.tab.focus.ring.width} + {tabs.tab.focus.ring.offset}",
"style": "{tabs.tab.focus.ring.style}"
}
|
| tabs.figma.tab.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{tabs.tab.focus.ring.offset}",
"style": "solid"
} |
--gw-tabs-figma-tab-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{tabs.tab.focus.ring.offset}",
"style": "solid"
}
|
| tabs.figma.tabpanel.focus.ring.stroke | {
"color": "{tabs.tabpanel.focus.ring.color}",
"width": "{tabs.tabpanel.focus.ring.width} + {tabs.tabpanel.focus.ring.offset}",
"style": "{tabs.tabpanel.focus.ring.style}"
} |
--gw-tabs-figma-tabpanel-focus-ring-stroke |
{
"color": "{tabs.tabpanel.focus.ring.color}",
"width": "{tabs.tabpanel.focus.ring.width} + {tabs.tabpanel.focus.ring.offset}",
"style": "{tabs.tabpanel.focus.ring.style}"
}
|
| tabs.figma.tabpanel.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{tabs.tabpanel.focus.ring.offset}",
"style": "solid"
} |
--gw-tabs-figma-tabpanel-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{tabs.tabpanel.focus.ring.offset}",
"style": "solid"
}
|
| toolbar.figma.stroke | {
"color": "{toolbar.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toolbar-figma-stroke |
{
"color": "{toolbar.border.color}",
"width": "1",
"style": "solid"
}
|
| confirmpopup.figma.stroke | {
"color": "{confirmpopup.border.color}",
"width": "1",
"style": "solid"
} |
--gw-confirmpopup-figma-stroke |
{
"color": "{confirmpopup.border.color}",
"width": "1",
"style": "solid"
}
|
| contextmenu.figma.stroke | {
"color": "{contextmenu.border.color}",
"width": "1",
"style": "solid"
} |
--gw-contextmenu-figma-stroke |
{
"color": "{contextmenu.border.color}",
"width": "1",
"style": "solid"
}
|
| contextmenu.figma.separator.stroke | {
"color": "{contextmenu.separator.border.color}",
"width": "1",
"style": "solid"
} |
--gw-contextmenu-figma-separator-stroke |
{
"color": "{contextmenu.separator.border.color}",
"width": "1",
"style": "solid"
}
|
| dock.figma.stroke | {
"color": "{dock.border.color}",
"width": "1",
"style": "solid"
} |
--gw-dock-figma-stroke |
{
"color": "{dock.border.color}",
"width": "1",
"style": "solid"
}
|
| dock.figma.item.focus.ring.stroke | {
"color": "{dock.item.focus.ring.color}",
"width": "{dock.item.focus.ring.width} + {dock.item.focus.ring.offset}",
"style": "{dock.item.focus.ring.style}"
} |
--gw-dock-figma-item-focus-ring-stroke |
{
"color": "{dock.item.focus.ring.color}",
"width": "{dock.item.focus.ring.width} + {dock.item.focus.ring.offset}",
"style": "{dock.item.focus.ring.style}"
}
|
| dock.figma.item.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{dock.item.focus.ring.offset}",
"style": "solid"
} |
--gw-dock-figma-item-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{dock.item.focus.ring.offset}",
"style": "solid"
}
|
| megamenu.figma.overlay.stroke | {
"color": "{megamenu.overlay.border.color}",
"width": "1",
"style": "solid"
} |
--gw-megamenu-figma-overlay-stroke |
{
"color": "{megamenu.overlay.border.color}",
"width": "1",
"style": "solid"
}
|
| megamenu.figma.separator.stroke | {
"color": "{megamenu.separator.border.color}",
"width": "1",
"style": "solid"
} |
--gw-megamenu-figma-separator-stroke |
{
"color": "{megamenu.separator.border.color}",
"width": "1",
"style": "solid"
}
|
| megamenu.figma.mobile.button.focus.ring.stroke | {
"color": "{megamenu.mobile.button.focus.ring.color}",
"width": "{megamenu.mobile.button.focus.ring.width} + {megamenu.mobile.button.focus.ring.offset}",
"style": "solid"
} |
--gw-megamenu-figma-mobile-button-focus-ring-stroke |
{
"color": "{megamenu.mobile.button.focus.ring.color}",
"width": "{megamenu.mobile.button.focus.ring.width} + {megamenu.mobile.button.focus.ring.offset}",
"style": "solid"
}
|
| megamenu.figma.mobile.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{megamenu.mobile.button.focus.ring.offset}",
"style": "solid"
} |
--gw-megamenu-figma-mobile-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{megamenu.mobile.button.focus.ring.offset}",
"style": "solid"
}
|
| megamenu.figma.stroke | {
"color": "{megamenu.border.color}",
"width": "1",
"style": "solid"
} |
--gw-megamenu-figma-stroke |
{
"color": "{megamenu.border.color}",
"width": "1",
"style": "solid"
}
|
| menu.figma.stroke | {
"color": "{menu.border.color}",
"width": "1",
"style": "solid"
} |
--gw-menu-figma-stroke |
{
"color": "{menu.border.color}",
"width": "1",
"style": "solid"
}
|
| menu.figma.separator.stroke | {
"color": "{menu.separator.border.color}",
"width": "1",
"style": "solid"
} |
--gw-menu-figma-separator-stroke |
{
"color": "{menu.separator.border.color}",
"width": "1",
"style": "solid"
}
|
| menubar.figma.stroke | {
"color": "{menubar.border.color}",
"width": "1",
"style": "solid"
} |
--gw-menubar-figma-stroke |
{
"color": "{menubar.border.color}",
"width": "1",
"style": "solid"
}
|
| menubar.figma.submenu.stroke | {
"color": "{menubar.submenu.border.color}",
"width": "1",
"style": "solid"
} |
--gw-menubar-figma-submenu-stroke |
{
"color": "{menubar.submenu.border.color}",
"width": "1",
"style": "solid"
}
|
| menubar.figma.separator.stroke | {
"color": "{menubar.separator.border.color}",
"width": "1",
"style": "solid"
} |
--gw-menubar-figma-separator-stroke |
{
"color": "{menubar.separator.border.color}",
"width": "1",
"style": "solid"
}
|
| menubar.figma.mobile.button.focus.ring.stroke | {
"color": "{menubar.mobile.button.focus.ring.color}",
"width": "{menubar.mobile.button.focus.ring.width} + {menubar.mobile.button.focus.ring.offset}",
"style": "{menubar.mobile.button.focus.ring.style}"
} |
--gw-menubar-figma-mobile-button-focus-ring-stroke |
{
"color": "{menubar.mobile.button.focus.ring.color}",
"width": "{menubar.mobile.button.focus.ring.width} + {menubar.mobile.button.focus.ring.offset}",
"style": "{menubar.mobile.button.focus.ring.style}"
}
|
| menubar.figma.mobile.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{menubar.mobile.button.focus.ring.offset}",
"style": "solid"
} |
--gw-menubar-figma-mobile-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{menubar.mobile.button.focus.ring.offset}",
"style": "solid"
}
|
| panelmenu.figma.panel.stroke | {
"color": "{panelmenu.panel.border.color}",
"width": "{panelmenu.panel.border.width}",
"style": "solid"
} |
--gw-panelmenu-figma-panel-stroke |
{
"color": "{panelmenu.panel.border.color}",
"width": "{panelmenu.panel.border.width}",
"style": "solid"
}
|
| tieredmenu.figma.stroke | {
"color": "{tieredmenu.border.color}",
"width": "1",
"style": "solid"
} |
--gw-tieredmenu-figma-stroke |
{
"color": "{tieredmenu.border.color}",
"width": "1",
"style": "solid"
}
|
| tieredmenu.figma.separator.stroke | {
"color": "{tieredmenu.separator.border.color}",
"width": "1",
"style": "solid"
} |
--gw-tieredmenu-figma-separator-stroke |
{
"color": "{tieredmenu.separator.border.color}",
"width": "1",
"style": "solid"
}
|
| organizationchart.figma.node.stroke | {
"color": "{organizationchart.node.border.color}",
"width": "1",
"style": "solid"
} |
--gw-organizationchart-figma-node-stroke |
{
"color": "{organizationchart.node.border.color}",
"width": "1",
"style": "solid"
}
|
| organizationchart.figma.node.toggle.button.stroke | {
"color": "{organizationchart.node.toggle.button.border.color}",
"width": "1",
"style": "solid"
} |
--gw-organizationchart-figma-node-toggle-button-stroke |
{
"color": "{organizationchart.node.toggle.button.border.color}",
"width": "1",
"style": "solid"
}
|
| organizationchart.figma.node.toggle.button.focus.ring.stroke | {
"color": "{organizationchart.node.toggle.button.focus.ring.color}",
"width": "{organizationchart.node.toggle.button.focus.ring.width} + {organizationchart.node.toggle.button.focus.ring.offset}",
"style": "{organizationchart.node.toggle.button.focus.ring.style}"
} |
--gw-organizationchart-figma-node-toggle-button-focus-ring-stroke |
{
"color": "{organizationchart.node.toggle.button.focus.ring.color}",
"width": "{organizationchart.node.toggle.button.focus.ring.width} + {organizationchart.node.toggle.button.focus.ring.offset}",
"style": "{organizationchart.node.toggle.button.focus.ring.style}"
}
|
| organizationchart.figma.node.toggle.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{organizationchart.node.toggle.button.focus.ring.offset}",
"style": "solid"
} |
--gw-organizationchart-figma-node-toggle-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{organizationchart.node.toggle.button.focus.ring.offset}",
"style": "solid"
}
|
| paginator.figma.nav.button.focus.ring.stroke | {
"color": "{paginator.nav.button.focus.ring.color}",
"width": "{paginator.nav.button.focus.ring.width} + {paginator.nav.button.focus.ring.offset}",
"style": "{paginator.nav.button.focus.ring.style}"
} |
--gw-paginator-figma-nav-button-focus-ring-stroke |
{
"color": "{paginator.nav.button.focus.ring.color}",
"width": "{paginator.nav.button.focus.ring.width} + {paginator.nav.button.focus.ring.offset}",
"style": "{paginator.nav.button.focus.ring.style}"
}
|
| paginator.figma.nav.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{paginator.nav.button.focus.ring.offset}",
"style": "solid"
} |
--gw-paginator-figma-nav-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{paginator.nav.button.focus.ring.offset}",
"style": "solid"
}
|
| datatable.figma.header.stroke | {
"color": "{datatable.header.border.color}",
"width": "{datatable.header.border.width}",
"style": "solid"
} |
--gw-datatable-figma-header-stroke |
{
"color": "{datatable.header.border.color}",
"width": "{datatable.header.border.width}",
"style": "solid"
}
|
| datatable.figma.header.cell.stroke | {
"color": "{datatable.header.cell.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-header-cell-stroke |
{
"color": "{datatable.header.cell.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.body.cell.stroke | {
"color": "{datatable.body.cell.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-body-cell-stroke |
{
"color": "{datatable.body.cell.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.footer.cell.stroke | {
"color": "{datatable.footer.cell.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-footer-cell-stroke |
{
"color": "{datatable.footer.cell.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.footer.stroke | {
"color": "{datatable.footer.border.color}",
"width": "{datatable.footer.border.width}",
"style": "solid"
} |
--gw-datatable-figma-footer-stroke |
{
"color": "{datatable.footer.border.color}",
"width": "{datatable.footer.border.width}",
"style": "solid"
}
|
| datatable.figma.row.toggle.button.focus.ring.stroke | {
"color": "{datatable.row.toggle.button.focus.ring.color}",
"width": "{datatable.row.toggle.button.focus.ring.width} + {datatable.row.toggle.button.focus.ring.offset}",
"style": "{datatable.row.toggle.button.focus.ring.style}"
} |
--gw-datatable-figma-row-toggle-button-focus-ring-stroke |
{
"color": "{datatable.row.toggle.button.focus.ring.color}",
"width": "{datatable.row.toggle.button.focus.ring.width} + {datatable.row.toggle.button.focus.ring.offset}",
"style": "{datatable.row.toggle.button.focus.ring.style}"
}
|
| datatable.figma.row.toggle.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{datatable.row.toggle.button.focus.ring.offset}",
"style": "solid"
} |
--gw-datatable-figma-row-toggle-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{datatable.row.toggle.button.focus.ring.offset}",
"style": "solid"
}
|
| datatable.figma.filter.overlay.select.stroke | {
"color": "{datatable.filter.overlay.select.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-filter-overlay-select-stroke |
{
"color": "{datatable.filter.overlay.select.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.filter.overlay.popover.stroke | {
"color": "{datatable.filter.overlay.popover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-filter-overlay-popover-stroke |
{
"color": "{datatable.filter.overlay.popover.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.filter.constraint.separator.stroke | {
"color": "{datatable.filter.constraint.separator.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-filter-constraint-separator-stroke |
{
"color": "{datatable.filter.constraint.separator.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.paginator.top.stroke | {
"color": "{datatable.paginator.top.border.color}",
"width": "{datatable.paginator.top.border.width}",
"style": "solid"
} |
--gw-datatable-figma-paginator-top-stroke |
{
"color": "{datatable.paginator.top.border.color}",
"width": "{datatable.paginator.top.border.width}",
"style": "solid"
}
|
| datatable.figma.paginator.bottom.stroke | {
"color": "{datatable.paginator.bottom.border.color}",
"width": "{datatable.paginator.bottom.border.width}",
"style": "solid"
} |
--gw-datatable-figma-paginator-bottom-stroke |
{
"color": "{datatable.paginator.bottom.border.color}",
"width": "{datatable.paginator.bottom.border.width}",
"style": "solid"
}
|
| timeline.figma.event.marker.stroke | {
"color": "{timeline.event.marker.border.color}",
"width": "{timeline.event.marker.border.width}",
"style": "solid"
} |
--gw-timeline-figma-event-marker-stroke |
{
"color": "{timeline.event.marker.border.color}",
"width": "{timeline.event.marker.border.width}",
"style": "solid"
}
|
| tree.figma.node.toggle.button.focus.ring.stroke | {
"color": "{tree.node.toggle.button.focus.ring.color}",
"width": "{tree.node.toggle.button.focus.ring.width} + {tree.node.toggle.button.focus.ring.offset}",
"style": "{tree.node.toggle.button.focus.ring.style}"
} |
--gw-tree-figma-node-toggle-button-focus-ring-stroke |
{
"color": "{tree.node.toggle.button.focus.ring.color}",
"width": "{tree.node.toggle.button.focus.ring.width} + {tree.node.toggle.button.focus.ring.offset}",
"style": "{tree.node.toggle.button.focus.ring.style}"
}
|
| tree.figma.node.toggle.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{tree.node.toggle.button.focus.ring.offset}",
"style": "solid"
} |
--gw-tree-figma-node-toggle-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{tree.node.toggle.button.focus.ring.offset}",
"style": "solid"
}
|
| carousel.figma.indicator.focus.ring.stroke | {
"color": "{carousel.indicator.focus.ring.color}",
"width": "{carousel.indicator.focus.ring.width} + {carousel.indicator.focus.ring.offset}",
"style": "{carousel.indicator.focus.ring.style}"
} |
--gw-carousel-figma-indicator-focus-ring-stroke |
{
"color": "{carousel.indicator.focus.ring.color}",
"width": "{carousel.indicator.focus.ring.width} + {carousel.indicator.focus.ring.offset}",
"style": "{carousel.indicator.focus.ring.style}"
}
|
| carousel.figma.indicator.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{carousel.indicator.focus.ring.offset}",
"style": "solid"
} |
--gw-carousel-figma-indicator-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{carousel.indicator.focus.ring.offset}",
"style": "solid"
}
|
| image.figma.action.focus.ring.stroke | {
"color": "{image.action.focus.ring.color}",
"width": "{image.action.focus.ring.width} + {image.action.focus.ring.offset}",
"style": "{image.action.focus.ring.style}"
} |
--gw-image-figma-action-focus-ring-stroke |
{
"color": "{image.action.focus.ring.color}",
"width": "{image.action.focus.ring.width} + {image.action.focus.ring.offset}",
"style": "{image.action.focus.ring.style}"
}
|
| image.figma.action.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{image.action.focus.ring.offset}",
"style": "solid"
} |
--gw-image-figma-action-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{image.action.focus.ring.offset}",
"style": "solid"
}
|
| image.figma.toolbar.stroke | {
"color": "{image.toolbar.border.color}",
"width": "{image.toolbar.border.width}",
"style": "solid"
} |
--gw-image-figma-toolbar-stroke |
{
"color": "{image.toolbar.border.color}",
"width": "{image.toolbar.border.width}",
"style": "solid"
}
|
| treetable.figma.header.stroke | {
"color": "{treetable.header.border.color}",
"width": "{treetable.header.border.width}",
"style": "solid"
} |
--gw-treetable-figma-header-stroke |
{
"color": "{treetable.header.border.color}",
"width": "{treetable.header.border.width}",
"style": "solid"
}
|
| treetable.figma.header.cell.stroke | {
"color": "{treetable.header.cell.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treetable-figma-header-cell-stroke |
{
"color": "{treetable.header.cell.border.color}",
"width": "1",
"style": "solid"
}
|
| treetable.figma.body.cell.stroke | {
"color": "{treetable.body.cell.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treetable-figma-body-cell-stroke |
{
"color": "{treetable.body.cell.border.color}",
"width": "1",
"style": "solid"
}
|
| treetable.figma.footer.cell.stroke | {
"color": "{treetable.footer.cell.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treetable-figma-footer-cell-stroke |
{
"color": "{treetable.footer.cell.border.color}",
"width": "1",
"style": "solid"
}
|
| treetable.figma.footer.stroke | {
"color": "{treetable.footer.border.color}",
"width": "{treetable.footer.border.width}",
"style": "solid"
} |
--gw-treetable-figma-footer-stroke |
{
"color": "{treetable.footer.border.color}",
"width": "{treetable.footer.border.width}",
"style": "solid"
}
|
| treetable.figma.node.toggle.button.focus.ring.stroke | {
"color": "{treetable.node.toggle.button.focus.ring.color}",
"width": "{treetable.node.toggle.button.focus.ring.width} + {treetable.node.toggle.button.focus.ring.offset}",
"style": "{treetable.node.toggle.button.focus.ring.style}"
} |
--gw-treetable-figma-node-toggle-button-focus-ring-stroke |
{
"color": "{treetable.node.toggle.button.focus.ring.color}",
"width": "{treetable.node.toggle.button.focus.ring.width} + {treetable.node.toggle.button.focus.ring.offset}",
"style": "{treetable.node.toggle.button.focus.ring.style}"
}
|
| treetable.figma.node.toggle.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{treetable.node.toggle.button.focus.ring.offset}",
"style": "solid"
} |
--gw-treetable-figma-node-toggle-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{treetable.node.toggle.button.focus.ring.offset}",
"style": "solid"
}
|
| treetable.figma.paginator.top.stroke | {
"color": "{treetable.paginator.top.border.color}",
"width": "{treetable.paginator.top.border.width}",
"style": "solid"
} |
--gw-treetable-figma-paginator-top-stroke |
{
"color": "{treetable.paginator.top.border.color}",
"width": "{treetable.paginator.top.border.width}",
"style": "solid"
}
|
| treetable.figma.paginator.bottom.stroke | {
"color": "{treetable.paginator.bottom.border.color}",
"width": "{treetable.paginator.bottom.border.width}",
"style": "solid"
} |
--gw-treetable-figma-paginator-bottom-stroke |
{
"color": "{treetable.paginator.bottom.border.color}",
"width": "{treetable.paginator.bottom.border.width}",
"style": "solid"
}
|
| galleria.figma.stroke | {
"color": "{galleria.border.color}",
"width": "{galleria.border.width}",
"style": "solid"
} |
--gw-galleria-figma-stroke |
{
"color": "{galleria.border.color}",
"width": "{galleria.border.width}",
"style": "solid"
}
|
| galleria.figma.nav.button.focus.ring.stroke | {
"color": "{galleria.nav.button.focus.ring.color}",
"width": "{galleria.nav.button.focus.ring.width} + {galleria.nav.button.focus.ring.offset}",
"style": "{galleria.nav.button.focus.ring.style}"
} |
--gw-galleria-figma-nav-button-focus-ring-stroke |
{
"color": "{galleria.nav.button.focus.ring.color}",
"width": "{galleria.nav.button.focus.ring.width} + {galleria.nav.button.focus.ring.offset}",
"style": "{galleria.nav.button.focus.ring.style}"
}
|
| galleria.figma.nav.button.focus.ring.offset.stroke | {
"color": "rgba(0, 0, 0, 0.01)",
"width": "{galleria.nav.button.focus.ring.offset}",
"style": "solid"
} |
--gw-galleria-figma-nav-button-focus-ring-offset-stroke |
{
"color": "rgba(0, 0, 0, 0.01)",
"width": "{galleria.nav.button.focus.ring.offset}",
"style": "solid"
}
|
| galleria.figma.thumbnail.nav.button.focus.ring.stroke | {
"color": "{galleria.thumbnail.nav.button.focus.ring.color}",
"width": "{galleria.thumbnail.nav.button.focus.ring.width} + {galleria.thumbnail.nav.button.focus.ring.offset}",
"style": "{galleria.thumbnail.nav.button.focus.ring.style}"
} |
--gw-galleria-figma-thumbnail-nav-button-focus-ring-stroke |
{
"color": "{galleria.thumbnail.nav.button.focus.ring.color}",
"width": "{galleria.thumbnail.nav.button.focus.ring.width} + {galleria.thumbnail.nav.button.focus.ring.offset}",
"style": "{galleria.thumbnail.nav.button.focus.ring.style}"
}
|
| galleria.figma.thumbnail.nav.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{galleria.thumbnail.nav.button.focus.ring.offset}",
"style": "solid"
} |
--gw-galleria-figma-thumbnail-nav-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{galleria.thumbnail.nav.button.focus.ring.offset}",
"style": "solid"
}
|
| galleria.figma.indicator.button.focus.ring.stroke | {
"color": "{galleria.indicator.button.focus.ring.color}",
"width": "{galleria.indicator.button.focus.ring.width} + {galleria.indicator.button.focus.ring.offset}",
"style": "{galleria.indicator.button.focus.ring.style}"
} |
--gw-galleria-figma-indicator-button-focus-ring-stroke |
{
"color": "{galleria.indicator.button.focus.ring.color}",
"width": "{galleria.indicator.button.focus.ring.width} + {galleria.indicator.button.focus.ring.offset}",
"style": "{galleria.indicator.button.focus.ring.style}"
}
|
| galleria.figma.indicator.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{galleria.indicator.button.focus.ring.offset}",
"style": "solid"
} |
--gw-galleria-figma-indicator-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{galleria.indicator.button.focus.ring.offset}",
"style": "solid"
}
|
| galleria.figma.close.button.focus.ring.stroke | {
"color": "{galleria.close.button.focus.ring.color}",
"width": "{galleria.close.button.focus.ring.width} + {galleria.close.button.focus.ring.offset}",
"style": "{galleria.close.button.focus.ring.style}"
} |
--gw-galleria-figma-close-button-focus-ring-stroke |
{
"color": "{galleria.close.button.focus.ring.color}",
"width": "{galleria.close.button.focus.ring.width} + {galleria.close.button.focus.ring.offset}",
"style": "{galleria.close.button.focus.ring.style}"
}
|
| galleria.figma.close.button.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{galleria.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-galleria-figma-close-button-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{galleria.close.button.focus.ring.offset}",
"style": "solid"
}
|
| popover.figma.stroke | {
"color": "{popover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-popover-figma-stroke |
{
"color": "{popover.border.color}",
"width": "1",
"style": "solid"
}
|
| fileupload.header.stroke | {
"color": "{fileupload.header.border.color}",
"width": "{fileupload.header.border.width}",
"style": "solid"
} |
--gw-fileupload-header-stroke |
{
"color": "{fileupload.header.border.color}",
"width": "{fileupload.header.border.width}",
"style": "solid"
}
|
| fileupload.figma.stroke | {
"color": "{fileupload.border.color}",
"width": "1",
"style": "solid"
} |
--gw-fileupload-figma-stroke |
{
"color": "{fileupload.border.color}",
"width": "1",
"style": "solid"
}
|
| fileupload.figma.file.stroke | {
"color": "{fileupload.file.border.color}",
"width": "1",
"style": "solid"
} |
--gw-fileupload-figma-file-stroke |
{
"color": "{fileupload.file.border.color}",
"width": "1",
"style": "solid"
}
|
| fileupload.figma.content.highlight.stroke | {
"color": "{fileupload.content.highlight.border.color}",
"width": "1",
"style": "solid"
} |
--gw-fileupload-figma-content-highlight-stroke |
{
"color": "{fileupload.content.highlight.border.color}",
"width": "1",
"style": "solid"
}
|
| splitbutton.divider | {
"color": "{button.primary.icon.second.color}",
"width": "1px",
"style": "solid"
} |
--gw-splitbutton-divider |
{
"color": "{button.primary.icon.second.color}",
"width": "1px",
"style": "solid"
}
|
| stepper.step.list.border | {border.default} | --gw-stepper-step-list-border |
{
"color": "{border.color.default}",
"width": "1px",
"style": "solid"
}
|
| stepper.figma.step.header.focus.ring.stroke | {
"color": "{stepper.step.header.focus.ring.color}",
"width": "{stepper.step.header.focus.ring.width} + {stepper.step.header.focus.ring.offset}",
"style": "{stepper.step.header.focus.ring.style}"
} |
--gw-stepper-figma-step-header-focus-ring-stroke |
{
"color": "{stepper.step.header.focus.ring.color}",
"width": "{stepper.step.header.focus.ring.width} + {stepper.step.header.focus.ring.offset}",
"style": "{stepper.step.header.focus.ring.style}"
}
|
| stepper.figma.step.header.focus.ring.offset.stroke | {
"color": "{card.background}",
"width": "{stepper.step.header.focus.ring.offset}",
"style": "solid"
} |
--gw-stepper-figma-step-header-focus-ring-offset-stroke |
{
"color": "{card.background}",
"width": "{stepper.step.header.focus.ring.offset}",
"style": "solid"
}
|
| stepper.figma.step.number.stroke | {
"color": "{stepper.step.number.border.color}",
"width": "2",
"style": "solid"
} |
--gw-stepper-figma-step-number-stroke |
{
"color": "{stepper.step.number.border.color}",
"width": "2",
"style": "solid"
}
|
| stepper.figma.step.number.active.stroke | {
"color": "{stepper.step.number.active.border.color}",
"width": "2",
"style": "solid"
} |
--gw-stepper-figma-step-number-active-stroke |
{
"color": "{stepper.step.number.active.border.color}",
"width": "2",
"style": "solid"
}
|
| terminal.figma.stroke | {
"color": "{terminal.border.color}",
"width": "1",
"style": "solid"
} |
--gw-terminal-figma-stroke |
{
"color": "{terminal.border.color}",
"width": "1",
"style": "solid"
}
|
| imagecompare.figma.handle.stroke | {
"color": "{imagecompare.handle.border.color}",
"width": "{imagecompare.handle.border.width}",
"style": "none"
} |
--gw-imagecompare-figma-handle-stroke |
{
"color": "{imagecompare.handle.border.color}",
"width": "{imagecompare.handle.border.width}",
"style": "none"
}
|
| imagecompare.figma.handle.hover.stroke | {
"color": "{imagecompare.handle.hover.border.color}",
"width": "{imagecompare.handle.border.width}",
"style": "solid"
} |
--gw-imagecompare-figma-handle-hover-stroke |
{
"color": "{imagecompare.handle.hover.border.color}",
"width": "{imagecompare.handle.border.width}",
"style": "solid"
}
|
| imagecompare.figma.handle.focus.ring.stroke | {
"color": "{imagecompare.handle.focus.ring.color}",
"width": "{imagecompare.handle.focus.ring.width} + {imagecompare.handle.focus.ring.offset}",
"style": "{imagecompare.handle.focus.ring.style}"
} |
--gw-imagecompare-figma-handle-focus-ring-stroke |
{
"color": "{imagecompare.handle.focus.ring.color}",
"width": "{imagecompare.handle.focus.ring.width} + {imagecompare.handle.focus.ring.offset}",
"style": "{imagecompare.handle.focus.ring.style}"
}
|
| imagecompare.figma.handle.focus.ring.offset.stroke | {
"color": "rgba(0, 0, 0, 0.3)",
"width": "{imagecompare.handle.focus.ring.offset}",
"style": "solid"
} |
--gw-imagecompare-figma-handle-focus-ring-offset-stroke |
{
"color": "rgba(0, 0, 0, 0.3)",
"width": "{imagecompare.handle.focus.ring.offset}",
"style": "solid"
}
|
| overlaybadge.figma.stroke | {
"color": "{overlaybadge.outline.color}",
"width": "{overlaybadge.outline.width}",
"style": "solid"
} |
--gw-overlaybadge-figma-stroke |
{
"color": "{overlaybadge.outline.color}",
"width": "{overlaybadge.outline.width}",
"style": "solid"
}
|
| button.figma.primary.stroke | {
"color": "{button.primary.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-primary-stroke |
{
"color": "{button.primary.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.primary.hover.stroke | {
"color": "{button.primary.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-primary-hover-stroke |
{
"color": "{button.primary.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.primary.active.stroke | {
"color": "{button.primary.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-primary-active-stroke |
{
"color": "{button.primary.active.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.secondary.stroke | {
"color": "{button.secondary.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-secondary-stroke |
{
"color": "{button.secondary.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.secondary.hover.stroke | {
"color": "{button.secondary.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-secondary-hover-stroke |
{
"color": "{button.secondary.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.secondary.active.stroke | {
"color": "{button.secondary.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-secondary-active-stroke |
{
"color": "{button.secondary.active.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.info.stroke | {
"color": "{button.info.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-info-stroke |
{
"color": "{button.info.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.info.hover.stroke | {
"color": "{button.info.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-info-hover-stroke |
{
"color": "{button.info.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.info.active.stroke | {
"color": "{info.light}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-info-active-stroke |
{
"color": "{info.light}",
"width": "1",
"style": "solid"
}
|
| button.figma.warn.stroke | {
"color": "{button.warn.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-warn-stroke |
{
"color": "{button.warn.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.warn.hover.stroke | {
"color": "{button.warn.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-warn-hover-stroke |
{
"color": "{button.warn.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.warn.active.stroke | {
"color": "{warning.light}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-warn-active-stroke |
{
"color": "{warning.light}",
"width": "1",
"style": "solid"
}
|
| button.figma.help.stroke | {
"color": "{button.help.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-help-stroke |
{
"color": "{button.help.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.help.hover.stroke | {
"color": "{button.help.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-help-hover-stroke |
{
"color": "{button.help.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.help.active.stroke | {
"color": "{button.help.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-help-active-stroke |
{
"color": "{button.help.active.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.danger.stroke | {
"color": "{button.danger.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-danger-stroke |
{
"color": "{button.danger.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.danger.hover.stroke | {
"color": "{button.danger.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-danger-hover-stroke |
{
"color": "{button.danger.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.danger.active.stroke | {
"color": "{button.danger.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-danger-active-stroke |
{
"color": "{button.danger.active.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.success.stroke | {
"color": "{button.success.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-success-stroke |
{
"color": "{button.success.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.success.hover.stroke | {
"color": "{button.success.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-success-hover-stroke |
{
"color": "{button.success.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| button.figma.success.active.stroke | {
"color": "{success.light}",
"width": "1",
"style": "solid"
} |
--gw-button-figma-success-active-stroke |
{
"color": "{success.light}",
"width": "1",
"style": "solid"
}
|
| colorpicker.figma.panel.stroke | {
"color": "{colorpicker.panel.border.color}",
"width": "1",
"style": "solid"
} |
--gw-colorpicker-figma-panel-stroke |
{
"color": "{colorpicker.panel.border.color}",
"width": "1",
"style": "solid"
}
|
| colorpicker.figma.handle.stroke | {
"color": "{colorpicker.handle.color}",
"width": "2",
"style": "solid"
} |
--gw-colorpicker-figma-handle-stroke |
{
"color": "{colorpicker.handle.color}",
"width": "2",
"style": "solid"
}
|
| inputnumber.figma.button.hover.stroke | {
"color": "{inputnumber.button.hover.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputnumber-figma-button-hover-stroke |
{
"color": "{inputnumber.button.hover.border.color}",
"width": "1",
"style": "solid"
}
|
| inputnumber.figma.button.active.stroke | {
"color": "{inputnumber.button.active.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputnumber-figma-button-active-stroke |
{
"color": "{inputnumber.button.active.border.color}",
"width": "1",
"style": "solid"
}
|
| inputnumber.figma.button.stroke | {
"color": "{inputnumber.button.border.color}",
"width": "1",
"style": "solid"
} |
--gw-inputnumber-figma-button-stroke |
{
"color": "{inputnumber.button.border.color}",
"width": "1",
"style": "solid"
}
|
| togglebutton.figma.checked.stroke | {
"color": "{togglebutton.checked.border.color}",
"width": "1",
"style": "solid"
} |
--gw-togglebutton-figma-checked-stroke |
{
"color": "{togglebutton.checked.border.color}",
"width": "1",
"style": "solid"
}
|
| togglebutton.figma.stroke | {
"color": "{togglebutton.border.color}",
"width": "1",
"style": "solid"
} |
--gw-togglebutton-figma-stroke |
{
"color": "{togglebutton.border.color}",
"width": "1",
"style": "solid"
}
|
| selectbutton.figma.invalid.stroke | {
"color": "{selectbutton.invalid.border.color}",
"width": "1",
"style": "solid"
} |
--gw-selectbutton-figma-invalid-stroke |
{
"color": "{selectbutton.invalid.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.stroke | {
"color": "{datatable.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-stroke |
{
"color": "{datatable.border.color}",
"width": "1",
"style": "solid"
}
|
| datatable.figma.body.cell.selected.stroke | {
"color": "{datatable.body.cell.selected.border.color}",
"width": "1",
"style": "solid"
} |
--gw-datatable-figma-body-cell-selected-stroke |
{
"color": "{datatable.body.cell.selected.border.color}",
"width": "1",
"style": "solid"
}
|
| carousel.figma.item.stroke | {
"color": "{neutral.200}",
"width": "1",
"style": "solid"
} |
--gw-carousel-figma-item-stroke |
{
"color": "{neutral.200}",
"width": "1",
"style": "solid"
}
|
| treetable.figma.stroke | {
"color": "{treetable.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treetable-figma-stroke |
{
"color": "{treetable.border.color}",
"width": "1",
"style": "solid"
}
|
| treetable.figma.body.cell.selected.stroke | {
"color": "{treetable.body.cell.selected.border.color}",
"width": "1",
"style": "solid"
} |
--gw-treetable-figma-body-cell-selected-stroke |
{
"color": "{treetable.body.cell.selected.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.info.stroke | {
"color": "{message.info.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-info-stroke |
{
"color": "{message.info.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.info.close.button.focus.ring.stroke | {
"color": "{message.info.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
} |
--gw-message-figma-info-close-button-focus-ring-stroke |
{
"color": "{message.info.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
}
|
| message.figma.info.close.button.focus.ring.offset.stroke | {
"color": "{message.info.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-message-figma-info-close-button-focus-ring-offset-stroke |
{
"color": "{message.info.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
}
|
| message.figma.info.outlined.stroke | {
"color": "{message.info.outlined.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-info-outlined-stroke |
{
"color": "{message.info.outlined.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.success.stroke | {
"color": "{message.success.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-success-stroke |
{
"color": "{message.success.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.success.close.button.focus.ring.stroke | {
"color": "{message.success.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
} |
--gw-message-figma-success-close-button-focus-ring-stroke |
{
"color": "{message.success.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
}
|
| message.figma.success.close.button.focus.ring.offset.stroke | {
"color": "{message.success.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-message-figma-success-close-button-focus-ring-offset-stroke |
{
"color": "{message.success.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
}
|
| message.figma.success.outlined.stroke | {
"color": "{message.success.outlined.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-success-outlined-stroke |
{
"color": "{message.success.outlined.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.warn.stroke | {
"color": "{message.warning.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-warn-stroke |
{
"color": "{message.warning.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.warn.close.button.focus.ring.stroke | {
"color": "{message.warning.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
} |
--gw-message-figma-warn-close-button-focus-ring-stroke |
{
"color": "{message.warning.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
}
|
| message.figma.warn.close.button.focus.ring.offset.stroke | {
"color": "{message.warning.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-message-figma-warn-close-button-focus-ring-offset-stroke |
{
"color": "{message.warning.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
}
|
| message.figma.warn.outlined.stroke | {
"color": "{message.warning.outlined.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-warn-outlined-stroke |
{
"color": "{message.warning.outlined.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.error.stroke | {
"color": "{message.error.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-error-stroke |
{
"color": "{message.error.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.error.close.button.focus.ring.stroke | {
"color": "{message.error.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
} |
--gw-message-figma-error-close-button-focus-ring-stroke |
{
"color": "{message.error.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
}
|
| message.figma.error.close.button.focus.ring.offset.stroke | {
"color": "{message.error.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-message-figma-error-close-button-focus-ring-offset-stroke |
{
"color": "{message.error.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
}
|
| message.figma.error.outlined.stroke | {
"color": "{message.error.outlined.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-error-outlined-stroke |
{
"color": "{message.error.outlined.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.help.stroke | {
"color": "{message.help.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-help-stroke |
{
"color": "{message.help.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.help.close.button.focus.ring.stroke | {
"color": "{message.help.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
} |
--gw-message-figma-help-close-button-focus-ring-stroke |
{
"color": "{message.help.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
}
|
| message.figma.help.close.button.focus.ring.offset.stroke | {
"color": "{message.help.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-message-figma-help-close-button-focus-ring-offset-stroke |
{
"color": "{message.help.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
}
|
| message.figma.help.outlined.stroke | {
"color": "{message.help.outlined.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-help-outlined-stroke |
{
"color": "{message.help.outlined.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.contrast.stroke | {
"color": "{message.contrast.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-contrast-stroke |
{
"color": "{message.contrast.border.color}",
"width": "1",
"style": "solid"
}
|
| message.figma.contrast.close.button.focus.ring.stroke | {
"color": "{message.contrast.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
} |
--gw-message-figma-contrast-close-button-focus-ring-stroke |
{
"color": "{message.contrast.close.button.focus.ring.color}",
"width": "{message.close.button.focus.ring.width} + {message.close.button.focus.ring.offset}",
"style": "{message.close.button.focus.ring.style}"
}
|
| message.figma.contrast.close.button.focus.ring.offset.stroke | {
"color": "{message.contrast.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-message-figma-contrast-close-button-focus-ring-offset-stroke |
{
"color": "{message.contrast.background}",
"width": "{message.close.button.focus.ring.offset}",
"style": "solid"
}
|
| message.figma.contrast.outlined.stroke | {
"color": "{message.contrast.outlined.border.color}",
"width": "1",
"style": "solid"
} |
--gw-message-figma-contrast-outlined-stroke |
{
"color": "{message.contrast.outlined.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.info.stroke | {
"color": "{toast.info.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toast-figma-info-stroke |
{
"color": "{toast.info.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.info.close.button.focus.ring.stroke | {
"color": "{toast.info.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
} |
--gw-toast-figma-info-close-button-focus-ring-stroke |
{
"color": "{toast.info.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
}
|
| toast.figma.info.close.button.focus.ring.offset.stroke | {
"color": "{toast.info.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-toast-figma-info-close-button-focus-ring-offset-stroke |
{
"color": "{toast.info.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
}
|
| toast.figma.success.stroke | {
"color": "{toast.success.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toast-figma-success-stroke |
{
"color": "{toast.success.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.success.close.button.focus.ring.stroke | {
"color": "{toast.success.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
} |
--gw-toast-figma-success-close-button-focus-ring-stroke |
{
"color": "{toast.success.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
}
|
| toast.figma.success.close.button.focus.ring.offset.stroke | {
"color": "{toast.success.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-toast-figma-success-close-button-focus-ring-offset-stroke |
{
"color": "{toast.success.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
}
|
| toast.figma.warn.stroke | {
"color": "{toast.warn.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toast-figma-warn-stroke |
{
"color": "{toast.warn.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.warn.close.button.focus.ring.stroke | {
"color": "{toast.warn.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
} |
--gw-toast-figma-warn-close-button-focus-ring-stroke |
{
"color": "{toast.warn.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
}
|
| toast.figma.warn.close.button.focus.ring.offset.stroke | {
"color": "{toast.warn.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-toast-figma-warn-close-button-focus-ring-offset-stroke |
{
"color": "{toast.warn.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
}
|
| toast.figma.error.stroke | {
"color": "{toast.error.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toast-figma-error-stroke |
{
"color": "{toast.error.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.error.close.button.focus.ring.stroke | {
"color": "{toast.error.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
} |
--gw-toast-figma-error-close-button-focus-ring-stroke |
{
"color": "{toast.error.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
}
|
| toast.figma.error.close.button.focus.ring.offset.stroke | {
"color": "{toast.error.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-toast-figma-error-close-button-focus-ring-offset-stroke |
{
"color": "{toast.error.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
}
|
| toast.figma.secondary.stroke | {
"color": "{toast.secondary.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toast-figma-secondary-stroke |
{
"color": "{toast.secondary.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.secondary.close.button.focus.ring.stroke | {
"color": "{toast.secondary.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
} |
--gw-toast-figma-secondary-close-button-focus-ring-stroke |
{
"color": "{toast.secondary.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
}
|
| toast.figma.secondary.close.button.focus.ring.offset.stroke | {
"color": "{toast.secondary.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-toast-figma-secondary-close-button-focus-ring-offset-stroke |
{
"color": "{toast.secondary.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
}
|
| toast.figma.contrast.stroke | {
"color": "{toast.contrast.border.color}",
"width": "1",
"style": "solid"
} |
--gw-toast-figma-contrast-stroke |
{
"color": "{toast.contrast.border.color}",
"width": "1",
"style": "solid"
}
|
| toast.figma.contrast.close.button.focus.ring.stroke | {
"color": "{toast.contrast.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
} |
--gw-toast-figma-contrast-close-button-focus-ring-stroke |
{
"color": "{toast.contrast.close.button.focus.ring.color}",
"width": "{toast.close.button.focus.ring.width} + {toast.close.button.focus.ring.offset}",
"style": "{toast.close.button.focus.ring.style}"
}
|
| toast.figma.contrast.close.button.focus.ring.offset.stroke | {
"color": "{toast.contrast.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
} |
--gw-toast-figma-contrast-close-button-focus-ring-offset-stroke |
{
"color": "{toast.contrast.background}",
"width": "{toast.close.button.focus.ring.offset}",
"style": "solid"
}
|
| dataview.figma.content.item.stroke | {
"color": "{neutral.200}",
"width": "1",
"style": "solid"
} |
--gw-dataview-figma-content-item-stroke |
{
"color": "{neutral.200}",
"width": "1",
"style": "solid"
}
|
Typography Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| heading.h1 | {
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.400}",
"fontSize": "{h1.font.size}",
"lineHeight": "100%"
} |
--gw-heading-h1 |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.400}",
"fontSize": "{h1.font.size}",
"lineHeight": "100%"
}
|
| heading.h2 | {
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h2.font.size}",
"lineHeight": "100%"
} |
--gw-heading-h2 |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h2.font.size}",
"lineHeight": "100%"
}
|
| heading.h3 | {
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h3.font.size}",
"lineHeight": "100%"
} |
--gw-heading-h3 |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h3.font.size}",
"lineHeight": "100%"
}
|
| heading.h4 | {
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h4.font.size}",
"lineHeight": "100%"
} |
--gw-heading-h4 |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h4.font.size}",
"lineHeight": "100%"
}
|
| heading.h5 | {
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h5.font.size}",
"lineHeight": "100%"
} |
--gw-heading-h5 |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h5.font.size}",
"lineHeight": "100%"
}
|
| heading.h6 | {
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h6.font.size}",
"lineHeight": "100%"
} |
--gw-heading-h6 |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h6.font.size}",
"lineHeight": "100%"
}
|
| body.base.light | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-body-base-light |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
}
|
| body.base.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{base.line.height}*{base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-body-base-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{base.line.height}*{base.font.size}",
"fontSize": "{base.font.size}"
}
|
| body.base.regular-underlined | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}",
"textDecoration": "underline"
} |
--gw-body-base-regular-underlined |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}",
"textDecoration": "underline"
}
|
| body.base.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-body-base-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
}
|
| body.base.medium-underlined | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}",
"textDecoration": "underline"
} |
--gw-body-base-medium-underlined |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}",
"textDecoration": "underline"
}
|
| body.base.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-body-base-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{base.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
}
|
| body.sm.light | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
} |
--gw-body-sm-light |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
}
|
| body.sm.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
} |
--gw-body-sm-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
}
|
| body.sm.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
} |
--gw-body-sm-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
}
|
| body.sm.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
} |
--gw-body-sm-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{sm.line.height}",
"fontSize": "{sm.font.size}"
}
|
| body.lg.light | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-body-lg-light |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
}
|
| body.lg.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-body-lg-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
}
|
| body.lg.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-body-lg-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
}
|
| body.lg.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-body-lg-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{lg.line.height}",
"fontSize": "{lg.font.size}"
}
|
| body.xs.light | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-body-xs-light |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.300}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
}
|
| body.xs.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-body-xs-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
}
|
| body.xs.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-body-xs-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
}
|
| body.xs.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-body-xs-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{xs.line.height}",
"fontSize": "{xs.font.size}"
}
|
| caption.base | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.600}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"textCase": "uppercase",
"letterSpacing": "2%"
} |
--gw-caption-base |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.600}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"textCase": "uppercase",
"letterSpacing": "2%"
}
|
| caption.sm | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.600}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}",
"textCase": "uppercase",
"letterSpacing": "2%"
} |
--gw-caption-sm |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.600}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}",
"textCase": "uppercase",
"letterSpacing": "2%"
}
|
| label.base.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{xs.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-label-base-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{xs.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
}
|
| label.base.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{xxs.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-label-base-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{xxs.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
}
|
| label.base.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{xxs.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
} |
--gw-label-base-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{xxs.line.height} * {base.font.size}",
"fontSize": "{base.font.size}"
}
|
| label.sm.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"letterSpacing": "2%"
} |
--gw-label-sm-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"letterSpacing": "2%"
}
|
| label.sm.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"letterSpacing": "2%"
} |
--gw-label-sm-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"letterSpacing": "2%"
}
|
| label.sm.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"letterSpacing": "2%"
} |
--gw-label-sm-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{sm.font.size}",
"letterSpacing": "2%"
}
|
| label.lg.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{xs.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-label-lg-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{xs.line.height}",
"fontSize": "{lg.font.size}"
}
|
| label.lg.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{xs.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-label-lg-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{xs.line.height}",
"fontSize": "{lg.font.size}"
}
|
| label.lg.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{xs.line.height}",
"fontSize": "{lg.font.size}"
} |
--gw-label-lg-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{xs.line.height}",
"fontSize": "{lg.font.size}"
}
|
| label.xs.regular | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-label-xs-regular |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}"
}
|
| label.xs.medium | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-label-xs-medium |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.500}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}"
}
|
| label.xs.bold | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}"
} |
--gw-label-xs-bold |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.700}",
"lineHeight": "{rem1.line.height}",
"fontSize": "{xs.font.size}"
}
|
| button.sm.label.typography | {
"fontFamily": "{font.family.body}",
"fontWeight": "{button.label.font.weight}",
"fontSize": "{button.label.font.size}",
"lineHeight": "{xxs.line.height} *{button.label.font.size}"
} |
--gw-button-sm-label-typography |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{button.label.font.weight}",
"fontSize": "{button.label.font.size}",
"lineHeight": "{xxs.line.height} *{button.label.font.size}"
}
|
| button.label.typography | {
"fontFamily": "{font.family.body}",
"fontWeight": "{button.label.font.weight}",
"fontSize": "{button.label.font.size}",
"lineHeight": "{xs.line.height}*{button.label.font.size}"
} |
--gw-button-label-typography |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{button.label.font.weight}",
"fontSize": "{button.label.font.size}",
"lineHeight": "{xs.line.height}*{button.label.font.size}"
}
|
| card.title.typography | {heading.h5} | --gw-card-title-typography |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h5.font.size}",
"lineHeight": "100%"
}
|
| page.title.typography | {heading.h1} | --gw-page-title-typography |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.400}",
"fontSize": "{h1.font.size}",
"lineHeight": "100%"
}
|
| dialog.title.typography | {heading.h5} | --gw-dialog-title-typography |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h5.font.size}",
"lineHeight": "100%"
}
|
| drawer.header.typography | {heading.h5} | --gw-drawer-header-typography |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.600}",
"fontSize": "{h5.font.size}",
"lineHeight": "100%"
}
|
| form.title.typography | {heading.h4} | --gw-form-title-typography |
{
"fontFamily": "{font.family.heading}",
"fontWeight": "{font-weight.500}",
"fontSize": "{h4.font.size}",
"lineHeight": "100%"
}
|
| tabs.tab.label | {
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"fontSize": "{base.font.size}",
"lineHeight": "{rem1.line.height}"
} |
--gw-tabs-tab-label |
{
"fontFamily": "{font.family.body}",
"fontWeight": "{font-weight.400}",
"fontSize": "{base.font.size}",
"lineHeight": "{rem1.line.height}"
}
|
LineHeights Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| sm.line.height | 1.25 | --gw-sm-line-height | 1.25 |
| lg.line.height | 1.6 | --gw-lg-line-height | 1.6 |
| xs.line.height | 1.2 | --gw-xs-line-height | 1.2 |
| xxs.line.height | 1 | --gw-xxs-line-height | 1 |
| base.line.height | 1.4 | --gw-base-line-height | 1.4 |
| rem1.line.height | 1rem | --gw-rem1-line-height | 1rem |
| auto.line.height | 100% | --gw-auto-line-height | 100% |
| button.label.line.height | {xs.line.height} | --gw-button-label-line-height | 1.2 |
| floatlabel.figma.active.line.height | {floatlabel.active.font.size} | --gw-floatlabel-figma-active-line-height | 0.75rem |
| badge.sm.line.height | {rem1.line.height} | --gw-badge-sm-line-height | 1rem |
| message.text.line.height | {auto.line.height} | --gw-message-text-line-height | 100% |
| iftalabel.figma.line.height | {iftalabel.font.size} | --gw-iftalabel-figma-line-height | 0.75rem |
Number Tokens
| Name | Value | CSS Variable | Calculated Value |
|---|---|---|---|
| image.toolbar.blur | 0.5rem | --gw-image-toolbar-blur | 0.5rem |
| toast.blur | 1.5rem | --gw-toast-blur | 1.5rem |